🧩 What it is / what it does
Precise definition based on the SKILL.md — what the frontend-design delivers and what sets it apart from any standard Claude response.
🎯 Official definition
frontend-design creates distinctive, production-grade frontend interfaces with high design quality. The exact description: "Create distinctive, production-grade frontend interfaces with high design quality."
- • Production-grade and functional — not a prototype. The generated code goes straight into real use.
- • Visually striking and memorable — each generation has its own identity. No template is repeated.
- • Cohesive aesthetic point of view — the skill chooses a direction (brutalist minimalism, editorial, retro-futuristic, art deco…) and executes it precisely.
- • Meticulous refinement in every detail — spacing, font weight, micro-interactions, spatial composition.
✓ What frontend-design DOES
- ✓Chooses an aesthetic direction and executes it with intention
- ✓Varies fonts, themes, and composition across generations
- ✓Uses the Motion library in React when available
- ✓Applies gradients, textures, and dramatic shadows as atmosphere
✗ What the skill FORBIDS
- ✗Generic fonts: Inter, Roboto, Arial, system-ui
- ✗Clichéd color schemes: purple gradient on a white background
- ✗Predictable layouts without specific context
- ✗Space Grotesk as the default choice across generations
🎣 When it triggers
The exact triggers in the description — the requests that make Claude activate the skill frontend-design automatically.
📋 Description triggers (exact text from SKILL.md)
The skill is triggered when the user asks you to build web components, pages, artifacts, posters, or applications. Examples quoted verbatim in the description:
Real examples of requests that trigger the skill:
Page creation
"create a landing page for my data analytics SaaS"
React component
"make a product card in React with Tailwind and shadcn"
Styling/beautification
"make this form look better" / "make this dashboard look better"
Pure HTML dashboard
"create a metrics dashboard in HTML/CSS without a framework"
💡 Practical tip
The skill is framework-agnostic: it works with plain HTML/CSS, React, Vue, and any UI stack. What it always brings is the design reasoning before coding — Purpose, Tone, Constraints, Differentiation.
🚀 How it improves your pages
Concrete value delivered in the final result—what changes in practice when the skill is active.
✓ WITH frontend-design
- ✓Characterful typography: display font + text font paired for the context
- ✓A choreographed entrance animation with staggered reveals creates more delight than 10 scattered micro-interactions
- ✓Asymmetrical layouts, overlaps, elements that break the grid
- ✓CSS variables for a cohesive palette, dominant colors with crisp accents
✗ WITHOUT the skill (default response)
- ✗Inter at every size, with no real visual hierarchy
- ✗Generic hover transitions everywhere, with no impact
- ✗Grid with 3 equal columns, uniform padding, zero asymmetry
- ✗5-color palette with colors distributed equally and no dominant color
📐 Frontend Aesthetics Principles (from SKILL.md)
Typography
Beautiful, unique, and interesting fonts. Pairings: refined display + text. Unexpected choices full of character.
Color & Theme
CSS variables for consistency. Dominant colors with crisp accents outperform timid, evenly distributed palettes.
Motion
CSS-only for plain HTML. Motion library for React. One well-orchestrated moment is worth more than scattered microinteractions.
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Elements that break the grid.
💡 The point-of-view principle
The SKILL.md is explicit: “Bold maximalism and refined minimalism both work — the key is intentionality, not intensity." The skill doesn't impose a style: it chooses one and executes it precisely for that context.
⚙️ How it works under the hood
Actual stack, approach, internal steps, and dependencies described in SKILL.md.
🧠 Design Thinking — Phase 1 (ALWAYS before coding)
Before writing any code, the skill applies 4 required questions:
Purpose
What problem does this interface solve? Who uses it?
Tone
Choose an extreme: brutalist minimalism, maximalism, retro-futurism, organic, luxury, editorial, brutalist, art deco, soft/pastel…
Constraints
Technical requirements: framework, performance, accessibility.
Differentiation
What will make this page UNFORGETTABLE? One thing the user will remember.
Phase 2 — Implementation (supported stack):
Pure HTML/CSS/JS
Static page. Animations via CSS keyframes. No build dependency.
React + Tailwind + shadcn
Modern stack. Uses Motion library (Framer Motion) for animations when available.
Vue, others
The skill is described as agnostic: "HTML/CSS/JS, React, Vue, etc."—it applies the same design thinking approach.
⚠️ Warning: complexity proportional to the vision
The SKILL.md is explicit: “Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, and attention to spacing details.” There is no generic implementation — the generated code always reflects the chosen aesthetic direction.
💬 Practical example + Ready-to-use PROMPT
Real prompts to paste into Claude Code and activate the skill immediately.
🖥️ Scenario: Landing page for an analytics SaaS
Goal: create a production-grade landing page in pure HTML/CSS/JS for an analytics tool—with an editorial aesthetic, striking typography, and orchestrated entrance animation.
/frontend-design
Cria uma landing page em HTML/CSS/JS puro para um SaaS de analytics chamado "Prism".
Direção estética: editorial/magazine — dark mode com tipografia serifada no hero,
corpo em sans-serif geométrica sem-clichê. Paleta: quase-preto + laranja elétrico
como acento único. Layout assimétrico no hero: headline enorme à esquerda, mock
de dashboard inclinado à direita. Animação de entrada: staggered reveal da headline
em 3 partes com animation-delay. Nenhuma fonte genérica (não Inter, não Roboto).
Seções: Hero / Features 3 colunas / Pricing / CTA final.
Sem dependências externas além de Google Fonts./frontend-design
Cria um card de produto React para e-commerce de sneakers premium.
Stack: React + Tailwind + shadcn + Motion library (Framer Motion).
Tom: luxo refinado — fundo quase-preto, acentos dourados, tipografia
condensada display para o nome do produto. Hover: imagem escala 1.08 com
sombra neon dourada. Clique no CTA: micro-animação de "add to bag" com
ícone que se transforma em ✓. Sem purple gradient, sem card genérico.💡 How to supercharge the prompt
The more you specify the aesthetic direction and the anti-patterns to avoid, the more the skill can distinguish it from generic output. “Editorial” + “serif” + “no Inter” is much more effective than just “beautiful.”
🧬 Works well with / limitations
How the frontend-design how it fits into the Trilha 1 ecosystem and when not to use it.
+ impeccable
Use frontend-design to build, then impeccable to polish. impeccable audits already-generated code: removes inconsistencies, fixes accessibility, improves microcopy. It's the "post-generation refinement."
+ theme-factory
O theme-factory (Track 2) defines design tokens: palette, typography, spacing. Use it FIRST to create the system, then frontend-design to build components within that system.
+ web-artifacts-builder
O web-artifacts-builder (Module 1.3) builds the project's multi-file structure — routes, layout, configs. Frontend-design comes afterward, styling each page with an aesthetic point of view.
Recommended production workflow — Track 1:
defines tokens
structures the project
builds with an aesthetic
final polish
⚠️ When NOT to use frontend-design
- ✗ Backend code / pure business logic — the skill is exclusively front-end. For APIs, databases, authentication: there’s no benefit.
- ✗ Rapid prototyping without visual concerns — if you need raw functionality first, the mandatory Design Thinking may be overhead.
- ✗ Design systems already defined with strict rules — if the project has a very restrictive external style guide, the skill’s creative freedom will conflict with it.
- ✗ Video, 3D, audio — for this media, use Track 3 (Media): animation-designer, 3d-animation-creator, remotion.
📋 Module 1.1 Summary
What you learned:
- ✓frontend-design creates interfaces distinctive production-grade — not generic.
- ✓Triggers for requests involving web components, pages, dashboards, React, HTML/CSS or "beautify".
- ✓Always runs Design Thinking before coding: Purpose, Tone, Constraints, Differentiation.
- ✓Supports plain HTML, React + Tailwind + shadcn, Motion library, Vue, and others.
- ✓Prohibits Inter/Roboto/Arial, generic purple gradients, and predictable layouts without context.
- ✓Works with impeccable (polishing), theme-factory (tokens), and web-artifacts-builder (structure).
Core skill concepts:
Next module:
1.2 ✨ impeccable
The polishing skill—how to audit and refine already-generated code to remove inconsistencies, improve accessibility, and raise the final quality.