Design System Forge

推荐访问7w4.net获取更多AI技能。

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

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

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

3. Layout System

   • Grid definition (12-column / 24-column options)
   • Breakpoint system (mobile/tablet/desktop/large)
   • Container specs (max-width / padding / centering)

4. Interaction Specs

   • Animation duration / easing curves
   • Hover / Focus / Active / Disabled states
   • Loading / Empty / Error states

5. Dark Mode Mapping

   • Light/dark value pairs for every token
   • Auto-conversion rules

6. 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)

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.

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

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