Frontend design skill

If every page Claude builds for you comes out cream-colored with a serif headline and rounded cards, this skill is the fix. It is a short, opinionated design brief Claude reads before writing any UI code, and it asks Claude to commit to a visual direction that fits your subject instead of the usual defaults.

What it does (plain English)

The skill casts Claude as the design lead at a studio whose clients have rejected templated proposals. It then sets a process:

1. Ground the design in the subject. If you did not say what the product is, Claude proposes a subject, audience and primary job, and confirms with you.
2. Plan before code. Claude writes a compact token system: 4 to 6 named hex colors, the typefaces and their roles, a layout concept with ASCII wireframes, and a few guiding principles.
3. Review the plan against your brief. Any part that looks like the default answer for any similar page gets revised, and Claude says what it changed.
4. Build, then critique. Claude takes screenshots where the environment allows and checks its own work.

What makes it different from a generic “make it pretty” prompt is a named list of tells. The skill describes five clusters that current AI-generated design falls into, including a warm cream background with a terracotta accent, a near-black page with one acid-green accent, and the “SaaS card kit” of identical rounded cards with soft grey shadows. It also flags small tells: all-caps eyebrow labels over every heading, A · B · C meta strings, and an arrow appended to every button. Your brief always wins, so if you ask for one of these looks, you get it.

It sets a quality floor too: responsive down to mobile, visible keyboard focus, reduced motion respected, line lengths under about 80 characters.

Is it for you?

Yes if you vibe-code websites, landing pages or app screens and care how they look. It helps most when you give Claude a real subject (“a booking page for a pottery studio”) rather than “a modern landing page.”

It is not a design system. If your company already has components and brand tokens, tell Claude to use them; the skill says to follow the brief exactly where it pins down a direction.

What you can do with it

1. Landing page with a point of view. “Build a one-page site for a neighborhood bike repair shop. Show me the design plan first.”
2. Restyle an existing page. “Reshape this page so it doesn’t read as a template. Keep the content.”
3. Interface copy. The skill includes a writing section: buttons say exactly what happens (“Save changes,” not “Submit”), errors explain what went wrong and how to fix it, and actions keep the same name through a flow.
4. Compare directions. “Give me two design plans with different palettes and type, then build the one I pick.”

How to set it up

Claude Code (recommended)

The plugin version in Anthropic’s official marketplace contains the same SKILL.md as the anthropics/skills repository (we compared the files on 2026-10-18).

1. Run /plugin install frontend-design@claude-plugins-official
2. Choose a scope: just you, everyone on the project, or this repo only.
3. Ask for any UI work. The plugin README says Claude uses the skill automatically for frontend work.

The official marketplace is added for you the first time you start Claude Code interactively. If it is missing, run /plugin marketplace add anthropics/claude-plugins-official.

claude.ai or the desktop app

1. Turn on Code execution and file creation in Settings > Capabilities.
2. Open Customize > Skills. The anthropics/skills README says its example skills are already available on paid claude.ai plans; check under From Anthropic & Partners.
3. If you do not see it, download the frontend-design folder from GitHub, zip the folder itself (not its contents) and upload it in Customize > Skills. The Apache 2.0 license allows this.

Watch out for

• It only guides; it does not check. There are no scripts. Results depend on Claude following the instructions, so ask to see the design plan before code.
• Duplicate installs. The same skill is in both frontend-design@claude-plugins-official and the example-skills bundle. Install one, not both.
• Context cost. Claude Code estimates about 80 tokens always loaded and about 3.2k tokens when the skill runs.
• Repo disclaimer. The anthropics/skills README calls these skills demonstrations and says behavior in Claude’s apps may differ.

Alternatives

• Web artifacts builder when you need a multi-component React app packed into one HTML file.
• Canvas design skill for posters and static art rather than web pages.
• Figma MCP server if the design already exists in Figma and you want code that matches it.