Frontend Design

Anthropic's frontend design skill, which also ships as the frontend-design plugin for Claude Code. It steers your agent away from templated, generic-looking UI: the agent works like the design lead at a studio, grounding each design in its subject and making deliberate choices about palette, typography and layout. Claude uses it on its own when you ask for frontend work, whether that's a new interface or reshaping an existing one. What it teaches your agent - Ground the design in its subject: work out the product, the audience and the design's main job first, and draw visual ideas from the subject's own world - Plan in two passes: a compact token system (4 to 6 named colours, typefaces and their roles, a layout concept sketched as ASCII wireframes, principles), then a review of that plan against the brief before writing any code - Recognise the looks AI-generated design falls into, such as a cream background with a serif and a terracotta accent, identical rounded cards with soft shadows, and all-caps eyebrow labels, and avoid them unless the brief asks for one - Treat typography as the page's personality: one or two deliberate typefaces, a clear type scale and lines under 80 characters - Use motion sparingly: one orchestrated moment rather than effects on every section - Spend boldness in one place, and build to a quality floor: responsive down to mobile, visible keyboard focus, reduced motion respected and accessible colour - Write interface copy from the user's side: plain names, buttons that say what they do, errors that say how to fix them How to install it In Claude Code, run /plugin install frontend-design@claude-plugins-official, or add Anthropic's claude-code marketplace with /plugin marketplace add anthropics/claude-code and run /plugin install frontend-design@claude-code-plugins. The skill itself is one SKILL.md file, so agents that take Agent Skills can use it too. Good to know - No sign-in, API key or MCP server: it's guidance your agent follows while it writes the code. - When your brief names a visual direction, the skill follows it exactly, even if it's one of the looks it would otherwise avoid. - For more on prompting for frontend design, Anthropic points to its Frontend Aesthetics Cookbook.

• “Create a dashboard for a music streaming app.”

  Copy

• “Build a landing page for an AI security startup.”

  Copy

• “Design a settings panel with dark mode.”

  Copy

• “Redesign our pricing page so it doesn't look templated.”

  Copy

• “Plan the palette, type and layout for our product page before you build it.”

  Copy