Design Better 是一个面向编码智能体的 UI 工艺层技能，用于在构建或重构产品界面时，让生成的代码不只是“能用”，而是达到设计师水准。它不负责视觉风格，风格由 docs/design.md 定义；该技能负责跨时代的 UX/UI 工艺启发式规则，来源包括 Nielsen Norman Group、Laws of UX、Shneiderman、Refactoring UI、WCAG 2.2、Don Norman、Apple HIG、Material 3 以及 2025–2026 年 AI 产品模式。
用途：在智能体生成或审查 UI 时提供可执行的工艺检查清单。输入包括 docs/design.md（推荐但非必需）、正在构建或重构的对象（需求、文件或未提交 diff），以及可选的 docs/product-vision.md。若 docs/design.md 存在，所有视觉决策按名称引用其 token；若不存在，则回退到代码库既有设计约定，并建议运行 Design System 技能建立单一 token 来源。
主要能力：包含 50 条启发式规则，覆盖视觉层级与强调、布局与对齐、排版工艺、颜色与对比度、交互与反馈、表单、空/加载/错误/成功四态、动效、无障碍（WCAG 2.2 AA）、移动与触控、认知负荷与导航，以及 AI 产品专属规则（如流式输出与停止按钮、AI 输出作为可编辑草稿）。同时整合 Laws of UX 心理原则，如邻近律、共同区域律、希克定律、米勒定律、泰斯勒定律等，并与启发式规则交叉引用。
使用方式：先确定样式来源，再确认界面范围与主导规则类别，然后同时用样式层与启发式目录生成或审查，审查时按编号引用规则、按名称引用定律。交付前需通过预检清单，例如每个交互元素具备默认、悬停/聚焦可见、激活、禁用及异步加载状态；每个异步界面设计空、加载、错误、成功四态；表单输入具备关联 label、正确 inputmode/type、autocomplete 与失焦验证；动效 150–400 ms、仅动画 transform/opacity 并尊重 prefers-reduced-motion；正文对比度 ≥ 4.5:1、UI 组件 ≥ 3:1；指针目标 ≥ 24×24 CSS px；320 CSS px 宽度无横向滚动；主操作是视图上唯一视觉主导元素。
适用场景：注册、仪表盘、聊天、设置、详情页、营销页等界面生成与审查，尤其适合需要兼顾工艺与无障碍的前端工作。限制：不定义视觉风格，不内联十六进制、字体名或任意 px；缺失 token 应标记为新模式而非自行发明；若资料未提供具体平台、收费或价格信息，暂未提供。