Design System Setup Wizard

When to Use

Use this skill when you need interactive setup wizard — guides you step-by-step to configure the design system for your project.

When NOT to use

• For projects already configured with StyleSeed → use /ss-update instead
• For just adding one component to an existing project → use /ss-component
• For changing brand skin in an already set-up project — directly swap theme.css
• For non-React or non-Tailwind-v4 stacks — currently unsupported

Guide the user through setting up StyleSeed for their project, step by step.

Instructions

Walk through these steps ONE AT A TIME. After each step, wait for the user to respond before proceeding. Keep it conversational and friendly.

Step 1: App Type

Ask:

What type of app are you building?

1. SaaS Dashboard (analytics, metrics, charts)
2. E-commerce (products, orders, payments)
3. Fintech (transactions, portfolio, market data)
4. Social / Content (feeds, profiles, messaging)
5. Productivity / Internal tool
6. Other — describe it

Remember the answer — it determines which page composition recipe to use (DESIGN-LANGUAGE.md Section 63).

Step 2: Brand Color

Ask:

What's your brand color?

1. Purple (#721FE5) — default style (toss skin)
2. Blue (#2563EB) — trust, corporate
3. Green (#059669) — growth, health, finance
4. Orange (#EA580C) — energy, creative
5. Red (#DC2626) — bold, urgent
6. Dark (#18181B) — minimal, premium
7. Custom — just type your hex code

After they choose, update css/theme.css:

• In :root block: change --brand to the chosen hex
• In .dark block: change --brand to a lighter version for dark backgrounds

Dark mode color mapping:

For custom hex: lighten by ~30% (increase luminance in HSL).

Step 3: Design Concept (from awesome-design-md)

Ask:

Want to apply an existing brand's visual style?

Popular options from awesome-design-md:
1. Stripe — clean, professional
2. Linear — minimal, dark-first
3. Vercel — black & white, geometric
4. Notion — warm, friendly
5. Spotify — bold, dark, green
6. Supabase — modern, green
7. Airbnb — warm, coral
8. No thanks — keep the default style
9. Other — name any brand or describe a vibe

If they pick a brand (options 1-7 or 9):

1. Fetch: https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md
   • Brand folder names: stripe, linear.app, vercel, notion, spotify, supabase, airbnb
2. Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
3. Apply extracted colors to css/theme.css (both :root and .dark blocks)
4. Keep ALL StyleSeed layout rules, typography ratios, spacing, and component patterns unchanged — only swap the color palette

If they pick 8 (No thanks): skip, keep current brand color from Step 2.

Step 4: Font

Ask:

What font do you prefer?

1. Inter (clean, universal — recommended)
2. Pretendard + Inter (Korean + English)
3. Geist (Vercel-style, modern)
4. DM Sans (friendly, rounded)
5. Custom — tell me the font name

After they choose:

• Update css/fonts.css: change the @import URL
• Update css/base.css: change font-family in the body rule

Font imports:

Step 5: App Name & First Page

Ask:

Last step! What's your app name and what should the main page show?

Example: "Acme — SaaS dashboard with revenue, users, and recent activity"

Then:

1. Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
2. Generate the first page using the page composition recipe:
   • SaaS → Hero + KPI Grid + Chart + Progress + Activity List
   • E-commerce → Hero + KPI Grid + Donut + Bar Chart + Orders List
   • Fintech → Hero + KPI Grid + Donut + Area Chart + Transactions
   • Social → Hero + Stats + Feed List + Trending Carousel
   • Productivity → Hero + KPI Grid + Progress + Task List

…