Frontend Design

This skill is for frontend interface design + implementation. Use it whenever the user wants you to build a working UI (components, pages, landing pages, dashboards, poster-like web artifacts, HTML/CSS layouts, UI redesigns, or “make it look good”). The goal is to produce interfaces with a clear point of view, high craft, and real personality—avoiding template-y, generic “AI slop” aesthetics.

How to work

Before you write code, decide the design. Make a bold, explicit aesthetic choice, then execute it consistently.

1 Design thinking

Answer these first (write them down in your output or keep them as your internal checklist):

• Purpose: what problem it solves, who it’s for
• Tone: pick a strong direction and commit
• Constraints: stack, performance, accessibility, brand limits
• Differentiation: one unforgettable “signature moment”

Example directions (choose one, or combine with a clear primary axis):

• brutally minimal, maximalist chaos, retro-futuristic, organic natural, luxury refined, toy-like playful, editorial magazine, brutalist raw, art deco geometric, soft pastel, industrial utilitarian