Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In

The frontend-design skill for Claude Code

What Anthropic’s frontend-design skill tells Claude, how to install it as a plugin or a skill folder, and what to add when you want a page with a fixed look.

For
Developers and founders building UI with Claude Code
Written for
Claude Code
Time
7 min read · updated Nov 1, 2026

The short answer

  1. frontend-design is Anthropic’s own skill for UI work. It does not ship a design: it tells Claude how to choose one for each brief, and lists the looks AI-built pages fall into so Claude can avoid them.
  2. Install it in Claude Code with /plugin install frontend-design@claude-plugins-official, or copy its folder from Anthropic’s skills repository into ~/.claude/skills. Claude then uses it for frontend work without being asked.
  3. Because it picks a new direction every time, two runs on the same brief can look different. When you want a page with a look you can see before you build, add a skill that ships one, such as Mono Editorial Landing.
Jump to:What the skill tells ClaudeThe five looks it treats as defaultsInstall it in Claude CodeUse it

Anthropic publishes frontend-design in two places: as a skill folder in its skills repository (opens in a new tab) and as a Claude Code plugin in its official marketplace, claude-plugins-official. Both hold the same SKILL.md. The plugin’s own description reads: “Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.” The skill is released under the Apache License 2.0, and its instructions were last rewritten on 3 September 2026 to steer Claude away from generic design defaults.

What the skill tells Claude

The SKILL.md asks Claude to work like the design lead of a studio whose client has already turned down anything that felt templated. In practice it gives these instructions:

  • Start from the subject. If the brief does not say what the product is, who it is for and what the page must do, Claude proposes one and confirms it with you. Distinctive choices come from the subject’s own world.
  • Open with the most characteristic thing. The hero can be a headline, an image, an animation or a live demo. A big number with a small label and a gradient accent is called out as the default treatment.
  • Let type carry the page. One or two typefaces, chosen for this project, with a clear scale and lines under 80 characters. It names three tells of a generated page: one word in a headline set apart in italic, bold or color; all-caps labels; and labels added above content that needs none.
  • Use structure only when it means something. Numbered markers like 01 / 02 / 03 only when the content is a sequence.
  • Keep motion to one moment. One page-load sequence or one reveal, rather than every section fading and sliding up and every card animating on hover. Motion that answers a click is welcome.
  • Plan, review, build, critique. First a short plan: 4 to 6 named hex colors, the typefaces and their roles, a layout sketched as ASCII wireframes, and the page’s principles. Claude then checks the plan against the brief, revises anything that reads like a default, builds, and reviews screenshots if it can take them.
  • Meet a quality floor. Responsive down to mobile, visible keyboard focus, reduced motion respected, readable color.

The five looks it treats as defaults

The skill lists where AI-generated design clusters today. It says all of them suit some briefs, but they are defaults rather than choices: when your brief leaves a direction open, Claude should not spend that freedom on one of them. When your brief asks for one, the brief wins.

The looks frontend-design calls defaults, from its SKILL.md
LookWhat it is made of
Warm cream and serifA cream background near #F4F1EA, a high-contrast serif display and a terracotta accent near #D97757
Dark with one bright accentA near-black background with a single acid-green or vermilion accent
BroadsheetHairline rules, square corners and dense newspaper-like columns
SaaS card kitIdentical rounded cards, one radius and one soft grey shadow on everything, gradient washes as decoration
Template chromeAll-caps eyebrow labels, meta strings joined with middle dots, “WORD — fragment” labels, #111 for black, monospace data labels and a → on every button

Install it in Claude Code

  1. Step 1: Open the plugin

    In a Claude Code session, run the command below. It opens the plugin’s details rather than installing straight away. Claude Code adds Anthropic’s official marketplace the first time you start an interactive session, so there is nothing to add first.

    Claude Code
    /plugin install frontend-design@claude-plugins-official

  2. Step 2: Choose a scope

    User scope gives you the plugin in every project on this computer; project scope turns it on for everyone in the repository; local scope only for you in this repository.

  3. Step 3: Check it loaded

    Type / and look for /frontend-design:frontend-design. Plugins from the official marketplace update themselves by default.

