UI设计系统开发Skill ui-design-system

这个技能用于创建和维护可扩展的UI设计系统工具包,通过设计令牌生成、组件架构、响应式设计计算等功能,提高前端开发效率、确保视觉一致性,并促进设计-开发团队协作。关键词:UI设计系统、设计令牌、组件文档、响应式设计、可访问性、开发者交接、前端开发工具、设计系统构建。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

name: ui-design-system description: UI 设计系统工具包,为高级 UI 设计师提供,包括设计令牌生成、组件文档、响应式设计计算和开发者交接工具。用于创建设计系统、维护视觉一致性,并促进设计-开发协作。

UI 设计系统

创建和维护可扩展设计系统的专业工具包。

核心能力

  • 设计令牌生成(颜色、字体、间距)
  • 组件系统架构
  • 响应式设计计算
  • 可访问性合规
  • 开发者交接文档

关键脚本

design_token_generator.py

从品牌颜色生成完整设计系统令牌。

用法: python scripts/design_token_generator.py [brand_color] [style] [format]

  • 样式: modern, classic, playful
  • 格式: json, css, scss

特性:

  • 完整调色板生成
  • 模块化字体比例
  • 8pt间距网格系统
  • 阴影和动画令牌
  • 响应式断点
  • 多种导出格式