impeccable Live 交互式实时变体模式（Live Variant Mode）实战指南：在浏览器中热替换 AI 生成的 HTML + CSS 备选方案

impeccable Live 交互式实时变体模式Live Variant Mode实战指南在浏览器中热替换 AI 生成的 HTML CSS 备选方案【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableimpeccable 项目在其 skills 体系中提供了一个名为live的迭代Iterate命令由 reference/live.md 全权定义。它的核心场景是在保持开发服务器 HMR 运行的前提下让 Agent 通过浏览器选中真实页面元素依据用户选定的设计动作加粗、减噪、蒸馏、抛光、排版、配色、布局、适配、动效等生成多个 HTMLCSS 变体并通过注入的辅助层把备选方案热替换到页面上供用户实时比对与接受。本文将以该文档为骨架结合仓库中 SKILL.md、浏览器侧注入代码与 live-e2e 测试套件完整还原 Live 模式的运行契约、事件循环、三变体规划方法论、参数旋钮机制与收尾清理流程帮助你理解并复现一套可在任意 HMR 开发服务器之上工作的 Agent 化设计迭代链路。Live 模式解决什么问题传统的 AI 改稿循环是截图 → 生成整页 → 整体替换成本高、命中率低且无法针对单一元素进行多方向的并行试探。Live 模式把它压缩为一条实时的、事件驱动的流水线在真实页面上选择元素用户不必粘贴 HTML直接在浏览器里点选一个元素指定设计动作可以从一个自由形式的提示词出发也可以点名某个子命令语义bolder、quieter、distill、polish、typeset、colorize、layout、adapt、animate、delight、overdriveAI 产出 3 个完整变体不是 CSS 补丁而是对原元素完整 HTML 的替换随预览 CSS 与可调参数清单一起在一次原子编辑内通过 dev server 的 HMR 热替换上去用户以零代码成本微调每个变体可暴露少量粗粒度参数旋钮滑块 / 分段 / 开关浏览器侧直接驱动 CSS 变量或 data 属性无需重新生成接受后机械落盘被选中的变体会被回写到真实源文件通过 carbonize 流程把预览态重写为语义化的长期代码。从源码结构看这套交互不仅服务于纯静态页面.gemini/skills/impeccable/scripts/目录承载运行期命令而浏览器侧的注入逻辑固化在 live-browser.js 及其配套的 live-browser-dom.js、live-browser-session.js、live-browser-ignores.js 中截图能力由 modern-screenshot.umd.js 提供仓库的 live-e2e 系列测试 则对整条链路做了端到端验证。前置条件一个可被注入的页面Live 模式要求一个正在运行且具备 HMR 的开发服务器Vite、Next.js、Bun 等均可或者一个已在浏览器中打开的静态 HTML 文件。文档特别强调一个运维常识如果 dev server 的默认端口已被占用那么应用极可能已经在跑——请先探测默认 URL而不要贸然再起一个服务器导致端口冲突。此外impeccable skill 本身依赖一次性的会话引导SKILL.md 规定每个会话先运行一次context.mjs并由运行期上报的skill-base-dir决定之后所有node .../scripts/*命令的真实位置live正是登记在该文件命令表中的 Iterate 类命令。真正的运行前提还包含配置文件files清单、注入适配器、CSP 检查状态等这些在 live-setup.md 中统一维护首次引导缺失时会由live.mjs以特定错误码指示你阅读它。核心契约顺序执行、不可跳步、_instructions优先Live 会话对 Agent 是一份严格的有序契约——文档要求read once并强调任何一步都不许跳过或重排每一轮工具输出都可能携带_instructions字段它是针对当前确切场景的权威下一步含真实 id 与路径。当它与你对本文档的记忆冲突时_instructions优先。契约要点如下启动live.mjs。如果请求点名或暗示了 monorepo 内的某个文件/路由/应用先推断出具体路径并改以node .gemini/skills/impeccable/scripts/live.mjs --target path启动会话随后基于返回的projectRoot继续。启动器会从 dev-server 配置解析出应用根目录并持久化到.impeccable/live/roots.json所有辅助命令启动时都会重新锚定到这份清单因此cwd 不对不会导致会话状态分叉。PRODUCT.md / DESIGN.md 向上查找到 git 根--file这类相对参数按应用根解析。打开真正服务于pageFile的应用 URL依据package.json、文档、终端输出或已打开的标签推断。绝不要用serverPort——那是辅助 HTTP 服务器/live.js、SSE、/poll的端口不是应用端口。Cursor 需先用browser_navigate导航过去再轮询其余 harness 用可用浏览器工具URL 不确定就问一次用户。以默认长超时600000 ms进入轮询循环任何事件或--reply之后立刻再次运行live-poll.mjs。永远不要传短--timeout。全局工具栏上的 Impeccable 标记在无人轮询/poll时会变暗并闪烁琥珀色圆点此时重启live-poll.mjs即可重连。收到generate优先复用event.scaffold有截图就读截图加载该动作对应的 reference产出变体--reply done继续轮询。变体要在当前线程内生成——你已经握着项目的 token 与布局。叠加预览本身就是验证通道generate 与 accept 之间不要截图、不要重渲染、不要 QA。写作时就按 craft-floor.md 的对比度 / 间距 / 排印底线直接达标完整验证只发生在 accept 时对选中变体执行一次。收到steer读消息与pageUrl做事--reply steer_done继续轮询。没有单独的 pickup 应答。收到accept/discard轮询脚本已代为运行live-accept.mjs并应答投递、打印_completionAck。普通 accept/discard 立即终结carbonize 型 accept 在live-complete.mjs --id EVENT_ID跑完之前保持可恢复状态先完成该清理再继续轮询。会话被打断先运行live-status.mjs或live-resume.mjs不要猜。.impeccable/live/sessions/下的 append-only journal 是权威状态辅助进程重启后会重放未确认的工作注入的live.js在页面重开时自动重挂。只有live-resume.mjs报告没有活跃会话时才回退到直接编辑循环——绝不因为断线感觉频繁就自行降级。收到exit执行文末的 Cleanup。Harness 差异化策略不同 Agent harness 对前台/后台执行的支持不同契约给出明确分派Claude Code把轮询作为后台任务跑无短超时harness 完成时通知你不要让命令阻塞 shellCursor在后台终端做一次性轮询并对type:(steer|generate|accept|discard|manual_edit_apply|variant_mount_failed|prefetch|exit)通知处理、--reply、重启轮询。不要在 Cursor 上用--stream实测约 5s 拾取 vs 一次性轮询亚秒级Codex在让渡的前台 exec 会话里做默认一次性轮询。不加、不用--stream绝不把 Live 留在没有前台轮询的状态。启动轮询不等于服务轮询必须持续读取 exec 会话直到返回事件不能空喊等待用户——没人读的让渡轮询就是死会话其他 harness默认一次性前台轮询除非你确认其 stdout 在 shell 退出时能可靠返回。交付策略全局采用原子式单次编辑交付CSS 全部变体 参数清单在一次编辑中落盘除非确知某 harness 的轮询循环不会被额外调用阻塞否则不要把它切到渐进式发布。聊天是开销——不写回顾、不输出教程、不粘贴 PRODUCT/DESIGN 正文把 token 花在工具与编辑上失败时只给一两句简短说明。Poll loop一张事件分发表轮询循环是一个朴素的 JSON 分发表事件类型决定分支行为LOOP: node .gemini/skills/impeccable/scripts/live-poll.mjs # 默认长超时不带 --timeout Read JSON; dispatch on type generate → Handle Generate; reply done; LOOP steer → Handle Steer; reply steer_done; LOOP accept → Handle Accept; complete carbonize cleanup if required; LOOP discard → Handle Discard; LOOP prefetch → Handle Prefetch; LOOP manual_edit_apply → Handle Manual Edit Apply; reply done|partial|error; LOOP variant_mount_failed → Fix the variant files; reply done --file path; LOOP timeout → LOOP exit → break → Cleanupvariant_mount_failed意味着浏览器无法渲染你发布的内容事件携带variant、模块url、error用户看到的是持续的错误卡片而非变体。此时修复变体文件后执行--reply EVENT_ID done --file manifest 或源路径浏览器会自行重试。另外--stream流式模式实验性绝不在 Cursor 使用允许用一个长生命周期进程逐事件输出 JSON 行、再由独立命令做--reply——只适合能可靠读取增量 stdout 的 harness。启动与引导输出node .gemini/skills/impeccable/scripts/live.mjs输出 JSON 形如{ ok, serverPort, serverToken, pageFiles, roots, hasProduct, product, productPath, hasDesign, design, designPath, hasSurfaceBrief, surfaceBrief }要点roots是解析出的根清单projectRoot与roots.appRoot等价。surface brief表面简报随启动输出随行携带不要再单独 shell 出去跑surface-brief.mjs。生成优先级视觉决策以 DESIGN.md 为准持久化产品与语气决策以 PRODUCT.md 为准当前 surface 的策略以 surface brief 为准。DESIGN.md 缺失绝不等于身份缺失——身份要从 CSS 变量、计算样式与兄弟组件中抽取对应 Handle generate 的 Phase A。身份保持是默认动作偏离身份需要用户明确的重新设计意图。serverPort/serverToken属于小型辅助 HTTP 服务器服务/live.js、SSE、/poll不是 dev server页面 URL 是那个真正服务某个pageFiles条目的 origin。若输出为{ ok: false, error: config_missing | config_invalid, path }说明项目需要一次性配置去读 live-setup.md 并按它执行。若输出携带非空的configDrift向用户告知一次哪些 HTML 文件未被覆盖、建议补进配置或把files改成 glob——绝不自动改配置。仓库的 CLI 侧测试如 live-e2e-cli-options.test.mjs覆盖了启动与轮询命令的参数解析行为可作为命令面与输出字段的验证依据。恢复命令一切以 journal 为准.impeccable/live/sessions/下的 append-only journal 是权威持久状态不是项目源码。聊天被打断、错过轮询、辅助进程重启或浏览器重载后使用node .gemini/skills/impeccable/scripts/live-status.mjs # 辅助状态、活跃会话、排队事件辅助宕机时也能用 node .gemini/skills/impeccable/scripts/live-resume.mjs --id SESSION_ID # 活跃快照、待处理事件、下一步安全动作 node .gemini/skills/impeccable/scripts/live-complete.mjs --id SESSION_ID # 校验清理完成后的人工最终确认服务器重启规则先重新启动live-server.mjs再轮询启动时会重新排队未确认事件因此永远不要请用户再点一次 Go除非live-resume.mjs报告已无活跃会话。这一断点续跑语义同样体现在浏览器侧会话管理逻辑中见 live-browser-session.js并与 live-reference.test.mjs 等契约测试相互印证。Handlegenerate变体生成主流程生成事件有两种模式。**Replace 模式默认**的事件结构{id, action, freeformPrompt?, count, pageUrl, element, screenshotPath?, comments?, strokes?}。Insert 模式event.mode insert{id, mode: insert, count, pageUrl, insert: { position, anchor }, placeholder: { width, height }, freeformPrompt?, screenshotPath?, comments?, strokes?}——没有action需要一个非空的freeformPrompt或标注annotationsplaceholder只是软性的尺寸提示。速度至关重要——用户正盯着被选中的元素。复用 preflight 元数据、把发现性调用压到最少。Insert 模式分支有截图就读仅看标注。若event.scaffold存在就直接用它、不要再跑辅助命令否则运行node .gemini/skills/impeccable/scripts/live-insert.mjs --id EVENT_ID --count EVENT_COUNT --position after \ --element-id ANCHOR_ID --classes class1,class2 --tag section --text ANCHOR_TEXT--position←event.insert.position锚点 flag 的映射与 wrap 完全相同。scaffold没有data-impeccable-variantoriginal变体是在insertLine处净新增的 HTMLCSS。在 source-preview 目标上scaffold 携带sourceWritten: false、wrapperBlock与replaceEndLine replaceStartLine表示插入把变体拼进wrapperBlock的标记处、并在一次编辑中插到replaceStartLine与 wrap 一节描述完全一致。依据 surface 判断访客模式写新标记前加载 craft-floor.md。Svelte 目标走与 wrap 相同的组件流manifest 中mode: insert每个变体是componentDir下的真实单根组件不带任何data-impeccable-*属性生成期绝不改路由accept 时把选中标记机械拼入sourceFile。非 Svelte 目标下 accept/discard 会移除包装层锚点元素保持原样。Replace 模式默认分步1. 读截图如有event.screenshotPath仅在用户 Go 前做过标注时才发送——它是烘焙了标注的 PNG规划前先读。它缺席时不要索要截图、也不要自己截没有标注的截图只会把你锚定在既有设计上与三个明显不同方向的简报相抵触请直接依据element.outerHTML、计算样式与提示词工作。标注语义comment 的{x, y}是元素局部的把文本绑定到该点下方的子元素标题附近的 comment 就是关于标题的。comment 与 stroke 除非明显配对否则彼此独立。Stroke 按形状解读闭合圈 这个东西强调不是裁剪区箭头 方向或运动交叉/斜线 删除涂鸦 依上下文看是强调或删除。若某 stroke 意图确实模糊且会改变简报生成前只问一个简短问题否则用一句话陈述你的解读。2. 包装元素wrapevent.scaffold存在时辅助命令已找到源并算好包装层视同成功输出、跳过下述命令event.scaffoldAttemptedscaffoldError表示 preflight 没跑完需要手跑命令。在 source-preview 目标上event.scaffold携带sourceWritten: false辅助命令没有写包装层而是交给你scaffold.wrapperBlock与所选元素的源范围replaceStartLine、replaceEndLine1 起始。你必须一次编辑同时写入包装层与全部变体把变体拼进wrapperBlock的 Variants: insert below this line 标记处再用结果替换[replaceStartLine, replaceEndLine]。分开写会让框架先重载、变体写不到浏览器永远停在 0/N。replaceEndLine replaceStartLine表示插入模式只插入、不删除。svelte-component路径从不设置sourceWritten。兜底命令node .gemini/skills/impeccable/scripts/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id ELEMENT_ID --classes class1,class2 --tag div --text TEXT_SNIPPETFlag 映射保持独立绝不并进--query--element-id←event.element.id--classes← 逗号连接的 classes--tag← tagName--text← textContent 前约 80 字符每次都传它用来区分重复的兄弟组件缺了会落刀到第一个匹配。若event.pageUrl指向某个文件则加--file PATH。若--text仍命中多个候选wrap 会以{ error: element_ambiguous, candidates, fallback: agent-driven }退出你需要结合页面上下文挑选正确区间并按 fallback 流程手写包装层。成功输出{ file, insertLine, commentSyntax, styleMode, styleTag, cssSelectorPrefixExamples, cssAuthoring }source-preview 目标还会附带上述sourceWritten: false字段。无 preflight scaffold 直接运行时它自己写包装层你在insertLine处拼变体。styleMode决定预览 CSS 的写法把它当作探测到的能力模式而非框架猜测scoped表示写scope ([data-impeccable-variantN])规则astro-global-prefixed表示使用返回的精确styleTag加显式[data-impeccable-variantN]前缀。以cssAuthoring为当前文件的唯一事实来源styleTag、选择器策略、要求、禁用模式除非它明说否则不要套任何框架特例。Svelte / SvelteKit 的组件预览路径对 Svelte 目标live-wrap.mjs返回previewMode: svelte-componentfile指向临时node_modules/.impeccable-live/id/manifest.jsoncomponentDir存放变体组件、sourceFile才是真实路由。scaffold 是AST 级的{#each}、{#if}等控制流块原样存活自由的 each 集合作为一个结构化 propkindcollection穿过契约。payload 已含componentStubMarkup已写进每个 stub 的、做过 prop 替换的标记所以不要回头读 manifest 或 stub。原地编辑v1.svelte、v2.svelte……绝不删除重建保留 stub 的控制流与propContract里的 prop 名绝不把循环展开成字面项。stub 的style已带入当前作用于所选元素的源规则可自由重写或删除。accept 时你的变体没有重新声明的任何种子规则都会被从源码移除预览从未应用它用户等于批准了一个没有它的设计。使用语义 class 选择器不用scope不用data-impeccable-*。用--file指向 manifest 路径回复浏览器挂载编译后的组件Svelte HMR 不会重置页面状态。accept 会机械合回选中组件标记恢复为路由表达式、CSS 调和、参数烘焙、缩进保持该路径没有 post-accept 清理负担。当选区含有独立预览无法支持的构造组件标签、bind:/use:、await 块、内联脚本、展开属性时wrap 返回普通 source-preview 包装层并携带previewFallback: { from: svelte-component, reason }照返回形态走即可。组件预览路径的参数要放进sidecar而绝不能作为属性Svelte 会把属性值里的{当表达式解析写入componentDir/params.json并按变体编号做 keyschema 见参数一节{ 1: [ {id:density,kind:steps,default:snug,label:Density,options:[ {value:airy,label:Airy},{value:snug,label:Snug} ]} ] }组件的style针对var(--p-id, default)range/toggle与[data-p-id…]steps编写外面套:global(...)使运行时旋钮值能到达已挂载根上的规则。兜底错误Fallback errorswrap 拒绝写进非源文件生成物、未跟踪文件——把改动落进这类文件等于静默数据丢失。三种形态都带fallback: agent-driven见 Handle fallbackfile_is_generated你的--file指向生成文件、element_not_in_sourcegeneratedMatch元素只存在于生成物中、element_not_found多半是运行时注入的。3. 加载动作的 referenceevent.action为impeccable自由形式时依据 SKILL.md 的设计规则加 craft-floor.md 工作自行判断 surface 的访客模式不加载子命令 reference——自由形式不是跳过参数预算的借口第 7 节的预算与自由形式偏向依然生效。其余任何动作bolder、quieter、distill、polish、typeset、colorize、layout、adapt、animate、delight、overdrive都要在规划前读对应的reference/action.md其 MUST 参数叠加在第 7 节预算之上。4. 规划三个变体先身份、再模式、后轴线Live 跑在既有 surface 上品牌早已选定——任务是在身份内部做变化而不是在多个身份之间挑选。最糟的失败就是给出三个偏离品牌的变体让用户无从接受。四阶段按序执行。Phase A抽取身份不可跳过。信息源按优先级DESIGN.md 的视觉系统字段 → CSS 自定义属性事实上的 token→ 被选元素及其父级的计算样式 → 兄弟组件的视觉修辞。写一句话如实记录屏幕上的内容主导表面色与强调色真实值不是暖色、加载的字体搭配、布局拓扑纵向堆叠 / 并排 / 网格 / 非对称 / 叠加、表面处理圆角、边框、阴影、装饰密度、从文案读出的语气。要具体宁可不写某个轴也不捏造不要给美学家族命名那是结论不是数据。这句话就是身份锁identity lock——每个变体并排时都必须读起来像同一个品牌。DESIGN.md 缺席绝不是借口。Phase B选模式默认 vs 偏离。**默认Default**保持身份、在身份内部变化表达适合约 90% 的会话。**偏离Departure**否定身份只在当前请求或提示词中用户明确要求时触发redesign this、rebuild from scratch、something completely different一条过期的 critique 或旧笔记不算授权。拿不准就默认错在默认只是三个同品牌相似感觉的变体可挽回错在偏离则是三个跑题变体不可挽回。Phase C规划三个变体。默认模式每个变体押注一条不同主轴线同时守住身份句。六条轴线①Hierarchy 层级哪个元素抢占视线、②Layout topology 布局拓扑堆叠 / 并排 / 网格 / 非对称 / 叠加、③Typographic system 排印体系在既有字体内做配对逻辑、比例、大小写/字重、④Color strategy 配色策略现有调色板里哪个角色承担表面Restrained / Committed / Full palette / Drenched只用已有 token、⑤Density 密度minimal / comfortable / dense、⑥Structural decomposition 结构分解合并、拆分、渐进披露。三个变体 三条不同轴线同一品牌的三面。新字体、新色相或新美学家族信号只属于偏离模式。偏离模式每个变体锚定一个从品牌推导出的不同美学方向绝不用固定目录读 PRODUCT.md 的 Brand Personality 词 → 推导承载它们的物理/空间/材质体验 → 由此导出彼此真正不同、且都不同于当前 surface 的三个方向拒绝那种理由套到隔壁产品也成立的条件反射式选择。每个方向必须是一句点名真实参照物的具体句博物馆展签系统而不是干净极简。两种模式下规划时就要为每个变体定下 2~3 个参数旋钮第 7 节预算。参数本身就是设计的一部分——规划期就定什么可调好过事后补。Phase D眯眼测试Squint test。默认把每个变体拉回 Phase A 的身份锁比对调色板/字体语气/修辞跑偏就说明它意外滑进了偏离返工再确认三条主轴线互不相同——三个密度更紧的变体是失败。偏离两轮先家族后句子。家族轮不可妥协给每个变体贴一个你自己定名的具体家族标签雷同或可互换就返工句子轮三句一句话描述并排两句押韵就返工。当主轴线是颜色或主题时三件套不得共享主题 主导色相是三个色彩世界不是三个色阶。动作类调用必须沿该动作的维度分化bolder每个变体放大不同维度尺度 / 饱和度 / 结构性改变quieter每个变体收回不同维度颜色 / 装饰 / 间距distill每个变体移除不同类别的冗余视觉噪声 / 冗余内容 / 嵌套结构polish每个变体一条不同的精修轴节奏 / 层级 / 微细节typeset每次不同配对 不同比例colorize每次不同色相家族变化彩度与对比策略layout不同结构排布而不是微调间距adapt每变体一个不同目标上下文mobile-first / tablet / desktop / print 或低数据animate不同动效语汇级联 stagger / clip 擦除 / 缩放聚焦 / morph / 视差delight不同个性口味微交互 / 排印惊喜 / 插画点缀 / 声触 / 彩蛋overdrive打破不同惯例尺度 / 结构 / 动效 / 输入模型 / 状态迁移跳过它提案并询问的步骤——live 是非交互的。5. 应用自由形式提示词如有event.freeformPrompt是用户对方向的上限约束所有变体在满足它的前提下、于 Phase B 模式内部探索不同解释。默认模式下提示词收窄的是轴线而非身份更有信心 → 一个变体放大层级、一个变体坚定强调色、一个变体收紧密度。偏离模式下提示词收窄的是车道而非家族报纸头版 → broadsheet vs tabloid vs trade journal然后跑家族轮。当提示词与品牌硬承诺或 DESIGN.md 不变量冲突时保留不变量除非用户明确撤销它。6. 交付变体交付的是原元素的完整 HTML 替换不是 CSS 补丁。预览 CSS 以style标签形式同置于包装层内。原子默认CSS 全部变体 参数清单在一次insertLine编辑中落地。模板!-- Variants: insert below this line -- style>style>div>node .gemini/skills/impeccable/scripts/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATHRELATIVE_PATH相对 project root若 dev server 缺 HMR浏览器直接抓取源码。回复后立刻再轮询。中断进行中的会话若浏览器已翻到 GENERATING 而 wrap 或生成失败必须告诉浏览器以重置工具栏node .gemini/skills/impeccable/scripts/live-poll.mjs --reply EVENT_ID error Short reason。绝不用live-accept --discard做这件事它是纯文件变更器浏览器看不到它工具栏会一直卡在省略号上--discard只用于浏览器自己发起的 discard 的源侧清理。Handle fallbackagent-driven 兜底wrap 返回fallback: agent-driven时由你自己选源文件目标不变现在要有三个预览变体且被接受的变体要落到下一次构建不会抹掉的地方。从错误 payload 定位元素真正所在element_not_in_sourcegeneratedMatch说明被服务的 HTML 是生成的去找生成器的模板或 partialelement_not_found说明是运行时注入去找渲染组件或数据源file_is_generated同理。纯视觉改动也可能更适合进共享样式表而不是模板。在服务文件中预览手工写 wrap 会产出的同款包装 scaffold!-- impeccable-variants-start ID --div>node .gemini/skills/impeccable/scripts/live-server.mjs stop该命令停止辅助进程并运行live-inject.mjs --remove剥除注入脚本想快速重启可stop --keep-inject.impeccable/live/config.json作为项目配置保留。随后全项目搜一遍并移除遗留的impeccable-variants-start包装层与impeccable-carbonize-start块。首次配置何时去读 live-setup.md仅当live.mjs报告config_missing/config_invalid、configDrift需要解释、或配置缺少cspChecked时去读 live-setup.md。它全权负责配置 schema、按框架的files表、注入适配器、drift 修复以及CSP 检测与同意流程——这是把注入脚本塞进带 CSP 的生产页面时必须走完的安全环节。配合 live-browser-ignores.js 的忽略规则与 live-browser-source.test.mjs 的源/预览关系测试可以拼出完整图景。设计语言视角为什么这套协议是impeccable 式的把 Live 协议放回 impeccable 的设计语言看它处处呼应顶层设计原则Brief winsfreeform 提示词与 surface brief 的优先级、Refinement preserves, redesign replaces默认模式守身份、偏离模式需授权、accept 只落选中的那一支、Visual authority is evidencePhase A 从 CSS 变量与计算样式取证而非看文件有没有 DESIGN.md。预览与交付之间不插 QA、一次原子编辑、参数在规划期就定、carbonize 强制收尾——这些都是为了让 Agent 在设计迭代中交付完整、绝不拖泥带水而设计的硬约束。若要在自己的 harness 上完整跑通这套链路仓库的 live 端到端测试群live-e2e.test.mjs、live-e2e-llm-agent.test.mjs、live-svelte-adapter-deepseek.test.mjs是最接近可执行规范的参考实现package.json中的test:live*脚本package.json则提供了相应的运行入口。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考