--- title: "frontend-design skill: UI that does not look AI-generated" canonical_url: https://cookiesforai.app/skills/anthropics/frontend-design last_updated: 2026-10-02T01:58:30+02:00 type: skill summary: "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: "/plugin marketplace add anthropics/skills" related: - "https://cookiesforai.app/skills/leonxlnx/design-taste-frontend" - "https://cookiesforai.app/skills/pbakaus/impeccable" - "https://cookiesforai.app/skills/shadcn-ui/shadcn" - "https://cookiesforai.app/skills/nextlevelbuilder/ui-ux-pro-max" - "https://cookiesforai.app/skills/anthropics/academy-guide" - "https://cookiesforai.app/skills/anthropics/algorithmic-art" - "https://cookiesforai.app/skills/anthropics/brand-guidelines" - "https://cookiesforai.app/skills/anthropics/canvas-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. | Fact | Value | |---|---| | Publisher | Anthropic (official, own GitHub account) | | Source | https://github.com/anthropics/skills/tree/HEAD/skills/frontend-design | | License | Apache-2.0 | | Repository stars | 179,326 on 2026-10-02 | | Skill name | frontend-design | | Category | Frontend and design | | Skill last changed | 2026-09-03 | | Page updated | 2026-10-02 | | Facts checked | 2026-10-02 | ## Install In Claude Code, add Anthropic's skills marketplace: ``` /plugin marketplace add anthropics/skills ``` Then install the example-skills plugin, which holds this skill and Anthropic's other example skills: ``` /plugin install example-skills@anthropic-agent-skills ``` Or install only this skill, for any agent, with the skills CLI: ``` npx skills add anthropics/skills --skill frontend-design ``` In Claude.ai, Anthropic says its example skills are already available on paid plans: switch them on under Customize > Skills. ## Ask your coding agent A skill can include scripts that run on your computer, so read its source first: https://github.com/anthropics/skills/tree/HEAD/skills/frontend-design ```text Install the agent skill frontend-design from github.com/anthropics/skills. ``` ## What it 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 it - 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 it works in Anthropic documents it for Claude Code, Claude.ai, Claude API. The open skills CLI also installs it into 78 agents (listed with the CLI on 2026-10-01). ## License 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 ### Related skills for frontend and design - [Design taste frontend](https://cookiesforai.app/skills/leonxlnx/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](https://cookiesforai.app/skills/pbakaus/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](https://cookiesforai.app/skills/shadcn-ui/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](https://cookiesforai.app/skills/nextlevelbuilder/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](https://cookiesforai.app/skills/anthropics/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](https://cookiesforai.app/skills/anthropics/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](https://cookiesforai.app/skills/anthropics/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](https://cookiesforai.app/skills/anthropics/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.