| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with strong visual direction and non-generic UI craft. Use this when redesigning pages, components, apps, or product surfaces that need a memorable design point of view. |
Frontend Design
Use this skill to build frontend work that feels intentionally designed rather than auto-generated. Favor strong hierarchy, disciplined typography, clear interaction cues, and layouts that earn their density.
Context Check
Before design work, confirm:
- Target audience
- Core jobs to be done
- Brand personality and tone
Look for a Design Context section in the current instructions first. If it is not there, read .impeccable.md from the project root. If the context is still missing, ask the user instead of guessing from the codebase.
Working Style
Pick a clear design direction and commit to it:
- Define the purpose of the interface and the emotional tone
- Choose one memorable differentiator
- Match implementation complexity to the visual ambition
- Keep the result functional, accessible, and production-ready
Core Rules
Typography
Read reference/typography.md.
- Use a deliberate type system with visible contrast between roles
- Prefer a distinctive display voice plus a highly readable body voice
- Use fluid sizing sparingly; product UI should stay spatially stable
- Avoid default-looking font choices that erase personality
Color
Read reference/color-and-contrast.md.
- Use tinted neutrals and a restrained accent palette
- Prefer coherent, branded surfaces over loud gradients
- Keep contrast strong without pure black or pure white
- Never rely on generic cyan, purple, or neon "AI" palettes
Layout
Read reference/spatial-design.md.
- Build rhythm with varied spacing, not one repeated padding value
- Use asymmetry and directional composition when it improves hierarchy
- Flatten hierarchy where possible; not everything needs a card
- Avoid repetitive icon-heading-text grids and nested panels
Motion
Read reference/motion-design.md.
- Use motion to clarify state and sequence
- Favor one strong entry choreography over many tiny flourishes
- Animate transform and opacity instead of layout properties
- Support reduced-motion preferences
Interaction
Read reference/interaction-design.md.
- Make primary actions unmistakable
- Use progressive disclosure for advanced options
- Design empty, loading, and error states as part of the product
- Keep forms generous and low-pressure
Responsive
Read reference/responsive-design.md.
- Start from mobile constraints and scale upward with intent
- Adapt structure for smaller screens instead of hiding key capability
- Use container-aware layouts where useful
Writing
Read reference/ux-writing.md.
- Make labels direct and specific
- Avoid repeating what the heading already says
- Keep helper copy calm, useful, and concise
Anti-Patterns
Avoid the fingerprints of generic AI UI:
- Interchangeable glow-heavy SaaS visuals
- Purple or cyan gradients used as a shortcut for "intelligence"
- Card inside card inside card
- Gray text on colored surfaces
- Large decorative icons above every section title
- Centered-everything landing-page composition for tool workflows
- Decorative charts, sparkles, and glass effects without product meaning
Quality Bar
Run a final "AI slop" check:
- Would this feel instantly machine-made because it follows a template?
- Is there one visual choice people will remember?
- Does the hierarchy still work with real content, long text, and mobile width?
If the answer is weak, refine the direction rather than adding more decoration.
