Impeccable Visualize 实战指南方向构图Direction Comps与资产生产Asset Production全流程【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读本文基于 Impeccable 技能参考文档 visualize.md完整讲解 comp-led以构图为驱动构建流程中方向构图与资产生产这一核心环节如何围绕已锁定的视觉方向生成三个高保真构图、如何通过唯一审批点获得用户批准、批准后如何将构图转化为可度量的构建规格以及每个栅格资产plate如何建立可追溯的 provenance来源证据。读完本文你将掌握 Impeccable 从构图三选一到规格化落地的完整实操链路并能理解底层命令generate-image、serve-question、build-phase、comp-spec、embed-prompt之间的调用关系与状态约束。一、加载前提何时进入 Visualize何时明确跳过visualize.md不是一份随时可以加载的通用文档它只在满足以下全部条件时才被加载comp-led 构建构建路径是构图驱动由 new-work.md 在构图主导的构建上加载图像生成可用存在 harness 原生的图像工具或 API 回退命令impeccable context报告可用的图像能力前置文档就绪PRODUCT.md和DESIGN.md是进入本环节的前提条件new-work流程已经解决视觉世界visual world本环节不得重新打开已确定的视觉世界无重复轮如果一次 surface-scope 结构轮已经把三张可视化卡片摆到用户面前即 new-work.md 的 established world 分支那么该轮已经履行了构图职责——此时锁定卡片上的构图即为已批准的构图只需记录批准并直接从 After approval 继续不要再生成任何新内容。code-led代码驱动构建则按契约跳过本环节——这是有意设计而非流程漂移加载本文件本身就是错误。这一点在 new-work.md 第 91 行有明确表述comp-led 构建下只要有图像生成能力就必须先可视化再构建而 code-led 构建下构图轮被契约跳过其承担的野心转移至方向契约的 FIRST VIEWPORT 块与命名的 signature interaction由 finish reviewer 在行为层面审计。此外构图探测probe测试的是构图、叙事、层级、密度、焦点时刻、签名使用与图像需求它不是第二次身份工作坊。DESIGN.md中已确定的调色板、字体方向、材质语言、组件性格、图像立场与动效语法都必须保持固定探测不得重新讨论。二、生成三个构图选项Generate three compositional options2.1 阶段状态约束构图必须落在 phase 状态之内构图轮运行在构建的阶段状态phase state中。进入本环节前必须已经执行impeccable build-phase start --direction seed key --kind assigned|pick|challenger|canon具体命令由掷骰roll的输出命名。其comps阶段必须在第一张构图生成前处于 open 状态。在 start 运行之前渲染的构图位于状态之外从该点恢复的会话将没有任何后续阶段可循。这一点有强制的执行保证从源码看impeccable generate-image会拒绝写入.impeccable/mocks/直到 start 已经运行参见 crates/context/src/generate_image.rs 中 run 入口的调用链harness 原生图像工具同样受此顺序约束。从 crates/comp-verbs/src/build_phase.rs 可以看到完整的阶段状态机定义pub const PHASES: [str; 8] [comps, spec, plates, hero, sections, motion, responsive, review];状态文件为.impeccable/build/state.json其中每个阶段记录statusopen / pending / skipped 等、openedAt、closedAt、attempts、notes、gate、forced字段。当以start --comp approved comp方式启动时例如 surface 轮已经锁定构图comps阶段会被标记为skipped并写入说明构图轮发生在本状态之前surface 轮或手工完成。2.2 渲染三个高保真 north-star 构图渲染三个彼此不同的、请求表面surface的高保真 north-star 构图保存到.impeccable/mocks/下这样它们能跨会话存续按表面自身的视口viewport构图原生 App 或移动优先的表面用设备尺寸的竖版portrait桌面端用横版landscape。一张手机屏幕被构图成横版会在任何代码被构建之前就先错误陈述了构图构图是构建线程自己的工作绝不委托只有持有方向完整上下文、且构建开始时见过每一张构图的线程才能写出提示词用 workspace 相对路径打开每张图片沙箱化的查看器拒绝绝对路径而项目根目录下的所有内容都有相对路径基于真实内容构图必须基于已与用户共同开发的真实内容与表面概念。2.3 established world用真实身份锚定每一张构图当构建发生在已确立的世界established world中时每一张构图都必须锚定真实身份截取一张代表性现有页面的截图将其作为参考图像传入harness 图像工具的输入图像或impeccable generate-image --ref提示词以新表面的结构开头而参考图承载调色板、字体与组件性格——因为仅靠 DESIGN.md 的文字在缺少像素参考时会漂移。参考图贡献什么、必须不贡献什么需要明确命名参考图携带carry over参考图不得携带must not浏览器/应用 chrome参考页自身的内容调色板——字体——组件性格——一张被逐字照搬的 banner、hero 或卡片是参考图的泄漏reference leaking不是保真。2.4 为什么是三这个数字一张构图会诱发橡皮图章式盖章rubber-stamping三张之间的差异空间才能暴露值得构建的构图。三张中的第一张就是已选卡片上的决策构图decision comp——它已经在这个纪律下以全保真渲染了这一方向所以只需再生成两张、在第一张所固定的变量上做变化然后把三张一起送往审批点。唯一例外当一轮到达时没有决策构图如 degraded roll、identity-mode 页面、未经过决策轮就锁定的方向才需要在此处完整渲染三张。2.5 构图的四条自我校验纪律① 构图是设计好的表面不是主题的图片。提示词以表面自身的结构开头该设计拥有的区域按顺序命名并说明比例关系没有导航的页面就明说没有导航而不是发明一个非常规表面要陈述其非常规骨架。提示词若以氛围开头得到的是一幅小插图vignette——模型画出了鱼市而不是鱼市的网站。每次渲染后自检如果它能当海报挂起来或者读起来像贴了字的照片它就不是构图要用更字面的布局脚手架重新生成。② 反方向的失败同样存在表面里没有主题。主题以区域所承载的内容出现世界只是装饰画框永不取代画框所展示的内容。删除deletion通常搭乘在提示词的排除列表上所以排除列表约束的是虚构声明而媒介禁令medium ban属于已承诺的图像立场不来自谨慎。接受渲染前指向主题一张把世界的一切都画了、却与主题无关的渲染无论氛围多忠实都是失败要用按区域逐条命名主题内容的方式重新生成。③ 把构图当作已上线的屏幕来评判。访客的任务必须能仅凭图像读出来。不加说明文字地读出表面的模式一张读不出模式的渲染只是没有表面的艺术指导。把访客的任务作为提示词的脊梁重新生成。④ 承诺是深度不是覆盖面。世界通过一个主导动作dominant move加上支撑它的材质、字体与间距进入其余区域保持静止让这个动作可以被读出来。一个在世界语法中做好本职工作的区域比一个在表演概念的区域更能推进方向。这条检查削减的是竞争competition不是内容被安静下来的区域保留其信息只是停止表演。当第二个元素与命名的焦点时刻以相同尺度竞争构图就在喊叫没有命名的焦点时刻时多个区域同时表演概念同样是喊叫。Busy 是更响不是更大胆Busy is louder, not bolder。2.6 变化策略当用户把多个概念列入候选短名单shortlist时把三张分布在多个概念之间当一个方向已被承诺变化图像能够解决的结构不确定性拓扑topology、序列sequence、密度density、层级hierarchy、焦点构图focal composition或交互取景interaction framing展示超出开场时刻的足够内容证明概念能统治整个表面不要生成调色板制品、不要问新的氛围问题、不要引入不同的字体声音、不要发明新母题。如果已承诺的世界无法支撑该概念回到概念短名单而不是改变世界。2.7 构图是方向测试不是截图规格每张构图都是方向测试而不是截图规格screenshot specification。核心 UI 文本、响应式行为、可访问性、语义和交互状态仍然是实现责任不会在构图轮中解决。三、唯一审批点One approval point3.1 展示方式与提问把三张构图一起展示在决策页上决策页impeccable serve-question每个构图一个选项构图作为其 hero 图或 harness 原生仅当 harness 能内联渲染图片时纯文本表面不算展示。然后向用户提问三件事哪些应该保留carry forward哪些对世界而言感觉是假的feels false to the world选中的概念应该批准approve、合并combine、修订revise还是拒绝reject提问后停下并等待。结构化的模拟用户structured simulated user视为已到席并收到同样的问题。3.2 委托与边界在用户批准方向或明确委托选择之前不得开始写代码。如果用户委托使用任务简报、PRODUCT.md 与 DESIGN.md 进行选择并陈述证据。批准提炼的是任务概念不修改 DESIGN.md。3.3 无替代、无跳过条件这个审批点没有替代品也没有跳过条件结构化提问工具报错时回退到决策页仅当两者都失败才能把选择视为已委托委托的选择与批准一样被记录并且在你的第一次回复中披露而非最后一次。finish reviewer 会把构图轮产物没有记录批准视为实质性发现material finding。注意区分.impeccable/mocks/decision/下的决策构图是方向轮direction round的产物不是构图轮的输出其存在本身不构成批准。3.4 批准后的记录工具能找到的地方批准之后把选择记录在工具能找到的位置已批准构图的路径写入 surface brief其.json提示词 sidecar 中写入approved: true——每张经impeccable generate-image生成的构图都有一个 sidecar如果原生工具没有生成手动创建它。sidecar 随 mocks 文件夹一起移动因此批准能跨越会话与机器存续即使这些机器从未见过 brief它也是impeccable build-phase advance读取以关闭 comps 阶段的数据源。从源码看 comps 阶段的 gate 检查crates/comp-verbs/src/build_phase.rs 中gate_comps会逐一验证.impeccable/mocks/下至少有3 张构图.png/.webp/.jpg/.jpeg每张构图都有携带prompt的.jsonsidecar缺失会报 no prompt sidecar for: ...恰好一张构图带有approved: true零张报 no comp is approved并提示用决策页或结构化提问工具把三张放到用户面前后写入多于一张则报错因为只允许一张gate 通过后才允许进入下一阶段approved路径被记录进 gate 记录供后续build-phase advance使用。随后总结构图方案与构图中不得被字面化must not be literalized的部分返回 new-work.md从已批准概念记录方向契约然后开始构建。四、批准之后构图变成规格After approval: the comp becomes a spec4.1 north star而非重新构图许可证已批准的构图是翻译为语义化、响应式、可访问代码的北极星north star绝不是重新构图的许可证保留调色板和情绪、却重绘拓扑是第二次艺术指导。三条硬性约束不栅格化核心 UI 文本或控件Do not rasterize core UI text or controls不替换视觉驱动器批准后未经询问不得替换不同的视觉驱动器visual driver构图展示的内容是被测量的不是被记住的What the comp shows is measured, not remembered。4.2 spec 阶段构图 → 区域框 采样调色板按 new-work.md 第 6 节构建以阶段方式运行impeccable build-phase。spec 阶段把构图转化为带采样调色板的区域框region boxesimpeccable comp-spec --comp comp --grid # 在构图上画坐标网格 impeccable comp-spec --comp comp --regions file # 按网格跨度命名区域从 crates/comp-verbs/src/comp_spec.rs 可以看到网格为 10 列 × 10 行列以A–J命名、行以0–9命名区域跨度用colrow:colrow形式如E0:J4表示输出.impeccable/build/comp-grid.png与.impeccable/build/spec.jsonspec 还通过 dominant color 算法对构图做调色板采样palette_of→ 5 个主色 × 3 次迭代。4.3 区域的媒介由像素是什么决定而不是由什么好构建决定每个区域的媒介medium由像素本身是什么决定绝不取决于哪个更好构建图figure、产品对象、机械、任何带透视/阴影/绘画技巧的插图、以及任何具名纹理woven cloth、paper grain、fabric、leather、brushed metal→ 属于plate/image/texture区域以栅格raster形式交付文本、控件、chrome、含可数元素的图表、扁平形状系统、以及任何必须移动/缩放/响应的东西 →语义化。在 comp_spec 源码中is_raster_kind只认plate | image | texture三种PAINTED_NOTE正则列出了判定绘制类内容的关键词diagram、drawing、illustration、photo、photograph、painting、rendering、artwork、engraving、etching、texture、grain、fabric、watercolour、sketch、3d 等。为雕琢面板的质感写 CSS、为撕裂边缘写多顶点的clip-path都是对已批准设计的安静删除quiet deletion检测器的organic-clip-path规则与buried-raster规则、以及 hero gate 的区域评分region scores会捕获这类问题organic_clip_regions扫描 HTML 中的 clip-path 形态并与 raster 区域匹配。删除一个图像原生的区域是用户在审批点做出的范围决策绝不是批准后的无声扁平化silent flattening。4.4 生成图像是材料不是声明生成图像是材料material不是声明claim证据规则约束的是断言、规格、证言与以真实照片呈现的图片从不约束渲染保真度。即构图可以自由演示但商业与事实性声明价格、客户、基准、端点、产品不具备的能力不可杜撰。五、Plates 与 provenance来源证据5.1 plates 阶段先于任何页面代码每个栅格区域的 plate 在 plates 阶段生产先于任何页面代码由随附的资产生产者shipped asset producer或当前线程完成impeccable generate-image --plate id或使用 harness 图像工具以 comp 裁剪crop为输入、spec 的 plate 提示词为生成提示。从 crates/comp-verbs/src/build_phase.rs 的gate_plates看plates 阶段的 gate 会逐项检查plate 文件存在且可解码、宽度满足资产尺寸下限min(1536, px_w × 1.5)纹理除外、与 comp 区域的结构/颜色/细节对比得分达标整体 ≥ 0.4结构 ≥ 0.4、以及拒绝构图的裁剪即 plate若 plate 与 comp 区域裁剪的结构相似度 ≥ 0.95判为使用同一像素的缩放必须用裁剪作参考重新生成。纹理区域texture则是 comp 区域的干净补丁镜像平铺仅当没有干净补丁时才生成。5.2 生成上下文是资产的一部分embed-prompt生成上下文generation context属于资产本身。无论用哪个工具生成了图像都要运行.grok/skills/impeccable/scripts/impeccable embed-prompt image --prompt prompt使用工具实际收到的精确字符串impeccable generate-image自身会自动完成这一步这样意图就存活在文件内部。从 crates/context/src/embed_prompt.rs 的实现看该命令支持三种载体PNG在 IEND 前写入关键字impeccable:prompt的tEXt文本块幂等已有则重建 body 并替换JPEG写入impeccable:prompt\0prompt格式的 COM 段受 0xffff 段长上限约束其他格式回退到image.jsonsidecar。配套子命令impeccable embed-prompt image --read # 恢复嵌入的提示词 impeccable embed-prompt --scan dir # 列出仍缺提示词的栅格--scan递归遍历目录跳过 node_modules 与点开头的隐藏目录对每个 PNG/JPG/JPEG/WebP 检查是否可恢复 prompt先查内嵌再查 sidecar输出MISSING:列表scan 只读删除仅保留给被放弃的栅格绝不用于 scan 标记的文件。provenance 嵌入的提示词 spec 中该区域的记录行artifact 引用的每个栅格都携带它来源图、库存图或既有栅格则嵌入其来源origin说明。之后在修复批次fix batch或评审者重建中创建或替换的栅格用同样方式生产修复放弃的栅格在同一批次中删除。5.3 自动集成generate-image 的 sidecar 与嵌入impeccable generate-imagecrates/context/src/generate_image.rs在 API 调用成功后自动完成三件事将提示词嵌入图像文件调用embed_prompt逻辑写出out.jsonsidecar包含prompt、createdAt、tool、modelgpt-image-2与refs当使用了--ref输出IMAGE: ...行报告嵌入与 sidecar 状态。参数方面--prompt/--prompt-file、--out必填--size默认1536x1024--quality默认medium--ref可重复传入参考图有 ref 时走images/edits的 multipart 上传无 ref 时走images/generations需要OPENAI_API_KEY环境变量未设置时提示改用 harness 原生图像工具。环境中设IMPECCABLE_IMAGE_GEN_FAKE时会进入 fake 模式本地合成占位图不发 API 请求便于无密钥环境下联调管线。sidecar 写入的approved: true正是 build-phase 的 comps gate 读取的数据。5.4 图片转换器converter图像转换使用impeccable context在启动时报告的转换器IMAGE_TOOLS 行仅当它报告无转换器时才执行 probe探测且每个会话至多一次绝不逐图探测。六、相关命令速查命令作用关键参数 / 输出impeccable build-phase start --direction key --kind ...打开 comps 阶段状态输出含后续命令--comp comp跳过 comps 阶段impeccable generate-image --prompt ... --out path [--ref img] [--size WxH] [--quality q]生成构图/plate自动嵌入 prompt 写 sidecar--plate id端到端生产并评分impeccable serve-question --payload file --start启动决策页输出 QUESTION URL / KEY--wait --key key收集答案impeccable comp-spec --comp c --grid/--regions f/--crop id/--plate-prompt id构图 → 度量规格输出spec.json、comp-grid.pngimpeccable build-phase advance关闭当前阶段退出码 2 gate 失败并打印原因impeccable embed-prompt img --prompt .../--read/--scan dir嵌入 / 读取 / 扫描 provenancePNG tEXt、JPEG COM、sidecar 回退impeccable build-phase scaffold生成度量布局脚手架layout.cssCSS 自定义属性hero-reference.html七、总结从构图到规格的闭环整个 visualize 环节的本质是一条纪律严明的闭环不重开视觉世界方向、调色板、字体、材质全部锁定探测只解决构图层问题三张构图结构优先的提示词、表面自身的视口、established world 用像素参考锚定身份唯一审批点三图并陈、提问后等待、无替代无跳过、委托必须披露批准落盘surface brief sidecarapproved: truebuild-phase advance据此关闭 comps 阶段规格化comp-spec把构图变成带采样调色板的区域框媒介由像素决定栅格区进入 plates 阶段provenance 随资产走嵌入提示词 spec 行--scan兜底审计修复批次同样遵守。这套机制的关键价值在于把构图批准从一次性的主观判断转化为磁盘上可被后续阶段和 gate 反复读取的状态事实。构图是方向测试而非截图规格而批准后的构图是度量契约measured contract而非氛围板——这正是 Impeccable 让 AI harness 在设计中表现得更好的核心手段之一。后续的方向契约、分阶段构建与打磨收尾请继续阅读 new-work.md。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考