Frontend Design
Produce interfaces that read as authored by a designer with a point of view, not averaged from template patterns.
An interface is correct when all of these hold:
- one distinct visual direction with a named signature element
- tokens drive styling, not one-off values
- every interactive element implements its full state set
- failure and recovery paths are designed, not defaulted
- WCAG AA intent is met by default
References
| Need |
Reference |
Content |
| Missing product or visual direction |
references/ux-brief.md |
Implementation-ready UX brief |
| Choosing a direction |
references/art-direction.md |
Direction catalog, signature element, texture, anti-patterns |
| Token system |
references/design-tokens.md |
Token contract, role notes, extension rules |
| CSS implementation |
references/css-patterns.md |
Typography, color, motion, spatial composition |
| Measurable UI constraints |
references/ui-implementation-guide.md |
Type scale, forms, buttons, tables, dark mode |
| Motion |
references/motion-patterns.md |
Page load, scroll triggers, hover, performance |
| States, a11y, failure paths |
references/web-interface-standards.md |
Keyboard, touch targets, failure states, budgets |
| Polish |
references/css-polish-tips.md |
Accessibility debugging, focus, defensive CSS |
| React/Vue |
references/react-vue.md |
Framer Motion, Vue Transitions, token-driven components |
| Landing pages |
references/landing-page-design.md |
Section design, palettes, typography pairings |
| Rendered critique |
references/visual-critique.md |
Screenshot-first review and bounded correction loop |
Workflow
1. Establish context
Determine purpose, audience, constraints (framework, performance budget, accessibility target), and any brand anchors. Load ux-brief.md when goals, states, responsive behavior, or acceptance criteria are unclear. Ask only for information that blocks correct execution.
2. Commit to an art direction
Load art-direction.md. Pick one direction and execute it precisely. Do not blend directions, and do not repeat the previous build's choices. Name the signature element before writing code.
3. Define tokens
Load design-tokens.md and fill every role before any layout work. Unfilled roles mean skipped decisions.
4. Implement
Build with css-patterns.md and ui-implementation-guide.md. Apply framework patterns from react-vue.md when relevant. Every interactive element implements default, hover, active, focus-visible, disabled, loading, error, and empty where applicable.
5. Design the failure paths
Use web-interface-standards.md. Cover offline, partial or delayed data, user error and recovery. Silent failures and default browser error states are invalid output.
6. Validate
Run css-polish-tips.md and motion-patterns.md, then the quality gate below. For a substantial build or refinement, render representative desktop and mobile views and apply visual-critique.md. Preserve comparable baseline screenshots for refinement work when practical. Fix the highest-impact gaps and re-render before completion.
Output Shape
Deliver an art direction brief followed by the code:
- Brief: direction and tone, type pairing concept, palette logic, motion grammar, material choice, signature element
- Code: complete and runnable at the requested scope, with implementation complexity matched to the aesthetic vision
- Extension notes when relevant: how to extend tokens, components, and states without breaking coherence
Quality Gate
The output is invalid if any check fails:
1---2name: frontend-design3description: Commit to a distinctive art direction and implement production-grade frontend interfaces with token-driven styling, complete interaction states, designed failure paths, and accessibility. Use when designing or restyling pages, components, landing pages, design systems, responsive layouts, or interaction states.4---56# Frontend Design78Produce interfaces that read as authored by a designer with a point of view, not averaged from template patterns.910An interface is correct when all of these hold:1112- one distinct visual direction with a named signature element13- tokens drive styling, not one-off values14- every interactive element implements its full state set15- failure and recovery paths are designed, not defaulted16- WCAG AA intent is met by default1718## References1920| Need | Reference | Content |21|------|-----------|---------|22| Missing product or visual direction | [references/ux-brief.md](references/ux-brief.md) | Implementation-ready UX brief |23| Choosing a direction | [references/art-direction.md](references/art-direction.md) | Direction catalog, signature element, texture, anti-patterns |24| Token system | [references/design-tokens.md](references/design-tokens.md) | Token contract, role notes, extension rules |25| CSS implementation | [references/css-patterns.md](references/css-patterns.md) | Typography, color, motion, spatial composition |26| Measurable UI constraints | [references/ui-implementation-guide.md](references/ui-implementation-guide.md) | Type scale, forms, buttons, tables, dark mode |27| Motion | [references/motion-patterns.md](references/motion-patterns.md) | Page load, scroll triggers, hover, performance |28| States, a11y, failure paths | [references/web-interface-standards.md](references/web-interface-standards.md) | Keyboard, touch targets, failure states, budgets |29| Polish | [references/css-polish-tips.md](references/css-polish-tips.md) | Accessibility debugging, focus, defensive CSS |30| React/Vue | [references/react-vue.md](references/react-vue.md) | Framer Motion, Vue Transitions, token-driven components |31| Landing pages | [references/landing-page-design.md](references/landing-page-design.md) | Section design, palettes, typography pairings |32| Rendered critique | [references/visual-critique.md](references/visual-critique.md) | Screenshot-first review and bounded correction loop |3334## Workflow3536### 1. Establish context3738Determine purpose, audience, constraints (framework, performance budget, accessibility target), and any brand anchors. Load `ux-brief.md` when goals, states, responsive behavior, or acceptance criteria are unclear. Ask only for information that blocks correct execution.3940### 2. Commit to an art direction4142Load `art-direction.md`. Pick one direction and execute it precisely. Do not blend directions, and do not repeat the previous build's choices. Name the signature element before writing code.4344### 3. Define tokens4546Load `design-tokens.md` and fill every role before any layout work. Unfilled roles mean skipped decisions.4748### 4. Implement4950Build with `css-patterns.md` and `ui-implementation-guide.md`. Apply framework patterns from `react-vue.md` when relevant. Every interactive element implements default, hover, active, focus-visible, disabled, loading, error, and empty where applicable.5152### 5. Design the failure paths5354Use `web-interface-standards.md`. Cover offline, partial or delayed data, user error and recovery. Silent failures and default browser error states are invalid output.5556### 6. Validate5758Run `css-polish-tips.md` and `motion-patterns.md`, then the quality gate below. For a substantial build or refinement, render representative desktop and mobile views and apply `visual-critique.md`. Preserve comparable baseline screenshots for refinement work when practical. Fix the highest-impact gaps and re-render before completion.5960## Output Shape6162Deliver an art direction brief followed by the code:63641. **Brief:** direction and tone, type pairing concept, palette logic, motion grammar, material choice, signature element652. **Code:** complete and runnable at the requested scope, with implementation complexity matched to the aesthetic vision663. **Extension notes** when relevant: how to extend tokens, components, and states without breaking coherence6768## Quality Gate6970The output is invalid if any check fails:7172- [ ] Signature element exists and carries a function73- [ ] Tokens drive styling decisions74- [ ] Typography is deliberate, not a system default75- [ ] Palette is limited, intentional, and contrast-safe76- [ ] Layout uses consistent grid logic with at least one intentional break77- [ ] Motion communicates structure or feedback and honors `prefers-reduced-motion`78- [ ] All interaction states implemented79- [ ] Failure and recovery states designed on brand80- [ ] Keyboard access and visible focus integrated into the aesthetic81- [ ] Responsive rhythm and narrative preserved across at least three breakpoints82- [ ] Copy is authored and contextual, with no filler83- [ ] Narrative consistency holds across typography, motion, layout, and copy84- [ ] No anti-patterns from `art-direction.md` are present
majesticlabs-dev