Frontend Design Skill

Overview

Great frontend work should be intentional, not template-like. Pick one clear visual direction, define the system behind it, and implement working UI that keeps the direction consistent from typography to motion.

When to Use

Use this skill for:

• Building or redesigning UI components, pages, dashboards, or app shells
• Requests asking for visual polish, "not generic" output, or stronger brand character
• Frontend tasks requiring clear design tokens, responsive behavior, and purposeful motion

Common trigger terms: frontend design, UI polish, redesign, landing page, dashboard UI, design system, component styling, responsive CSS.

Operating Steps

1. Context: State purpose, audience, and content density in one problem statement.
2. Archetype: Select one aesthetic archetype and commit to it.
3. Differentiator: Define one memorable anchor (interaction, type move, layout motif, or texture).
4. Token System: Define typography, color, spacing, and shadow tokens before coding.
5. Output: Ship functional, responsive UI that demonstrates the chosen direction.

Hard Constraints

Do not:

• Use default-looking stacks (Arial, Inter, Roboto, system-only stacks) without intent
• Produce predictable template layouts (hero -> cards -> testimonials -> footer)
• Use generic purple-on-white gradients or evenly split palettes
• Add decorative motion with no UX purpose
• Leave visible scaffolding that does not support the chosen direction

Output Contract

Every delivery must include:

• A 1-2 line preface naming archetype and differentiator
• Working implementation code
• Explicit design tokens (color, spacing, typography, shadow)
• Responsive behavior on mobile and desktop

References

See references/frontend-design-playbook.md for full archetype definitions, technical implementation guidance, and extended anti-pattern rationale.