Frontend Design Skill

What is the frontend-design skill?

The frontend-design skill is a folder in Anthropic's public anthropics/skills repository. It holds one SKILL.md and a LICENSE.txt. Its stated job is guidance for distinctive, intentional visual design when building a new UI or reshaping an existing one.

Instead of listing CSS tricks, it gives the agent a role, a process and a list of defaults to avoid. The brief always wins: if you ask for one of the avoided looks, Claude should build it.

What changes in the agent's output

• The agent names the subject, the audience and the page's main job before it designs anything, and confirms them with you if the brief leaves them out.
• It writes a short design plan first: 4 to 6 named hex colors, type roles, a layout concept with ASCII wireframes, and principles.
• It reviews that plan against the brief and revises any part that looks like the generic version it would build for any similar page.
• Headlines stop accenting one word. Labels stop defaulting to ALL CAPS. Sections stop fading up one after another.
• Buttons and errors get plain, consistent wording, such as "Save changes" instead of "Submit".

The five default looks it tells the agent to avoid

SKILL.md lists traits that AI-generated design clusters around. They are fine when a brief asks for them, but they are defaults, not choices. Where the brief leaves an axis free, the agent should not spend it on these.

• A warm cream background, a high-contrast serif display face and a terracotta accent.
• A near-black background with a single acid-green or vermilion accent.
• A broadsheet layout: hairline rules, zero border-radius, dense newspaper columns.
• The SaaS-card kit: identical rounded cards, one radius on everything, the same soft grey shadow, gradient washes.
• Template chrome: a tracked-out ALL-CAPS eyebrow above every heading, middle-dot meta strings, a monospace face for small labels, an arrow added to every link.

Who the frontend design skill is for

Best for

• Landing pages and marketing sites where the default AI look is the problem.
• New UI that your agent builds from a short brief with no mockup.
• Reshaping an existing interface into something with a point of view.
• Anyone who wants a written design plan to react to before code appears.

Not for

• Matching an existing Figma file pixel for pixel. The skill has no Figma step.
• Scored audits or detector scans. It asks the agent to critique its own work as it builds, nothing more formal. For a scored review, use Impeccable critique.
• Getting an editable WordPress page directly. It produces front-end code.

Use it with UiChemy

The skill decides how the page should look and why. When the build is done and has to live in WordPress, UiChemy AI to WordPress imports an existing AI build as an editable page. For a Lovable build, see Lovable to Elementor. Click Get Started on uichemy.com.

How to install Frontend Design

/plugin marketplace add anthropics/skills

1. Add the marketplace

   In Claude Code, run /plugin marketplace add anthropics/skills. This registers the repository as a plugin marketplace named anthropic-agent-skills.

2. Install the plugin that contains it

   Run /plugin install example-skills@anthropic-agent-skills. Frontend-design ships inside the example-skills plugin, which bundles it with 11 other skills from the repo. You can also pick Browse and install plugins, then anthropic-agent-skills, then example-skills.

3. Ask for it by name

   The README says that after installing the plugin you use a skill by mentioning it. Try: Use the frontend-design skill to build a landing page for a sourdough bakery.

4. On Claude.ai or the API

   The README says the example skills are already available to paid Claude.ai plans, and that skills can also be used through the Claude API.

Check that it loaded

Run /plugin and check that example-skills is installed, then give Claude a small brief with the skill named. It should write a design plan (colors, type, layout, principles) before any code.

Read the official instructions on GitHub

Key features

• Studio-brief roleThe agent plays the design lead at a studio whose client already rejected clichéd or templated proposals. It is told to make deliberate choices on palette, type and layout and to take aesthetic risk where it is justified.
• Subject-first groundingIf the brief does not say what the product is, The agent proposes one concrete subject, audience and primary job and confirms it. Distinctive choices are supposed to come from the subject's own materials and vocabulary.
• Hero ruleOpen with the most characteristic thing in the subject's world: a headline, an image, an animation, a live demo or an interactive moment. A big number, small label and gradient accent is named as the default to skip.
• Typography rulesOne family or two, and if two, clearly distinct. Follow the scale guidance of The Elements of Typographic Style, keep lines under 80 characters, and give serif body text slightly more line height than sans-serif.
• Banned type tellsNo accenting a single word in a headline, no all-caps labels, and no unnecessary labels above content. Each is called out as a common sign of a generated page.
• Structure as informationBorders, dividers, eyebrows and numbering must encode something about the content. Numbered 01, 02, 03 markers are only for content that is a real sequence, such as steps or a timeline.
• Motion restraintOne orchestrated moment, such as a page-load sequence or one reveal, beats scattered effects. Fade-and-slide on every section and hover transitions on every card are named as generic. Motion that answers a click is welcome.
• Plan, review, build, critiqueThe agent writes the token plan first, reviews it against the brief and says what it changed, then builds. It also warns about CSS selector specificity so section and button classes do not cancel each other's padding.
• Restraint and quality floorSpend boldness in one place and keep the rest quiet. The floor is responsive down to mobile, visible keyboard focus, reduced motion respected, accessible color and a screenshot review where the environment allows it.
• Writing inside the designActive voice, sentence case and one name per action across the flow, so a Publish button leads to a Published toast. Errors say what went wrong and how to fix it, without apologizing.

Frequently asked questions