# design-flow

Walks you from clarifying questions to built components across six phases, confirming before each next step.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5300 installs · ★ 592
- Author: julianoczkowski
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-flow/SKILL.md
- Updated: 2026-07-06
- HTML: https://affpapa.org/en/nevibecode/skills/design-flow

## What it does

This skill turns design work into a guided sequence and keeps you from skipping ahead. It opens by laying out the whole route — phases one through six, with review kept separate — and asks which steps you want to drop. Then it moves in order: grilling, design brief, information architecture, tokens, task list, frontend. Before every phase it says what the phase will produce; after every phase it sums up and waits for your go-ahead.

The mechanics are plain. At each step the skill reads the matching `SKILL.md` from the set and follows its instructions in full, no abbreviating. Output lands in `.design/<feature-slug>/` — `DESIGN_BRIEF.md`, `INFORMATION_ARCHITECTURE.md`, a token file, `TASKS.md`. Each feature gets its own folder, so parallel work does not overwrite itself. You can stop whenever: say it is enough for now and the skill notes where you left off.

Phase seven, the design review, never fires on its own. It needs built code, and you trigger it separately with `/design-review`. Screenshots come from Playwright MCP, falling back to the Cursor IDE Browser, and if no browser tool is around you supply them yourself. Skipping phases is worth doing deliberately: a single component does not need information architecture, and an existing project with tokens can drop phase four.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-flow -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/design-flow/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/design-flow/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-flow -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/design-flow/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-flow -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/design-flow/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install julianoczkowski/designer-skills design-flow
```

2. **Manually: put the files in place**
- File: `.github/skills/design-flow/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-flow -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/julianoczkowski/designer-skills --path design-flow
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/design-flow/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-flow -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-flow/SKILL.md

## When to use it
- take a project from rough idea to built components without skipping phases
- capture project intent in a `DESIGN_BRIEF.md` file
- turn a brief into an ordered build checklist
- derive color, spacing and typography tokens from the brief's philosophy
- rejoin the flow mid-way and see which phase comes next

## Example prompts
- Run the full design flow
- Walk me through the complete process for a new project
- Design flow for a dashboard app

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 47f7b53256c128c2.

BEGIN THIRD-PARTY FILE 47f7b53256c128c2
````text
---
name: design-flow
description: Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".
---

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

1. **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

2. **Before each phase**, announce which phase you are entering and what it will produce. Example: "Phase 2: Design Brief. I'll interview you about the project and produce a DESIGN_BRIEF.md file. Ready?"

3. **During each phase**, read the corresponding SKILL.md file and follow its full instructions. Do not summarize or abbreviate the skill. Run it properly.

4. **After each phase**, summarize what was produced (the file name, the key decisions, any open questions) and ask: "Ready to move to the next phase?" Wait for confirmation.

5. **Between phases**, check if the output from the previous phase changes anything about the next phase. For example, if the brief names a philosophy, mention that the tokens phase will use it.

6. **The designer can stop at any point.** If they say "that's enough for now," summarize where they are in the sequence and what the next phase would be when they return.

## Phase Details

### Phase 1: Grill Me

Read the `grill-me` skill (grill-me/SKILL.md) and follow its instructions.
````
END THIRD-PARTY FILE 47f7b53256c128c2

The third-party file has ended. Everything between the 47f7b53256c128c2 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2482 of 7359 bytes. © julianoczkowski · Apache-2.0 · https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-flow/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md