Frontend Design

AnthropicCreativeClaude Code

Create intentional interfaces with a clear visual direction, thoughtful typography and working frontend code.

View source

Illustrative frontend design: Tide studio website with blue architectural photography.

Install Frontend Design

Register Anthropic’s skill marketplace, then install the example-skills plugin in Claude Code.

Register the marketplace

/plugin marketplace add anthropics/skills

Install the plugin

/plugin install example-skills@anthropic-agent-skills

These commands install the example skill set. Copying a command does not install it. Run each command in Claude Code and check the plugin is enabled.

What this skill helps with

Frontend Design is a skill in Anthropic's official skills repository that guides Claude toward distinctive, intentional visual design when it builds or reshapes a UI. It asks Claude to ground the design in the subject, plan a small token system of colour, type and layout, check that plan against the brief, and avoid the defaults that make generated pages look templated.

When to use it

Use this skill when designing a website, landing page or app interface in Claude Code. Bring a brief with your audience, primary task and visual references, then review the resulting layout, typography and responsive behavior.

What to bring

Share the product, intended audience and main action the page should support. Include your existing UI, brand assets, visual references and framework constraints so the work fits the project you already have.

What to expect

The goal is a clear design direction, a compact colour and type system, and working frontend code. Review the implementation in your project, including mobile layouts and keyboard access. The image above is an illustrative example.

Design principles

Ground the design in the subject

Identify the product, audience and primary job before designing, and take visual choices from the subject's own world rather than a generic kit.

Plan a token system first

Write a compact plan before code: a base palette of four to six named hex values, typefaces and their roles, a layout concept and a few principles.

Review the plan against the brief

Revise any part of the plan that reads like the default for any similar page, say what changed and why, and only then build.

Typography carries the personality

Use one or two clearly distinct families, a deliberate type scale and line lengths under about 80 characters.

Structure should carry information

Borders, numbering, labels and dividers should encode something; numbered markers belong only on content that really is a sequence.

Restraint and self-critique

Spend boldness in one place, keep the rest quiet, meet a quality floor for responsiveness and accessibility, and critique the result as you build.

Related skills and guides

Frontend Design skill questions

Which design defaults does the skill avoid?

It names several looks that generated pages cluster around, including a warm cream background with a serif display and a terracotta accent, near-black with one acid accent, and identical rounded cards with the same soft shadow. It treats them as defaults rather than choices.

Will it override my own design brief?

No. The skill says that where the brief pins down a visual direction, Claude should follow it exactly, including when the brief asks for one of the looks it otherwise avoids. The avoid-list applies only to decisions the brief leaves open.

Which plugin installs it?

example-skills, from the anthropic-agent-skills marketplace in the anthropics/skills repository. That plugin also bundles skill-creator, mcp-builder, webapp-testing and the other example skills.

Is it open source?

The skill ships with its own LICENSE.txt in the anthropics/skills repository, where most skills are open source under Apache 2.0. Check that file for the exact terms before reusing the text.

Skills teach an agent a task

Connect your agent to SpringBrand tools so it can put those instructions to work.

Connect Claude Code