Senior product designer for any AI coding agent — now inside VS Code.

This extension surfaces the design-ai corpus directly in your editor:

20 design skills as searchable PLAYBOOKs (color palette, component spec, UX audit, motion, illustration, print, video, game UI, conversational UI, spatial design)
221 worked examples, including 210 component specs synthesized from Ant Design + MUI + shadcn-ui
92 knowledge files covering tokens, typography, layout, accessibility, Korean i18n, and more
5 integration walkthroughs (Codex CLI / Cursor / Aider / SDK / VS Code)

The extension does not compete with your AI assistant (Cursor, Copilot, Continue, Claude). It surfaces design-aware content that you (or your AI assistant) can reference while building.

Install

The extension needs the design-ai source to function. Pick one:

# NPM (recommended)
npx @design-ai/cli install

# Homebrew (macOS)
brew tap sungjin9288/design-ai https://github.com/sungjin9288/design-ai.git
brew install design-ai
design-ai install

# Git clone
git clone https://github.com/sungjin9288/design-ai.git ~/dev/design-ai
cd ~/dev/design-ai
./install.sh

The extension auto-probes common locations (~/dev/design-ai, ~/.local/lib/design-ai, npm-global, Homebrew). Set design-ai.path in settings if it lives elsewhere.

Features

Four collapsible views in the design-ai activity bar:

Skills — 20 skill PLAYBOOKs. Click to open in editor.
Knowledge — 92 knowledge files organized by category (motion, illustration, print, game UI, conversational, spatial, i18n, etc.).
Component specs — 210 component specs (Banner, Button, Modal, Table, Sheet, ...).
Integration walkthroughs — Codex CLI / Cursor / Aider / SDK / VS Code guides.

Commands

Run via Cmd+Shift+P → "design-ai: ...":

Install (Claude Code) — runs install.sh to symlink into ~/.claude/.
Show install status — displays plugin manifest version + skill / command / agent counts.
Open knowledge file... — quick-pick across all knowledge files.
Open component spec... — quick-pick across the 210 component specs.
Open skill PLAYBOOK... — quick-pick across the 20 skills.
Open integration walkthrough... — quick-pick across walkthroughs.

Use with your AI assistant

The most common workflow:

Open a knowledge file or skill PLAYBOOK in the editor.
In your AI assistant (Copilot Chat, Cursor Chat, Continue, etc.), reference the open file:
- "Apply the patterns in @workspaceFile to my Banner component"
- "Use the rules in this PLAYBOOK to spec a CommandPalette"

Because design-ai files are pure markdown, every AI assistant can read them natively.

Settings

Setting	Default	Purpose
`design-ai.path`	(auto-probe)	Absolute path to design-ai source if non-standard location
`design-ai.language`	`en`	Preferred language when opening README / QUICKSTART (`en` or `ko`)