design-lab — Claude Code skill: what it does, how to install
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.
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-codeWhat design-lab 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.
What it helps with
- 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 for the agent
- 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
How to install design-lab
1Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code2Manually: put the files in place
~/.claude/skills/design-lab/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-lab/
1Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a codex2Manually: put the files in place
.agents/skills/design-lab/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a cursor2Manually: put the files in place
.cursor/skills/design-lab/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install 0xdesign/design-plugin design-lab2Manually: put the files in place
.github/skills/design-lab/SKILL.md1Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a gemini-cli2Platform CLI
gemini skills install https://github.com/0xdesign/design-plugin --path design-and-refine/skills/design-labManually: put the files in place
.devin/skills/design-lab/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-lab
How do I install design-lab in Claude Code?
Run npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code. The skill ends up at ~/.claude/skills/design-lab/SKILL.md.
What does design-lab do?
It interviews you about the UI, generates five distinct variants in a temporary lab, collects feedback and writes an implementation plan. Temporary files are removed at the end.
Does it work in a Vite project that uses CSS Modules?
Yes. Preflight looks for vite.config.ts and CSS files, and reads color, spacing and radius tokens from :root variables.
