Impeccable Operate 模式详解：让产品 UI「消失进任务」的设计准则与落地规则

Impeccable Operate 模式详解：让产品 UI「消失进任务」的设计准则与落地规则

【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable

本文围绕 Impeccable 技能中 operate.md 参考文档展开，讲解当界面服务于产品（应用 UI、管理后台、设置面板、数据表格、已认证功能区）时，AI 编码代理应遵守的字体、色彩、组件、动效与约束规则。读完后，你将掌握 Operate 模式的判定标准（product slop test）、状态词汇表、色彩策略下限，以及这些规则在 Impeccable 技能体系（SKILL.md、craft-floor.md 及各命令参考）中的具体位置与触发方式。

Operate 模式在技能体系中的位置

Impeccable 是一个面向 AI 编码代理的前端设计技能，SKILL.md 定义了四种「访问者模式」（visitor modes），回答的核心问题是：这个界面上，访问者的成功长什么样？

• Persuade：访问者做决定并行动，设计即产品。落地页、营销、定价页。
• Operate：访问者完成任务。应用 UI、仪表盘、编辑器、管理后台、设置、工具。可扫描性、一致性、原生预期和真实使用场景优先于表现力，品牌存在于精确的细节里（SKILL.md 模式定义）。
• Read：访问者理解内容。文档、文章、指南、帮助。
• Experience：访问者沉浸在作品本身。作品集、画廊。

模式选择的关键原则是按请求的 surface（界面）选模式，而不是按产品选。原文强调：一个工具产品的落地页仍然是 Persuade；一家时装屋的文档仍然是 Read。因此，Operate 规则只作用于「用户在任务中」的界面。

operate.md 的定位是「Operate 面的扩展深度」（extended depth）：核心要点在 SKILL.md 的模式定义与 craft-floor.md（质量地板：绝对禁令和检测器抓不到的直觉）中；operate.md 是写给 Operate 场景的进阶规则。文档还给出了一条跨模式复用规则：Read 面（文档、指南、长文）继承 SKILL.md 的 Read 模式，外加 operate.md 的 Typography 与一致性规则——因为阅读面更关心行文宽度（measure）和导航，而非组件密度。

从源码结构看，安装副本.agents/skills/impeccable/reference/operate.md与仓库源文件 skill/reference/operate.md 内容一致，但源文件带有机器规则锚点，如第 20 行的<!-- rule:product-color-restrained-default -->，安装副本则剥离了这些注释；可以推断这些标记用于技能编译与规则校验管线，使文档中的每条准则可被定位和引用。

Product slop test：产品 UI 的失败模式不是平庸，而是「无目的的怪异」

文档开篇提出 Operate 面的评判标准——product slop test：判断依据是「一个熟悉该品类的用户能否立刻信任这个界面」，还是「会在每个微微不对劲的组件前停顿」。

这里有一个反直觉的点：熟悉感在这里往往是特性（feature）。产品 UI 的失败模式不是扁平，而是无目的的陌生感：

• 过度装饰的按钮；
• 不匹配（风格不一致）的表单控件；
• 无意义（gratuitous）的动效；
• 在应该放标签（label）的地方用了展示型字体（display font）；
• 为标准任务「发明」交互暗示（affordance）。

标准被概括为一句话：the tool should disappear into the task（工具应消失进任务里），门槛是「earned familiarity（挣来的熟悉感）」。这与 quieter.md 中「Operate + Read 的 quieter 意味着减少视觉噪声，让工具更彻底地消失进任务」的表述完全呼应。

Typography：固定 rem 刻度与更紧的级差

Operate 面的排版规则与品牌面刻意相反，文档给出四条明确规则：

