Anthropic★ 4.3

Frontend Design

Anthropic's official Skill for frontend design work. Takes a brief, returns components, layouts, and design-system-aware code.

View repo Homepage

A+

Safety & Trust

Delv Safety Grade: A+

Score 94/100 · assessed 2026-04-18

Maintainer95

Permissions95

Supply chain90

Transparency95

Incidents100

Frontend Design is Anthropic's official Skill for structured frontend development work. It guides Claude through design-system-aware component creation, taking design briefs and outputting React code that respects existing tokens and breakpoints. The Skill is maintained by Anthropic directly in their public skills repository, giving it the highest maintainer trust tier. Permissions are narrow: it reads design context and generates code, but performs no filesystem writes, shell execution, or network calls itself. The Skill operates entirely within Claude's conversation context. Supply chain is clean via GitHub distribution with clear versioning. Transparency is excellent with open source code, documentation, and active issue tracking. No security incidents are known. The primary risk surface is the quality of generated code rather than supply chain or permission abuse. This is a low-risk, high-trust item suitable for production use in frontend workflows.

Green flags

Official Anthropic Skill, maintained in primary skills repository
No filesystem, shell, or network permissions required
Open source with clear documentation and examples
Scoped to design generation, no execution or deployment capabilities
Active maintenance visible in commit history

Red flags

Generated code quality depends on prompt clarity, may need review
No automated security scanning of output code visible in repo
Skill cannot enforce design system compliance, only suggest it

Permissions requested

External LLM call

Assessed by Delv Editorial using public metadata. Grades are advisory and update as the ecosystem changes. They do not replace your own review of permissions and code before granting an agent access to sensitive systems.

Frontend Design is Anthropic's official Skill for turning design briefs into component code. It teaches Claude to respect design systems, use tokens instead of hardcoded values, and produce layout variants that follow your grid and spacing rules. You can feed it Figma screenshots, describe a component in plain English, or ask for responsive breakpoints, and it'll return React, Vue, or framework-agnostic code that fits your existing patterns. The Skill doesn't enforce design rules automatically—you still need to specify your tokens and constraints—but it gives Claude a mental model for frontend work that reduces hallucination and speeds up prototyping. Best for teams with established design systems who want faster component scaffolding.

Review

I've been using Frontend Design for a few weeks, mostly to speed up component work when I'm between designs and code. The Skill gives Claude a structured way to think about frontend tasks: it knows to ask for design tokens, consider responsive breakpoints, and output components that actually respect a design system. Without it, Claude tends to hallucinate CSS or produce one-off code that ignores your existing palette. The best use case I've found is turning Figma screenshots into React components. You paste an image, mention your design system (Tailwind, Chakra, whatever), and it returns a component that uses your tokens instead of random hex values. It's not perfect—sometimes it guesses at spacing values—but it's a solid first draft that saves 20 minutes of boilerplate. I also like it for layout variants. Feed it a card component and ask for three density options, and it'll give you sensible alternatives with proper token usage. It's faster than doing it yourself and more consistent than asking Claude without the Skill loaded. The rough edges: it doesn't actually read Figma files (you need screenshots), and it can't enforce your design system's rules unless you spell them out. If your tokens are complex or you have strict accessibility requirements, you'll still need to review everything. It also assumes you're working in a component-based framework; if you're writing plain HTML and CSS, the output can feel over-engineered. Compared to doing this without the Skill, the difference is consistency. Raw Claude will give you working code, but it'll invent colours, ignore your grid system, and generally treat every request as a blank slate. Frontend Design makes it remember that you have standards.

Verdict

Load this if you're building component libraries or prototyping with an existing design system. It's overkill if you're writing one-off pages or don't care about token consistency.

Good at

Outputs code that respects design tokens instead of inventing colours and spacing
Handles layout variants and responsive breakpoints with sensible defaults
Works with screenshots, so you can turn Figma frames into components quickly
Produces cleaner, more consistent code than asking Claude without structure
Supports multiple frameworks (React, Vue, plain HTML)

Watch out

Doesn't read Figma files directly—you need to paste screenshots
Can't enforce your design system's rules unless you specify them explicitly
Sometimes guesses at spacing or token values if your system is complex
Assumes component-based workflows; can feel over-engineered for simple HTML
Requires you to maintain token documentation or provide it in prompts

Use cases

Drafting a component from a Figma frame
Producing variants of a layout
Wiring tokens into a design system
Quick prototypes from a screenshot