SuperAPI AI 工具集

ui-design-system

设计与创作

查看项目

更新于 10-15 17:28

技能介绍

用途:从品牌主色出发生成完整设计令牌系统,覆盖颜色、字体、间距、圆角、阴影、动画、断点和 z-index 等类别,并支持组件体系搭建、响应式计算与开发者交接文档。

主要能力:1)设计令牌生成,脚本设计token生成器.py 接收品牌色、风格(modern、classic、playful)和输出格式(json、css、scss、summary),示例:python scripts/design_token_generator.py "#0066CC" modern json;2)颜色系统生成 primary、secondary、neutral、semantic、surface,并做 WCAG 对比度检查(AA 正文 4.5:1、大字 3:1);3)字体模块化比例(默认 1.25x);4)8pt 网格间距系统;5)组件体系(原子/分子/组织/模板)与变体、状态文档;6)响应式断点与流体排版,如 font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);7)交接导出,可对接 Tailwind、styled-components、Figma Tokens Studio。

适用场景:需要建立或统一设计系统、生成 CSS/SCSS/JSON 令牌、计算响应式断点和流体字号、准备开发交接文档的团队。

限制:资料未提供实际安装步骤与依赖说明;暗色模式令牌、动画库、图标系统、运行时主题切换、Figma 插件/API 集成、视觉回归测试、设计到代码转换均不在范围内。生成颜色可能不满足 WCAG 对比度,需改用更深色阶;字体比例过紧或过松可在 DesignTokenGenerator 类中调整 type_scale_ratio;令牌命名冲突需加项目前缀。具体价格、平台支持与效果数据暂未提供。