Impeccable Asset Producer以 Comp 为参考的可复用栅格资源生产线【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读本文讲解 Impeccable 设计系统工作流中的Asset Producer资源生产 Agent一个专门把“已批准的视觉稿approved comp”转化为干净、可复用、供 HTML/CSS/SVG/canvas/组件代码合成使用的栅格素材plate的角色。文章以 .qoder/skills/impeccable/reference/degraded/asset-producer.md 为骨架结合仓库中comp-spec、generate-image、embed-prompt、build-phase的实际实现完整还原从测量规格spec.json到逐区域出片、再到质量门禁验收的全流程。读完你将掌握如何判定透明/不透明 cutout、如何生成并落盘 plate、如何自查 alpha 通道与边缘、以及如何按固定格式上报并配合build-phase advance通过 plates 门禁。1. 角色定位Comp 是参考不是发货像素Asset Producer 在 Impeccable 的 craft 流程中负责生产清理production cleanup而不是新的美术方向。它只基于父级parent agent给出的已批准 mock、指派区域、联系表和约束工作不自行发挥。它的核心输出是一个plateA plate is the region regenerated at asset resolution from the comp crop as reference: same subject, same composition, same palette, same lighting and material, with the UI text and page chrome removed, at 1.5x the comp regions pixel size or more.也就是说plate 是“以 comp 裁剪图为参考、按资源分辨率重新生成”的区域素材主题、构图、调色板、光照、材质与原稿一致但移除了 UI 文字与页面装饰且像素尺寸至少是 comp 对应区域的1.5 倍。页面里的文字、控件、圆角、阴影与布局全部由代码绘制plate 只承担“代码画不出来的部分”。文档中有一句精辟的警告Crops from the comp are references, never shipping pixels: a comp is reference grade and a shipped crop is how a beautiful comp becomes a blurry site.来自 comp 的裁剪图只是参考绝不是发货像素comp 是参考级而把裁剪图直接发货是美丽的 comp 变成模糊网站的途径。这一角色定义对应仓库中的 agent 源文件 skill/agents/impeccable-asset-producer.md后者声明了该角色的工具集Read、Write、Edit、Bash、Glob、Grep、模型继承与 24 轮最大执行轮数。.qoder、.cursor、.claude、plugin、cursor-plugin等目录下的同名文档均由它构建时生成并额外带有一段“无子 Agent 能力时内联执行”的头部说明先输出完整输出契约再以自己同时扮演父级与子级的方式执行并在报告中用一行披露替换关系。2. 核心规则不重新设计文档的Core Rule是所有产出的底线除非父级明确要求更改否则保留参考稿的视觉角色、轮廓silhouette、调色板、光照、材质、纹理、相机角度与构图仅当透视属于物体或场景本身时才保留当卡片变换、阴影、圆角裁剪、边框或布局应由 CSS 创建时必须从栅格中移除这类呈现性装饰presentation chrome。这意味着 Asset Producer 的输出必须是“原料”背景干净、无 UI 叠加、无边框阴影把呈现层职责让渡给代码。补充禁令还包括不添加对象、不换风格、不重新诠释不改页面代码、不改 spec、不改 comp不生产 spec 未列出的任何内容——父级遗漏的区域应作为一行备注返回而不是擅自产片。3. 决策卡Decision Comps模式一次并行出片当父级递来的是决策卡包decision card packet而非已批准的 mock 时任务变成“一张卡 一个 comp 一个文件”立刻写到卡片声明的comp路径上。父级会按卡片并行运行多个 producer因此这张卡就是你的全部契约先产出不规划磁盘上的文件就是交付物决策页在等它。决策卡模式的关键约束只依据卡片的结构化字段与 PRODUCT.md 工作卡片信息薄到无法支撑 comp 时如实报告绝不用想象力填充以卡片方向渲染全保真度的北极星 comp请求表面的首屏、以表面自身结构为提示词引导按顺序命名区域及其比例关系而不是描述“世界的氛围”、完全承诺卡片的调色板、字体气质与材质世界原生 App 或移动优先的表面是竖屏画幅portrait frame按其设备视口呈现绝不默认横屏兄弟卡片以同样全保真、各自语法渲染一张表面、一个画幅同等承诺保证对比诚实只使用真实产品名与真实内容绝不虚构 PRODUCT.md 未携带的商业声明、价格、基准或日期排除条款约束的是“声明”本身而不是卡片世界未排除的媒介——活在照片里的主体就保留它的照片提示词侧车prompt sidecar写在文件旁边返回一行说明路径与任何偏差即可。“本节以下内容都属于资源生产任务决策卡运行一概不适用”——即决策卡是另一条并行的快速通道与常规 asset-production 流程解耦。4. 输入契约spec.json 是唯一清单常规生产流程的输入包括测量规格.impeccable/build/spec.json由impeccable comp-spec依据已批准的 comp 生成已批准的 comp 路径skill 脚本路径可选要生产的区域 id 子集、每区域附加提示词、格式或透明度需求。spec 中已包含每个栅格区域需要的全部信息id、kindplate、image、texture三种栅格类别、像素盒pixel box、采样调色板、宽高比aspect、备注note以及它必须落盘的plate路径。如果不存在 spec就停下来返回一行请父级先运行impeccable comp-spec。理由在文档中被说得非常明确You do not inventory the comp yourself; the spec is the inventory, and a second inventory disagrees with the first.你不自己清点 compspec 才是清单第二份清单只会与第一份互相矛盾。从源码看spec 由 crates/comp-verbs/src/comp_spec.rs 的measure_regions生成固定写到SPEC_PATH .impeccable/build/spec.json同时产出顶层字段toolcomp-spec、version、createdAt、compcomp 路径、warnings、uncoveredInkCells、compSize、aspect、orientationlandscape/portrait、全稿调色板palette、横向条带bands、regions数组每个 region 含id、kind、note、grid、box归一化坐标、px像素盒、aspect、区域采样palette、detail.energy细节能量、mediumraster或semantic、可选的clipped与coverBox以及栅格区域的plate路径未指定时默认为assets/plates/id.png见 PLATES_DIR。region 的kind支持六种plate插图、图表、图形、image照片、texture材质地面以及由代码绘制的text、control、chrome。栅格区域强制要求note至少 8 个字符且如果备注描述了绘制/照片/纹理类材质而 kind 却不是栅格类comp-spec会直接报错——“任何绘制、拍摄或纹理化的内容都以栅格 plate 交付”是一条硬校验。同时code 区域面积超过 comp 的 25%MAX_CODE_REGION_AREA或存在未被区域覆盖的墨迹格子uncoveredInkCells 3都会拒绝生成 spec。5. 四步生产流程The Job对 spec 中每一个medium: raster的区域按 spec 顺序执行以下四步第 1 步导出参考裁剪图# 在 skill 脚本目录下或以 npx impeccable 方式调用 impeccable comp-spec --crop id该命令把区域裁剪图写入.impeccable/build/crops/下作为参考。裁剪默认通过plate_reference处理它会将与本区域重叠的其他语义区域text/control/chrome用区域地面色覆盖确保传给图像模型的参考图里不含 UI 文字和控件。裁剪图带有impeccable:crop-of的 PNG 文本元数据记录来源 comp 与区域 id输出时明确提示Reference only: regenerate the plate from it, never ship it.仅作参考从中重新生成 plate绝不发货。裁剪还支持--out自定义输出路径、--scale n放大倍数以及--raw跳过语义覆盖。第 2 步判定背景并生成提示词先看已批准区域的材质二选一透明 cutout页面地面上的孤立图形、物体或线稿→--background transparent不透明照片、整幅插图或纹理→--background opaque。# 透明 cutout impeccable comp-spec --plate-prompt id --background transparent prompt.txt # 不透明 impeccable comp-spec --plate-prompt id --background opaque prompt.txt把输出保存为UTF-8 提示词文件。透明提示词会特别保留参考稿的放置位置与清晰边距、白色油漆不透明、细边缘、内部孔洞interior holes并移除界面边框、卡片圆角与布局背景。从源码看--plate-prompt只接受transparent | opaque | auto三种取值crates/comp-verbs/src/comp_spec.rs。提示词由plate_prompt_background组装同文件 L648 起结构为开头“以提供的裁剪图为已批准视觉参考在目标宽高比下重建为干净的生产素材”按 kind 区分texture强调“无缝可平铺材质板、无物体无文字无暗角”image强调“同一主体、同一取景、同一光照”其余默认按“设计插图板”处理强调“同一画法、同一风格、同一线宽与阴影”“精确保留轮廓、构图、透视、调色板含全稿前三主色、光照、材质与纹理”“移除一切不属于画作本身的 UI 文字、标签、标题、按钮与界面装饰”透明模式额外强调“移除界面边框、卡片圆角与布局背景只保留属于被引用物体自身的阴影不添加对象、不换概念、不换风格保留参考稿的放置、比例与清晰边距不放大主体填满画面页面地面与内部空隙转为真实透明 alpha白色油漆与其他实色前景保持不透明保留细边缘仅对参考中真正半透明的材质或软阴影保留部分 alpha无色键背景、无烘焙棋盘格、无 matte输出透明 PNG cutout”最后附上区域note作为Region: ...结尾。第 3 步产出 plate先创建输出目录选择与区域宽高比匹配、且至少 1.5 倍于其像素尺寸的受支持输出尺寸然后按以下优先级生产首选harness 原生图像工具。以裁剪图为输入、保存的提示词为文本cutout 请求透明 PNG。生成后运行impeccable embed-prompt plate --prompt-file prompt.txt如果对提示词做过细化务必把实际发送的原文保存下来再嵌入保证可溯源。API 兜底generate-image。命令格式为# 透明 cutout impeccable generate-image --ref crop.png --prompt-file prompt.txt --out plate.png \ --size WxH --quality high --background transparent # 不透明 impeccable generate-image --ref crop.png --prompt-file prompt.txt --out plate.png \ --size WxH --quality high --background opaque参数语义与默认值来自 crates/context/src/generate_image.rs参数默认值说明--ref无参考图裁剪图可多次传入决定走/images/edits的 multipart 编辑接口--prompt-file无提示词文件UTF-8与--prompt二选一文件优先--out无输出 PNG 路径--background要求.png后缀--size1536x1024输出尺寸WxH需匹配区域宽高比--qualitymedium质量档位生产建议high--background不传则不约束transparent / opaque / auto传了会同时带上output_format: png--modelgpt-image-2.5-flare覆盖默认模型如gpt-image-2、gpt-image-2.5-sunburst关键点API 兜底会自行嵌入提示词并记录背景到侧车文件out.json含 prompt、createdAt、tool、model、background、outputFormat、refs输出必须是 PNG兜底请求原生 alpha不做任何色键抠图chroma-keying。两个运行前提值得注意需要环境变量OPENAI_API_KEY否则会报 “use the harness-native image tool instead” 并退出设置了IMPECCABLE_IMAGE_GEN_FAKE环境变量时进入离线合成模式不调用任何 API直接按提示词哈希生成带SYNTHETIC COMP水印的 SVG/PNG 占位图透明模式输出真实 RGBA alpha见 generate_image.rs 的 png_fake_backgroundstdout 打印$0.00, no API call适合离线联调流水线。第 4 步对照验证与重试策略把 plate 与裁剪图并排打开对照主体、放置、比例、调色板、风格。对 cutout 还必须验证真实 alpha 通道存在在亮底与暗底上分别合成检查白色油漆必须保持实色、内部孔洞必须通透、细边缘不能出现光晕halo仔细检查玻璃与软阴影仅有部分 alpha 并不代表可信的半透明绝不对原生透明输出做色键处理也不在保存前压平flatten若原生工具返回了不透明像素或“画出来的棋盘格”在可用时改用 API 兜底重试否则如实上报透明度阻塞视觉不达标时收紧提示词并只重生成一次同一区域两次不达标保留较优的一张标记needs_parent_review并点名偏差drift。父级会在所有素材齐备后运行 plates 门禁在拿到门禁评分之前上报状态为unscored。6. 输出契约一行一个区域完成全部区域后按固定格式返回不多不少id plate path WxH score%|unscored accepted|needs_parent_review|blocked one-line note or -随后是全局且极简的blockers如缺 spec、缺 comp、无图像能力、key 耗尽与assumptions。除此之外不输出任何内容没有总结、没有赞美、没有实现建议。最后一道防线交给父级The parent runsimpeccable build-phase advanceto verify the plates against the same spec; a visual acceptance does not override a failing gate.父级运行impeccable build-phase advance按同一份 spec 校验 plates视觉上的认可不能覆盖失败的门禁。7. 质量闭环plates 门禁如何打分build-phase把 comp 主导的构建实现为磁盘上的状态机阶段顺序为comps → spec → plates → hero → sections → motion → responsive → review见 crates/comp-verbs/src/build_phase.rs。其中plates 阶段的门禁gate_plates会逐区域执行存在性plate路径下文件必须存在缺失即报 “plate missing for {id}: expected ...; produce it from comp-spec --crop {id} with generate-image --ref crop.png --prompt-file prompt.txt --out plate.png”可解码性必须是可解码的 PNG分辨率plate 宽度必须 ≥ 区域像素宽 × 1.5否则报 “a shipping plate needs at least Npx. Regenerate at asset size, do not crop the comp.”相似度评分用comp_diff把 plate 与区域参考对齐后比较产出structure / color / detail / overall四项分数Score结构见 comp_diff.rs 的compare门禁阈值PLATE_MIN 0.4、结构分下限PLATE_STRUCTURE_MIN 0.4透明板合成透明 plate 会先合成到区域采样的地面色上再参与评分测试plate_gate_scores_sparse_and_partial_alpha_on_the_sampled_ground专门验证部分 alpha 素材的行为拒绝 comp 裁剪当 plate若 plate 与原始区域的结构分接近“同一像素的重采样”会直接判定为 “a crop of the comp is never a plate”要求用裁剪图做参考重新生成门禁通过后输出N/M plates汇总并写入.impeccable/build/state.json中每个 plate 的status、score。也就是说Asset Producer 的“视觉验收”只解决主观质量问题客观的 1.5x 分辨率、结构/色彩/细节阈值与“非裁剪图”校验由同一份 spec 上的门禁强制执行——这与文档输出契约中的unscored机制完全对应。8. 提示词溯源embed-prompt 到底写了什么embed-prompt把生成提示词写进图片元数据实现“任何一张 plate 都能反查它当年用什么提示词、以什么参考生成的”。源码crates/context/src/embed_prompt.rs显示PNG 走tEXt明文或zTXtzlib 压缩文本块关键字为impeccable:promptKEYWORD 常量JPEG 走 COM 标记段同样以impeccable:prompt\0为前缀解析器逐块遍历 PNG chunk正确区分字节范围并提取首个嵌入提示词。这也是为什么文档要求“如果你细化了提示词保存并嵌入实际发送的原文”——嵌入的文本必须与真实发送的一致溯源才成立。API 兜底生成时若嵌入失败会打印failed to embed prompt in the image并保证侧车 JSON 仍然写出。9. 运行前提与环境所有impeccable verb命令由 skill 脚本目录下的启动器解析即.qoder/skills/impeccable/scripts/impeccableWindows 上为impeccable.cmd也可经npx impeccable调用启动器运行自包含二进制无需 Node 或其他运行时按平台分发cli/platform-packages 下提供 darwin-arm64/x64、linux-arm64/x64、windows-x64 各平台包生产图像需要 harness 原生图像工具或OPENAI_API_KEY离线联调可设IMPECCABLE_IMAGE_GEN_FAKE走合成占位工程产物统一落在.impeccable/build/spec、crops、grid、state、review 等与assets/plates/默认 plate 落盘目录。10. 小结从 Comp 到可合成素材的最小纪律Asset Producer 的全部工作可以压缩成三条纪律不重新设计——参考稿的视觉角色、轮廓、调色板、光照与构图是硬约束呈现性装饰交给代码spec 即契约——不自行清点、不越权生产一切以.impeccable/build/spec.json的 region 清单为准交付即报告、验收靠门禁——一行式输出契约配合build-phase advance的 plates 门禁1.5x 分辨率、结构/色彩/细节 ≥ 40%、拒绝 comp 裁剪图让“视觉好不好”与“规格过不过”分成两层互不覆盖。理解这条流水线就等于理解了 Impeccable 如何保证“comp 有多美、上线的页面就有多美”——因为每一块代码画不出的像素都是从一个被审慎测量、严格重建、可溯源提示词、并经门禁打分的 plate 开始的。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
