示例提示词
品牌色 #C9463D、风格 playful：出完整 token 表（含 light/dark 双色板与语义色），每条文字色对底色标 AA 结果。
预期产物
可复算的 token 文档与 CSS/SCSS 输出，对比度逐项有数值。
UI 设计系统
建立可复用的组件、设计变量与规范，让界面保持一致。
App 内可获取
介绍
从一个品牌色出发，得到一整套能交接的设计体系：主色扩展成完整的色板家族，连同字族与字号阶梯、间距体系、圆角与阴影层级，按记录在案的规则计算——同样的输入永远得到同样的输出，不靠临场灵感。再配组件架构文档、响应式断点与流式字号计算，以及开发交接用的变量输出（CSS、SCSS 等），文字与界面的对比达标检查贯穿始终。
产出都是可复查的工作区文档：token 表、组件规范、响应式规则、交接说明。触发话很直白——「生成色板」「八点对齐体系」「导出 CSS 变量」「准备交接」都会走到这里。
它做体系与规格，让界面获得可延续的共同语言，而不是一张一次性的漂亮稿。
适用场景
- 把品牌主色扩成前后端都能用的 token 集
- 为组件库写架构文档与状态矩阵
- 计算移动优先的断点与流式排版尺度
- 产出带对比核查结论的开发者交接包
#design-system#tokens#components#ui
使用示例
示例用于说明请求与期望产物形态，不代表已完成的运行结果。
示例提示词
按现有 token 给表单组件族写架构文档：命名、槽位、状态矩阵与反例清单，交接给前端直接照建。
预期产物
工作区里的组件架构与交接文档，引用同一套 token 命名。
要求与限制
- 安装平台
- iOS: iOS · Android: Android
- 脚本运行
- 无需脚本运行环境（指南与流程型）
- 最低 App 版本
- iOS: 1.7.59
已审核的权限范围
iOS · Android
- 所需能力
- 读取工作区文件写入工作区文件
- 审核结论
- 通过
- 审核阶段
- 静态内容审核
- 审核日期
- 2026-10-28
实现与运行细节
- 适配阶段
- frozen
iOS
- 所需能力
- 读取工作区文件写入工作区文件
Android
- 所需能力
- 读取工作区文件写入工作区文件
许可与来源
来源与追踪详情
许可
MIT
MIT (root LICENSE)
已核验固定技能子树与所附参考资料，完整适用许可及逐文件适配、素材记录保存在 references/licenses/ 与 references/PROVENANCE.md。
图像与素材署名
- 图像署名
- Floe 原创，AI 辅助示意图。
- 来源
- https://github.com/alirezarezvani/claude-skills
- 上游路径
- product-team/skills/ui-design-system
- 上游固定提交
- 6d2f02ea07
- 来源核对日期
- 2026-10-26
- 发布者
- JiangNanGenius
- 发布提交（获取位置）
- 25e07dbeeb6cc93c2fe83ddc72a34302cc40832a
- 审计来源提交
- 84c524b6fb483e4cad94db076e7d9c9962966c19
- 签名目录摘要
- iOS 46196ba57ed7ea7f22085e74b113207f31193e820ab8983cf7a60eee953f2340 · Android 16de89d019e2057804a40f215485ccb09d5495a25864b34d681168eeaf8f9697
- 发布快照导入 (UTC)
- 2026-10-31
发布提交 25e07dbeeb，审计来源 84c524b6fb；目录摘要 iOS 46196ba57ed7… · Android 16de89d019e2…。
版本与状态
版本记录随签名目录发布；以下为目标与已发布版本。
- 适配状态
- 已就绪
- 发布状态
- 精选技能已上线
- 已发布版本
- 1.0.1