Impeccable 方向 Comp 与素材生产指南Comp-Led 构建中的可视化审批流程与图板溯源【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读本文是 Impeccable 设计语言体系中 comp-led以设计稿驱动构建流程的核心操作指南基于仓库内 visualize.md 参考文档展开并结合 build_phase.rs、comp_spec.rs、generate_image.rs、embed_prompt.rs 等源码佐证。读完本文你将掌握如何在既定视觉世界内为一块新页面生成并审阅三张高保真方向 Comp、如何在一个不可跳过的审批点上与用户敲定方向、审批后如何把 Comp 转译为可测量的构建规格spec与栅格图板plate以及如何让每一张生成图都携带可追溯的 prompt 溯源信息。适用边界什么情况下加载这份流程visualize.md 是 comp-led 构建流程中的一环它的加载条件与前置约束在文档开头被严格界定加载时机在 comp-led设计稿驱动构建中、且具备图像生成能力harness 原生图像工具或impeccable context报告的 API 兜底时从 new-work.md 加载本文档进入 comp 轮。代码契约跳过code-led代码驱动契约按设计跳过本文件这不是流程漂移。code-led 轮次的野心由方向契约direction contract中的 FIRST VIEWPORT 块与具名签名交互承载finish reviewer 以行为审计这些承诺。前置条件PRODUCT.md 与 DESIGN.md 是前置条件new-work 已解决视觉世界world本文件不得重新打开该议题。调色板、字体方向、材质语言、组件性格、图像立场、动效语法全部保持固定。已完成的表面轮如果表面范围内的结构轮surface-scope structure round已经向用户展示过三张可视化卡片并锁定一张见 new-work.md那么该轮的 comp 轮已履行完毕——被锁定卡片的 comp 就是已批准 comp直接记录审批并从 After approval审批后继续不再生成任何新图。此外comp 轮是构建自身的产出绝不委托他人写提示词的线程持有方向的完整上下文且在构建开始时已见过每一张 comp。前置构建状态机与 comps 相位Comp 轮运行在构建的相位状态phase state内。在生成第一张 comp 之前impeccable build-phase start必须已经执行。从源码 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等字段。comps是首个相位状态文件new_state()逻辑显示start --direction seed key --kind ...之后comps相位为open其余相位为pending只有以已批准 comp 启动start --comp approved comp时comps相位被标记为skipped并记录注释 started with an approved comp; the comp round happened before this state (surface round or manual)在start运行之前渲染的 comp 位于状态之外——从该点恢复的会话没有可跟随的相位。impeccable generate-image在start运行前会拒绝向.impeccable/mocks/写入harness 原生图像工具同样受此顺序约束。生成三个方向 Comp落盘位置与视口纪律渲染三张请求表面的高保真北极星north-starcomp保存在.impeccable/mocks/下以跨会话存活。Comp 必须按表面自身的视口绘制原生 App 或移动优先表面设备尺寸下的竖屏portrait桌面横屏landscape。手机屏幕被 comp 成横屏会在任何东西构建之前就歪曲构图。所有图像一律用工作区相对路径打开——沙箱化的查看器会拒绝绝对路径而项目根目录下的每个文件都有相对路径。基于真实内容与既有身份Comp 必须建立在真实内容以及此前与用户一起开发的表面概念之上。在既有世界established world上构建时每张 comp 都要锚定真实身份截取一张有代表性的现有页面截图将其作为参考图像传入harness 图像工具的 input image或impeccable generate-image --ref提示词以新表面的结构开头而参考图承载调色板、字体与组件性格——因为 DESIGN.md 的文字描述会漂移像素参考不会。同时要明确参考图贡献什么、不贡献什么chrome、调色板、字体、组件性格可以继承参考页自身的内容不继承——原样搬来的 banner、hero 或卡片是参考泄漏reference leaking不是保真。为什么是三张一张 comp 会诱导橡皮图章式rubber-stamping认可三张之间的差异spread才能把值得构建的构图暴露出来。选中的卡片其决策 comp 是三张中的第一张它已经在这一纪律下以完整保真度渲染了该方向。因此只需再生成两张——变化第一张固定下来的变量——然后把三张一起送到审批点。只有一种例外需要在此处渲染全部三张轮次到达时没有决策 comp降级轮、身份模式页面、未经过决策轮就被固定的方向。提示词纪律结构引导而非氛围引导一张 comp 是设计好的表面不是主题的照片。文档给出的检查清单源码层面由 comp-spec 的 PAINTED_NOTE 正则与 build_phase 的 hero 门控配合执行以表面结构开头按顺序具名区域及其尺度关系。没有导航的页面就明说没有非常规表面要陈述其非常规骨架。以氛围开头的提示词只会得到一张小插图vignette——模型画的是鱼市而不是鱼市的网站。自查如果渲染结果可以当海报挂起来或读起来像上面有字的照片那就不是 comp要以更字面的布局脚手架重新生成。主体必须在场表面不能完全没有主题内容。主体以区域容纳的内容形式出现世界只负责装扮画框不能取代画框展示的东西。删除通常混进提示词的排除列表exclusion list因此排除条款要绑定虚构主张媒介禁令属于已承诺的图像立场而非谨慎。接受渲染前要能指出主体。按上线屏幕评判访客的任务必须仅从图像即可读出。无标题时能说出表面的模式mode才算合格读不出模式的渲染只是没有表面的艺术指导。承诺是深度而非覆盖世界通过一个主导动作dominant move加上支撑它的材质、字体与间距进入其余区域保持静止以便读懂该动作。检查裁掉的是竞争不是内容——被安静化的区域保留信息、停止表演。若第二个元素与具名焦点同尺度竞争就是 comp 在喊叫没有具名焦点时多个区域同时表演概念同样是喊叫。用户短列表包含多个概念时三张跨越它们分布方向已承诺时让三张变化图像能解决的结构不确定性拓扑、序列、密度、层级、焦点构图或交互取景。展示开场时刻之外的足够内容证明概念能统治整个表面。不生成调色板工件、不问新的氛围问题、不引入不同字体声线、不发明新母题。如果已承诺的世界无法支撑概念回到概念短列表而不是改变世界。每张 comp 是方向测试不是截图规格核心 UI 文字、响应式行为、可访问性、语义和交互状态始终是实现的职责。单一审批点不可替代、不可跳过展示与提问把三张 comp 一起展示在决策页上impeccable serve-question每个选项一张 compcomp 作为其 hero 图或仅在 harness 能内联渲染图片时展示于 harness 内——纯文本表面不算展示。然后问三件事什么应当带向前、什么对这个世界感觉不真实、所选概念应该批准 / 合并 / 修改 / 拒绝。然后停下等待。结构化模拟用户structured simulated user算作已出席收到同样的问题。决策页机制见 serve_question.rs 源码serve-question --start --payload file守护进程化并打印页面 URL 与 key--wait --key key收集答案--update --key key --payload file在同一张桌子上递送后续轮次。委托、降级与记录用户批准方向或明确委托选择之前不得开始写代码。若委托依据任务简报task brief、PRODUCT.md 与 DESIGN.md 选择并陈述证据。审批细化任务概念不修改 DESIGN.md。此审批点没有替代品、没有跳过条件。结构化提问工具出错时回退到决策页只有两者都失败才能把选择当作已委托——委托的挑选与审批记录完全一致并在第一封回复中披露不是最后一封。finish reviewer 会把 comp 轮没有记录的审批当作 material finding。.impeccable/mocks/decision/下的决策 comp 是方向轮的产物不是 comp 轮的输出本身不暗示任何审批。审批后如何记录把选择记录到工具能找到的地方已批准 comp 的路径写进 surface briefsurface brief 的读写命令impeccable surface-brief read primary-target/impeccable surface-brief write primary-target body-file实现见 surface_briefs.rsbrief 落盘于.impeccable/surfaces/其.jsonprompt sidecar 增加approved: true。每个经impeccable generate-image生成的 comp 都有一个 sidecar原生工具没生成就手动创建。sidecar 随 mocks 文件夹一起移动因此审批跨会话、跨机器存活即使机器永远看不到 briefsidecar 正是impeccable build-phase advance读取以关闭 comps 相位的东西。从源码 build_phase.rs 的gate_comps看门控逻辑会检查.impeccable/mocks/下至少 3 张 comp每张都有 prompt sidecar恰好一张带approved: true零张报 no comp is approved多张报 N comps carry approved: true。然后总结构图与 comp 中不得被字面化的部分返回 new-work.md从已批准概念记录方向契约开始构建。审批之后Comp 变成规格Spec已批准 comp 是翻译成语义化、响应式、可访问代码的北极星绝不是重新构图recompose的许可——保留调色板和氛围却重绘拓扑是第二次艺术指导。不得栅格化核心 UI 文字或控件未经询问不得在审批后替换不同的视觉驱动者。测量而非记忆Comp 展示的内容要被测量而不是被记住。new-work.md 第 6 节把构建作为相位运行impeccable build-phasespec 相位把 comp 变成区域盒region boxes与采样调色板impeccable comp-spec --comp comp --grid生成 10×10 带标签坐标网格源码 comp_spec.rs 中render_grid将 A0 置于左上、J9 位于右下然后在 regions 文件中按网格跨度如E0:J4具名每个区域运行impeccable comp-spec --comp comp --regions file写入.impeccable/build/spec.json。每个区域的介质medium由像素是什么决定而不是由什么可构建决定介质判定出货方式plate/image/texture图形、产品实物、机械装置、任何带透视/明暗/绘画技法的插图、任何具名纹理编织布、纸纹、织物、皮革、拉丝金属栅格图板raster platetext/control/chrome文字、控件、chrome、可数元素构成的图表、扁平形状系统、任何需要移动/缩放/响应的东西语义化代码为雕塑面板的漆面写 CSS或为撕裂边缘写多顶点clip-path是对已批准设计的安静删除检测器的 organic-clip-path、buried-raster 规则与 hero 门的区域评分会抓住它见 build_phase.rs 中对有机 clip-path 与内联 SVG 插图的拒绝逻辑。删除图像原生image-native区域是用户在审批点做出的范围决定绝不是审批后的静默扁平化。生成的图像是材质不是主张证据规则约束断言、规格、证言和呈现为真实的照片永远不约束渲染保真度。字体测量纪律spec 相位对文字区域执行测量而非猜测impeccable font-match --measure id从像素读取 cap height、宽度等级与字重impeccable font-match --rank id --text ...以 Google Fonts 指纹索引为候选池按指纹距离排序USE行即 CSS。spec 门控拒绝手工写入的chosen字体——只有 font-match 写入的选择才被接受见 build_phase.rs 中 A face typed into spec.json is the guess this gate exists to refuse。图板Plates与溯源Provenance图板生产流程每个栅格区域的图板在plates 相位、任何页面代码之前生产由随仓库分发的 asset producerasset 生产者或当前线程完成取参考裁片impeccable comp-spec --crop id写入该区域的参考裁片源码 comp_spec.rs 显示裁片带impeccable:crop-oftEXt 元数据且明确 Reference only: regenerate the plate from it, never ship it——comp 的裁片永远不是图板plates 门控会对区域原始像素的重采样拒之门外因为 comp 的颗粒、邻居边缘和分辨率会随成品一起出货保存生成提示词impeccable comp-spec --plate-prompt id生成该栅格区域的再生成提示词源码plate_prompt会根据区域 kind 注入 seamless surface texture / same subject, same framing, same lighting / same drawing, same style 等句子生成图板优先把裁片与提示词交给 harness 原生图像工具API 兜底为impeccable generate-image --ref crop.png --prompt-file prompt.txt --out plate.png --size WxH --quality high隔离抠图cutout给 plate-prompt 与 API 生成命令都加--background transparent使用原生 PNG alpha保留白色颜料与清晰空隙并在浅色与深色背景上检查 alpha整幅图像使用--background opaque先创建输出目录再检查明暗两种底上的 alpha。generate-image 的底层行为从 generate_image.rs 源码看impeccable generate-image的实现要点默认模型为gpt-image-2.5-flare可用--model覆盖测试覆盖gpt-image-2、gpt-image-2.5-sunburst等无--ref时走/images/generationsJSON带--ref时走/images/editsmultipartimage[]字段支持 png/webp/jpeg MIME 推断--size默认1536x1024--quality默认medium--background仅接受transparent、opaque、auto三者之一且要求--out以.png结尾否则在网络调用与输出之前即报错对应测试invalid_background_requests_fail_before_network_or_output环境变量IMPECCABLE_IMAGE_GEN_FAKE非空时进入合成占位模式无需 API key 与网络输出带 SYNTHETIC COMP 标记的 SVG/PNGPNG 写入 tEXt 注释用于离线演练成功后自动执行 prompt 内嵌与 sidecar 写入见下节stdout 报告IMAGE: out (size, quality, model, billed to your OpenAI key); prompt embedded sidecar at out.json。生成上下文是资产的一部分无论用哪个工具生成图像之后都要运行.rovodev/skills/impeccable/scripts/impeccable embed-prompt image --prompt prompt传入与工具收到的一模一样的字符串impeccable generate-image自身会执行这一步。这样意图就活在文件内部。源码 embed_prompt.rs 显示PNG 的 prompt 以内嵌于tEXt/zTXtchunk、关键词impeccable:prompt写入JPEG 写入 COM 段marker0xfe读不到内嵌时回退读image.jsonsidecar 的prompt字段。--read恢复它--scan dir列出仍缺失 prompt 的栅格文件返回码 3 表示存在缺失扫描只读删除只留给轮次放弃的栅格绝不删除被扫描标记的文件。内嵌 prompt 加 spec 中该区域的行构成栅格的溯源provenance构件引用的每一张栅格都必须携带它来源图、库存图或既有栅格改为内嵌其来源origin替代。之后在修复批或 reviewer 重建中创建或替换的栅格以同样方式生产修复放弃的栅格在同一批中删除。图像转换器用impeccable context在启动时报告IMAGE_TOOLS 行的转换器转换图像仅当报告没有转换器时才探测每个会话至多一次绝不逐图探测。收尾返回构建主流程Comp 轮完成后返回 new-work.md 处理方向契约、相位化构建与收尾finishing pass。整个闭环可以概括为build-phase start --direction seed key --kind ...开启状态机comps相位打开生成三张结构引导的高保真 comp 到.impeccable/mocks/各带 prompt sidecar决策页serve-question或 harness 内联展示等待用户批准 / 合并 / 修改 / 拒绝批准后surface brief 记录 comp 路径sidecar 写入approved: truebuild-phase advance读取审批关闭 comps 相位comp-spec --grid/--regions测量区域盒与调色板--crop--plate-prompt 图像工具生产图板embed-prompt内嵌溯源hero 门以 72% 总体分与区域判读missing / contradicted / drift验收首屏随后 sections、motion、responsive、review 相位依次推进finish reviewer 最终以 comp 为基准审计保真度。这套流程的价值在于把图像生成从一次性的气氛渲染改造成可测量、可审批、可追溯的设计契约——comp 既是向用户展示的方向提案又是门控验证的规格来源而每一张进入成品的栅格都带着它被生成的完整意图。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考