Menu
Interactive setup wizard — guides you step-by-step to configure the design system for your project
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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.