技能介绍

解决什么问题

AI 产品的对话界面很容易陷入一种“功能齐全但看起来不对”的状态：每个页面都是手写样式，间距、字号、圆角各自为政；加载与错误状态只在有空的时候补上；键盘用户和读屏用户走不到流程终点。当 AI 从“回答问题”转向“替我完成任务”，界面的重心也从展示信息变成委托与确认——用户要看清 AI 在跑什么、会改动哪里、哪些环节必须自己拍板。缺少书面规范时，这些决策会在每个迭代里被重新发明一遍。

它如何工作

这套规范把设计拆成两层：先定义设计令牌，再约束组件。

Style foundations：字号阶梯 14/16/18/24/32/40，正文与标题用 Playfair Display、代码用 JetBrains Mono，8pt 基线网格；色板以 surface 分层，success/warning/danger 取固定值，正文 #111827。
可访问性基线：WCAG 2.2 AA、键盘优先、可见的 focus 状态、语义 HTML 优先于 ARIA、读屏可用的标签、支持减弱动效、触摸目标 44px 以上、高对比度。
组件规则：每个组件都要交代解剖结构、变体、状态与响应行为。必需状态为 default、hover、focus-visible、active、disabled、loading、error，并分别说明键盘、指针、触摸三种交互路径。
文案与语气：要求简洁、自信、行动导向；标签不能含糊，动效必须有明确目的。

产出结构也是固定的：上下文与目标 → 令牌与基础约束 → 组件级规则 → 可测试的验收标准 → 文案标准与示例 → 反模式 → QA 清单。

使用边界

每条规则必须锚定到令牌、阈值或具体示例，不允许只靠“更精致”“更协调”这类形容词落地。
约束语言区分 must（不可妥协）与 should（推荐），每条 do 规则至少配一个反例。
审美与可访问性冲突时一律优先可访问性，并显式记录取舍。
引入新模式时必须附带存量 UI 的迁移说明。
技能本身不自动安装依赖、不修改系统权限、不创建持久化任务、不执行下载内容；涉及发送、发布、删除、付款、部署等外部写入时，必须先展示目标与影响并取得明确确认，凭据不回显、不记录、不外发。