# Frontend Design Frontend Design (frontend-design) is a skill by Anthropic that guides Claude toward distinctive, intentional interface design instead of templated defaults. Skill · Picked · by Anthropic · Works with Claude Code · Updated 2026-10-21 Made by [Anthropic](https://www.anthropic.com). Source: [github.com/anthropics/skills](https://github.com/anthropics/skills/tree/main/skills/frontend-design) · Apache-2.0 license. The text below is Lior's notes on why and how he uses it; the original files live at the source. ## Install ```sh npx skills add anthropics/skills --skill frontend-design ``` ## Verdict Score: 8/10 · Tested 2026-10-21 The 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. ### 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 Task (same for 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. ### Without the skill 1.6 min · $0.37 ![Streak landing page built without the skill: dark background, orange gradient headline, phone mockup on the right](https://www.liorpesoa.com/library/reviews/frontend-design/without-desktop.webp) ![Streak landing page built without the skill: dark background, orange gradient headline, phone mockup on the right (phone)](https://www.liorpesoa.com/library/reviews/frontend-design/without-mobile.webp) Page: https://www.liorpesoa.com/library/reviews/frontend-design/without.html ### With frontend-design 2.2 min · $0.49 ![Streak landing page built with the skill: light page, headline "Don't break the chain." and a paper calendar with days crossed off in red](https://www.liorpesoa.com/library/reviews/frontend-design/with-desktop.webp) ![Streak landing page built with the skill: light page, headline "Don't break the chain." and a paper calendar with days crossed off in red (phone)](https://www.liorpesoa.com/library/reviews/frontend-design/with-mobile.webp) Page: https://www.liorpesoa.com/library/reviews/frontend-design/with.html ### 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: ```sh npx skills add anthropics/skills --skill frontend-design ``` In 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. ## Related - [UI UX Pro Max](https://www.liorpesoa.com/library/ui-ux-pro-max.md) - [Impeccable](https://www.liorpesoa.com/library/impeccable.md) - [Design Crit](https://www.liorpesoa.com/library/design-crit.md) ## Credit Anthropic · [github.com/anthropics/skills](https://github.com/anthropics/skills/tree/main/skills/frontend-design) · Apache-2.0 license --- Page: https://www.liorpesoa.com/library/frontend-design Library: https://www.liorpesoa.com/library