Claude Frontend Design Skill: Agent Skills for Better, On-Brand UI

What is the Claude frontend design skill?

Agent Skills are folders that package instructions, and optionally scripts and reference files, which an agent loads only when a task needs them. Anthropic's frontend-design skill lives in the anthropics/skills repository and is also shipped as a Claude Code plugin in the anthropics/claude-code repository. The file has changed a lot since launch: Anthropic's November 2025 blog post described a roughly 400-token prompt focused on typography, colour, motion and backgrounds, while the version merged on 3 September 2026 is a much longer brief, around 9 KB, that adds a planning process, a list of AI design tells and a section on interface copy. Older reviews that call it maximalist describe the earlier version. skills.sh, the skills directory run by Vercel Labs, listed the skill at 941.6K installs when we checked on 1 October 2026.

• •Role framing: Claude is told to act as the design lead at a studio known for giving every client a distinct visual identity, for a client who has already rejected cliched, templated proposals.
• •Subject first: if the brief does not say what the product is, Claude proposes one concrete subject, audience and primary job, because the subject's industry, materials and vernacular are where distinctive choices come from.
• •Typography as personality: one or two deliberately chosen typefaces, a clear type scale and lines under 80 characters.
• •Structure as information: 01 / 02 / 03 markers only when the content truly is a sequence.
• •Restrained motion: one orchestrated reveal, not fade-and-slide-up on every section, which the skill says reads as AI-generated.

Which AI design defaults does the frontend-design skill tell Claude to avoid?

The most useful part of the current file is a calibration list. Anthropic writes that AI-generated design right now clusters around five traits, and asks Claude not to spend any design freedom the brief leaves open on them. Crucially, it adds that the brief's own words always win, so if a client asks for a cream editorial look, Claude should still deliver it. The point is that these are defaults rather than choices, the same tactic Anthropic's frontend aesthetics cookbook recommends: call out common defaults explicitly. The skill also names three typographic treatments it calls the commonest tells of a generated page: accenting a single word in a headline with italic, bold or a different colour, all-caps labels, and unnecessary labels above content.

• •A warm cream background near #F4F1EA with a high-contrast serif and a terracotta accent near #D97757, which the skill notes is Anthropic's own Claude accent and so reads as a tell on a client brief.
• •A near-black background with a single acid-green or vermilion accent.
• •A broadsheet layout with hairline rules, zero border-radius and dense newspaper columns.
• •The SaaS-card kit: identical rounded cards, one radius on everything, the same rgba(0,0,0,.1) shadow under each and gradient washes as decoration.
• •Template chrome: all-caps eyebrow labels, meta strings joined with middle dots, 'WORD - fragment' labels, #0B0B0B standing in for black, monospace data labels and an arrow appended to every link and button.

How does the skill change the way Claude builds a page?

Beyond the bans, the skill gives Claude a process. It asks for two passes: a compact design plan first, then a review of that plan against the brief before any code is written, and finally self-critique while building. Telling a model 'do not use purple' just moves it to the next default; making it compare its plan with what it would produce for any similar page forces an actual decision.

How do you install the frontend-design skill in Claude Code?

There are four sensible ways to get the skill into Claude Code, and the right one depends on whether you want automatic updates or a pinned copy your whole team reviews. Official-marketplace plugins auto-update by default; a copied SKILL.md never changes. Skills can live in your personal folder (~/.claude/skills, available in every project on your machine), in a project's .claude/skills folder (commit it and your team gets it), inside a plugin, or in enterprise managed settings. Plugin skills are namespaced, so the plugin version shows up in the slash menu as /frontend-design:frontend-design. Anthropic's plugin docs also note that cloud sessions at claude.ai/code do not load plugins you installed on your own machine, one more reason we prefer committing design skills into the repository.

Can you use Claude skills in claude.ai, Codex, Cursor and other agents?

Yes. In claude.ai, Anthropic's help centre says skills are available on Free, Pro, Max, Team and Enterprise plans and require code execution to be switched on. The anthropics/skills README says its example skills, including frontend-design, are already available to paid plans in claude.ai. Beyond Claude, Anthropic published Agent Skills as an open standard on 18 December 2025, and the agentskills.io site lists dozens of compatible clients. That portability is the best argument for a skill over a tool-specific rules file.

