Frontend Design
Frontend Design (frontend-design) is a skill by Anthropic that guides Claude toward distinctive, intentional interface design instead of templated defaults.
Notes by Lior Pesoa · Updated · Works with Claude Code
Made by Anthropic.
Source: github.com/anthropics/skills · Apache-2.0 license. Everything below is my review: I tested it myself.
npx skills add anthropics/skills --skill frontend-designVerdict
8/10
My scoreThe biggest real change of the design skills I tested: the agent committed to a concept and showed the product working instead of describing it, for about a third more time and cost.
Tested
Pros
- Produced a distinctive concept: a paper calendar with each day crossed off, built around the app's idea of not breaking the chain.
- Shows each feature working instead of describing it: a Home Screen widget, a week with a rest day, Apple Health goals filling up. Without the skill, the features were three icon cards with a paragraph each.
- The concept carried through the copy too, from "Don't break the chain" to "Today isn't crossed off yet".
- Short and fast: one SKILL.md, no scripts, and only about 35% more time and cost than without it.
- Made by Anthropic and free under the Apache-2.0 license.
Cons
- In the test, the red crosses sat on top of the day numbers, so they're hard to read.
- A strong concept is a gamble: you may get something bold that doesn't fit your brand.
- It gives direction, not checks. It won't catch overlaps or accessibility issues for you.
- Best for
- The first draft of a new page, when you want an idea, not just a clean layout.
- Skip it if
- You need the page to match an existing design system exactly.
The test
Same task, both runs
Build a landing page for Streak, a habit-tracking iPhone app. Write it as a single self-contained index.html file in the current directory (inline CSS, no external images). Include a hero, three features, pricing, and a footer.
What I found
- Without the skill the agent built a polished but familiar page: dark theme, gradient headline, phone mockup.
- With it, the agent picked a concept, a wall calendar where each kept day gets a red cross, and built the whole page around it.
- The features section changed the most: instead of icon cards that talk about each feature, it shows small working examples of the app's widget, rest days and Apple Health goals.
- The calendar's crosses cover the day numbers, a detail I'd fix before shipping.
How I ran it: Claude Code 2.1.306 with Claude Opus, run headless twice with only Claude Code's built-in skills loaded (no user skills, plugins or MCP servers). The second run had frontend-design installed in the project and its prompt started with "Use the frontend-design skill." The run without the skill is the same one used in the ui-ux-pro-max review. Screenshots taken in Chrome at 1440×900 and 390×844.
Questions
Who made frontend-design?
Anthropic. It's published in github.com/anthropics/skills under the Apache-2.0 license.
How do I install the frontend-design skill?
Run this in your project:
npx skills add anthropics/skills --skill frontend-designIn Claude Code you can also install the frontend-design plugin from the official plugin marketplace.
frontend-design or ui-ux-pro-max?
In my test, frontend-design gave the more original concept for less time and cost. ui-ux-pro-max gave more product detail and works across more stacks, but had to be named to trigger.