Frontend Design

Most AI-generated frontends look the same: Inter font, blue buttons, rounded corners, card grids. This skill breaks that pattern.

Frontend Design guides your agent to build genuinely distinctive interfaces — components, pages, and applications with a real aesthetic point of view and production-grade code.

What this skill does differently:

• Forces aesthetic commitment before writing a line of code: brutally minimal, maximalist, retro-futuristic, editorial, luxury, brutalist, organic — pick a direction and execute it with precision
• Applies real typography discipline: distinctive display fonts paired with refined body fonts, not generic Inter fallbacks
• Designs motion and interaction as features, not afterthoughts
• Color system thinking: intentional palettes derived from the concept, not default Tailwind gray
• Refuses mediocrity: every component has one thing someone will remember

Produces working code in: HTML/CSS/JS, React + Tailwind, Vue, Svelte, or any framework.

Includes: design thinking prompts, aesthetic direction framework, typography guidelines, color system approach, animation/motion principles, and a refusal checklist for AI slop patterns.

Use when you need a landing page, dashboard, component library, or marketing site that looks like it was designed by someone who cares.