技能介绍

规范文档为什么到不了生产环境

多数电商团队的设计规范停在两种状态：要么写满「感觉应该统一」这类在 code review 里无法证伪的描述；要么把 tokens 和组件规则混成一团，工程师改一个按钮要翻十页文档，才能确认间距取 8 还是 16、hover 状态该落到哪个颜色变量。最后界面里出现低对比文案、四套间距节奏，却没人能指出违反了流程中的哪一条。这个技能补的正是「从撰写到落地」这一段：产出结构固定、可直接执行的设计系统指南。

它如何产出一份可执行的指南

它是一套指南写作规程，不是组件截图，也不是成品代码。生成时按既定工作流推进：先用一句话重申设计意图，再自底向上定义 design tokens——色彩如 primary=#FECE14、success=#16A34A，排版基于 Poppins 与 IBM Plex Mono，间距固定为 4/8/12/16/24/32——之后才进入组件级规则。每个组件必须写明解剖结构、变体与完整状态（default、hover、focus-visible、active、disabled、loading、error），覆盖键盘、指针与触控三种交互，并明确响应式行为以及长标签、空状态等边缘情况。

约束语言是刻意设计的：非协商项用 must，推荐项用 should；每条规则锚定到 token、阈值或示例，而非「美观」「协调」这类形容词；每条 Do 规则至少配一个具体的 Don't 反例；引入新模式时要给出存量 UI 的迁移说明；文末附一份可在 code review 中直接勾选的 QA checklist。无障碍是硬门槛：WCAG 2.2 AA、键盘优先交互、可见焦点状态，每条声明都要可测试，与美学冲突时无障碍优先。

适用边界

这是写作技能：交付物是规范文本，不是代码库或设计文件，落地仍需接入团队自己的 token 体系与组件模板。风格锚定为电子产品店（Electronics shop）的现代风格，换品类需重新校准品牌设定。安全边界也已写明：不自动安装依赖、不修改系统权限、不创建持久任务、不下载内容；发送、发布、删除、付款、部署等外部写入前，先展示目标与影响并获确认；命令与代码默认仅作参考，经明确要求且范围清楚才可执行。

（获取使用帮助与更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」。）