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 面的排版规则与品牌面刻意相反文档给出四条明确规则一个字体家族往往就是对的。产品 UI 不需要 display/body 字体配对一套调校得当的无衬线字体可以同时承载标题、按钮、标签、正文和数据。这与 typeset.md 中「Operate Read 以稳定性、可扫描性和行文宽度为先一个调校得当的家族加固定的角色刻度往往就是对的」一致也与 new-work.md 的选择规则吻合「Operate 和 Read 面用系统字体栈与主力 UI 字体就很称职」——即品牌面需要「有观点」的字体Operate 面不需要。固定 rem 刻度而不是流式fluid。用clamp()缩放的标题不服务产品 UI用户以一致 DPI 查看界面一个在侧边栏里变小的流式 h1 只会更难看而不是更好看。更紧的级差scale ratio。相邻字号步进用 1.125–1.2 是典型值。产品 UI 比品牌面有更多文字元素夸张的字号对比会产生噪声。行文宽度规则依然适用于散文段落65–75ch。但数据与紧凑 UI 可以更高密度表格排到 120ch 以上也是合理的。ColorRestrained 是下限Committed 是单面可挣得的权限文档规定产品界面默认 Restrained克制单一 surface 可以挣得 Committed例如某个仪表盘用一种品类色贯穿整份报告或 onboarding 流程中整屏沉浸的欢迎页但 Restrained 是地板floor。这一条不是孤立设定而是整个技能色彩策略体系的落点。new-work.md 定义了四种色彩策略策略定义适用Restrained中性色 一个强调色用户来「操作或阅读」时的默认值Committed一种饱和色承载 30–60% 的 surface单 surface 可挣得Full palette3–4 个具名角色Persuade / Experience 面更常见Drenchedsurface 本身就是那个颜色特殊时刻如 onboarding 欢迎屏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 七个状态——「不要只做出其中一半就发货」。状态说明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。Motion150–250ms只传递状态动效纪律有三条大多数过渡150–250 ms。用户处于任务流flow中不要让他们等编排choreography。动效传递状态不传递装饰状态变化、反馈、加载、揭示reveal别无其他。禁止页面加载编排序列。产品是加载进任务里的用户不想「看它加载」。这与 animate.md 的模式注记一致「Operate Read动效服务反馈、状态与连续性常规过渡保持快速不要让用户在页面加载编排中等待」。Product constraintsOperate 面的六项禁令文档列出了 Operate 面不应做的事情每一条都是产品界面最常见的「slop」来源不传递状态的装饰性动效跨屏幕不一致的组件词汇——「如果『保存』按钮在两处长得不一样其中一个是错的」在 UI 标签、按钮、数据上使用展示型字体为了风味重造标准 affordance自定义滚动条、奇怪的表单控件、非标准模态框在非激活状态上放重色彩或全饱和强调色模态框作为第一反应。原文直言「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 为准安装项目根目录执行npx impeccable install随后在 AI 编码工具中执行/impeccable init写入PRODUCT.md。模式路由当请求的 surface 是设置页、仪表盘、工具区等任务型界面时代理按 SKILL.md 的路由规则加载 operate.md 作为 Operate 的深度参考新建 Operate surface 则走 new-work.md 流程其中对 Operate 面的硬性要求是「表达永远不得遮蔽任务、状态或熟悉的 affordance」new-work.md 第 59 行。定向命令对已有 Operate 面可用具体命令迭代例如/impeccable audit settings 页面技术质量检查、/impeccable polish 后台发货前最终打磨、/impeccable quieter 界面降噪恰好是 Operate 语义下的「减少视觉噪声」、/impeccable typeset 仪表盘字体层级修正。命令清单见 SKILL.md Commands 表。确定性检测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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考