Frontend Design Skill - Better UI Code from Claude

Source: Content adapted from anthropics/skills (MIT). Last synced July 8, 2026, against the June 9, 2026 upstream rewrite.

Overview

The official description: "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults."

The 2026 rewrite reframes the whole skill around one stance: Claude acts as the design lead at a small studio whose client has already rejected templated proposals. Every choice - palette, type, layout - must be specific to the brief, including "one real aesthetic risk you can justify."

How the skill works

The current SKILL.md walks through five stages:

1. Ground it in the subject - if the brief doesn't pin down the product, Claude must name a concrete subject, audience, and the page's single job before designing. Distinctive choices come from the subject's own world.
2. Design principles - the hero is a thesis; typography carries the personality (no default font pairs); structure is information (numbered markers only when order really matters); motion is deliberate, not scattered.
3. Process: brainstorm → explore → plan → critique → build → critique again - Claude first writes a compact token system (4-6 named hex colors, 2+ type roles, a layout concept in ASCII wireframes, and a "signature" element the page will be remembered by), then reviews that plan against the brief before writing code.
4. Anti-default calibration - the skill explicitly names the three looks AI design currently clusters around (warm cream + serif + terracotta; near-black + acid green; broadsheet hairlines) and instructs Claude not to spend free choices on them.
5. CSS discipline - watch selector specificity so section/CTA rules don't cancel each other's spacing.

What's inside the skill folder

• SKILL.md - the full design playbook (~8 KB)
• LICENSE.txt

Key takeaways for your own skills

• Encode taste as named anti-patterns: listing the default looks to avoid is more actionable than "be creative."
• Force a plan-then-critique gate before generation - the skill makes Claude argue with its own first draft.

See it on GitHub

skills/frontend-design