ui-setup

name	ui-setup
description	Interactive setup wizard — guides you step-by-step to configure the design system for your project
risk	unknown
source	https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-setup
source_repo	bitjaru/styleseed
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/bitjaru/styleseed/blob/main/LICENSE

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:

Light	Dark
#721FE5	#9B5FFF
#2563EB	#60A5FA
#059669	#34D399
#EA580C	#FB923C
#DC2626	#F87171
#18181B	#A1A1AA

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

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