ChonSong
ChonSong/skill-retriever
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ChonSong/skill-retriever --skill ui-setup命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
AI-powered Draw.io diagram generation with real-time browser preview. Create flowcharts, architecture diagrams, sequence diagrams, and cloud infrastructure diagrams (AWS/GCP/Azure) using natural language. Supports animated connectors, real-time editing, and structured A–H format extraction from text or images.
Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketing, HR, and customer success. Takes PRD to fully deployed, revenue-generating product with zero human intervention. Features Task tool for subagent dispatch, parallel code review with 3 specialized reviewers, severity-based issue triage, distributed task queue with dead letter handling, automatic deployment to cloud providers, A/B testing, customer feedback loops, incident response, circuit breakers, and self-healing. Handles rate limits via distributed state checkpoints and auto-resume with exponential backoff. Requires --dangerously-skip-permissions flag.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this,"...
基于 SOC 职业分类
正在显示 SKILL.md
| 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.