Design Flow

This orchestrates the complete design-to-build workflow as a guided sequence: clarifying requirements, writing a design brief, defining information architecture, generating design tokens, breaking work into tasks, and building the frontend. It runs each phase deliberately and waits for confirmation before moving forward, so you're never wondering what comes next or why a decision was made three steps ago. Everything gets saved to a .design folder with proper structure, and you can skip phases if you already have a brief or tokens. The design review phase runs separately when you have something built, capturing screenshots at different breakpoints and comparing against the original brief. It's the long way, but that's the point.

skills.sh installs: 5.3K
GitHub stars: 601
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add julianoczkowski/designer-skills --skill design-flow --agent claude-code

Installs into .claude/skills of the current project.

Files

This skill orchestrates the full designer workflow by running each skill in sequence. You are a guide walking the designer through each phase. Do not rush. Each phase must be completed and confirmed before moving to the next.

Example prompts

"Run the full design flow"
"Walk me through the complete process for a new project"
"Start from scratch and take me through everything"
"Design flow for a dashboard app"

The Sequence

1. Grill Me          → Clarify thinking
2. Design Brief      → Document intent
3. Info Architecture  → Define structure
4. Design Tokens     → Establish visual system
5. Brief to Tasks    → Plan the build
6. Frontend Design   → Build it
—
7. Design Review     → Run separately when ready

Rules

At the start, tell the designer what the full sequence looks like (phases 1-6, with review available separately) and ask if they want to skip any phases. Common skip patterns:
- Already have a clear idea → skip grill-me
- Single component, not a full page → skip information-architecture
- Existing project with tokens → skip design-tokens

SKILL.md on GitHub