# Frontend Design (frontend-design)

> Guides distinctive visual design for new or reworked UI, making deliberate palette, typography and layout choices grounded in the subject matter.

- Category: [UI & Interaction](https://www.myskills.tools/en/categories/ui-interaction/)
- Source: Official · Anthropic
- Repository: https://github.com/anthropics/skills/tree/main/skills/frontend-design (commit 41bbe19)
- SKILL.md: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
- Install command: `npx skills add anthropics/skills --skill frontend-design`
- License: Apache-2.0
- Compatible with: Claude Code
- Permissions: read-repo ✓, write-files ✓, shell ✗, network ✗
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.

## Core rule

The brief's own words always win; where it leaves a choice open, don't spend it on a generic default.

## Execution Phases

1. **Ground in the subject** — If the brief does not name the subject, propose one with its audience and primary job and confirm it; draw visual choices from that world's materials and vernacular.
2. **Draft a design plan** — Create a compact token system: 4-6 named hex colors, typefaces and roles, a layout concept compared with ASCII wireframes, and guiding principles.
3. **Review against the brief** — Revise any part of the plan that reads like the default you would produce for any similar page, and say what changed and why.
4. **Build and critique** — Code from the revised plan, watch CSS selector specificity, meet a floor of responsiveness, visible focus and reduced motion, and review screenshots if the environment allows.

## Permissions (summarised from SKILL.md)

| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Writes front-end code and interface copy following the design plan. |
| Command execution | Not required | The skill does not ask for any commands to be run. |
| Network outbound | Not required | No network access needed. |

## SKILL.md frontmatter (YAML)

```yaml
---
name: frontend-design
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.
license: Complete terms in LICENSE.txt
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/frontend-design/