1. 一个字体家族往往就是对的。产品 UI 不需要 display/body 字体配对；一套调校得当的无衬线字体可以同时承载标题、按钮、标签、正文和数据。这与 typeset.md 中「Operate + Read 以稳定性、可扫描性和行文宽度为先，一个调校得当的家族加固定的角色刻度往往就是对的」一致，也与 new-work.md 的选择规则吻合：「Operate 和 Read 面用系统字体栈与主力 UI 字体就很称职」——即品牌面需要「有观点」的字体，Operate 面不需要。
2. 固定 rem 刻度，而不是流式（fluid）。用clamp()缩放的标题不服务产品 UI：用户以一致 DPI 查看界面，一个在侧边栏里变小的流式 h1 只会更难看，而不是更好看。
3. 更紧的级差（scale ratio）。相邻字号步进用 1.125–1.2 是典型值。产品 UI 比品牌面有更多文字元素，夸张的字号对比会产生噪声。
4. 行文宽度规则依然适用于散文段落（65–75ch）。但数据与紧凑 UI 可以更高密度：表格排到 120ch 以上也是合理的。

Color：Restrained 是下限，Committed 是单面可挣得的权限

文档规定产品界面默认 Restrained（克制）：单一 surface 可以挣得 Committed（例如某个仪表盘用一种品类色贯穿整份报告，或 onboarding 流程中整屏沉浸的欢迎页），但 Restrained 是地板（floor）。

这一条不是孤立设定，而是整个技能色彩策略体系的落点。new-work.md 定义了四种色彩策略：

Operate 面的色彩纪律还包括三条：

• 状态丰富的语义色词汇表：hover、focus、active、disabled、selected、loading、error、warning、success、info。必须标准化（standardize）——同一个状态在所有组件上呈现一致。
• 强调色只用于三件事：主操作、当前选中项、状态指示器。不用于装饰。这与 colorize.md 的「Operate + Read 中色彩主要编码动作、选中、状态、导航与阅读层级；稀缺性赋予强调色力量」相互印证。
• 第二层中性色：侧边栏、工具栏、面板用比内容面略冷或略暖的第二层中性色，形成结构区分。

Layout：响应式是结构行为，不是流式字体

Operate 面只有一条布局规则，但很关键：响应式行为是结构性的——折叠侧边栏、响应式表格、按断点驱动的列数变化——而不是流式排版。这与 Typography 一节「固定 rem 刻度」互为表里：产品界面在各断点下保持稳定密度与结构，字号不参与响应式缩放。

layout.md 对同一注册域（register）的表述是：「Operate + Read：可预测的结构、稳定的密度、可导航的线性是 affordance（交互暗示本身）」。

Components：七态组件与「逃逸容器」的浮层

文档要求：每个交互组件都必须具备 default、hover、focus、active、disabled、loading、error 七个状态——「不要只做出其中一半就发货」。

这一条与 craft-floor.md 的质量地板检查项（hover、disabled、loading、error、empty 五态 + 真实内容、可用控件、响应式构图、键盘焦点）重叠且互补：craft-floor 是「发货前检查」，operate.md 把它细化为组件级承诺。

其余组件准则：

• 骨架屏（skeleton）而非内容中央的 spinner：加载中用骨架态占位，不要在内容中间转圈。
• 会教学的空态：empty state 不是「这里没有东西」，而是教用户界面如何工作。
• 跨整个 surface 一致的 affordance：同一按钮形状、同一表单控件词汇、同一图标风格。
• 浮层必须逃逸容器：这是文档中唯一给出具体技术解法的条目——绝对定位的下拉菜单如果处在overflow: hidden或overflow: auto祖先元素内会被裁剪，解决方案是用<dialog>、Popover API、position: fixed或 portal。

Motion：150–250ms，只传递状态

动效纪律有三条：

• 大多数过渡150–250 ms。用户处于任务流（flow）中，不要让他们等编排（choreography）。
• 动效传递状态，不传递装饰：状态变化、反馈、加载、揭示（reveal），别无其他。
• 禁止页面加载编排序列。产品是加载进任务里的，用户不想「看它加载」。

这与 animate.md 的模式注记一致：「Operate + Read：动效服务反馈、状态与连续性；常规过渡保持快速，不要让用户在页面加载编排中等待」。

Product constraints：Operate 面的六项禁令

文档列出了 Operate 面不应做的事情，每一条都是产品界面最常见的「slop」来源：

