# design-lab

A skill that interviews you about a UI task, builds five different directions in a throwaway lab, then turns the pick into an implementation plan.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 781
- Author: 0xdesign
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/0xdesign/design-plugin/tree/HEAD/design-and-refine/skills/design-lab/SKILL.md
- Updated: 2026-09-17
- HTML: https://affpapa.org/en/nevibecode/skills/design-lab

## What it does

The skill carries a UI task from questions to a written plan. It interviews you with `AskUserQuestion`: one component or a whole page, new work or a redesign, what hurts in the current version, which products to use as reference. Then it stands up a temporary lab and puts five separate directions side by side. Feedback, refinement, preview, plan.

Preflight runs before the first question. Lock files pick `pnpm`, `yarn`, `npm` or `bun`; config files separate Next.js (App or Pages Router) from Vite, Remix, Nuxt and Astro; dependencies reveal Tailwind, MUI, Chakra, Ant Design, styled-components, Emotion or CSS Modules. The visual language comes out of your own repo — theme tokens in `tailwind.config.ts`, CSS variables, the UI library theme, a couple of existing buttons and cards. A `docs/design-memory.md` or `DESIGN_MEMORY.md` file skips the questions you already answered.

Cleanup is strict, and that matters. Temp artifacts disappear whether you approve the design or say cancel; `.claude-design/` and `__design_lab` routes do not linger. So if a variant wins, copy it out before confirming, or it goes with the lab.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install 0xdesign/design-plugin design-lab
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/0xdesign/design-plugin --path design-and-refine/skills/design-lab
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -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/0xdesign/design-plugin/tree/HEAD/design-and-refine/skills/design-lab/SKILL.md

## When to use it
- compare five takes on one screen before committing
- rework an existing component without touching the rest of the app
- turn an interview into a design brief instead of guessing
- get an implementation plan once a variant is approved
- reuse the tokens and styles a project already has

## Example prompts
- Redesign the product card: run the interview and show me five variants
- I need a new settings screen — start with the design interview, then build the variants
- Set up the design lab for the profile page so I can compare

## Similar
- [ui-design](https://affpapa.org/en/nevibecode/skills/mblode-ui-design.md) — skill · 1400 installs
- [tailwind-design-system](https://affpapa.org/en/nevibecode/skills/sickn33-tailwind-design-system.md) — skill · 1600 installs
- [swiss-design](https://affpapa.org/en/nevibecode/skills/swiss-design.md) — skill · 951 installs
- [tailwindcss-advanced-design-systems](https://affpapa.org/en/nevibecode/skills/tailwindcss-advanced-design-systems.md) — skill · 655 installs
- [design-system-generator](https://affpapa.org/en/nevibecode/skills/design-system-generator.md) — skill · 300 installs
- [nextjs-shadcn](https://affpapa.org/en/nevibecode/skills/nextjs-shadcn.md) — skill · 835 installs

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