# Frontend Design

> Create distinctive, production-grade frontend interfaces and presentation surfaces with high design quality. Detects and enforces the project's design system (.design-system.md, design-system skill repo, or DESIGN.md) — hard-rule grep checks, rendered-output validators, review checklist, decisions log; can also author a new design system (SKILL.md + DESIGN.md + assets).

- Skill: `shenxingy/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add shenxingy/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shenxingy/frontend-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: shenxingy (https://skillmd.com/u/shenxingy)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/shenxingy/frontend-design

---


# Frontend Design

Guides creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Generates real working code with exceptional attention to design details.

## Usage

```
/frontend-design        # Start with interactive requirements gathering
```

Respects the project's design system if present — `.design-system.md` (token
sheet), `design-system/SKILL.md` (design system packaged as a skill, with
tokens/components/brand assets), or `DESIGN.md` (full spec). Enforces its hard
rules, runs its review checklist, and records decisions (including rejected
experiments) in its Decisions Log. Can also author a new design system in the
two-layer SKILL.md + DESIGN.md + assets structure.

Covers presentation surfaces (slides, decks) as well as web UI — these invert
several web aesthetic rules, so they carry their own legibility floors, one-thesis
hierarchy, and focal-surface caps, checked on the rendered artifact rather than
by grepping source.