name: design-system-forge-en slug: design-system-forge-en version: 1.0.1 displayName: "Design System Forge" description: "Build complete design systems from scratch: Design Tokens (colors/fonts/spacing/radius/shadows), component library specs (buttons/forms/cards/navs/tables/modals), layout grid system, responsive breakpoints, dark mode, design audit checklist. Production-ready design assets ready for development." tags: ["design-system", "ui-design", "design-tokens", "component-library", "css", "frontend"] category: "design" author: leilei homepage: ""

Design System Forge

Trigger Words

design system, design spec, UI spec, component library, Design Token, color system, component spec, layout system, responsive design, dark mode, design audit, style guide

Capabilities

Not just a design guide document — forge a complete, production-ready design system asset including tokens, components, layouts, and interaction specifications.

Deliverables

1. Complete Design Token Definition
2. Color tokens (primary/neutral/semantic/gradients) — with values, usage, accessibility contrast ratios
3. Font tokens (size/weight/line-height/letter-spacing) — with typography scale
4. Spacing tokens (base unit/derived spacing) — 8px grid system
5. Radius tokens (4 levels small to large)

6. Shadow tokens (elevation layers)

7. Component Specification Library

8. Basic: Button / Input / Select / Checkbox / Radio / Switch / Toggle
9. Data Display: Table / Card / List / Badge / Avatar / Tooltip
10. Navigation: Nav / Breadcrumb / Tabs / Pagination / Sidebar
11. Feedback: Modal / Toast / Alert / Progress / Skeleton

12. Layout: Container / Grid / Stack / Divider

13. Layout System

14. Grid definition (12-column / 24-column options)
15. Breakpoint system (mobile/tablet/desktop/large)

16. Container specs (max-width / padding / centering)

17. Interaction Specs

18. Animation duration / easing curves
19. Hover / Focus / Active / Disabled states

20. Loading / Empty / Error states

21. Dark Mode Mapping

22. Light/dark value pairs for every token

23. Auto-conversion rules

24. Design Audit Checklist

25. Per-item compliance check for new components/pages against the system

Workflows

Mode A: Create From Scratch

Input: Brand colors / industry / target platform / tech stack
Output: Complete design system doc (Tokens + Components + Layout + Interactions)

1. Collect brand elements (logo colors / accent colors / font preferences)
2. Derive complete Token system
3. Define all component styles based on Tokens
4. Generate layout and responsive rules
5. Output audit checklist

Mode B: Audit Existing Design

Input: Design screenshot or code
Output: Compliance report + improvement suggestions

1. Check each item against design system specs
2. List non-compliant items (down to property level)
3. Provide fix suggestions with priority

Mode C: Extend Existing System

Input: Existing design system + new requirements
Output: Incremental update (new tokens / new components / new rules)

Token Output Format

Standard JSON format, usable with CSS variables / Tailwind Config / Style Dictionary:

{
  "color": {
    "primary": { "value": "#3B82F6", "comment": "Primary blue" },
    "primary-hover": { "value": "#2563EB", "comment": "Primary hover" },
    "success": { "value": "#10B981", "comment": "Success green" },
    "warning": { "value": "#F59E0B", "comment": "Warning amber" },
    "error": { "value": "#EF4444", "comment": "Error red" }
  },
  "spacing": {
    "base": { "value": "4px", "comment": "Base unit" },
    "xs": { "value": "4px", "comment": "Extra small" },
    "sm": { "value": "8px", "comment": "Small" },
    "md": { "value": "16px", "comment": "Medium" },
    "lg": { "value": "24px", "comment": "Large" },
    "xl": { "value": "32px", "comment": "Extra large" }
  }
}

Component Spec Template

Each component includes:

### Button
- **Variants**: primary / secondary / ghost / danger / link
- **Sizes**: sm / md / lg
- **States**: default / hover / focus / active / disabled / loading
- **With Icon**: left-icon / right-icon / icon-only
- **Spacing**: padding horizontal 16-24px, vertical 8-12px
- **Border Radius**: radius-md (from token)
- **Accessibility**: minimum touch target 44x44px, contrast ratio >= 4.5:1

Layout Hard Standards (Non-Negotiable)

1. Column widths must not truncate content; add horizontal scrollbar if needed
2. Module spacing with breathing room: dividers + 8-12px gaps between areas/cards; line height >= 40px
3. Clearly clickable buttons: independent, spaced >= 8px, adequate touch area
4. Multi-resolution responsive: self-check at 1920x1080 / 1600x900 / 1366x768 / 1280x720
5. Pre-delivery mandatory check: simulate 20+ data items, verify no truncation/crowding/broken layout at all resolutions

Acceptance: Any layout issue like stacking/truncation/poor aesthetics = rejected for rework.

發現更多技能外掛，請訪問7w4.net。

個人創作者計費通道上線後直接升級計費

這個 Skill 質量中上，功能覆蓋面廣，從設計令牌到元件庫再到佈局系統都有涉及，工作流程清晰，適合需要系統化設計資產的開發者。但它更像一份大綱而非完整解決方案，缺少實際案例參考，某些細節（如動畫時長、狀態行為）描述不夠具體。對於想要快速上手的新手來說，抽象的概念較多，實際可用的示例較少。建議期望深度使用前先確認其輸出是否能滿足專案具體需求。