frontend-design

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.