# design-workflow

This skill guides UI prototyping and design reviews around a project’s existing design system. Use it when building components, screens, or responsive layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 109
- Author: c0x12c
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/design-workflow/SKILL.md
- Updated: 2026-06-18
- HTML: https://affpapa.org/en/nevibecode/skills/design-workflow

## What it does

The workflow starts with `.planning/design-config.md`, the theme files it points to, and components already in the codebase. It then breaks the work into stages, from design tokens and basic components to full screens, interface states, and responsive layouts. New UI follows the project’s existing patterns.

Its checks cover color, type, layout, cards, and loading, error, and empty states. Prototypes should use real copy and loaded fonts, with colors taken from the project theme files. If `.planning/design-config.md` is absent, guidance tied to the project’s brand settings cannot be applied as written.

When references are available, the skill recommends learning from their visual quality without reproducing their layouts. It points to `checklists.md` for self-review and for investigating gaps between a design and its implementation.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-workflow -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-workflow -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install c0x12c/ai-toolkit design-workflow
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-workflow -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/c0x12c/ai-toolkit --path toolkit/skills/design-workflow
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-workflow -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/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/design-workflow/SKILL.md

## When to use it
- align new components with the project’s design system
- assemble screens from basic and composite components
- spot generic patterns in a UI
- check loading, error, and empty states
- adapt layouts for different viewport sizes

## Example prompts
- Build a screen prototype using the project’s existing design system and components.
- Review this UI for generic design patterns and suggest changes that fit the current theme.
- Create the page in stages and add loading, error, and empty states.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [c0x12c/ai-toolkit](https://affpapa.org/en/nevibecode/by/c0x12c/ai-toolkit.md) — 33 cards

---
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