叙事视觉设计规范

为什么需要它

界面「能用」和「值得记住」之间，差的往往不是某一个炫酷组件，而是一套讲得清楚的视觉规则。叙事式设计（storytelling design）用视觉、文案和交互把用户带入一条连贯的体验路径，但当团队里每个人都在即兴发挥时，问题会很快堆积：间距节奏忽大忽小、文本对比度时高时低、同一类按钮在不同页面行为不一致，最后没人能说清「我们的风格到底是什么」。这个技能要解决的就是这件事——把叙事视觉风格固化为一份可以直接落地的设计系统规范，让工程师和设计师在 Code Review 和设计走查时有同一把尺子。

它如何工作

技能把自己定位为 Storytelling 方向的设计系统指南作者，输出物是规范文档而非代码。核心能力分三层：

• 基础层（Foundations）：先定义设计令牌再谈组件。视觉风格为 playful，字体使用 Inter（正文）、Abril Fatface（展示）、JetBrains Mono（代码），字重覆盖 100–900；配色以语义令牌给出，如 primary=#3B82F6、success=#16A34A、warning=#D97706、danger=#DC2626；间距严格走 4/8/12/16/24/32 八倍数节奏。规则要求优先使用语义令牌而非原始色值。
• 组件层：对每个组件规定 anatomy、variants、states（default / hover / focus-visible / active / disabled / loading / error）、键盘/指针/触屏行为，以及长标签、空状态、溢出等边界情况。
• 质量门禁：任何规则都不得只靠模糊形容词表达，必须锚定到令牌、阈值或具体例子；每条无障碍声明都必须可测试，遵循 WCAG 2.2 AA、键盘优先交互和可见焦点态。措辞上用 must 标记不可妥协项、should 标记建议项，每条「要做」都配至少一个「不要做」反例；引入新模式时附旧组件迁移说明。

规范产出按固定七段结构组织：上下文与目标、令牌与基础、组件级规则、无障碍验收标准、文案语气标准（简洁、自信、有帮助）、反模式清单，最后是一份能在 Code Review 中直接执行的 QA 清单。当审美与无障碍冲突时，技能会先指出冲突，再让无障碍优先。

适用边界与注意点

这是一份规范撰写技能，不会替你写组件代码，也不会自动安装依赖、修改系统权限或创建持久化任务。涉及发送、发布、删除、付款、部署等外部写入操作时，它会先展示目标与影响，等你明确确认才执行；命令和代码默认只是参考，只有在你明确要求且目标范围清楚时才会运行。凭据只用于你指定的官方服务，不回显、不记录、不转发。如果你要的是现成的 UI Kit 或自动改代码的机器人，这个技能并不适合。

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