# Frontend Design

> Create, prototype, redesign, audit, or optimize production-grade interfaces across websites, responsive/mobile web, iOS/iPadOS/macOS, Android, Windows, Electron/Tauri, Flutter/React Native, and other local/native apps — UI/UX, visual polish, named or tunable themes and design variants, components, interaction and motion, design systems, and decks, including requests such as 设计页面、优化网页/界面/UI、设计主题/视觉风格/界面版本. Runs a platform-aware benchmark, design-direction profiles, an optional preview checkpoint, implementation, accessibility checks, and rendered/live verification.

- Skill: `shenxingy/frontend-design-2` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add shenxingy/frontend-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shenxingy/frontend-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shenxingy (https://skillmd.com/u/shenxingy)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/shenxingy/frontend-design-2

---


# Interface Design Pipeline

Guides interface work from evidence and platform choice through preview,
implementation, and verification. The historical `frontend-design` name stays
for compatibility; the workflow covers web, mobile, desktop, and native apps.

## Usage

```
/frontend-design        # Run the platform-aware interface pipeline
/frontend-design profile=soft-premium motion=1
/frontend-design review <path-or-url>   # P0–P3 review of an existing surface, fixes applied
```

"Design sense" is carried as checkable rules, not adjectives: the spacing
grid, type-scale caps, motion duration table, state list and review widths in
`references/design-rules.md`; the screenshot review loop, severity ladder and
Definition of Done in `references/design-review.md`; and `design-lint source
<dir>` for the half of those rules a static check can see. A hero intro or a
scroll-driven product story — the one place allowed past the motion table —
has its own archetypes, route choice, budgets and storyboard-first handoff in
`references/signature-motion.md`.

Every invocation classifies the target platform and task size, reads the shared
benchmark contract plus the relevant platform adapter, then runs all seven
pipeline phases at proportional depth. It respects the project's design system,
keeps platform contracts native, and makes product workflow and brand choices
deliberately.

For a theme, style, or alternate version, select a named design-direction
profile or infer a custom one, then tune composition, motion, and density. A
profile is a reusable hypothesis; repository and platform evidence still win.

When visual direction is materially uncertain, it creates a viewable checkpoint
before expensive implementation. HTML is preferred for browser UI and may be
used as a clearly labelled visual study for native apps; native behavior must be
validated in the real platform preview, simulator, or running app.