frontend-design Skill: Distinctive UI from Claude
Anthropic's frontend-design skill steers Claude toward intentional, non-templated UI: aesthetic direction, typography and self-critique. Install and usage.
By Claudekit Team Published 1 min read
- Category
- Design
- Source
- github.com
- Repository
- github.com
- GitHub stars
- 183,344
- License
- Apache-2.0
Install
/plugin install frontend-design@claude-plugins-officialfrontend-design gives Claude guidance for distinctive, intentional visual design when it builds new UI or reshapes an existing one. Its goal is interfaces that do not read as templated defaults: a clear aesthetic direction, deliberate typography, and choices grounded in the product’s subject matter.
What it does
The skill walks Claude through a process:
- Ground the design in the subject rather than reaching for generic layouts.
- Apply design principles for hierarchy, typography and color.
- Plan, review against the brief, build, critique, then revise.
- Practice restraint, cutting decoration that does not serve the content.
Install
From Anthropic’s official plugin marketplace:
/plugin install frontend-design@claude-plugins-officialOr via the anthropics/skills marketplace in the example-skills bundle:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsManual option: copy skills/frontend-design into ~/.claude/skills/. See the skills guide for where skills load.
Example usage
Build a landing page for a local coffee roaster. Make it feel crafted, not like a SaaS template
Redesign the settings screen. Keep our Tailwind tokens but improve hierarchy and spacing
Critique this dashboard against the brief and list the three highest-impact changesTips
- Give a brief: audience, tone, constraints, and any brand tokens you must keep.
- Let Claude see the result. Add Playwright MCP or Chrome DevTools MCP so it can screenshot and iterate.
- Combine with webapp-testing to verify interactions after the visual pass.
Source and license
Part of anthropics/skills, licensed Apache-2.0 (see the skill’s LICENSE.txt). Anthropic provides these skills for demonstration and education, so review output before shipping.
Frequently asked questions
Does frontend-design write the code too?
It guides design decisions while Claude builds. The code itself comes from Claude's normal tools in your project, following the skill's direction.
Will it override my design system?
Tell Claude about your existing tokens and components. The skill emphasizes grounding designs in the subject and the brief, so constraints you give it take priority.
How do I check the result visually?
Pair it with a browser tool such as Playwright MCP or Chrome DevTools MCP so Claude can view the page and critique its own output.