关于 ui-design-system
ui-design-system 是用于创建和维护可扩展设计系统的工具包,可从品牌色生成设计令牌,并提供组件架构、响应式设计、无障碍和交接文档方面的支持。
主要功能
- 01根据品牌色生成设计令牌
- 02导出为 JSON、CSS 或 SCSS
- 03生成模块化字体与色彩体系
- 04采用 8pt 间距网格和响应式断点
- 05定义阴影与动画令牌
适用场景
- 01根据品牌色生成令牌集
- 02导出供开发使用的设计令牌
- 03统一组件间距与字体规范
- 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