Illustrative cover generated by us — see the source repo for real examples.
How to use
- 1
Copy the install prompt
Sign in, then click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/frontend-design make me: New UI or redesigns that shouldn't look templatedExample message showing how to invoke it, not a real output.
What you get
- Design principles grounded in the subject
- Plan → build → critique loop
- Typography and restraint guidance
Good fit
- New UI or redesigns that shouldn't look templated
Not for
- Backend or pure logic work
- License
- Apache-2.0
- Author
- @anthropics
- Source
- anthropics/skills/skills/frontend-design · ★ 179,820
Upstream description
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.
Other ways to install
Prefer doing it yourself? These commands do the same as the button.
Read https://skilloop.dev/skills/frontend-design/install.md and follow the instructions to install the skill.
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design -g -a claude-code
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design -g -a codex
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/skills mkdir -p ~/.claude/skills && cp -r /tmp/skills/skills/frontend-design ~/.claude/skills/frontend-design
Original work by its authors, redistributed under its license. We only link and describe it.
Related skills
SaaS Landing Page
A single-page SaaS landing site with hero, features, social proof, pricing and CTA — one HTML file.
Taste Design System (DESIGN.md)
Generate an agent-friendly DESIGN.md that enforces premium, anti-generic UI: strict type, calibrated colour, asymmetric layouts, micro-motion.
Design System Extractor
Analyse an existing Stitch project and synthesise its semantic design system into DESIGN.md.
shadcn/ui Expert
Guidance for discovering, installing and customising shadcn/ui components with solid architecture and theming practices.