极简设计系统专业版为企业与专业团队提供系统化的极简现代主义设计系统解决方案。在免费版核心设计令牌之上,PRO版增加完整组件库、多主题切换、设计系统文档自动生成、设计审计与CI/CD集成能力,满足企业级设计系统的全面需求。

PRO版完全兼容免费版,可直接继承免费版的设计令牌与Tailwind配置,并在此基础上扩展为完整的设计系统。

核心能力

完整企业级组件库

component_library = {
    "buttons": ["primary", "secondary", "ghost", "icon", "fab", "loading"],
    "cards": ["basic", "media", "interactive", "pricing", "testimonial", "feature"],
    "forms": ["input", "textarea", "select", "checkbox", "radio", "toggle", "slider", "datepicker"],
    "navigation": ["breadcrumb", "pagination", "tabs", "stepper", "navbar", "sidebar"],
    "feedback": ["alert", "toast", "modal", "dialog", "progress", "skeleton", "spinner"],
    "data_display": ["table", "timeline", "accordion", "badge", "chip", "avatar", "tooltip"],
    "layout": ["container", "grid", "stack", "divider", "spacer"],
    "overlay": ["dropdown", "popover", "context-menu", "drawer"]
}

python3 generate_components.py 
  --config components.yml 
  --output ./components/ 
  --with-docs 
  --with-tests 
  --with-stories

输入: 用户提供完整企业级组件库所需的指令和必要参数。 处理: 按照skill规范执行完整企业级组件库操作,遵循单一意图原则。 输出: 返回完整企业级组件库的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

多主题系统

详细代码示例已移至 references/detail.md

输入: 用户提供多主题系统所需的指令和必要参数。 处理: 按照skill规范执行多主题系统操作,遵循单一意图原则。 输出: 返回多主题系统的执行结果,包含操作状态和输出数据。

设计令牌多平台导出

export_config = {
    "source": "design-tokens.yml",
    "formats": [
        {"name": "css_variables", "output": "tokens.css"},
        {"name": "tailwind_config", "output": "tailwind.config.js"},
        {"name": "figma_tokens", "output": "figma-tokens.json"},
        {"name": "scss_variables", "output": "_tokens.scss"},
        {"name": "json", "output": "tokens.json"},
        {"name": "android_xml", "output": "colors.xml"},
        {"name": "ios_swift", "output": "Tokens.swift"}
    ]
}

python3 export_tokens.py --config export_config

输入: 用户提供设计令牌多平台导出所需的指令和必要参数。 处理: 按照skill规范执行设计令牌多平台导出操作,遵循单一意图原则。 输出: 返回设计令牌多平台导出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

设计系统文档自动生成

doc_config = {
    "sections": [
        {"name": "设计原则", "source": "principles.md"},
        {"name": "色彩系统", "source": "colors.yml", "auto_examples": True},
        {"name": "字体系统", "source": "typography.yml", "auto_examples": True},
        {"name": "间距系统", "source": "spacing.yml", "auto_examples": True},
        {"name": "阴影系统", "source": "shadows.yml", "auto_examples": True},
        {"name": "组件库", "source": "components/", "auto_docs": True},
        {"name": "使用规范", "source": "guidelines.md"},
        {"name": "代码示例", "source": "examples/", "auto_extract": True}
    ],
    "output_formats": ["html", "markdown", "pdf"],
    "interactive": True,
    "searchable": True
}

输入: 用户提供设计系统文档自动生成所需的指令和必要参数。 处理: 按照skill规范执行设计系统文档自动生成操作,遵循单一意图原则。 输出: 返回设计系统文档自动生成的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

视觉一致性审计

详细代码示例已移至 references/detail.md

输入: 用户提供视觉一致性审计所需的指令和必要参数。 处理: 按照skill规范执行视觉一致性审计操作,遵循单一意图原则。 输出: 返回视觉一致性审计的执行结果,包含操作状态和输出数据。

Framer Motion高级动效

// 高级动效系统
const motionSystem = {
  presets: {
    fadeIn: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 }
    },
    slideUp: {
      initial: { y: 20, opacity: 0 },
      animate: { y: 0, opacity: 1 },
      exit: { y: -20, opacity: 0 }
    },
    scale: {
      initial: { scale: 0.95, opacity: 0 },
      animate: { scale: 1, opacity: 1 },
      exit: { scale: 0.95, opacity: 0 }
    },
    stagger: {
      animate: {
        transition: { staggerChildren: 0.1 }
      }
    }
  },
  defaults: {
    duration: 0.7,
    ease: [0.16, 1, 0.3, 1]
  },
  reduced_motion: {
    respect: True,
    fallback: { duration: 0.01 }
  }
};

输入: 用户提供Framer Motion高级动效所需的指令和必要参数。 处理: 按照skill规范执行Framer Motion高级动效操作,遵循单一意图原则。 输出: 返回Framer Motion高级动效的执行结果,包含操作状态和输出数据。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：企业级极简设计系、统解决方案、支持完整组件库、多主题切换、设计审计与、适合团队与商业项、极简设计系统专业、版为企业与专业团、队提供系统化的极、简现代主义设计系、在免费版核心设计、令牌之上、增加完整组件库、集成能力、Use、when、需要设计创作、海报制作、品牌视觉时使用、不适用于、建模和动画制作、适用于独立开发者、企业团队和自动化、工作流场景等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一:企业SaaS设计系统

需求:为SaaS公司建立完整的设计系统,覆盖所有产品。

python3 init_design_system.py 
  --name "EnterpriseDS" 
  --version "2.0.0" 
  --themes "light,dark,brand" 
  --output ./design-system/

