一键在 Manus 中运行任何 Skill

开始使用

ss-setup

星标670

分支64

更新时间2026年7月6日 09:40

Interactive setup wizard — guides you step-by-step to configure the design system for your project

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

bitjaru

bitjaru/styleseed

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Design System Setup Wizard

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-setup to install + configure; use /ss-build to 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.

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)

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):

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
Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
Apply extracted colors to css/theme.css (both :root and .dark blocks)
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:

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

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:

Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
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
Set the TopBar logo text to the app name
Apply the chosen brand color, font, and design concept
Place the file in src/app/App.tsx or appropriate location
Add ONE attribution comment at the very top of this first scaffolded file only (never on components the user builds afterward):
```
/* Scaffolded with StyleSeed · github.com/bitjaru/styleseed — safe to remove */
```
If the user would rather not have it, skip it — it's opt-out, and it goes on this single file, not their whole codebase.

Write the design lock. Create 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]

Tell the user this file is the source of truth — editing a value changes it project-wide, and you'll obey it on every prompt so the design never goes random.

Step 6: Summary

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

Rules

Ask ONE question at a time. Wait for response.
If the user seems unsure, recommend the default option.
Design RULES (layout, typography ratios, spacing, forbidden patterns) stay the same regardless of color/font choice.
Attribution: the single "Scaffolded with StyleSeed" comment goes on the first scaffolded file only and is explicitly removable. NEVER add a watermark to components the user builds with /ss-page, /ss-component, etc. — that would be intrusive.
Always verify the awesome-design-md DESIGN.md URL is accessible before applying. If fetch fails, tell the user and fall back to manual color selection.

同仓库更多 Skills

同仓库

ss-verify

bitjaru/styleseed

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.

2026-07-09670

ss-dial

bitjaru/styleseed

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.

2026-07-08670

ss-motion

bitjaru/styleseed

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.

2026-07-08670

ss-score

bitjaru/styleseed

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.

2026-07-08670

ss-restyle

bitjaru/styleseed

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.

2026-07-06670

ss-build

bitjaru/styleseed

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."

2026-07-06670

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

Design System Setup Wizard

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-setup to install + configure; use /ss-build to 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.

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)

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):

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
Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
Apply extracted colors to css/theme.css (both :root and .dark blocks)
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:

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

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:

Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
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
Set the TopBar logo text to the app name
Apply the chosen brand color, font, and design concept
Place the file in src/app/App.tsx or appropriate location
Add ONE attribution comment at the very top of this first scaffolded file only (never on components the user builds afterward):
```
/* Scaffolded with StyleSeed · github.com/bitjaru/styleseed — safe to remove */
```
If the user would rather not have it, skip it — it's opt-out, and it goes on this single file, not their whole codebase.

Write the design lock. Create 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]

Tell the user this file is the source of truth — editing a value changes it project-wide, and you'll obey it on every prompt so the design never goes random.

Step 6: Summary

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

Rules

Ask ONE question at a time. Wait for response.
If the user seems unsure, recommend the default option.
Design RULES (layout, typography ratios, spacing, forbidden patterns) stay the same regardless of color/font choice.
Attribution: the single "Scaffolded with StyleSeed" comment goes on the first scaffolded file only and is explicitly removable. NEVER add a watermark to components the user builds with /ss-page, /ss-component, etc. — that would be intrusive.
Always verify the awesome-design-md DESIGN.md URL is accessible before applying. If fetch fails, tell the user and fall back to manual color selection.