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
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.
1---2name: frontend-design-23description: 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.4---56# Interface Design Pipeline78Guides interface work from evidence and platform choice through preview,9implementation, and verification. The historical `frontend-design` name stays10for compatibility; the workflow covers web, mobile, desktop, and native apps.1112## Usage1314```15/frontend-design # Run the platform-aware interface pipeline16/frontend-design profile=soft-premium motion=117/frontend-design review <path-or-url> # P0–P3 review of an existing surface, fixes applied18```1920"Design sense" is carried as checkable rules, not adjectives: the spacing21grid, type-scale caps, motion duration table, state list and review widths in22`references/design-rules.md`; the screenshot review loop, severity ladder and23Definition of Done in `references/design-review.md`; and `design-lint source24<dir>` for the half of those rules a static check can see. A hero intro or a25scroll-driven product story — the one place allowed past the motion table —26has its own archetypes, route choice, budgets and storyboard-first handoff in27`references/signature-motion.md`.2829Every invocation classifies the target platform and task size, reads the shared30benchmark contract plus the relevant platform adapter, then runs all seven31pipeline phases at proportional depth. It respects the project's design system,32keeps platform contracts native, and makes product workflow and brand choices33deliberately.3435For a theme, style, or alternate version, select a named design-direction36profile or infer a custom one, then tune composition, motion, and density. A37profile is a reusable hypothesis; repository and platform evidence still win.3839When visual direction is materially uncertain, it creates a viewable checkpoint40before expensive implementation. HTML is preferred for browser UI and may be41used as a clearly labelled visual study for native apps; native behavior must be42validated in the real platform preview, simulator, or running app.
shenxingy