Frontend Design
Anthropic's official frontend-design skill. Before writing any code, it commits to a clear aesthetic direction — minimal, maximalist, editorial, brutalist, retro-futuristic, or something true to the context — then implements real, working HTML/CSS/JS, React, or Vue with meticulous attention to typography, color, motion, spatial composition, and atmospheric background detail. It explicitly steers away from the overused fonts (Inter, Roboto, system stacks), cliched purple-gradient-on-white palettes, and cookie-cutter layouts that make AI-generated UIs look generic. Use it whenever you're building or styling a web component, page, dashboard, landing page, or artifact and want the result to feel genuinely designed rather than templated. Third-party skill from Anthropic's official skills repository.
What it does
The official Anthropic frontend-design skill for Claude: builds distinctive, production-grade UIs that dodge generic AI-slop looks with bold type and motion.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Anthropic
- Category
- Engineering
- Source
- View source
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
Pick where you want it. Nothing to configure after.
These install links go live once the signup flow ships. Until then, ask Claude, ChatGPT, or Gemini to fetch this skill's file directly from GitHub.
Not sure which? See the install guide.
Share this skill
Frontend Design
Anthropic's official frontend-design skill. Before writing any code, it commits to a clear aesthetic direction — minimal, maximalist, editorial, brutalist, retro-futuristic, or something true to the context — then implements real, working HTML/CSS/JS, React, or Vue with meticulous attention to typography, color, motion, spatial composition, and atmospheric background detail. It explicitly steers away from the overused fonts (Inter, Roboto, system stacks), cliched purple-gradient-on-white palettes, and cookie-cutter layouts that make AI-generated UIs look generic. Use it whenever you're building or styling a web component, page, dashboard, landing page, or artifact and want the result to feel genuinely designed rather than templated. Third-party skill from Anthropic's official skills repository.
Third-party, by Anthropic
June 8, 2026
Install the skill (and keep its license)
This is a single-file skill: the SKILL.md below is the exact pinned commit (0075614) Skills and Agents Co reviewed, and it's all Claude needs to run. It's licensed Apache-2.0 by Anthropic, with the full terms in a sibling LICENSE.txt, so keep a copy of that license with the file if you redistribute it.
- 1
Get the skill file
Open the pinned SKILL.md and save it, then add it in Claude under Code → Customize → Create a new skill (desktop) or Customize → Skills → + (claude.ai).
- 2
Keep the license with it
frontend-design is Apache-2.0. Grab the matching LICENSE.txt at the same pinned commit and retain it alongside the skill if you share or redistribute it.
- 3
Use it
Say a trigger phrase (for example, "design a frontend for…") to activate the skill.
Your skill is downloading.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.
What this skill does
This is an overview of the skill from the site, not the skill's real instructions. The full SKILL.md Claude reads when this skill is active lives on GitHub at the source below.
The full SKILL.md for this third-party skill lives on GitHub. Open it to read the exact instructions Claude will follow.