1. 不传递状态的装饰性动效；
2. 跨屏幕不一致的组件词汇——「如果『保存』按钮在两处长得不一样，其中一个是错的」；
3. 在 UI 标签、按钮、数据上使用展示型字体；
4. 为了风味重造标准 affordance（自定义滚动条、奇怪的表单控件、非标准模态框）；
5. 在非激活状态上放重色彩或全饱和强调色；
6. 模态框作为第一反应。原文直言「Modals are usually laziness（模态框通常是偷懒）」——先穷尽 inline（内联）/渐进式（progressive）替代方案。

第 6 条与 craft-floor.md 的绝对禁令「为一个既不需要打断、也不需要保护性焦点的任务开模态框」同源，说明「反模态反射」在 Operate 面是被双重加强的规则。

Product permissions：产品面挣得的权限

文档最后一节指出：产品界面可以做品牌面做不到的事——这是 Operate 模式最重要的「许可」清单：

• 系统字体与熟悉的无衬线默认值（品牌面通常被要求有观点，产品面不需要）；
• 标准导航模式：顶栏 + 侧边导航、面包屑、选项卡（tabs）、命令面板（command palette）；
• 密度：多行表格、多标签面板、用户需要时的密集信息排布；
• 一致性高于惊喜：同样的视觉词汇跨屏幕延续是美德；delight（惊喜）留给时刻，而不是整页。

这与 delight.md 的「Operate + Read：把 delight 集中在有意义时刻（首次使用、完成、恢复、精通），其余一切靠可靠性承载」形成闭环：Operate 面的惊喜是配给制的。

如何触发与验证这些规则

在实际使用 Impeccable 技能时，Operate 规则通过以下路径生效（以仓库当前版本的 README 为准）：

1. 安装：项目根目录执行npx impeccable install，随后在 AI 编码工具中执行/impeccable init写入PRODUCT.md。
2. 模式路由：当请求的 surface 是设置页、仪表盘、工具区等任务型界面时，代理按 SKILL.md 的路由规则加载 operate.md 作为 Operate 的深度参考；新建 Operate surface 则走 new-work.md 流程，其中对 Operate 面的硬性要求是「表达永远不得遮蔽任务、状态或熟悉的 affordance」（new-work.md 第 59 行）。
3. 定向命令：对已有 Operate 面可用具体命令迭代，例如/impeccable audit <settings 页面>（技术质量检查）、/impeccable polish <后台>（发货前最终打磨）、/impeccable quieter <界面>（降噪，恰好是 Operate 语义下的「减少视觉噪声」）、/impeccable typeset <仪表盘>（字体层级修正）。命令清单见 SKILL.md Commands 表。
4. 确定性检测：README 说明 CLI 与浏览器扩展可以「无 LLM、无 API key」地运行 61 条确定性检测规则；从技能结构看，检测器覆盖排版、对比度、反模式（如渐变色文字、装饰性条纹）等类别，与 operate.md 中的准则在「状态完整性」「对比度」「组件词汇一致性」等维度交叉验证。

需要说明的适用前提：这些规则面向 Web 产品界面；当平台是 iOS/Android 时，live迭代与 HTML 规则引擎不适用（见 routing.md 对原生平台的说明），此时 Operate 的深度参考更多作为人工审阅准则发挥作用。

小结

operate.md 用不到 60 行文字定义了产品 UI 的设计注册域：以「product slop test」为总判据（熟悉而可信，工具消失进任务），在排版（单家族、固定 rem 刻度、1.125–1.2 级差）、色彩（Restrained 下限、标准化语义状态色）、组件（七态齐备、骨架屏、会教学的空态、浮层逃逸容器）、动效（150–250ms、只传状态）四个维度给出可执行规则，再用「六项禁令 + 四项权限」划清产品面与品牌面的边界。它不是独立的风格指南，而是 SKILL.md 模式体系、craft-floor.md 质量地板与 23 个命令（audit / polish / quieter / typeset 等）共同作用的结果——理解这一体系，才能让 AI 代理在构建应用、后台与工具类界面时产出「挣来的熟悉感」，而非模板味的平庸或无目的的怪异。

【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable