Frontend Design Skill

Design and implement memorable frontend interfaces with a clear, intentional aesthetic. The output must be real, working code — not just mood boards. This skill is about design thinking + execution: every visual choice should be rooted in purpose and context.

When to Use

Use this skill when the user wants to:

• Create a new web page, landing page, dashboard, or app UI
• Design or redesign frontend components or screens
• Improve typography, layout, color, motion, or overall visual polish
• Convert a concept or brief into a high‑fidelity, coded interface

Inputs to Gather (or Assume)

Before coding, identify:

• Purpose & audience: What problem does this UI solve? Who uses it?
• Brand/voice: Any reference brands, tone, or visual inspiration?
• Technical constraints: Framework, library, CSS strategy, accessibility, performance
• Content constraints: Required copy, assets, data, features