frontend-design

name	frontend-design
description	Use when the user wants a distinctive, production-ready frontend interface with clear visual direction, strong hierarchy, and polished interaction details.

Frontend Design

Use this skill for UI work where visual quality matters as much as functionality.

Focus

• Pick one clear visual thesis before writing code
• Keep hierarchy obvious in the first viewport
• Make spacing, type scale, and color choices feel intentional
• Prefer cohesive composition over adding more component chrome

Working approach

1. Identify the target mood and product context.
2. Choose a narrow palette and a consistent typography story.
3. Build the layout around one memorable focal point.
4. Add motion only if it improves comprehension or presence.
5. Validate the result for readability, balance, and polish.

Output expectations

• Produce working frontend code, not just a concept
• Keep the result cohesive across desktop and mobile
• Avoid generic, template-like defaults
• Explain the design thesis briefly when presenting the result