# design-intelligence

Bootstraps a design system from scratch: palette, type scale, spacing, radii and a component inventory in three formats.

- 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-intelligence/SKILL.md
- Updated: 2026-06-18
- HTML: https://affpapa.org/en/nevibecode/skills/design-intelligence

## What it does

This skill handles design system bootstrapping. You hand it project context — what you are building, who the users are, the personality you want, light or dark, any brand colors already picked — and it returns a token set you can use right away. It runs with `Read`, `Write`, `Edit`, `Glob`, `Grep`, `Bash` and `WebSearch`.

Generation moves through steps. First the context questions, then the palette, the type scale, spacing and radii. Palette choice follows personality: blue tones for a professional or corporate feel, purple or pink for bold and creative work, deep blue with gold for premium. The type scale starts from a 16px base, spacing from an 8px step.

Output lands in three places: a token reference doc at `.planning/design/system/tokens.md`, a snippet for `tailwind.config.ts`, and a CSS variables file. Alongside those, the skill lists components suited to the project type — sidebar navigation and data tables for a dashboard, product cards and filters for a marketplace. Values like `--color-primary` and `--radius-card` get pasted in by hand, so read them over before you commit.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

## When to use it
- settle on a palette and type scale at the start of a new project
- pick colors that match a brand personality and industry
- build a type scale and spacing system from one base unit
- export tokens straight into Tailwind and CSS variables
- draft a component list for a specific product type

## Example prompts
- Set up a design system for an analytics dashboard, dark theme, minimal and technical personality
- Generate a palette and type scale for a marketplace, light theme, brand color already chosen
- Build tokens and a component inventory for a mobile app with a warm, friendly feel

## Similar
- [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
- [design-system](https://affpapa.org/en/nevibecode/skills/claudekit-design-system.md) — skill · 43200 installs
- [stitch::extract-design-md](https://affpapa.org/en/nevibecode/skills/stitchextract-design-md.md) — skill · 10600 installs
- [design-tokens](https://affpapa.org/en/nevibecode/skills/design-tokens.md) — skill · 5900 installs
- [swiss-design](https://affpapa.org/en/nevibecode/skills/swiss-design.md) — skill · 951 installs

From the same set: [c0x12c/ai-toolkit](https://affpapa.org/en/nevibecode/by/c0x12c/ai-toolkit.md) — 11 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