简诗现代简约编辑设计

一个常被忽略的问题：设计规范写完没人能落地

大多数团队的设计文档要么停留在「风格要现代、简洁」这类形容词上，要么堆满了孤立的截图和配色示例。前端拿到手之后，往往要自己重新解读一遍，结果就是同一个按钮在 A 页面用了 12px、在 B 页面用了 14px，间距也各凭手感。规范没有变成约束，反而成了参考。

这个技能解决的是另一件事：把设计系统写成可以直接被工程师执行的规则。它会先用一句话重申设计意图，再定义令牌和基础约束，最后才进入组件级别。规则不依赖模糊的形容词，而是锚定到具体的 token、阈值或示例，避免「看着差不多就行」的实现方式。

它如何工作

技能默认从 Modern Design System 出发，把工作拆成几个可复用的步骤：

• 基础层先行：明确视觉风格、排版阶梯、色板和间距刻度。比如主色固定为 #553F83，间距遵循 4/8/12/16/24/32，令牌命名使用语义而非原始值。
• 组件规则显式化：定义 anatomy、variants、states 和响应式行为。必选状态包括 default、hover、focus-visible、active、disabled、loading、error，同时覆盖键盘、指针和触摸交互。
• 无障碍作为验收条件：遵循 WCAG 2.2 AA，要求键盘优先交互和可见的 focus 状态，每条声明都必须可测试，不能只写「注意对比度」。
• 内容与语气同步：文案要求简洁、自信、有帮助，避免模糊的标签和低对比度文本。
• 反模式与迁移说明：规则会给出 Do / Don't 示例，并附上旧 UI 的迁移注意事项，帮助团队处理历史不一致的界面。
• QA 清单：最后输出可执行在 code review 中的检查项，让规范在流程上落地。

技能还要求统一规范用语：非协商项用 must，建议项用 should，并且每条 Do 规则至少配一个具体的 Don't 例子，避免口头上的约束。

适用边界与注意点

• 这套规范更偏向现代、极简、编辑式风格，如果你的产品是高饱和度的游戏 UI 或拟物风格，直接套用可能需要替换基础令牌。
• 技能不会自动安装依赖、修改系统权限或创建持久任务。涉及发送、发布、删除、付款、部署等外部写入操作时，会先展示目标与影响，需要你明确确认后再执行。
• 凭据只用于你指定的对应官方服务，不会回显、记录或转发到无关地址。
• 命令和代码默认作为参考，只有在你明确要求且目标范围清楚时才会运行。
• 使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」。