Impeccable Asset Producer从已定稿 Comp 到干净可复用栅格资产的生产规范【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable导读Impeccable 的构图comp经过审批之后下一步不是直接手写页面而是进入资产生产阶段把 comp 里每个由绘图、照片或纹理构成的区域重新生成成 HTML/CSS/组件代码可以直接合成的干净栅格资产plate。本文以 Impeccable 仓库中的资产生产角色定义asset-producer.md为核心结合comp-spec、generate-image、embed-prompt与build-phase的源码实现完整讲解该角色的核心规则、输入契约、逐区域工作流、透明抠图决策、输出契约与门禁校验帮助你理解如何把一张漂亮的 comp 变成不会发糊的网站资产这一套完整流水线。角色定位生产清理而非新的美术方向Asset Producer 是 Impeccable craft 中的资产生产代理它的职责边界非常明确production cleanup生产清理不是 new art direction新美术方向。它只依据父代理parent agent给出的已审批 mock、分配好的裁剪区域crops、联系表contact sheets和约束来工作并且你创建的每一个栅格都是 HTML、CSS、SVG、canvas 与组件代码将要合成的原始原料raw ingredient。在仓库中这个角色的定义文件是 skill/agents/impeccable-asset-producer.md其中给出了运行参数的完整说明字段值nameimpeccable-asset-producertoolsRead、Write、Edit、Bash、Glob、Grepeffortmediummax-turns24本仓库把同一份 agent 定义在构建时生成到.opencode/skills/impeccable/reference/degraded/等各 harness 目录下每个目录内同名文件内容一致顶部注明 Generated from skill/agents/ at build time这些副本仅指示角色在**无子代理能力no subagent capability**的 harness 下如何内联运行由父代理直接承担该角色并在一行内披露替代执行的事实。因此角色本身的约束与工作流在任何 harness 下都是一致的。核心规则Do not redesign资产生产的第一条铁律是Do not redesign. 除非父代理明确要求修改否则必须保留参考图的视觉角色、剪影、调色板、光照、材质、纹理、相机角度和构图。但保留并非原样照搬规则特别区分了属于物体/场景自身的透视与应由 CSS 完成的表现层当 CSS 应该负责卡片变换card transform、阴影shadow、圆角裁剪rounded clipping、边框border或布局layout时这些表现性 chrome 必须从栅格中移除栅格只承载代码画不出来的东西文本、控件、圆角、阴影和布局全部由页面代码绘制。这条规则与 visualize.md 中plate 是区域在资产分辨率下、以 comp 裁剪为参考重新生成的结果同主体、同构图、同调色板、同光照与材质移除 UI 文本与页面 chrome的描述完全一致——plate 与 comp 的关系是重生成而非截取。Decision Comps决策卡模式下的极简契约正常情况下Asset Producer 处理的是已审批 mock。但父代理有时递来的是**决策卡包decision card packet**而不是已审批 mock此时任务退化为一张卡、一个文件、在渲染的那一刻就写入卡片声明的comp路径。决策卡模式的要点包括父代理会为每张卡并行运行一个 Producer 实例这张卡就是你的全部契约先生成、绝不规划磁盘上的文件即交付物决策页正在等待它只依据卡的结构化字段与 PRODUCT.md 工作卡信息太薄无法支撑一个 comp 时就如实报告绝不用想象去填补report a card too thin to brief a comp, never pad it from imagination以全保真渲染 north-star comp首屏由表面自身结构主导提示词按顺序命名区域及比例关系而不是世界的氛围原生 App 或移动优先表面必须是设备视口下的竖屏帧绝不默认横屏所有兄弟卡在各自语法下以同样全保真渲染一个表面、一个画幅投入对等才能让对比公平只允许真实产品名与真实内容不发明 PRODUCT.md 未承载的商业主张、价格、基准或日期排除项约束的是主张本身而不是卡片世界未排除的媒介——照片中的主体继续保留照片提示词 sidecar 写在文件旁返回一行路径 任何偏差。注意Decision Comp 是一段与资产生产并行的独立任务本文件在决策卡一节以下的所有内容只适用于资产生产流程不适用于决策卡运行。输入契约spec 就是库存清单期望的输入Asset Producer 期望收到三样东西外加可选参数测量后的 spec.impeccable/build/spec.json由impeccable comp-spec从已审批 comp 生成已审批 comp 的路径skill 脚本路径可选要生产的区域 id 子集、每区域附加提示词说明、格式或透明度需求。spec 中每个栅格区域都带有id、kindplate / image / texture、像素盒子pixel box、采样调色板、宽高比aspect、note以及它必须落盘的 plate 路径。没有 spec 就停下来If there is no spec, stop and return one line asking the parent to runimpeccable comp-specfirst. You do not inventory the comp yourself; the spec is the inventory, and a second inventory disagrees with the first.这句你不需要自己盘点 compspec 就是库存清单而第二份清单会与第一份矛盾是整个输入契约的灵魂单一事实来源single source of truth避免 Producer 凭主观重新解读 comp。spec 从哪里来comp-spec 的测量逻辑从源码看comp-spec是纯计算、无浏览器依赖的测量器见 crates/comp-verbs/src/comp_spec.rs 的模块注释 Pure; no browser。它定义了一组关键常量pub const BUILD_DIR: str .impeccable/build; pub const SPEC_PATH: str .impeccable/build/spec.json; pub const GRID_PATH: str .impeccable/build/comp-grid.png; pub const PLATES_DIR: str assets/plates; const COLS: [u8] bABCDEFGHIJ; pub const MAX_CODE_REGION_AREA: f64 0.25; pub const EDGE_CONTACT_MIN: f64 0.35;完整命令行形态来自run()的 usage 输出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 文件时按横向带自动切分 impeccable comp-spec --print 打印紧凑版 spec impeccable comp-spec --crop id [--out f] [--scale n] 区域的参考裁剪图绝不是交付资产 impeccable comp-spec --plate-prompt id [--background transparent|opaque|auto] 栅格区域的重新生成提示词regions JSON 的标准形状为{ regions: [ { id: art, kind: plate|image|texture|text|control|chrome, grid: E0:J4, note: ... } ] }网格坐标采用 A0左上到 J9右下的 10x10 标注grid_to_box解析colrow:colrow这样的 span如E0:J4--grid会生成带红色网格线与黄底黑色标签的 comp-grid.png代码见render_grid使用 [255,40,40,200] 线条与 [255,230,120,255] 标签色。测量阶段measure_regions会做大量校验这些校验决定了 spec 的质量也间接约束了 Producer 的输入每个区域必须有 id、且不允许重复kind 取值限定为plate | image | texture | text | control | chrome | bandis_kind其他值回退为band非 band 区域必须有至少 8 字符的 note——因为 note 驱动 plate 提示词与门禁消息把画出来的东西命名为 chrome 只能靠 note 内容被发现墨迹类型校验PAINTED_NOTE若 kind 是text/control/chrome但 note 描述了绘制/照片/纹理材质匹配diagram|drawing|illustration|photo|photograph|painting|texture|sketch|silhouette|product shot|hero image|3d等词则直接报错要求改为 plate/image/texture 或加codeDrawn: true超大代码区域校验非栅格、非 band 区域面积超过整图 25%MAX_CODE_REGION_AREA时报错提示拆成多个区域或声明container: true裁切检测栅格区域若墨迹触及盒子边缘artwork_touches_edges接触比例阈值EDGE_CONTACT_MIN 0.35给出警告——否则 plate 以object-fit: cover放置时会被切掉未覆盖墨迹校验10x10 网格中存在未被任何区域覆盖的高能量格子超过 4 个时报错除非设置allowUncovered: true。区域对象最终按固定字段顺序组装id、kind、note、grid、box归一化矩形、px像素矩形、aspect、palette采样调色板、detail.energy、mediumraster/semantic、plate栅格区域的落盘路径默认assets/plates/id.png。print_spec的紧凑输出以SPEC / PALETTE / BANDS / REGION / PLATES / WARN / RULE行组织RULE 行是给后续消费方的最终提醒anything not in this list does not exist on the page: no borders, rules, chrome, or containers the comp does not show. Every raster region ships as its plate, never as CSS.工作流每个栅格区域的四步生产medium: raster的区域即 kind 为 plate / image / texture 的区域都会以 plate 形态交付到其plate路径。plate 的定义是以 comp 裁剪为参考在资产分辨率下重新生成区域同主体、同构图、同调色板、同光照与材质移除 UI 文本与页面 chrome尺寸至少为 comp 区域像素尺寸的1.5 倍。仓库在 visualize.md 中用一句话点明了动机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 变成模糊网站的途径。按 spec 中区域顺序每个区域执行以下四步第 1 步写出参考裁剪skill/scripts/impeccable comp-spec --crop id裁剪写至.impeccable/build/crops/。从源码看comp_spec.rs 中--crop分支对栅格区域它调用plate_reference以区域调色板首个颜色为底色把区域内交叠的文本/控件/chrome 区域用底色填平从而得到去除 UI 元素的干净参考同时会把impeccable:crop-of文本块写入 PNGimpeccable:crop-of值为comp路径#区域id。输出提示明确写着Reference only: regenerate the plate from it, never ship it.第 2 步从已审批区域选择背景类型这是透明与否的决策点透明抠图transparent cutout页面上独立的图形、物体或线稿isolated figure, object, or line drawing on the page ground→ 透明不透明opaque照片、整幅插画或纹理 → 不透明。将生成的提示词保存为 UTF-8 文件skill/scripts/impeccable comp-spec --plate-prompt id --background transparent # 抠图 skill/scripts/impeccable comp-spec --plate-prompt id --background opaque # 其他透明提示词会额外保留参考图的放置位置与干净边距clear margins、白色颜料white paint、精细边缘fine edges与内部孔洞interior holes。提示词的实际构成可以在plate_prompt_backgroundcomp_spec.rs里看到完整模板它按 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.设计插画 plate同绘制、同风格、同线宽与明暗。公共部分固定要求以裁剪为已批准视觉参考在目标宽高比下重建为干净生产资产并以 spec 整体调色板前三个颜色约束 palette透明模式追加Remove the page ground and interior gaps to genuine transparent alpha. Keep white paint and other solid foreground colors opaque, preserve fine edges, and retain partial alpha only for genuinely translucent material or soft shadows... No chroma background, baked-in checkerboard, or matte. Output a transparent PNG cutout.把页面底色与内部空隙真正转为透明 alpha白色颜料与实色前景保持不透明保留精细边缘只对真正半透明的材质或软阴影保留部分 alpha禁止色度抠图背景、烤入棋盘格或遮罩输出透明 PNG 抠图。第 3 步在精确的 plate 路径产出资产先创建输出目录选择与区域宽高比匹配、且至少为 comp 区域像素尺寸 1.5 倍的受支持输出尺寸。两条产线首选harness 原生图像工具Codex 环境下即 imagegen skill 的内置image_gen路径——以裁剪为输入、保存的提示词为指令抠图请求透明 PNG随后执行skill/scripts/impeccable embed-prompt plate --prompt-file prompt.txt若精修了提示词请保存并内嵌实际发送的原文。API 回退generate-image 命令skill/scripts/impeccable generate-image --ref crop.png --prompt-file prompt.txt --out plate.png --size WxH --quality high --background transparent # 或不透明--background opaqueAPI 回退会自动内嵌提示词并在 sidecar 中记录背景类型。输出必须是 PNG回退请求原生 alpha不做任何色度抠图no chroma-keying。generate-image的 Rust 实现位于 crates/context/src/generate_image.rs默认模型为gpt-image-2.5-flareDEFAULT_MODEL常量并带有一个基于提示词哈希生成占位调色板的 SVG 兜底路径。第 4 步比对验证与透明质检将 plate 与裁剪并排比对检查主体、放置、比例、调色板与风格。对抠图必须验证真实 alpha 通道存在在浅色与深色底上分别合成检查白色颜料必须保持实心、内部孔洞必须透空、精细边缘不得出现光晕halo玻璃与软阴影要仔细检查——部分 alpha 存在不等于半透明可信partial alpha alone does not ensure convincing translucency绝不对原生透明输出做色度抠图或在保存前压平flatten。若原生工具返回不透明像素或画出来的棋盘格有 API 回退时用回退重试否则如实上报透明阻塞transparency blocker。视觉不合格时收紧提示词并只重生成一次同一区域两次失误保留较好的一张、标记为needs_parent_review、并写明漂移点name the drift。图片门禁plates gate由父代理在所有资产齐备后运行在拿到门禁分数之前一律上报unscored。边界与禁止项不重新设计不添加物体、不改风格、不重新诠释——comp 已按现状获批不触碰页面代码、spec 或 comp不生产 spec 未列出的任何东西父代理遗漏的区域以一行备注回传而不是补一张 plate。输出契约一行式回报每个栅格区域回报一行格式固定id plate path WxH score%|unscored accepted|needs_parent_review|blocked one-line note or -随后输出全局且极简的blockers缺失的 spec、缺失的 comp、无图像能力、key 耗尽与assumptions。除此之外什么都没有不写总结、不写溢美之词、不给实现建议。最后父代理会用impeccable build-phase advance依据同一份 spec 校验 plates——视觉验收不能推翻未通过的门禁a visual acceptance does not override a failing gate。门禁与构建阶段为什么视觉验收不能替代门禁视觉验收不能推翻门禁这句契约在 crates/comp-verbs/src/build_phase.rs 中有完整落地。comp 引导的构建是一个磁盘上的状态机共 8 个阶段pub const PHASES: [str; 8] [comps, spec, plates, hero, sections, motion, responsive, review];状态写入.impeccable/build/state.jsonstate_path()每个阶段带statusopen/pending/skipped 等、openedAt/closedAt、attempts、notes、gate与forced字段plates 阶段的分数阈值常量定义了通过的客观标准PLATE_MIN: f64 0.4、PLATE_STRUCTURE_MIN: f64 0.4hero 阶段为HERO_MIN 0.72responsive 为RESPONSIVE_MIN 0.65门禁用comp_diff的compare在同一 crate 内进程内完成build_phase.rs头注释说明 JS 版是 fork 子进程Rust 版改为进程内调用对比 build 与 comp 的对齐结果并产出Score与工件。也就是说Asset Producer 汇报的score%最终由 build-phase 的客观分数校验Producer 的我目测通过了只是过程性判断门禁分数才是阶段能否关闭的依据。这也解释了为什么输出契约要求unscored 直到门禁分数可用。来源与出处provenance提示词与资产同生共死每一个栅格资产的生成上下文都是资产的一部分。规则同样见 visualize.md 的 Plates and provenance 一节要求用任何工具生成任何图像后都执行impeccable embed-prompt image --prompt promptgenerate-image会自动完成把实际发送的精确字符串写进文件内部使意图活在文件里--read可恢复已内嵌的提示词--scan dir可列出仍缺提示词的栅格内嵌提示词 spec 中该区域的一行记录就是该栅格的 provenance来源artifact 引用的每个栅格都必须携带它外购、图库或既有栅格内嵌其来源信息后续修复批次或评审者重建中新建/替换的栅格按同样方式生产被修复放弃的栅格在同一批次内删除。从 crates/context/src/embed_prompt.rs 可以看到实现它以关键字impeccable:prompt写入 PNG 自定义 chunk遍历 PNG 每个 chunk含impeccable:crop-of这类同族 chunk并提取首个内嵌提示词CRC32 校验保证 chunk 完整性——提示词是写在文件二进制里的而不是依赖某个可能丢失的外部 txt。与整体构建流程的关系Asset Producer 只是 comp 引导构建comp-led build中的一个环节。完整链路在 new-work.md 与 visualize.md 中定义build-phase start打开comps阶段 → 生成三张候选 comp 并经由serve-question决策页审批 → 审批后 comp 路径写入 surface brief、sidecar 打上approved: true→comp-spec把 comp 测量成 spec.json →plates 阶段由 Asset Producer 逐个区域产出 plate→ 之后才进入 hero/sections/motion/responsive/review 等阶段的页面代码构建。关键纪律包括raster 与 semantic 的划分由像素本身决定而不是由好不好实现决定——有透视、明暗或绘画技巧的插图以及一切按名称为纹理的东西织物、纸纹、皮革、拉丝金属都必须是 plate/image/texture 区域并作为栅格交付文本、控件、chrome、可数元素的示意图、扁平形状系统以及需要移动/缩放/响应的东西才是语义区域。把雕刻面板的质感写成 CSS、或用多顶点 clip-path 模拟撕裂边缘是对已审批设计的静默删除会被检测器的 organic-clip-path 与 buried-raster 规则以及 hero 门禁的区域分数抓出来。小结Impeccable Asset Producer 是一套把审美判断与工程交付分离的机制审批环节负责方向spec 负责事实Producer 负责在严格约束下重生成干净资产门禁负责客观验收provenance 负责追溯。理解它的四步工作流裁剪 → 提示词 → 生成 → 质检、transparent/opaque 决策、1.5 倍分辨率的 plate 标准以及一行式输出契约你就能在任何一个支持该角色的 harness 中稳定地产出页面代码可以直接合成、且不会发糊的栅格资产。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考