[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CTD56ASHEXJZV3DTC0BWWA":3,"skill-same:01M6CTD56ASHEXJZV3DTC0BWWA":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":6,"ownerDescription":60,"updatedAt":61,"install":62,"resources":74},"01M6CTD56ASHEXJZV3DTC0BWWA","design-system",null,"Sets up and applies your visual design: tokens (colors, type, spacing), component guidance and UX patterns. Use when building UI or choosing a design style for the first time.","vibbs\u002Fcompany-os","vibbs","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7379149?v=4","01M6CT6M03CAS1H7RA89F3965B","Vibbs Dod","01M6CT6M4MY60C9FFQ3AAR2RSK",6,"MIT","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Fos\u002Fskills\u002Fdesign-system\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"design","design system","system","review","component","generate","ux","ui","first","use","up","visual design","guidance","patterns","time","visual","2026-11-10 10:12:30",false,"---\nname: design-system\ndescription: \"Sets up and applies your visual design: tokens (colors, type, spacing), component guidance and UX patterns. Use when building UI or choosing a design style for the first time.\"\nruntimes:\n  claude:\n    user-invocable: true\n    argument-hint: \"[generate-tokens | review | reconfigure]\"\n---\n\n# Design System\n\n## Reference\n- **ID**: S-ENG-12\n- **Category**: Engineering\n- **Inputs**: company.config.yaml (design section), standards\u002Fbrand\u002Farchetypes\u002F, standards\u002Fbrand\u002Fux-baseline.md\n- **Outputs**: standards\u002Fbrand\u002Fdesign-tokens.md (project-specific), design guidance for frontend agent\n- **Used by**: Frontend Engineer (sub-agent), User (directly via \u002Fdesign-system)\n- **Tool scripts**: none\n\n## Purpose\n\nProvide consistent visual and UX guidance for all frontend implementation. This skill bridges the gap between \"I picked an archetype\" and \"here are the exact tokens and patterns to use when building this component.\"\n\nThe skill serves three roles:\n1. **Setup**: When no archetype is configured, run the full archetype selection wizard\n2. **Generation**: Produce project-specific design tokens from archetype + user preferences\n3. **Review**: Audit existing UI code for design consistency violations\n\n## When to Use\n\n- **First time**: User runs `\u002Fdesign-system` with no archetype configured → runs selection wizard\n- **Token generation**: User runs `\u002Fdesign-system generate-tokens` → produces standards\u002Fbrand\u002Fdesign-tokens.md\n- **During development**: Frontend agent loads this skill's context before building any UI component\n- **Review**: User runs `\u002Fdesign-system review` → audits codebase for design violations\n- **Reconfigure**: User runs `\u002Fdesign-system reconfigure` → re-runs the archetype selection wizard\n\n## Procedure\n\n### Step 0: Detect Mode\n\nRead `company.config.yaml` → `design.archetype` field.\n\n- If **empty or missing** → run Step 1 (Archetype Selection Wizard)\n- If **set** and argument is `generate-tokens` → run Step 3\n- If **set** and argument is `review` → run Step 4\n- If **set** and argument is `reconfigure` → run Step 1\n- If **set** and no argument → run Step 2 (Provide Guidance)\n\n### Step 1: Archetype Selection Wizard\n\nThis is the setup flow for users configuring their design system for the first time, or reconfiguring. It's the same flow used by `\u002Fsetup` Step 5.7.\n\n#### Question 1: Product Type\n\nAsk: \"What best describes what you're building?\"\n\n| Option | Description |\n|--------|-------------|\n| a) Internal tool \u002F admin panel \u002F data dashboard | Back-office tools, monitoring, operations |\n| b) CRM \u002F ERP \u002F business management system | Record-heavy, relational data, multi-role |\n| c) Knowledge base \u002F wiki \u002F content platform | Documents, articles, structured content |\n| d) Collaborative workspace \u002F real-time editor | Multi-user, canvas or document-based |\n| e) Personal productivity \u002F consumer app | Daily-use, simple flows, personal data |\n| f) Marketing site \u002F creative tool \u002F portfolio | Visual impact, editorial quality, showcase |\n\n#### Question 2: User Priority\n\nAsk: \"What matters most to your users?\"\n\n| Option | Description |\n|--------|-------------|\n| a) Speed and keyboard shortcuts | Power users who live in the app all day |\n| b) Finding and managing lots of records | Navigating large datasets efficiently |\n| c) Focused writing and reading | Minimal distraction, content-first |\n| d) Real-time collaboration | Seeing others' work, shared context |\n| e) Simplicity and calm | Approachable, never overwhelming |\n| f) Visual impact and polish | Premium feel, the product itself impresses |\n\n#### Question 3: Information Density\n\nAsk: \"How much information should users see at once?\"\n\n| Option | Description |\n|--------|-------------|\n| a) As much as possible | Users want density — tables, dashboards, metrics |\n| b) Moderate | Good amount of info without feeling cramped |\n| c) Minimal | One thing at a time, focused and clean |\n\n#### Scoring Matrix\n\nEach answer maps to archetype scores (1-5):\n\n| Answer | Linear | Attio | Notion | Figma | Things3 | Framer |\n|--------|--------|-------|--------|-------|---------|--------|\n| Q1-a | 5 | 4 | 1 | 3 | 1 | 1 |\n| Q1-b | 3 | 5 | 2 | 1 | 1 | 1 |\n| Q1-c | 1 | 1 | 5 | 2 | 3 | 2 |\n| Q1-d | 2 | 2 | 2 | 5 | 1 | 3 |\n| Q1-e | 1 | 1 | 3 | 1 | 5 | 2 |\n| Q1-f | 1 | 1 | 1 | 3 | 2 | 5 |\n| Q2-a | 5 | 3 | 2 | 3 | 1 | 1 |\n| Q2-b | 3 | 5 | 2 | 2 | 1 | 1 |\n| Q2-c | 1 | 1 | 5 | 1 | 4 | 2 |\n| Q2-d | 2 | 2 | 2 | 5 | 1 | 3 |\n| Q2-e | 1 | 1 | 3 | 1 | 5 | 2 |\n| Q2-f | 1 | 2 | 1 | 3 | 2 | 5 |\n| Q3-a | 5 | 4 | 1 | 3 | 1 | 1 |\n| Q3-b | 3 | 3 | 3 | 3 | 3 | 3 |\n| Q3-c | 1 | 1 | 4 | 1 | 5 | 4 |\n\nSum scores across all 3 questions. Present the top 2-3 scoring archetypes.\n\n#### Presentation Format\n\nFor each recommended archetype, display in this format:\n\n```\n### Recommended: \"{Vibe}\" ({Archetype Name} archetype)\nThink: {Reference Products}\n\n  Density:        [{visual bar}] {label}\n  Warmth:         [{visual bar}] {label}\n  Sophistication: [{visual bar}] {label}\n  Interaction:    [{visual bar}] {label}\n\n  {ASCII Preview from archetype file — the wireframe}\n\n  Best for: {best-for list}\n  Not ideal for: {not-great-for summary}\n```\n\n**Key principles for presentation:**\n- Lead with the vibe name and dimension bars, NOT the product name\n- The ASCII wireframe preview is critical — it gives users who don't know the reference products a feel for the layout\n- Product names are \"Think: ...\" hints, not the primary identifier\n- Show \"Best for\" and \"Not ideal for\" so users can self-select\n- If user says \"show all\", display all 6 archetypes\n\n#### After Selection\n\n1. Write `design.archetype` to `company.config.yaml`\n2. Ask: \"Dark mode support?\" → options: auto (follow system) | light (light only) | dark (dark only) | both (user toggle) → write to `design.dark_mode`\n3. Ask: \"UI density preference?\" → options: compact (tight spacing) | comfortable (balanced, default) | spacious (generous whitespace) → write to `design.density`\n4. Confirm selection and suggest: \"Run `\u002Fdesign-system generate-tokens` to produce your project-specific design tokens.\"\n\n### Step 2: Provide Guidance (Default Mode)\n\nWhen the frontend agent is building UI and invokes this skill:\n\n1. Read `design.*` from `company.config.yaml`\n2. Load the archetype file: `standards\u002Fbrand\u002Farchetypes\u002F{archetype}.md`\n3. Load the UX baseline: `standards\u002Fbrand\u002Fux-baseline.md`\n4. If exists, load project tokens: `standards\u002Fbrand\u002Fdesign-tokens.md`\n\nReturn to the frontend agent:\n- The **visual tokens** relevant to the component being built (colors, spacing, typography, radius, shadows)\n- The **UX patterns** relevant to the component type:\n  - Building a table? → archetype's Lists & Tables patterns + UX baseline's loading\u002Fempty\u002Ferror states\n  - Building a form? → archetype's Data Entry patterns + UX baseline's form validation rules\n  - Building navigation? → archetype's Navigation patterns + UX baseline's responsive behavior\n  - Building a modal? → archetype's Progressive Disclosure patterns + UX baseline's keyboard navigation\n- Any **UX baseline rules** that apply (always include empty states, loading states, error handling)\n- Flag any patterns that **conflict with the archetype** (e.g., using a modal in Linear archetype where inline editing is preferred)\n\n### Step 3: Generate Tokens (`\u002Fdesign-system generate-tokens`)\n\nProduce `standards\u002Fbrand\u002Fdesign-tokens.md` by merging:\n\n1. **Base tokens** from the configured archetype file\n2. **Density adjustments**:\n   - `compact`: reduce spacing scale by 25% (e.g., 8px → 6px), reduce row heights by ~4px\n   - `comfortable`: use archetype defaults as-is\n   - `spacious`: increase spacing scale by 25% (e.g., 8px → 10px), increase row heights by ~4px\n3. **Dark mode selection**:\n   - `auto` or `both`: include both light and dark palettes\n   - `light`: include only light palette\n   - `dark`: include only dark palette\n4. **User overrides** from `design.overrides` (e.g., `{ accent: \"#FF6B00\" }` replaces the accent color)\n\nOutput format:\n\n```markdown\n# Design Tokens — {Product Name}\n\nGenerated from: {archetype} archetype\nDensity: {density} | Dark mode: {dark_mode}\nLast generated: {date}\n\n## Colors\n### Light Mode\n(token table from archetype, with any overrides applied)\n\n### Dark Mode\n(token table, if applicable)\n\n## Typography\n(token table)\n\n## Spacing\n(token table, adjusted for density)\n\n## Border Radius\n(token table)\n\n## Shadows\n(token table)\n\n## Icons\n(icon configuration)\n\n## Animation\n(timing tokens)\n\n## CSS Custom Properties\n\nCopy these into your global stylesheet:\n\n\\```css\n:root {\n  \u002F* Colors — Light *\u002F\n  --bg-primary: {value};\n  --bg-surface: {value};\n  ...\n\n  \u002F* Typography *\u002F\n  --font-family: {value};\n  --font-size-base: {value};\n  ...\n\n  \u002F* Spacing *\u002F\n  --space-1: {value};\n  ...\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg-primary: {dark value};\n    ...\n  }\n}\n\\```\n```\n\n### Step 4: Review (`\u002Fdesign-system review`)\n\nAudit existing frontend code for design consistency violations.\n\n#### Checks to Run\n\n1. **Hardcoded colors**: Grep for hex codes (`#[0-9a-fA-F]{3,8}`) in component files (not in token\u002Ftheme files). Flag any that should use design tokens.\n\n2. **Hardcoded spacing**: Grep for pixel values in margin\u002Fpadding (`margin: 17px`, `padding: 5px`) that don't match the spacing scale.\n\n3. **Missing UX baseline patterns**: For each page\u002Fcomponent, check:\n   - Does it handle empty state? (grep for \"empty\", \"no results\", \"no data\" patterns)\n   - Does it handle loading state? (grep for \"skeleton\", \"loading\", \"Suspense\" patterns)\n   - Does it handle error state? (grep for \"error\", \"ErrorBoundary\", \"catch\" patterns)\n\n4. **Typography violations**: Grep for hardcoded font-size values that don't match the type scale.\n\n5. **Touch target size**: Grep for button\u002Finput height values below 44px on interactive elements.\n\n6. **Contrast issues**: Flag any text color + background color combinations that might fail WCAG AA.\n\n#### Report Format\n\n```\n## Design System Review\n\nArchetype: {archetype}\nFiles scanned: {count}\nIssues found: {count}\n\n### Critical (must fix)\n- {file}:{line} — Hardcoded color #FF0000, should use --status-error\n- {file}:{line} — No empty state for user list component\n\n### Warning (should fix)\n- {file}:{line} — Spacing 5px doesn't match spacing scale (nearest: 4px)\n- {file}:{line} — Button height 36px below 44px touch target minimum\n\n### Info (consider)\n- {file}:{line} — Spinner used for content loading, prefer skeleton screen\n```\n\n### Accessibility Baseline\n\nAt `growth`+ stage, include automated accessibility checking:\n- Reference `axe-core` CLI for automated WCAG AA compliance checking\n- Minimum: color contrast ratios (4.5:1 for text, 3:1 for large text), focus indicators, alt text\n- Add to CI pipeline: `npx axe-core \u003Curl>` for automated scanning\n- At `idea`\u002F`mvp`: follow semantic HTML and basic contrast — defer automated tooling\n\n### Step 5: Delight Patterns\n\nWhen building UI components, apply these delight patterns based on the configured archetype's personality. These patterns elevate the product from functional to memorable.\n\n#### Celebration Moments\n- **Milestone achievements**: subtle confetti, checkmark animation, or success illustration when users complete key actions (first project created, 100th entry, goal reached)\n- **Progressive discovery**: animate new feature reveals — slide in a tooltip, pulse a new menu item, fade in an achievement badge\n- **Streak recognition**: acknowledge consistent usage with visual feedback (3-day streak, weekly goal met)\n- Map celebrations to the archetype personality:\n  - Linear\u002FAttio: minimal — brief checkmark animation, muted color flash\n  - Notion\u002FFigma: moderate — icon animation, subtle particle effect\n  - Things3: warm — friendly illustration swap, gentle bounce\n  - Framer: expressive — full confetti, animated illustration, color burst\n\n#### Micro-Interactions\n- **Button feedback**: scale down 2% on press, spring back on release (not just color change)\n- **Toggle animations**: smooth slide with color transition (150-200ms ease-out)\n- **List reorder**: drag item lifts with shadow, other items slide smoothly to make room\n- **Form submission**: button transforms to loading state (width shrinks, spinner appears), then transforms to success state\n- **Hover previews**: cards lift with subtle shadow increase on hover (desktop only)\n- Tie interaction intensity to archetype:\n  - Compact archetypes (Linear, Attio): faster (100-150ms), subtler transforms\n  - Comfortable archetypes (Notion, Things3): medium (150-250ms), noticeable but calm\n  - Expressive archetypes (Figma, Framer): slower (200-350ms), more dramatic transforms\n\n#### Easter Eggs (Optional — growth\u002Fscale stages only)\n- Konami code or specific key sequence reveals a fun detail\n- Hidden interaction on a specific UI element (e.g., click logo 5 times)\n- Seasonal or event-based temporary delight (holiday theme, launch anniversary)\n- Stage-aware: **skip entirely** in `idea` and `mvp` stages — focus on core UX first\n\n#### Shareable Moments\n- **Screenshot-worthy states**: ensure key achievements render well when screenshotted (clean layout, readable text, product branding visible)\n- **OG meta tags**: for any shareable URL, include Open Graph title, description, and image so shared links preview well on social platforms\n- **Export-ready views**: charts, reports, and dashboards should have a \"clean\" mode that removes navigation chrome for screenshots\u002Fexports\n\n#### Sound Design (Optional)\n- Audio feedback for key actions: send, complete, error, notification\n- Always respect user preference: mute by default, opt-in via settings\n- Keep sounds under 500ms, subtle, and non-intrusive\n- Match sound personality to archetype (mechanical clicks for Linear, soft chimes for Things3)\n\n## Auto-Extract Heuristics\n\nWhen the setup wizard runs in auto-extract mode (from URL or text), use these keywords to suggest an archetype:\n\n| Keywords in Description | Suggested Archetype |\n|------------------------|-------------------|\n| admin, dashboard, management, internal, operations, monitoring | Linear |\n| CRM, contacts, leads, records, customers, inventory, ERP, school | Attio |\n| docs, wiki, knowledge, articles, notes, writing, learning, course | Notion |\n| collaboration, real-time, whiteboard, canvas, editor, analytics | Figma |\n| personal, simple, consumer, wellness, health, finance, habit, journal | Things 3 |\n| marketing, creative, portfolio, landing, brand, visual, showcase | Framer |\n\nIf multiple keywords match different archetypes, prefer the one with the most keyword hits. If tied, fall back to the 3-question wizard.\n\n## Graceful Degradation\n\nIf `design.archetype` is not configured and the skill is invoked by the frontend agent (not directly by user):\n1. Warn: \"No design archetype configured. UI will use safe defaults.\"\n2. Fall back to **Things 3** archetype (safest default — warm, accessible, works for any product)\n3. Add a note to the component: \"\u003C!-- TODO: Configure design archetype with \u002Fdesign-system -->\"\n4. Still apply the full UX baseline (empty states, loading, errors, etc.)\n\n## Express Mode Template\n\nFor `\u002Fsetup` express mode, add this section to the config block:\n\n```\n## Design\n- Archetype: linear | attio | notion | figma | things3 | framer\n- Dark Mode: auto | light | dark | both\n- Density: compact | comfortable | spacious\n```\n\n## Quality Checklist\n\n- [ ] Celebration moments mapped to archetype personality\n- [ ] Micro-interactions specified for interactive elements (buttons, toggles, forms)\n- [ ] Shareable moments include OG meta tags and screenshot-worthy states\n","# Design System\n\n## Reference\n- **ID**: S-ENG-12\n- **Category**: Engineering\n- **Inputs**: company.config.yaml (design section), standards\u002Fbrand\u002Farchetypes\u002F, standards\u002Fbrand\u002Fux-baseline.md\n- **Outputs**: standards\u002Fbrand\u002Fdesign-tokens.md (project-specific), design guidance for frontend agent\n- **Used by**: Frontend Engineer (sub-agent), User (directly via \u002Fdesign-system)\n- **Tool scripts**: none\n\n## Purpose\n\nProvide consistent visual and UX guidance for all frontend implementation. This skill bridges the gap between \"I picked an archetype\" and \"here are the exact tokens and patterns to use when building this component.\"\n\nThe skill serves three roles:\n1. **Setup**: When no archetype is configured, run the full archetype selection wizard\n2. **Generation**: Produce project-specific design tokens from archetype + user preferences\n3. **Review**: Audit existing UI code for design consistency violations\n\n## When to Use\n\n- **First time**: User runs `\u002Fdesign-system` with no archetype configured → runs selection wizard\n- **Token generation**: User runs `\u002Fdesign-system generate-tokens` → produces standards\u002Fbrand\u002Fdesign-tokens.md\n- **During development**: Frontend agent loads this skill's context before building any UI component\n- **Review**: User runs `\u002Fdesign-system review` → audits codebase for design violations\n- **Reconfigure**: User runs `\u002Fdesign-system reconfigure` → re-runs the archetype selection wizard\n\n## Procedure\n\n### Step 0: Detect Mode\n\nRead `company.config.yaml` → `design.archetype` field.\n\n- If **empty or missing** → run Step 1 (Archetype Selection Wizard)\n- If **set** and argument is `generate-tokens` → run Step 3\n- If **set** and argument is `review` → run Step 4\n- If **set** and argument is `reconfigure` → run Step 1\n- If **set** and no argument → run Step 2 (Provide Guidance)\n\n### Step 1: Archetype Selection Wizard\n\nThis is the setup flow for users configuring their design system for the first time, or reconfiguring. It's the same flow used by `\u002Fsetup` Step 5.7.\n\n#### Question 1: Product Type\n\nAsk: \"What best describes what you're building?\"\n\n| Option | Description |\n|--------|-------------|\n| a) Internal tool \u002F admin panel \u002F data dashboard | Back-office tools, monitoring, operations |\n| b) CRM \u002F ERP \u002F business management system | Record-heavy, relational data, multi-role |\n| c) Knowledge base \u002F wiki \u002F content platform | Documents, articles, structured content |\n| d) Collaborative workspace \u002F real-time editor | Multi-user, canvas or document-based |\n| e) Personal productivity \u002F consumer app | Daily-use, simple flows, personal data |\n| f) Marketing site \u002F creative tool \u002F portfolio | Visual impact, editorial quality, showcase |\n\n#### Question 2: User Priority\n\nAsk: \"What matters most to your users?\"\n\n| Option | Description |\n|--------|-------------|\n| a) Speed and keyboard shortcuts | Power users who live in the app all day |\n| b) Finding and managing lots of records | Navigating large datasets efficiently |\n| c) Focused writing and reading | Minimal distraction, content-first |\n| d) Real-time collaboration | Seeing others' work, shared context |\n| e) Simplicity and calm | Approachable, never overwhelming |\n| f) Visual impact and polish | Premium feel, the product itself impresses |\n\n#### Question 3: Information Density\n\nAsk: \"How much information should users see at once?\"\n\n| Option | Description |\n|--------|-------------|\n| a) As much as possible | Users want density — tables, dashboards, metrics |\n| b) Moderate | Good amount of info without feeling cramped |\n| c) Minimal | One thing at a time, focused and clean |\n\n#### Scoring Matrix\n\nEach answer maps to archetype scores (1-5):\n\n| Answer | Linear | Attio | Notion | Figma | Things3 | Framer |\n|--------|--------|-------|--------|-------|---------|--------|\n| Q1-a | 5 | 4 | 1 | 3 | 1 | 1 |\n| Q1-b | 3 | 5 | 2 | 1 | 1 | 1 |\n| Q1-c | 1 | 1 | 5 | 2 | 3 | 2 |\n| Q1-d | 2 | 2 | 2 | 5 | 1 | 3 |\n| Q1-e | 1 | 1 | 3 | 1 | 5 | 2 |\n| Q1-f | 1 | 1 | 1 | 3 | 2 | 5 |\n| Q2-a | 5 | 3 | 2 | 3 | 1 | 1 |\n| Q2-b | 3 | 5 | 2 | 2 | 1 | 1 |\n| Q2-c | 1 | 1 | 5 | 1 | 4 | 2 |\n| Q2-d | 2 | 2 | 2 | 5 | 1 | 3 |\n| Q2-e | 1 | 1 | 3 | 1 | 5 | 2 |\n| Q2-f | 1 | 2 | 1 | 3 | 2 | 5 |\n| Q3-a | 5 | 4 | 1 | 3 | 1 | 1 |\n| Q3-b | 3 | 3 | 3 | 3 | 3 | 3 |\n| Q3-c | 1 | 1 | 4 | 1 | 5 | 4 |\n\nSum scores across all 3 questions. Present the top 2-3 scoring archetypes.\n\n#### Presentation Format\n\nFor each recommended archetype, display in this format:\n\n```\n### Recommended: \"{Vibe}\" ({Archetype Name} archetype)\nThink: {Reference Products}\n\n  Density:        [{visual bar}] {label}\n  Warmth:         [{visual bar}] {label}\n  Sophistication: [{visual bar}] {label}\n  Interaction:    [{visual bar}] {label}\n\n  {ASCII Preview from archetype file — the wireframe}\n\n  Best for: {best-for list}\n  Not ideal for: {not-great-for summary}\n```\n\n**Key principles for presentation:**\n- Lead with the vibe name and dimension bars, NOT the product name\n- The ASCII wireframe preview is critical — it gives users who don't know the reference products a feel for the layout\n- Product names are \"Think: ...\" hints, not the primary identifier\n- Show \"Best for\" and \"Not ideal for\" so users can self-select\n- If user says \"show all\", display all 6 archetypes\n\n#### After Selection\n\n1. Write `design.archetype` to `company.config.yaml`\n2. Ask: \"Dark mode support?\" → options: auto (follow system) | light (light only) | dark (dark only) | both (user toggle) → write to `design.dark_mode`\n3. Ask: \"UI density preference?\" → options: compact (tight spacing) | comfortable (balanced, default) | spacious (generous whitespace) → write to `design.density`\n4. Confirm selection and suggest: \"Run `\u002Fdesign-system generate-tokens` to produce your project-specific design tokens.\"\n\n### Step 2: Provide Guidance (Default Mode)\n\nWhen the frontend agent is building UI and invokes this skill:\n\n1. Read `design.*` from `company.config.yaml`\n2. Load the archetype file: `standards\u002Fbrand\u002Farchetypes\u002F{archetype}.md`\n3. Load the UX baseline: `standards\u002Fbrand\u002Fux-baseline.md`\n4. If exists, load project tokens: `standards\u002Fbrand\u002Fdesign-tokens.md`\n\nReturn to the frontend agent:\n- The **visual tokens** relevant to the component being built (colors, spacing, typography, radius, shadows)\n- The **UX patterns** relevant to the component type:\n  - Building a table? → archetype's Lists & Tables patterns + UX baseline's loading\u002Fempty\u002Ferror states\n  - Building a form? → archetype's Data Entry patterns + UX baseline's form validation rules\n  - Building navigation? → archetype's Navigation patterns + UX baseline's responsive behavior\n  - Building a modal? → archetype's Progressive Disclosure patterns + UX baseline's keyboard navigation\n- Any **UX baseline rules** that apply (always include empty states, loading states, error handling)\n- Flag any patterns that **conflict with the archetype** (e.g., using a modal in Linear archetype where inline editing is preferred)\n\n### Step 3: Generate Tokens (`\u002Fdesign-system generate-tokens`)\n\nProduce `standards\u002Fbrand\u002Fdesign-tokens.md` by merging:\n\n1. **Base tokens** from the configured archetype file\n2. **Density adjustments**:\n   - `compact`: reduce spacing scale by 25% (e.g., 8px → 6px), reduce row heights by ~4px\n   - `comfortable`: use archetype defaults as-is\n   - `spacious`: increase spacing scale by 25% (e.g., 8px → 10px), increase row heights by ~4px\n3. **Dark mode selection**:\n   - `auto` or `both`: include both light and dark palettes\n   - `light`: include only light palette\n   - `dark`: include only dark palette\n4. **User overrides** from `design.overrides` (e.g., `{ accent: \"#FF6B00\" }` replaces the accent color)\n\nOutput format:\n\n```markdown\n# Design Tokens — {Product Name}\n\nGenerated from: {archetype} archetype\nDensity: {density} | Dark mode: {dark_mode}\nLast generated: {date}\n\n## Colors\n### Light Mode\n(token table from archetype, with any overrides applied)\n\n### Dark Mode\n(token table, if applicable)\n\n## Typography\n(token table)\n\n## Spacing\n(token table, adjusted for density)\n\n## Border Radius\n(token table)\n\n## Shadows\n(token table)\n\n## Icons\n(icon configuration)\n\n## Animation\n(timing tokens)\n\n## CSS Custom Properties\n\nCopy these into your global stylesheet:\n\n\\```css\n:root {\n  \u002F* Colors — Light *\u002F\n  --bg-primary: {value};\n  --bg-surface: {value};\n  ...\n\n  \u002F* Typography *\u002F\n  --font-family: {value};\n  --font-size-base: {value};\n  ...\n\n  \u002F* Spacing *\u002F\n  --space-1: {value};\n  ...\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg-primary: {dark value};\n    ...\n  }\n}\n\\```\n```\n\n### Step 4: Review (`\u002Fdesign-system review`)\n\nAudit existing frontend code for design consistency violations.\n\n#### Checks to Run\n\n1. **Hardcoded colors**: Grep for hex codes (`#[0-9a-fA-F]{3,8}`) in component files (not in token\u002Ftheme files). Flag any that should use design tokens.\n\n2. **Hardcoded spacing**: Grep for pixel values in margin\u002Fpadding (`margin: 17px`, `padding: 5px`) that don't match the spacing scale.\n\n3. **Missing UX baseline patterns**: For each page\u002Fcomponent, check:\n   - Does it handle empty state? (grep for \"empty\", \"no results\", \"no data\" patterns)\n   - Does it handle loading state? (grep for \"skeleton\", \"loading\", \"Suspense\" patterns)\n   - Does it handle error state? (grep for \"error\", \"ErrorBoundary\", \"catch\" patterns)\n\n4. **Typography violations**: Grep for hardcoded font-size values that don't match the type scale.\n\n5. **Touch target size**: Grep for button\u002Finput height values below 44px on interactive elements.\n\n6. **Contrast issues**: Flag any text color + background color combinations that might fail WCAG AA.\n\n#### Report Format\n\n```\n## Design System Review\n\nArchetype: {archetype}\nFiles scanned: {count}\nIssues found: {count}\n\n### Critical (must fix)\n- {file}:{line} — Hardcoded color #FF0000, should use --status-error\n- {file}:{line} — No empty state for user list component\n\n### Warning (should fix)\n- {file}:{line} — Spacing 5px doesn't match spacing scale (nearest: 4px)\n- {file}:{line} — Button height 36px below 44px touch target minimum\n\n### Info (consider)\n- {file}:{line} — Spinner used for content loading, prefer skeleton screen\n```\n\n### Accessibility Baseline\n\nAt `growth`+ stage, include automated accessibility checking:\n- Reference `axe-core` CLI for automated WCAG AA compliance checking\n- Minimum: color contrast ratios (4.5:1 for text, 3:1 for large text), focus indicators, alt text\n- Add to CI pipeline: `npx axe-core \u003Curl>` for automated scanning\n- At `idea`\u002F`mvp`: follow semantic HTML and basic contrast — defer automated tooling\n\n### Step 5: Delight Patterns\n\nWhen building UI components, apply these delight patterns based on the configured archetype's personality. These patterns elevate the product from functional to memorable.\n\n#### Celebration Moments\n- **Milestone achievements**: subtle confetti, checkmark animation, or success illustration when users complete key actions (first project created, 100th entry, goal reached)\n- **Progressive discovery**: animate new feature reveals — slide in a tooltip, pulse a new menu item, fade in an achievement badge\n- **Streak recognition**: acknowledge consistent usage with visual feedback (3-day streak, weekly goal met)\n- Map celebrations to the archetype personality:\n  - Linear\u002FAttio: minimal — brief checkmark animation, muted color flash\n  - Notion\u002FFigma: moderate — icon animation, subtle particle effect\n  - Things3: warm — friendly illustration swap, gentle bounce\n  - Framer: expressive — full confetti, animated illustration, color burst\n\n#### Micro-Interactions\n- **Button feedback**: scale down 2% on press, spring back on release (not just color change)\n- **Toggle animations**: smooth slide with color transition (150-200ms ease-out)\n- **List reorder**: drag item lifts with shadow, other items slide smoothly to make room\n- **Form submission**: button transforms to loading state (width shrinks, spinner appears), then transforms to success state\n- **Hover previews**: cards lift with subtle shadow increase on hover (desktop only)\n- Tie interaction intensity to archetype:\n  - Compact archetypes (Linear, Attio): faster (100-150ms), subtler transforms\n  - Comfortable archetypes (Notion, Things3): medium (150-250ms), noticeable but calm\n  - Expressive archetypes (Figma, Framer): slower (200-350ms), more dramatic transforms\n\n#### Easter Eggs (Optional — growth\u002Fscale stages only)\n- Konami code or specific key sequence reveals a fun detail\n- Hidden interaction on a specific UI element (e.g., click logo 5 times)\n- Seasonal or event-based temporary delight (holiday theme, launch anniversary)\n- Stage-aware: **skip entirely** in `idea` and `mvp` stages — focus on core UX first\n\n#### Shareable Moments\n- **Screenshot-worthy states**: ensure key achievements render well when screenshotted (clean layout, readable text, product branding visible)\n- **OG meta tags**: for any shareable URL, include Open Graph title, description, and image so shared links preview well on social platforms\n- **Export-ready views**: charts, reports, and dashboards should have a \"clean\" mode that removes navigation chrome for screenshots\u002Fexports\n\n#### Sound Design (Optional)\n- Audio feedback for key actions: send, complete, error, notification\n- Always respect user preference: mute by default, opt-in via settings\n- Keep sounds under 500ms, subtle, and non-intrusive\n- Match sound personality to archetype (mechanical clicks for Linear, soft chimes for Things3)\n\n## Auto-Extract Heuristics\n\nWhen the setup wizard runs in auto-extract mode (from URL or text), use these keywords to suggest an archetype:\n\n| Keywords in Description | Suggested Archetype |\n|------------------------|-------------------|\n| admin, dashboard, management, internal, operations, monitoring | Linear |\n| CRM, contacts, leads, records, customers, inventory, ERP, school | Attio |\n| docs, wiki, knowledge, articles, notes, writing, learning, course | Notion |\n| collaboration, real-time, whiteboard, canvas, editor, analytics | Figma |\n| personal, simple, consumer, wellness, health, finance, habit, journal | Things 3 |\n| marketing, creative, portfolio, landing, brand, visual, showcase | Framer |\n\nIf multiple keywords match different archetypes, prefer the one with the most keyword hits. If tied, fall back to the 3-question wizard.\n\n## Graceful Degradation\n\nIf `design.archetype` is not configured and the skill is invoked by the frontend agent (not directly by user):\n1. Warn: \"No design archetype configured. UI will use safe defaults.\"\n2. Fall back to **Things 3** archetype (safest default — warm, accessible, works for any product)\n3. Add a note to the component: \"\u003C!-- TODO: Configure design archetype with \u002Fdesign-system -->\"\n4. Still apply the full UX baseline (empty states, loading, errors, etc.)\n\n## Express Mode Template\n\nFor `\u002Fsetup` express mode, add this section to the config block:\n\n```\n## Design\n- Archetype: linear | attio | notion | figma | things3 | framer\n- Dark Mode: auto | light | dark | both\n- Density: compact | comfortable | spacious\n```\n\n## Quality Checklist\n\n- [ ] Celebration moments mapped to archetype personality\n- [ ] Micro-interactions specified for interactive elements (buttons, toggles, forms)\n- [ ] Shareable moments include OG meta tags and screenshot-worthy states\n",{"name":5,"runtimes":50,"description":7},{"claude":51},{"argument-hint":52,"user-invocable":53},"[generate-tokens | review | reconfigure]",true,"main","e842fb6d0e04360c47db78bc2e2e2987314d64d4","os\u002Fskills\u002Fdesign-system",2,"https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os","https:\u002F\u002Fgithub.com\u002Fvibbs","Principal Engineer · Applied AI · building ArcAI @ GrowthArc","2026-10-21 02:08:08",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":53},[64,67,70],{"tool":65,"command":66},"npx","npx skills add vibbs\u002Fcompany-os --skill design-system",{"tool":68,"command":69},"bunx","bunx skills add vibbs\u002Fcompany-os --skill design-system",{"tool":71,"command":72},"pnpm","pnpm dlx skills add vibbs\u002Fcompany-os --skill design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Fos\u002Fskills\u002Fdesign-system\u002FSKILL.md",[],[76,85,93,103,119,135],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":45},"01M6CTHBW1E64ECYGD105N4S5E","typo-field","Fixture skill with a misspelled top-level field.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskills\u002Ftypo-field\u002FSKILL.md",[],[83,84],"typo field","fixture skill",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":45},"01M6CTHABTV8FKVDHFMMKPAV51","spaced-comments","Fixture skill with comments and spaces after block keys.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskills\u002Fspaced-comments\u002FSKILL.md",[],[92,84],"spaced comments",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":45},"01M6CTH8MHC14KB65ZDHYBJW1N","crlf-comments","Fixture skill with Windows line endings.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskills\u002Fcrlf-comments\u002FSKILL.md",[],[100,101,102,84],"crlf comments","CRLF","windows",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":45},"01M6CTH6TBKTDP9G8QB1Z2K0TY","claude-fields","Fixture skill using top-level fields Claude Code documents.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskills\u002Fclaude-fields\u002FSKILL.md",[],[110,111,112,113,114,115,84,116,117,118],"claude fields","explore","documents","src","grep","read","Bash","code","testing",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":128,"publishedAt":45},"01M6CTH46BGKXH80RWS876Y2CW","workflow-router","Maps an objective to the artifacts, stages and agents it needs. Use when deciding what happens next or which agents to involve.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Fos\u002Fskills\u002Fworkflow-router\u002FSKILL.md",[125],{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[129,130,131,132,133,38,134],"workflow","router","workflow router","next","maps","artifacts",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":45},"01M6CTH27653SRVP2FMEQN3J5B","weekly-review","Summarizes your week: what shipped, AI spend, support themes, security health and next priorities. Use at the end of each week.","https:\u002F\u002Fgithub.com\u002Fvibbs\u002Fcompany-os\u002Fblob\u002Fmain\u002Fos\u002Fskills\u002Fweekly-review\u002FSKILL.md",[],[142,32,143,132,38,144,145,146,147],"weekly review","priorities","health","save","support","security"]