From your shell, without opening a session, claude plugin install frontend-design@claude-plugins-official does the same at user scope. On a computer where Claude Code has never been opened interactively, run claude plugin marketplace add anthropics/claude-plugins-official first.

Use it

The plugin’s README says Claude uses the skill automatically for frontend work, so you ask for the page as usual. These are the examples from that README:

Prompts
Create a dashboard for a music streaming app
Build a landing page for an AI security startup
Design a settings panel with dark mode

Because the skill starts from the subject, say what the product is, who it is for and what the page must do. Give real copy if you have it: the skill warns that placeholder words make a design feel as templated as its layout. If your brief already names a look, say so plainly, since the skill follows the brief over its own preferences.

Why two runs can look different

The skill holds principles, not a layout. It ships no fonts, page templates or scripts, and it asks for a new direction on each brief, so the result depends on how much your brief pins down and on what Claude decides in its planning pass. Its quality checks rely on Claude reviewing its own screenshots, where the environment allows it. That suits product UI, where every screen is different. It suits a marketing page less well when you already know the look you want.

When to add a skill with a fixed look

frontend-design

  • Any interface: apps, dashboards, settings, landing pages
  • Claude chooses a direction for each brief
  • You see the look after it is built
  • One SKILL.md, no scripts

A Lookbk page skill

  • One kind of page, in one art direction
  • The look is fixed in the skill’s files
  • You see the rendered result on its page before you install it
  • A page file, a build script, and checks at 390, 768, 1024 and 1440 px

Two of these are free. Mono Editorial Landing drafts a black-and-white, magazine-style page from your README, and Waitlist Glow makes a one-screen waitlist. Mono Editorial Landing is a broadsheet look, one of the five the frontend-design skill avoids by default; picking it is the kind of explicit brief that skill says to follow. Build a landing page with Claude Code walks through the page skills from install to a live page.

Mono Editorial Landing: an example of what it makes
Free
web
Mono Editorial LandingClaude CodeCodexCursor+3 more agents
Waitlist Glow: an example of what it makes
Free
web
Waitlist GlowClaude CodeCodexCursor+3 more agents
Bento SaaS Landing: an example of what it makes
web
Bento SaaS LandingClaude CodeCodexCursor+3 more agents
Frosted Glass Hero: an example of what it makes
web
Frosted Glass HeroClaude CodeCodexCursor+3 more agents

Common questions

Is the frontend-design skill free?
Yes. Anthropic publishes it in its public skills repository under the Apache License 2.0, and as a plugin in the official Claude Code marketplace.
How do I install the frontend-design plugin in Claude Code?
Run /plugin install frontend-design@claude-plugins-official in a session, choose a scope, then type / and look for /frontend-design:frontend-design. From your shell, claude plugin install frontend-design@claude-plugins-official installs it at user scope.
Do I have to call it, or does Claude use it by itself?
Claude uses it by itself for frontend work, according to the plugin’s README. You can also call it by name: /frontend-design:frontend-design for the plugin, /frontend-design for the folder copy.
What is the difference between the plugin and the skill folder?
The instructions are the same file. The plugin is named under its plugin, updates itself from the official marketplace and can be turned on per project. The folder copy is called /frontend-design and only changes when you copy it again.
Why does my page still look generic?
The skill decides a direction for each brief, so a short brief leaves it most of the choices. Say what the product is, who it is for and what the page must do, give real copy, and name the look if you have one in mind. For a page whose look you choose in advance, use a skill that ships one.

Sources

What this guide says about other companies’ tools comes from their own documentation, checked on Nov 1, 2026.

Did this guide help?

Read next

All guides

Build a landing page with Claude Code

Install a landing page skill in Claude Code, brief it from your README, check the result at four widths and put it live, with two finished examples.

How to install a skill in Claude Code

Three ways to add a skill to Claude Code: paste the install prompt, run the command, or unzip it into your skills folder by hand.

Claude Code skills vs prompts, commands and plugins

What a skill is next to a prompt, a slash command, a subagent, a plugin, CLAUDE.md and a hook, with each definition taken from Anthropic’s Claude Code docs.

See a skill’s result before you install it.

Every skill page shows what it makes, what it needs and which agents can run it.

Browse skills See pricing