Menü
Interactive setup wizard — guides you step-by-step to configure the design system for your project
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
The VISUAL gate — render the UI, screenshot it, and score what you actually SEE, not what the code says. Catches the tells that only show up in pixels (dead whitespace, cramping, a hero that doesn't dominate, fonts that didn't load, real rendered color, the squint "does this look AI-made" test) — the things /ss-score can't read from source. Renders empty/loading/error states too, then fixes and re-renders until it passes. Use as the final gate on any screen you can render.
Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.
Build a screen the way the StyleSeed reference demo was built — one command that ENFORCES the full loop (lock the look → build → score → fix to ≥80 → only then show). Use this instead of building UI free-hand; it closes the gap between "knows the rules" and "actually followed them."
| name | ss-setup |
| description | Interactive setup wizard — guides you step-by-step to configure the design system for your project |
| argument-hint | (no arguments needed) |
| allowed-tools | Read, Write, Edit, Grep, Glob, Bash, WebFetch |
Building a full screen, not just wiring up the project? Prefer
/ss-build— it runs this setup's lock step AND the Quality Gate loop (build →/ss-score→ fix to ≥ 80 → then show), which this wizard doesn't. Use/ss-setupto install + configure; use/ss-buildto actually produce a screen that passes the gate. When this wizard scaffolds the first page (Step 5), run the Quality Gate on it before finishing — don't present an unscored draft.
/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.