Back to catalog / Design tools
Frontend design: set direction from the brief
Extract design tokens and layout intent first, then implement for the user context.
Skills
Read the full brief and identify the product, audience, target view, and constraints that must not change. Leave reasonable room for unspecified choices. Draft a short plan with four to six named colors, type roles, a layout direction, and design principles. Inspect existing components, styles, and tokens before introducing new ones. Match hierarchy, whitespace, and interaction states to the audience; avoid default template-like gradients, centered card layouts, and repeated decoration where the brief did not ask for them. Do not copy a specific artist’s work. After implementation, inspect content density, contrast, and responsive behavior at the target viewport.
Permissions
Prerequisites
- The user asks for visual UI design or changes; identify explicit design constraints and the target medium first.
- Draft a short design plan with a compact token system for color, type, layout, and principles.
Permissions
- May create or edit local frontend files based on the brief; reuse project components and design tokens where they exist.
- Do not copy a named artist’s work; follow explicit brief constraints and avoid imposing unrequested style restrictions.
Limitations
The source calls for a brief design pass before implementation and warns against default visual clichés where the brief leaves room; match the product and audience.
Pinned upstream source
- Repository
- anthropics/skills
- File path
- skills/frontend-design/SKILL.md
- Pinned commit
dbd4588f9e1033efb41dad4bef2f7947c8993d44- Source checked
- 2026-10-14 · Reviewed against the pinned upstream source
Repository metrics
These values describe the upstream repository, not popularity or likes for an individual skill or playbook.
- Stars
- Not collected
- Forks
- Not collected
- Observed at
- Not collected
No metrics snapshot is available yet.
License: Apache-2.0
Compatible tools
Design brief · Project components and style tokens · Browser preview
Main topic
Take a coding Agent change from context to verification