📖 技能介绍

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

Complete Design Token Definition
Color tokens (primary/neutral/semantic/gradients) — with values, usage, accessibility contrast ratios
Font tokens (size/weight/line-height/letter-spacing) — with typography scale
Spacing tokens (base unit/derived spacing) — 8px grid system
Radius tokens (4 levels small to large)
Shadow tokens (elevation layers)
Component Specification Library
Basic: Button / Input / Select / Checkbox / Radio / Switch / Toggle
Data Display: Table / Card / List / Badge / Avatar / Tooltip
Navigation: Nav / Breadcrumb / Tabs / Pagination / Sidebar
Feedback: Modal / Toast / Alert / Progress / Skeleton
Layout: Container / Grid / Stack / Divider
Layout System
Grid definition (12-column / 24-column options)
Breakpoint system (mobile/tablet/desktop/large)
Container specs (max-width / padding / centering)
Interaction Specs
Animation duration / easing curves
Hover / Focus / Active / Disabled states
Loading / Empty / Error states
Dark Mode Mapping
Light/dark value pairs for every token
Auto-conversion rules
Design Audit Checklist
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)

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

Mode B: Audit Existing Design

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

Check each item against design system specs
List non-compliant items (down to property level)
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)

Column widths must not truncate content; add horizontal scrollbar if needed
Module spacing with breathing room: dividers + 8-12px gaps between areas/cards; line height >= 40px
Clearly clickable buttons: independent, spaced >= 8px, adequate touch area
Multi-resolution responsive: self-check at 1920x1080 / 1600x900 / 1366x768 / 1280x720
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.

个人创作者计费通道上线后直接升级计费

🤖 AI 评测

这个 Skill 质量中上，功能覆盖面广，从设计令牌到组件库再到布局系统都有涉及，工作流程清晰，适合需要系统化设计资产的开发者。但它更像一份大纲而非完整解决方案，缺少实际案例参考，某些细节（如动画时长、状态行为）描述不够具体。对于想要快速上手的新手来说，抽象的概念较多，实际可用的示例较少。建议期望深度使用前先确认其输出是否能满足项目具体需求。