frontend-design
Frontend Design
Frontend Design is Anthropic's open-source agent skill that steers an AI agent toward a look made for your product and away from the templated pages AI tends to produce.
Install Frontend Design
In Claude Code, add Anthropic's skills marketplace
/plugin marketplace add anthropics/skillsThen install the example-skills plugin, which holds this skill and Anthropic's other example skills
/plugin install example-skills@anthropic-agent-skillsOr install only this skill, for any agent, with the skills CLI
npx skills add anthropics/skills --skill frontend-designIn Claude.ai, Anthropic says its example skills are already available on paid plans: switch them on under Customize > Skills.
Or paste this into your coding agent: Install the agent skill frontend-design from github.com/anthropics/skills.
A skill can include scripts that run on your computer, so read its source first.
What Frontend Design does
Frontend Design gives the agent the brief of a design lead at a studio known for giving every client its own visual identity. Before designing, the agent pins down the subject, the audience and the main job of the page, and draws its palette, typography and layout from that subject's world.
Frontend Design names the defaults that make generated pages look alike: a cream background with a serif headline and a terracotta accent, near-black with one acid-green accent, identical rounded cards with the same soft shadow, all-caps labels above every heading, and fade-in animations on every section. The agent treats these as defaults to avoid, unless your brief asks for one of them.
Frontend Design also sets rules for type (one or two clearly different typefaces, lines under 80 characters), for motion (one deliberate moment instead of effects everywhere) and for the words on the page. The agent works in four steps: plan, check the plan against the brief, build, then critique the result.
When to use Frontend Design
- You are building a landing page or app screen and want it to look designed for your product, not generated.
- You are reworking an interface that feels generic.
- You want the agent to choose fonts, colors and layout with a reason behind each choice.
- You need a first design direction to react to before you refine it yourself.
When to pick something else
- You want existing UI code checked for accessibility and UX rules: use Web Design Guidelines.
- You want React or Next.js performance rules: use React Best Practices.
Which agents Frontend Design works in
Anthropic documents Frontend Design for Claude Code, Claude.ai, Claude API. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.
Frontend Design license
Frontend Design is published under Apache-2.0. Apache-2.0 comes from the LICENSE.txt in the skill's own folder (read 2026-10-01); the anthropics/skills repository has no root license file. In practice you may use, change and share the skill in any agent, commercially too, as long as you keep the license text and notices and mark your changes.
Questions people ask
Does the frontend-design skill work in Codex or Cursor?
Yes. It is Apache-2.0 and its instructions use no tool that only one agent has, so any agent that reads Agent Skills can load it; the open skills CLI listed it on 2026-10-01. Anthropic itself documents Claude Code, Claude.ai and the Claude API.
Which design defaults does frontend-design tell the agent to avoid?
The ones that make generated pages look alike: a cream background with a serif headline and a terracotta accent, near-black with one acid-green accent, identical rounded cards with the same soft shadow, all-caps labels above every heading, and fade-ins on every section, unless your brief asks for one.
Related skills for frontend and design
- Design taste frontend: design-taste-frontend, the main skill in Leon Lin's Taste Skill repository, makes an AI agent read the brief, pick a design direction and build landing pages, portfolios and redesigns that avoid templated defaults.
- Impeccable: Impeccable is Paul Bakaus's agent skill for frontend design: one skill with 24 commands such as audit, critique and polish, plus a launcher that runs deterministic checks for common AI design mistakes.
- shadcn: shadcn is the shadcn/ui project's own agent skill: it reads your components.json, then guides the agent to find, install, compose and style shadcn/ui components with the shadcn CLI and the project's rules.
- UI UX Pro Max: ui-ux-pro-max is an agent skill from Next Level Builder that gives an agent a searchable local library of UI styles, color palettes, font pairings and UX rules, and generates a design system per project.
More from Anthropic
- Academy Guide: Academy Guide is Anthropic's agent skill that ends Claude's answers about using Claude with one or two matching Claude Academy courses or tutorials, and only when the match is strong.
- Algorithmic Art: Algorithmic Art is Anthropic's open-source agent skill for generative art: the agent writes a short art philosophy, then builds an interactive p5.js piece with seeds and parameter sliders.
- Brand Guidelines: Brand Guidelines is Anthropic's open-source agent skill that holds Anthropic's own brand colors and fonts, so an agent can give a document, slide deck or web artifact the Anthropic look.
- Canvas Design: Canvas Design is Anthropic's open-source agent skill for static visual work: the agent writes a design philosophy, then makes a poster or art piece as a finished PNG or PDF file.