UI设计系统工具包

技能简介

面向高级UI设计师的设计系统工具包，支持设计令牌生成、组件文档编写、响应式计算及开发者交接材料准备。

能做什么

• 从品牌色生成完整设计令牌（色彩、字体、间距、阴影等）
• 构建原子化组件层级体系（原子/分子/有机体/模板）
• 计算流体排版与响应式断点
• 输出CSS/SCSS/JSON多格式令牌文件
• 生成WCAG对比度检测与无障碍验证报告
• 准备开发者交接文档与组件API说明

使用说明

1. 安装依赖
   需Python环境，克隆仓库后进入目录：
   git clone https://github.com/openclaw/skills.git
cd skills/alirezarezvani/ui-design-system
2. 生成设计令牌
   python scripts/design_token_generator.py "#0066CC" modern json
   参数：品牌色hex值、风格偏好（modern/classic/playful）、输出格式（css/scss/json）
3. 导出目标格式
   python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
4. 验证无障碍
   检查色彩对比度是否满足WCAG AA标准（正文4.5:1，大文字3:1）
5. 查阅组件架构
   参考 references/component-architecture.md 了解分层设计模式

输入与输出

见下方输入与输出表格。

风险提示

• 色彩对比度未达标可能导致无障碍合规问题
• 令牌命名规范不统一会造成跨团队协作障碍
• 流体排版计算需测试真实设备，模拟器存在偏差
• 开发者交接文档需随设计迭代同步更新

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/alirezarezvani/ui-design-system/SKILL.md
来源类型：GitHub开源技能库