python3 generate_components.py 
  --config components.yml 
  --output ./design-system/components/ 
  --with-docs 
  --with-tests 
  --with-stories

python3 export_tokens.py 
  --source design-tokens.yml 
  --formats "css,tailwind,figma,scss,json"

python3 generate_docs.py 
  --config doc-config.yml 
  --output ./design-system/docs/

输出结构:

design-system/
├── tokens/
│   ├── tokens.css
│   ├── tailwind.config.js
│   ├── figma-tokens.json
│   └── _tokens.scss
├── components/
│   ├── buttons/
│   ├── cards/
│   ├── forms/
│   ├── navigation/
│   └── feedback/
├── themes/
│   ├── light.css
│   ├── dark.css
│   └── brand.css
├── docs/
│   ├── index.html
│   ├── principles.md
│   └── component-api.md
├── audit/
│   └── consistency-report.html
└── motion/
    └── motion-presets.js

场景二:多品牌设计系统管理

需求:集团企业需要为多个子品牌统一管理设计系统。

brands = {
    "brand_a": {
        "name": "品牌A",
        "theme": {"accent": "#0052FF", "bg": "#FAFAFA"},
        "fonts": {"display": "Inter", "body": "Inter"},
        "components": "inherit_base"
    },
    "brand_b": {
        "name": "品牌B",
        "theme": {"accent": "#E67E22", "bg": "#FFF8F0"},
        "fonts": {"display": "Playfair Display", "body": "Source Sans Pro"},
        "components": "custom_override"
    }
}

for brand_id, config in brands.items():
    generate_brand_package(brand_id, config)

场景三:设计到开发自动化交付

需求:设计团队更新令牌后,自动同步到代码库。

name: Design System Sync
on:
  push:
    paths: ["design-tokens.yml"]
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Export Tokens
        run: |
          python3 export_tokens.py 
            --source design-tokens.yml 
            --formats "css,tailwind,figma"
      - name: Generate Components
        run: |
          python3 generate_components.py 
            --config components.yml 
            --output ./src/components/
      - name: Audit Design
        run: |
          python3 audit_design.py 
            --scan ./src/ 
            --report ./audit/
      - name: Generate Docs
        run: |
          python3 generate_docs.py 
            --output ./docs/

快速开始

Step 1:初始化设计系统

python3 init_design_system.py 
  --name "MyDesignSystem" 
  --base-theme "light" 
  --output ./design-system/

Step 2:生成组件库

python3 generate_components.py 
  --config components.yml 
  --output ./design-system/components/ 
  --with-docs 
  --with-tests

Step 3:审计与文档

python3 audit_design.py --scan ./src/ --report ./audit/

python3 generate_docs.py --output ./docs/

示例

企业级设计令牌

详细代码示例已移至 references/detail.md

组件生成配置

components:
  buttons:
    variants: [primary, secondary, ghost, icon, fab]
    sizes: [sm, md, lg]
    states: [default, hover, active, disabled, loading]

  cards:
    types: [basic, media, interactive, pricing, testimonial]
    features: [hover_effect, gradient_border, shadow_glow]

  forms:
    inputs: [text, email, password, search, number]
    selects: [single, multi, searchable]
    feedback: [error, success, warning]

最佳实践

免费版与PRO版能力对比

组件开发规范

component_standards = {
    "structure": {
        "required_files": ["index.tsx", "styles.ts", "test.tsx", "stories.tsx"],
        "naming": "PascalCase",
        "directory": "by_category/by_component"
    },
    "accessibility": {
        "wcag": "2.1_AA",
        "keyboard_nav": True,
        "screen_reader": True,
        "focus_visible": True
    },
    "theming": {
        "use_tokens": True,
        "support_dark_mode": True,
        "brand_customizable": True
    },
    "testing": {
        "unit_tests": True,
        "accessibility_tests": True,
        "visual_regression": True
    }
}

常见问题

Q1: 如何从免费版迁移至PRO版?

A: PRO版完全兼容免费版。现有的Tailwind配置与设计令牌可直接使用。运行迁移脚本升级为完整设计系统。

Q2: 组件库支持哪些框架?

A: 默认生成React组件,同时支持Vue、Svelte、Angular等框架。可根据项目技术栈选择对应格式。

Q3: 多主题如何实现?

A: 使用CSS Variables实现主题切换。所有颜色令牌导出为CSS变量,通过切换变量值实现主题切换,无需重新渲染组件。

Q4: 设计审计能检测哪些问题?

A: 可检测:硬编码颜色、非标准字体、非标尺间距、自定义组件(未使用组件库)、可访问性违规等。生成HTML报告并提供修复建议。

Q5: 如何集成到CI/CD?

A: 提供标准CLI接口与配置文件。设计令牌变更时自动导出多平台格式、重新生成组件、执行审计并部署文档。

依赖说明

运行环境

• Agent平台: 支持SKILL.md规范的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux
• Node.js: 18+(用于组件库构建)
• Python: 3.10+(用于令牌导出与审计)

依赖详情

API Key 配置

• 本skill基于Markdown指令规范驱动,无需额外API Key
• 设计令牌与组件库为本地生成,无需云端服务
• 如集成Figma,需配置Figma API Token

可用性分类

• 分类: MD+EXEC(纯Markdown指令+脚本执行能力)
• 说明: 专业版基于Markdown指令驱动Agent执行设计系统构建任务,通过Python/Node.js脚本实现组件生成、令牌导出与CI/CD集成
• PRO版增强: 完整组件库、多主题系统、文档生成、设计审计、多平台导出、CI/CD集成、团队协作

错误处理

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响