What it does
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.
This entry summarizes the public skill for discovery. Prefer the upstream SKILL.md for the full instruction text (we do not paste restricted or lengthy proprietary prompt bodies).
Install & usage
Claude Code (plugin marketplace)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Or copy this skill folder into your project:
mkdir -p .claude/skills
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropics-skills
cp -R /tmp/anthropics-skills/skills/frontend-design .claude/skills/frontend-design
Then ask Claude Code to use the frontend-design skill for a matching task.
Best for
Building distinctive UI (avoiding generic AI aesthetics) in web apps.
Hands-on test
- test_level: fully-tested
- Ran: yes
- When: 2026-11-01T01:20:00+08:00 (Asia/Shanghai)
- Result: Produced distinctive nori-press.html landing page (no generic AI aesthetic) and saved under e2e_iv/frontend-design.
- Gotchas: Pushes bold aesthetics; still add a11y/focus styles before shipping.
Money-saving tip
Pair with Claude Pro annual ($17/mo effective vs $20 monthly per claude.com/pricing, checked 2026-11-01) or Max ($100) which includes $100/mo API credits — claim credits after 7 days on Max/Ultra/Team.
Source & license
- source_repo: anthropics/skills
- Source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
- License: Apache-2.0 — https://github.com/anthropics/skills/blob/main/skills/frontend-design/LICENSE.txt
- Restrictions: Apache-2.0 examples may be redistributed with attribution. Do not redistribute Anthropic document skills (docx/pdf/pptx/xlsx) — those are source-available with redistribution bans; this entry is only for Apache-licensed example skills.