Menu
Interactive setup wizard — guides you step-by-step to configure the design system for your project
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/ChonSong/skill-retriever --skill ui-setupThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| 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 |
Use this skill when you need interactive setup wizard — guides you step-by-step to configure the design system for your project.
/ss-update instead/ss-componenttheme.cssGuide the user through setting up StyleSeed for their project, step by step.
Walk through these steps ONE AT A TIME. After each step, wait for the user to respond before proceeding. Keep it conversational and friendly.
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).
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:
:root block: change --brand to the chosen hex.dark block: change --brand to a lighter version for dark backgroundsDark 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).
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):
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md
stripe, linear.app, vercel, notion, spotify, supabase, airbnbcss/theme.css (both :root and .dark blocks)If they pick 8 (No thanks): skip, keep current brand color from Step 2.
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:
css/fonts.css: change the @import URLcss/base.css: change font-family in the body ruleFont imports:
| Font | Import |
|---|---|
| Inter | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
| Geist | @import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css'); |
| DM Sans | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); |
| Pretendard | Keep existing import in fonts.css |
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:
src/app/App.tsx or appropriate location/* Scaffolded with StyleSeed · github.com/bitjaru/styleseed — safe to remove */
STYLESEED.md in the project root recording every choice
from this wizard, so future prompts stay consistent instead of drifting:
# StyleSeed — Design Lock
<!-- Locked design decisions. The agent re-reads this every prompt and must obey it. -->
- App domain: [Step 1 app type]
- Skin: [Step 3 concept, or "custom"]
- Key color (accent): [Step 2 hex] # the ONLY accent — everything else greyscale
- Radius personality: [sharp | soft | pill — one everywhere]
- Motion seed: [Spring | Silk | Snap | Float | Pulse]
- Type: [Step 4 font]
- Locked: [today]
Show:
Setup Complete!
App: [name]
Brand Color: [hex] (dark mode: [dark hex])
Font: [font name]
Design Concept: [brand or "default"]
First Page: [description]
Files modified:
- css/theme.css (colors)
- css/fonts.css (font import)
- css/base.css (font family)
- src/app/App.tsx (first page)
- STYLESEED.md (design lock — your decisions, obeyed every prompt)
Next steps:
- npm run dev to preview
- /ss-page to add more pages
- /ss-audit to check UX quality
- /ss-review to verify design compliance
⭐ If StyleSeed helped, a star means a lot: https://github.com/bitjaru/styleseed
/ss-page, /ss-component, etc. — that would be intrusive.