This guide assumes no prior StyleSeed knowledge. If you can open a terminal and run Claude Code, you can finish this in a few minutes.

• Node.js 18+ and npm (or pnpm/yarn)
• A React project — or a willingness to start one
• Claude Code or Cursor installed

You don't have to memorize any copy commands. Install the skills once, then let the setup wizard do the rest.

# 1. Download StyleSeed somewhere on your machine
git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
# 2. From YOUR project's root folder, copy in the skills
cd /path/to/your-project
mkdir -p .claude/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/

Now restart Claude Code (skills load at startup), open your project, and run:

/ss-setup

/ss-setup is interactive — it walks you through copying the engine files, picking a brand skin, and wiring up theme.css. When it finishes you're ready to generate UI.

If /ss-setup doesn't appear after restarting, see Troubleshooting below.

Prefer to do it yourself? Copy the engine pieces into your project. Note the source folder is engine/ (older docs said seed/ — that's outdated).

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
cd /path/to/your-project
# Scaffold config (vite, tsconfig, postcss, index.html) — only for a fresh project
cp -r /tmp/styleseed/engine/scaffold/* ./
# Styles, components, and the design reference
mkdir -p src/styles src/components
cp -r /tmp/styleseed/engine/css/* src/styles/
cp -r /tmp/styleseed/engine/components/* src/components/
cp /tmp/styleseed/engine/DESIGN-LANGUAGE.md ./.claude/DESIGN-LANGUAGE.md
cp /tmp/styleseed/engine/CLAUDE.md ./CLAUDE.md
# Install dependencies
npm install

Then pick a skin (see Token Customization) and you're set.

After setup, your project looks like this:

src/
 styles/
 fonts.css # Font imports (Inter + optional Pretendard)
 theme.css # CSS custom properties + @theme inline
 base.css # Base element styles
 index.css # Entry point
 components/
 ui/ # 32 primitive components (shadcn-style)
 patterns/ # composed pattern components
 app/ # your pages

Open src/styles/theme.css and change the --brand variable:

:root {
 --brand: #721FE5; /* Change to your brand color */
}

This single change propagates to icon badges, progress bars, toggles, active navigation, and every other accent element.

Once the skills are installed (above) and CLAUDE.md + DESIGN-LANGUAGE.md are in place, Claude Code references the design rules automatically and the 14 /ss-* slash commands become available:

/ss-page Dashboard # Scaffold a full page
/ss-component PriceTag # Generate a component
/ss-motion toggle-flip # Apply a named motion
/ss-review src/App.tsx # Review for compliance

See Claude Code Skills for all 14.

The /ss-* commands don't show up:

1. Confirm the skill folders exist: ls .claude/skills/ should list ss-page, ss-component, ss-motion, etc.
2. Use the /ss- prefix — the old /ui-* and /ux-* names no longer exist.
3. Restart Claude Code after copying the files. Skills are loaded at startup, so a running session won't pick them up.

/ss-setup says it can't find the engine:

• Make sure /tmp/styleseed (or wherever you cloned it) still exists, or re-clone. The wizard reads from your StyleSeed clone.

• Read the Design Rules Overview to understand the 69 rules
• See Page Composition Recipes for ready-made layouts
• Explore the live Motion Keywords gallery