Design a site's whole frontend — design system, greyboxing, real content. Use when the user wants to design or redesign a site's frontend, or to build all the pages of a new site.
Installs into .claude/skills of the current project.
Are you the author of Frontend Design?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/firzus-frontend-design)
---
name: frontend-design
description: >-
Design a site's whole frontend — design system, greyboxing, real content.
Use when the user wants to design or redesign a site's frontend, or to
build all the pages of a new site.
---
# Frontend Design
A router: a site's frontend is designed in three phases, each owned by its own skill, handing off through two artifacts at the project root.
| Phase | Skill | Artifact it owns |
| ----- | --------------- | ----------------------------------------------------------------------- |
| 1 | `design-system` | `DESIGN.md` — identity: design read, dials, tokens, surfaces |
| 2 | `greyboxing` | `PAGES.md` — page list, tiers, statuses, signature elements, motion theses |
| 3 | `real-content` | the pages themselves — every placeholder replaced, copy self-audit passed |
Invoke the skill for the phase the project is in; each declares its own gates and prerequisites. A phase starts only when the previous phase's artifact exists and its exit gate has passed. The artifacts are the memory: any session can pick the pipeline up by reading them.
## Session discipline
Context is the scarce resource — split the work across sessions:
- One session for `design-system`, through its grill and validation gate.
- **One fresh session per page** for `greyboxing`: read `DESIGN.md` + `PAGES.md`, build the page, update `PAGES.md`, stop. The site pass gets its own session.
- One session for `real-content` (one per surface on multi-surface projects).
Small site (fewer than ~5 pages)? Chaining phases in one session is acceptable — the artifacts still get written, so any later session can take over.
