mcpField
U
ui-design-system

ui-design-system

github.com/davila7设计与 UI33.0k1.7k 次安装今天更新
代码仓库

关于 ui-design-system

ui-design-system 是用于创建和维护可扩展设计系统的工具包,可从品牌色生成设计令牌,并提供组件架构、响应式设计、无障碍和交接文档方面的支持。

主要功能

  1. 01根据品牌色生成设计令牌
  2. 02导出为 JSON、CSS 或 SCSS
  3. 03生成模块化字体与色彩体系
  4. 04采用 8pt 间距网格和响应式断点
  5. 05定义阴影与动画令牌

适用场景

  1. 01根据品牌色生成令牌集
  2. 02导出供开发使用的设计令牌
  3. 03统一组件间距与字体规范
  4. 04准备交付开发者的设计系统说明

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/davila7/claude-code-templates --skill ui-design-system

安装后在 Claude Code 中输入/ui-design-system确认已加载。

附带文件scripts/design_token_generator.py

详细介绍

UI 设计系统

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

核心功能

  • 生成设计令牌(颜色、排版、间距)
  • 组件系统架构
  • 响应式设计计算
  • 无障碍合规性
  • 开发交接文档

关键脚本

design_token_generator.py

根据品牌颜色生成完整的设计系统令牌。

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

  • 风格:modern、classic、playful
  • 格式:json、css、scss

功能:

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

评论

支持 Markdown