SuperAPI AI 工具集

design-foundation

设计与创作

查看项目

更新于 10-16 01:12

技能介绍

用途:为特定代码库生成可用的设计令牌文件,而非仅描述令牌的文档。令牌是命名的设计决策(如 --color-text-primary、--space-4),集中管理可让后续布局、字体、颜色、组件等设计技能保持一致。核心原则是先提取再发明:在已有代码库中,令牌系统应形式化现有最佳实践,使迁移成为重命名而非重新设计。

主要能力:从零创建令牌,或从现有代码库提取令牌;检查样式入口(tailwind.config、globals.css 等),检测技术栈(Tailwind v4/v3、CSS Modules、styled-components、原生 CSS),统计颜色与间距漂移,按频率确定事实系统,检查暗色模式。构建至少两层令牌:全局令牌(中性色阶、品牌色阶、状态色、4px 基础间距、字号、圆角、阴影、z-index、过渡时长)与语义令牌(bg-primary、text-primary 等,组件只消费语义层);存在组件库时增加组件令牌。

使用方式:先检查代码库收集证据,再批量询问缺失信息(品牌色、产品感觉、暗色模式),然后按检测到的技术栈写入令牌文件(Tailwind v4 用 @theme,v3 用 theme.extend,无 Tailwind 用 :root 自定义属性),迁移 1–3 个漂移最严重的文件作为示范,并输出迁移映射。交付格式包含令牌文件、决策表、迁移映射、已迁移文件与下一步建议。

适用场景:需要统一设计系统、减少硬编码颜色与间距、为后续字体/颜色/布局/组件技能打基础时。

限制:资料未提供具体收费、价格、平台或效果数据;质量要求包括语义配对满足 WCAG AA、间距为单一递进、中性色带品牌色调、组件仅引用语义令牌、不引入第二套并行令牌系统。