frontend-design

Anthropic's official agent skill. Before writing a new or revised interface, the agent picks a visual direction, type, and layout, and avoids the usual generated-template look.

Apache-2.0 · Anthropic · github.com/anthropics/skills/tree/main/skills/frontend-design · github.com/anthropics/skills · Agent Skills（SKILL.md） · Edited 2026-09-04

• Start from the subjectName the product, who it is for, and the page's main job. Take the visual direction from that, not from a default template.
• Plan, then codeBefore code, write a short plan: 4–6 colors, type roles, a layout sketch, and principles. Check it against the brief for generic patterns.
• Name the usual tellsIt lists common generated-page tells, such as a beige field with terracotta, a rounded card kit, and all-caps eyebrows, and avoids them unless the brief asks.
• Keep motion smallOne composed entrance beats a fade on every block. Motion that answers a user action is fine.
• Screenshot as you goBefore finishing, compare a screenshot and remove one extra decoration.

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design

frontend-design ships inside the example-skills plugin. Paid Claude.ai plans already include these example skills.

When a brand guide or a Figma file already decides the look, this skill pushes the agent toward being different and can drift off the spec. Use web-design-guidelines for a conformance review. This skill is guidance only. It does not ship components or templates.