Impeccable Asset Producer 素材生产指南基于批准 Comp 的 Plate 高保真再生成全流程【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读Impeccable Asset Producer是 Impeccable 设计系统工作流中的素材生产环节它不负责新创意方向而是把已经获批的 Comp合成稿中每个medium: raster的栅格区域重新生成为页面代码可以直接消费的干净素材Plate。本文以 .trae/skills/impeccable/reference/degraded/asset-producer.md其源定义见 skill/agents/impeccable-asset-producer.md为主线结合仓库内 Rust 引擎的comp-spec、generate-image、embed-prompt、build-phase四个命令的源码实现讲清楚一条完整的实战链路从输入契约spec.json→ 参考裁剪 → 背景决策与提示词生成 → Plate 生产 → 视觉验收 → 机器门禁校验。读完你能掌握如何为 Impeccable 的 Comp 驱动构建comp-led build正确产出、校验并交付栅格素材。一、角色定位生产清理而非新艺术方向Asset Producer 的核心职责一句话即可概括production cleanup, not new art direction。你只能基于父 Agent 给定的三样东西工作已批准的 mock、分配的裁剪crops、联系图contact sheets以及约束条件。每一张你产出的栅格图都是 HTML、CSS、SVG、canvas 与组件代码将要组合的原材料raw ingredient——最终页面里文字、控件、圆角、阴影和布局全部由代码绘制Plate 只承载代码画不出来的东西。因此该角色在 Impeccable 的构建体系中处在明确的中间位置上游是决策轮次产出的 Comp 与comp-spec测得的规格下游是build-phase的状态机门禁。整个流程的核心反模式被文档与源码反复强调A comp is reference grade and a shipped crop is how a beautiful comp becomes a blurry site.Comp 只是参考级把 Comp 裁剪直接当成品素材就是一张精美稿变成模糊网站的起因。核心规则不重设计Do not redesign除非父 Agent 明确要求改变否则必须保留参考稿的视觉角色visual role、轮廓silhouette、调色板palette、光照lighting、材质material、纹理texture、机位角度camera angle与构图composition。规则同时规定了透视的归属边界只有当透视属于物体或场景本身时才保留例如物体自身的空间透视当卡片变换、阴影、圆角裁切、边框、布局应当由 CSS 创建时必须把这些展示性装饰presentation chrome从栅格中移除。这一点在源码中有直接证据plate_prompt_background生成的提示词明确写着 Remove every piece of UI text, label, caption, button, and interface chrome that is not part of the artwork itself 以及 Remove letterboxing, borders, card corners, drop shadows, and any layout background that the page will draw in code见 crates/comp-verbs/src/comp_spec.rs。换言之代码能画的交给代码Plate 只保留代码画不出的绘画性内容。二、输入契约spec.json 就是全部清单Asset Producer 的输入约定如下原文五要素实测规格.impeccable/build/spec.json——由impeccable comp-spec根据批准 Comp 生成批准 Comp 的路径skill 脚本路径可选要生产的 region id 子集、每个 region 的额外提示词注释、格式与透明度需求。spec 中每个栅格 region 已包含生产所需的全部字段id、kindplate / image / texture、像素盒pixel box、采样调色板、宽高比aspect、注释note以及它必须落盘的plate路径。铁律没有 spec 就停手。文档明确规定若没有 spec停止并回一行字请父 Agent 先运行impeccable comp-spec。你不能自己去给 Comp 做盘点——the spec is the inventory, and a second inventory disagrees with the firstspec 就是清单第二份清单只会与第一份冲突。从源码看spec 由 crates/comp-verbs/src/comp_spec.rs 的measure_regions生成顶层结构包含tool: comp-spec、version、createdAt、compComp 路径compSize宽高像素、aspect、orientationlandscape / portrait全局palette主色 覆盖率与bands水平色带位置regions数组每个 region 含id、kind、note、grid、box、px像素坐标、aspect、palette、detail.energy、mediumraster / semantic、plate路径可能还有coverBox、clipped等warnings与uncoveredInkCells。其中medium的判定逻辑是kind为 plate / image / texture 的 region 自动得到medium: raster见measure_regions中let medium raw.get(medium)...unwrap_or_else(|| if raster { raster } else { semantic })。这正是哪些区域要出 Plate的唯一权威来源。三、开始生产前comp-spec 的三个辅助命令生产动作之前通常会用到comp-spec的三个子命令它们的帮助文本在源码中完整可见crates/comp-verbs/src/comp_spec.rs 的run函数impeccable comp-spec --comp png --grid 写 .impeccable/build/comp-grid.png10x10 标注网格 调色板 色带 impeccable comp-spec --comp png --regions json 测量区域 - .impeccable/build/spec.json impeccable comp-spec --comp png --auto 没有 regions 文件时按色带自动切 band 区域 impeccable comp-spec --print 打印精简 spec impeccable comp-spec --crop id [--out f] [--scale n] 某区域的参考裁剪绝不是交付素材 impeccable comp-spec --plate-prompt id [--background transparent|opaque|auto] 栅格区域的再生成提示词3.1 网格坐标系--grid输出的.impeccable/build/comp-grid.png是一张叠了红色网格线的 CompA0 左上角到 J9 右下角共 10×10 格每格带黄色标签。grid_to_box负责把形如E0:J4的跨度解析成归一化矩形见 crates/comp-verbs/src/comp_spec.rs。regions 文件的标准形状是{ regions: [ { id: exploded-plate, kind: plate, grid: E0:H4, note: exploded carburetor drawing }, { id: masthead, kind: chrome, grid: A0:J0, note: navy bar } ] }kind的取值为plate | image | texture绘制性材质每张插图、照片、图形、产品物件、纹理都会作为栅格 Plate 交付或text | control | chrome由代码绘制。源码还给出了重要提示texture 区域应是该材质的一块干净采样单元ground 上无墨迹而不是它覆盖的整条色带页面会平铺tile它而落在材质上的墨迹内容需要单独建 region。3.2 spec 的测量与守卫measure_regions在生成 spec 时做了大量守卫这些约束直接塑造了 Asset Producer 的输入质量每个 region 必须带 ≥8 字符的 notenote 既驱动 Plate 提示词也驱动门禁消息a drawing named as chrome is only caught by what its note says把画作标记成 chrome 的错误只有靠 note 才能抓出来。绘制性拒绝painted-material refusalkind 为 text/control 但 note 描述的是绘画性材质时直接报错除非该 region 设置了codeDrawn: true。代码区域面积上限非栅格、非 band 的 region 若面积超过 Comp 的 25%MAX_CODE_REGION_AREA 0.25会被拒绝要求把内部元素逐个拆成独立 region或显式声明container: true。裁切检测clipped栅格 region 若墨迹在某一侧接触盒子边缘超过EDGE_CONTACT_MIN 0.35的边长比例会写入 warning/失败——因为object-fit: cover会在那里把画面切掉。未覆盖墨迹检测uncoveredInkCells超过 3 个带墨迹的网格单元没有被任何 region 命名时拒绝除非设置allowUncovered: true。这些守卫的意义在于喂给 Asset Producer 的 spec 本身就已通过一轮机器自检生产时不需要再返工调整区域定义。四、生产流程每个 region 的四步走文档规定按 spec 中 region 的顺序逐个执行以下四步。以 regionid为例。第 1 步写出参考裁剪impeccable comp-spec --crop id该命令把 region 的像素盒从 Comp 中裁出默认写到.impeccable/build/crops/id.png可用--out与--scale n覆盖。源码中栅格 region 的裁剪会先经plate_reference处理把该 region 内重叠的其他非栅格区域用页面底色填充抹掉避免 UI 文字/控件混进参考图见 crates/comp-verbs/src/comp_spec.rs。关键认知crops 是参考reference永远不是交付像素。--crop的输出消息也明示Reference only: regenerate the plate from it, never ship it.第 2 步背景决策 保存提示词先根据批准区域的内容判定背景类型透明剪影transparent cutout页面底色上的孤立图形、物件或线条画不透明opaque照片、整幅插画或纹理。然后把生成的提示词保存为 UTF-8 提示词文件impeccable comp-spec --plate-prompt id --background transparent prompt.txt # 剪影 impeccable comp-spec --plate-prompt id --background opaque prompt.txt # 其他--background的合法取值是transparent | opaque | auto其他值会被 CLI 直接拒绝源码中对--plate-prompt与generate-image的--background均有此校验。从源码看plate_prompt_background会根据 kind 注入三档不同的种类行textureThis is a seamless surface texture. Output a tileable texture plate with no objects, no text, no vignette.imageThis is a photographic or illustrated image region. Output the same subject, same framing, same lighting.其余plateThis is a designed illustration plate. Output the same drawing, same style, same line weight and shading.无论哪档提示词都固定要求保留轮廓、构图、透视、调色板把 spec 全局前三主色拼进提示词、光照、材质与纹理移除不属于画作本身的 UI 文字/标签/按钮/界面装饰。透明档还会追加严格约束Preserve the references placement, scale, and clear margins exactly; do not enlarge the subject to fill the frame... No chroma background, baked-in checkerboard, or matte. Output a transparent PNG cutout.保留参考中的位置与留白、不得放大主体填满画框、不得有色度键背景/烘焙棋盘格/遮罩输出透明 PNG 剪影。第 3 步按 spec 路径产出 Plate先创建输出目录选择一个与 region 宽高比匹配、至少为 region 像素尺寸 1.5 倍的输出尺寸。两条路径二选一首选harness 原生图像工具。以裁剪图为输入、保存的提示词为提示剪影请求透明 PNG。生成后执行impeccable embed-prompt plate --prompt-file prompt.txt如果你改写过提示词必须把实际发送的文本保存并嵌入保证发送的就是嵌入的。API 兜底generate-image。剪影用impeccable generate-image --ref crop.png --prompt-file prompt.txt --out plate.png --size WxH --quality high --background transparent其他情况把--background换成opaque。API 兜底会自动嵌入提示词并把背景记录在 sidecarplate.json中。输出必须是 PNG兜底请求原生 alpha不做任何色度键抠图chroma-keying。generate-image的源码细节值得展开crates/context/src/generate_image.rs默认模型为gpt-image-2.5-flareDEFAULT_MODEL可用--model覆盖测试用例中出现了gpt-image-2与gpt-image-2.5-sunburst见同文件round_trip测试带--ref时走 multipart 的/images/edits接口参考图以image[]字段上传按扩展名推断image/png/image/webp/image/jpeg不带--ref走 JSON 的/images/generations--size默认1536x1024--quality默认mediumPlate 生产应显式传high指定--background时必须用.png作为--out源码在发请求前就拒绝非 PNG 输出依赖环境变量OPENAI_API_KEY未设置时报错并建议改用 harness 原生图像工具成功生成后自动调用embed_prompt把提示词嵌入 PNG 元数据并写出 sidecar JSON记录prompt、createdAt、tool、model、background、outputFormat、refs支持IMPECCABLE_IMAGE_GEN_FAKE环境变量驱动的离线假模式生成带SYNTHETIC COMP标记的占位图不发 API 请求透明模式下会写真正的 RGBA alpha 通道测试fake_cutout_has_real_alpha_and_default_fake_stays_rgb断言了这一点。embed-prompt的落盘机制crates/context/src/embed_prompt.rsPNG 走tEXt块关键字为impeccable:prompt会幂等地替换已存在的同名块并重建 IEND 之前的字节JPEG 走 COM 段其他格式退化为image.jsonsidecar。它还提供--read读回提示词与--scan dir递归扫描目录下所有栅格报告缺失提示词的素材两个审计模式——后者可用于后期核查 Plate 的可溯源性与素材库完整性。第 4 步并排比对与透明度检查把 Plate 放到裁剪图旁边比对主体subject、放置placement、比例scale、调色板palette、风格style。对剪影类 Plate 还要做一组专门的透明度体检验证存在真实的 alpha 通道分别在浅色与深色底色上合成查看白色颜料必须保持不透明、内部孔洞必须透出底色、细边缘不能出现光晕halo玻璃与软阴影要特别仔细部分 alpha 本身并不能保证可信的半透明partial alpha alone does not ensure convincing translucency。纪律性要求原生透明输出绝不再做色度键抠图或在保存前拍平flatten若原生工具返回了不透明像素或画出来的棋盘格有 API 兜底时用兜底重试否则上报透明度阻塞transparency blocker视觉走样时收紧提示词最多再生成一次同一 region 连续两次失败保留较好的一张标记为needs_parent_review并明确指出漂移drift所在。最后一条很重要视觉接受不覆盖门禁失败。父 Agent 会在全部素材齐备后运行 plates 门禁在拿到门禁分数之前上报一律记unscored。五、交付契约输出格式生产结束后按以下契约回报不多不少每个栅格 region 一行id plate path WxH score%|unscored accepted|needs_parent_review|blocked one-line note or -blockers全局且最小化地列出阻塞项缺 spec、缺 comp、无图像能力、key 耗尽等assumptions同样全局、最小化。除此之外什么都不输出不要总结、不要自我表扬、不要实现建议。随后父 Agent 运行impeccable build-phase advance用同一份 spec 验证这些 Plate——这是机器门禁视觉上看着对也不能推翻失败的 gate。六、门禁验证build-phase 如何校验 Plateimpeccable build-phase把 Comp 驱动的构建组织成磁盘上的状态机八个阶段依次为crates/comp-verbs/src/build_phase.rscomps → spec → plates → hero → sections → motion → responsive → reviewAsset Producer 的交付对应plates 阶段的门禁gate_plates。它会逐 region 做以下检查全部有明确阈值检查项规则阈值文件存在spec 中plate路径必须真实存在—可解码必须是可解码的 PNGpng_io::decode_png—最小宽度非 texture 的 Plate 宽度 ≥min(1536, region像素宽 × 1.5)1536/ 1.5×结构分与plate_reference参考图的构图一致性PLATE_STRUCTURE_MIN 0.4总评分结构/颜色/细节加权后的整体分PLATE_MIN 0.4细节增量Comp 平静energy 12但 Plate 细节增量 45% 时报警噪声/颗粒/更繁复的主体0.45纹理门texture 的有效分 0.5×color 0.5×min(detail/0.6, 1)PLATE_MIN 0.4裁剪冒充Plate 与 Comp 原始 region 的结构相似度 ≥ 0.95 时判为comp crop 冒充 Plate0.95其中最后一个检查直接印证了文档的核心纪律a crop of the comp is never a plate——即便一张裁剪视觉上完美门禁也会因为它是同一份像素的重采样而拒绝structure X% against the raw region, a resample of the same pixels。另外两个细节值得注意透明 Plate 的评分方式gate_plates检测到 Plate 存在部分透明像素时会用 region 采样地面色/palette/0/hex合成后再与参考图比对避免透明区域被误判为漏画提示词可溯源门禁会读取 PNG 元数据中的impeccable:fake标记假模式产物与嵌入提示词确保每一张交付素材都有可审计的生成记录。从 CLI 路由看这些命令都挂在同一个impeccable二进制上crates/cli/src/main.rsembed-prompt、generate-image、comp-spec、build-phase分别映射到impeccable_context::run_embed_prompt、impeccable_context::run_generate_image、impeccable_comp_verbs::run_comp_spec、impeccable_comp_verbs的 build-phase 入口说明生产素材 → 嵌入提示词 → 门禁验证在引擎内是一条完整、无浏览器依赖的本地链路。七、决策 Comp 的特殊情形Decision Comps文档中单独划出一段特殊场景当父 Agent 递来的是决策卡包decision card packet而非批准 mock 时任务性质完全不同契约即一张卡一卡、一文件渲染完成的瞬间就写入该卡声明的comp路径。父 Agent 会按卡并行运行多个生产者实例磁盘上的文件就是交付物决策页面正在等它——所以generate first, plan never先产出永远别先规划。提示词以表面结构为纲按顺序点名区域及其比例关系而不是描述世界的氛围以卡自己的调色板、字体性格、材质世界完整呈现。原生 App / 移动优先的表面必须是设备视口比例的竖幅portrait绝不能默认横版。内容纪律只用真实产品名与真实内容PRODUCT.md 没写的商业主张、价格、基准、日期一律不得虚构。排除项exclusions约束的是主张而不是媒介本身——比如主体活在照片里的世界就保留照片。回报格式在文件旁写提示词 sidecar回报仅一行路径 任何偏离。这段规则之后的所有章节即本文第四、五、六节的内容才是常规素材生产任务两者不可混淆。八、实战要点速查把整条链路压缩成一张可对照的检查表开工前确认.impeccable/build/spec.json存在且由comp-spec生成没有就停手回报一行让父 Agent 补跑impeccable comp-spec。每个 raster regioncomp-spec --crop id取参考 → 判定透明/不透明 →comp-spec --plate-prompt id --background transparent|opaque存提示词 → 按 spec 的plate路径产出 ≥1.5× 像素尺寸的 PNG →embed-prompt嵌入提示词改过提示词就嵌入实际发送的文本。剪影验收真 alpha、深浅底色合成、白色实、孔洞透、细边无光晕、玻璃/软阴影看半透明可信度绝不 chroma-key、绝不拍平。失败策略视觉走样 → 收紧提示词再生成一次二次失败 → 保留较好的标needs_parent_review并命名漂移。交付每 region 一行id plate path WxH score%|unscored verdict note加全局最小化的blockers与assumptions。收尾父 Agent 运行impeccable build-phase advance过 plates 门禁存在性、可解码、最小宽度、结构/颜色/细节评分、crop 冒充检测unscored状态保持到拿到门禁分数为止。这条工作流的意义在于它把精美 Comp与可落地的页面之间的鸿沟用参考裁剪 受控提示词 嵌入溯源 机器门禁这四道工序填平。素材生产不是艺术再创作而是一次以 spec 为契约、以门禁为准绳的高保真再生成——这正是 Impeccable 让 AI 产出的页面在视觉上忠实于已批准方向的核心保障。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考