• •claude.ai: switch on 'Code execution and file creation' under Settings > Capabilities, then go to Customize > Skills; upload a custom skill as a ZIP of the skill folder. Team and Enterprise owners enable skills under Organization settings > Plugins & skills.
• •Codex and ChatGPT: OpenAI's docs say skills build on the open agent skills standard and load from .agents/skills in a repository or $HOME/.agents/skills; in Codex you run /skills or type $ to mention one.
• •Other clients listed on agentskills.io include Cursor, GitHub Copilot, VS Code, Gemini CLI, OpenCode, Goose, Kiro and Factory.
• •Vercel Labs' skills CLI installs a skill into many agents at once: npx skills add https://github.com/anthropics/skills --skill frontend-design.
• •Portable fields: the Claude Code docs list name, description, license, compatibility, metadata and allowed-tools as the fields other systems accept; options such as context: fork or paths are Claude Code extensions.

Frontend-design skill vs a brand skill vs CLAUDE.md vs a prompt

Anthropic's generic skill is a strong default, but it is designed to make Claude invent a distinctive identity for each brief. For a company that already has a brand, that is the wrong job: you want Claude to apply your identity every time. Practitioner Thomas Wiegold makes the same point: the plugin executes well inside a defined system but is not great at creating that system from scratch. Here is how the four places to put design guidance compare. (Our companion post on design tokens and CLAUDE.md rules covers the always-on file in depth.)

How do you write your own brand design skill?

A skill is just a folder with a SKILL.md file: YAML frontmatter between --- markers, then Markdown instructions. Under the Agent Skills specification, name is required, must be 1 to 64 characters of lowercase letters, numbers and hyphens, and must match the folder name; description is required and capped at 1,024 characters. Anthropic's API rules also reserve the words 'anthropic' and 'claude', so call it brand-design rather than claude-design. The description is the trigger: Anthropic's best-practice guide says to write it in the third person and include both what the skill does and when to use it, because Claude chooses between potentially 100+ skills from that line alone. The body should cover:

• •Context: brand, audience and the page's job.
• •Brand tokens: named colours with roles and usage limits.
• •Type scale: families, weights, sizes, line-height, line length.
• •Banned patterns: the defaults you keep deleting, with replacements.
• •Layout rules: grid, alignment, spacing scale, mobile padding.
• •Component library: what exists, so Claude reuses it.
• •Imagery and motion rules: style, treatments, durations, reduced motion.
• •A self-review checklist plus a screenshot step at phone and desktop widths.

A complete brand design SKILL.md template you can copy

Below is a working skeleton for a fictional cold-chain logistics brand called Frostline. Swap in your own tokens, fonts and component names; keep the structure. The description carries the words people actually type so it triggers unprompted, the banned list is checkable in code review, and long material sits in reference files. Save it as .claude/skills/brand-design/SKILL.md.

How does progressive disclosure keep a design skill lean?

Agent Skills load in stages. At startup an agent sees only each skill's name and description; when a task matches, it reads the full SKILL.md; bundled files are read only if the instructions point to them. That means a brand skill can carry a full token file, a component catalogue and dozens of example screenshots without costing anything on tasks that never need them. Anthropic's guidance is to keep references one level deep, linking every file directly from SKILL.md, because Claude may only preview files that are linked from other linked files, and to put a table of contents at the top of any reference file longer than 100 lines. As Simon Willison put it at launch, each skill costs only a few dozen tokens until used.

How do you test that a design skill actually improves Claude's UI?

Anthropic's best-practice guide recommends building evaluations before writing extensive instructions: run Claude on representative tasks without the skill, record the failures, write just enough guidance to fix them, then compare. For design work, that means a handful of fixed prompts you rerun after every edit to the skill, judged on screenshots rather than code. Test with every model you use. Our post on the visual feedback loop with screenshots and Playwright shows how to automate the capture step.

Common mistakes that make design skills fail

Most broken design skills fail in the same few ways: Claude technically follows them and the output still looks generic.

Frequently asked questions

Quick answers about the Claude frontend design skill and custom design skills.