frontend-design
Official sourceGenerate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Source: Anthropic
At a glance
Verified source- Best for
- Building polished landing pages, dashboards, and React components with strong visual quality
- Works with
- Claude.ai · Claude Code
- Outcome
- Styling or beautifying an existing web UI beyond default framework looks
- Source
- anthropics/skills
01 / Understand the skill
About frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Not a fit when
don't read as templated defaults.
02 / Confirm the fit
Use frontend-design when you need to
- Building polished landing pages, dashboards, and React components with strong visual quality
- Styling or beautifying an existing web UI beyond default framework looks
- Producing artifacts/posters/web apps that need a non-generic, intentional aesthetic
03 / See the workflow
How frontend-design works
- 01Install: npx skills add https://github.com/anthropics/skills --skill frontend-design
- 02Try: "Build a landing page hero for a developer tool with a distinctive look."
- 03Get: production-grade HTML/CSS/React with considered typography, spacing, and color
Check before installing
Compatible platforms
Claude.ai · Claude Code
Best fit
Building polished landing pages, dashboards, and React components with strong visual quality
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Claude.ai and Claude Code · Published by Anthropic
Ready to add frontend-design?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Claude.ai · Claude Code
npx skills add https://github.com/anthropics/skills --skill frontend-design
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.
End-to-end workflow for authoring, testing, benchmarking, and optimizing agent skills, including eval runs, a review viewer, and a description-triggering optimizer.