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的完整工作契约它如何把一张已被批准的 Comp设计稿翻译成一份可测量的构建规格spec.json再逐个区域生成板件plate栅格资产供 HTML、CSS、SVG、Canvas 与组件代码组合消费。读完本文你将掌握 asset-producer 的输入/输出契约、impeccable comp-spec/generate-image/embed-prompt命令的完整用法、PLATE-SCORE 评分门禁的判定逻辑以及如何在多 Agent 并行流水线中与impeccable build-phase advance保持结果一致。本文的契约文本以仓库中的 .claude/agents/impeccable-asset-producer.md同名副本见 plugin/agents/impeccable-asset-producer.md、skill/agents/impeccable-asset-producer.md为骨架底层原理全部取自仓库源码。一、角色定位生产清理而非新的美术方向Asset Producer 是 Impeccable craft 流程中的资产生产 Agent。它的职责边界一句话可以概括你的工作是生产清理production cleanup不是新的艺术指导new art direction。只依据父进程交给你的已批准 mock、分配的 crop、contact sheets 和约束工作。你创建的每一张栅格图都是原始配料raw ingredient由 HTML、CSS、SVG、canvas 和组件代码去组合。这意味着它不是设计师而是一个高度受约束的按图生产执行者上游已经完成了方向探索与评审它只负责把已经批准的方向以资产分辨率还原出来并且绝不重新设计。核心规则Core Rule生产任何板件时除非父进程明确要求更改否则必须保留参考图的视觉角色visual role剪影silhouette调色板palette光照lighting材质material纹理texture相机角度camera angle构图composition对透视perspective有特殊要求只有当透视属于物体或场景本身时才保留当卡片变换、阴影、圆角裁剪、边框、布局应当由 CSS 实现时必须把这些呈现性镀铬presentation chrome从栅格中移除。换句话说像素只承载代码画不出来的东西代码能画的绝不放进像素。二、输入契约spec.json 是唯一的清单Asset Producer 期望收到三样东西测量后的规格.impeccable/build/spec.json——由impeccable comp-spec依据已批准的 comp 生成已批准的 comp 路径skill 脚本路径即impeccable可执行文件所在目录。可选项包括要生产的区域 id 子集、每个区域的额外提示词备注、格式或透明需求。如果没有 spec立即停下并返回一行请父进程先运行impeccable comp-spec。你不需要自己去盘点 comp——spec 就是清单第二次盘点必然与第一次冲突。这句规则背后是一个重要的工程原则单一事实来源single source of truth。spec 由测量工具一次性生成任何手工二次清点都会引入偏差导致后续build-phase advance门禁判定不一致。spec.json 的结构源码级从 crates/comp-verbs/src/comp_spec.rs 的measure_regions可以看到 spec 的顶层结构{ tool: comp-spec, version: 1, createdAt: ISO 时间戳, comp: comp 路径, warnings: [], uncoveredInkCells: [], compSize: { width: 1536, height: 1024 }, aspect: 1.5, orientation: landscape, palette: [ { hex: #..., coverage: 0.32 } ], bands: [ { y: 0.12, strength: 0.55 } ], regions: [] }其中regions数组中的每个区域对象携带 Asset Producer 工作所需的全部字段见 comp_spec.rs字段含义id区域唯一标识kindplate插图/示意图/图形、image照片、texture地面材质、text、control、chrome、bandnote该区域画面的文字描述驱动 plate prompt 与门禁消息grid10×10 网格坐标 span如E0:J4A0 左上J9 右下含端点box归一化盒子{x,y,w,h}0~1 比例px像素盒{x,y,w,h}aspect宽高比palette区域采样主色最多 5 个带覆盖率detail{ energy: 细节能量 }mediumraster需要出板件或semantic代码绘制plate板件输出路径默认assets/plates/id.pngtext文本区域的文字内容clipped若画面溢出盒子的某边列出边名left/right/top/bottomgrid坐标由 grid_to_box 解析为归一化盒子文本/控件区域在指定grid时会通过 snap_box_to_ink 吸附到实际墨迹边界并记录原始的coverBox。测量阶段还会做三类校验并拒绝不合格的 comp非band/texture区域必须有至少 8 个字符的note描述绘制/照片/纹理等 painted material 的区域必须声明为plate/image/texture正则见 PAINTED_NOTE代码区域面积超过整图 25%MAX_CODE_REGION_AREA且不是container时会被拒绝。regions.json 的书写形态先用--grid生成带坐标的网格图再手写 regions 文件.impeccable/skills/impeccable/scripts/impeccable comp-spec --comp comp.png --grid--grid会写出.impeccable/build/comp-grid.png10×10 标号网格A0 左上到 J9 右下并打印 PALETTE 与 BANDS。随后按如下形态写 regions.json 并测量{ regions: [ { id: exploded-plate, kind: plate, grid: E0:H4, note: exploded carburetor drawing }, { id: masthead, kind: chrome, grid: A0:J0, note: navy bar }, { id: photo, kind: image, grid: B2:F4, note: product photograph on grey ground } ] }然后执行.impeccable/skills/impeccable/scripts/impeccable comp-spec --comp comp.png --regions regions.json测量会写入.impeccable/build/spec.json并打印紧凑版清单SPEC/PALETTE/BANDS/REGION/PLATES行见 print_spec。--print可随时重看该清单没有 regions 文件时--auto会按横向色带自动切分band区域。三、Decision Comps 模式一卡一文件先产出后规划当父进程交来的是**决策卡包decision card packet**而非已批准的 mock 时任务切换为一张卡 一个 comp模式一卡、一文件渲染完成即刻写入卡片声明的comp路径父进程会为每张卡并行运行多个 Asset Producer因此这张卡就是你的完整契约——先产出、绝不先规划因为磁盘上的文件才是交付物决策页正在等它只依据卡的结构化字段与 PRODUCT.md 工作卡片信息薄到不足以给出 comp 时如实报告绝不凭想象填充以全保真渲染北极星 comp请求表面的首屏提示词由表面自身的结构主导按顺序命名区域及其比例关系而不是世界的氛围完全投入卡片自己的调色板、字体性格与材质世界原生 App / 移动优先的表面是竖版设备视口帧绝不用横版默认值所有兄弟卡片以同等的全保真度、各自的语法渲染——一张表面、一个方面同等投入才能保证对比公平只使用真实产品名与真实内容绝不编造 PRODUCT.md 中没有的商业声明、价格、基准或日期排除项只约束声明不约束卡片世界未排除的媒介——例如主题本来就活在照片里就保留它的照片在文件旁写 prompt sidecarcomp.json含prompt字段返回一行路径 任何偏差仅此而已。注意文档明确声明本小节及以下内容均属于资产生产任务Decision Comp 运行完全不适用资产生产流程。四、核心任务逐区域生产板件spec 中每个medium: raster的区域都会以一块plate板件交付到它的plate路径。plate 的定义是以 comp 裁剪为参考、按资产分辨率重新生成的区域相同的主题、构图、调色板、光照与材质移除 UI 文字与页面镀铬尺寸为 comp 区域像素尺寸的1.5 倍或以上。页面用代码绘制文字、控件、圆角、阴影与布局plate 只承载代码画不出来的东西。关键纪律从 comp 裁剪出来的图只是参考绝不是可发布的像素。comp 是参考级画质直接发布裁剪图就是一张漂亮的 comp 变成模糊的网站的过程。对照源码这个 1.5 倍下限在 build_phase.rs 的gate_plates中有硬性校验非纹理板件宽度不得低于min(1536, px_w * 1.5)像素否则判为失败plate file is {}px wide; the comp region is {}px and a shipping plate needs at least {}px。按 spec 中的区域顺序每个区域执行如下四步第 1 步写参考裁剪.impeccable/skills/impeccable/scripts/impeccable comp-spec --crop id把参考裁剪写到.impeccable/build/crops/下。--crop实现见 comp_spec.rs对于medium: raster的区域默认使用 plate_reference 生成参考图——它会用该区域采样地面色抹掉叠加在区域上的其他语义区域文字/控件/镀铬让生成模型专注在画面本身输出 PNG 还会写入impeccable:crop-of文本块记录来源。可用--scale n放大、--out f改输出路径、--raw拿原始像素裁剪。命令结尾明确提示Reference only: regenerate the plate from it, never ship it.第 2 步生产 plate两条路径路径 AAPI 回退一条命令完成整步.impeccable/skills/impeccable/scripts/impeccable generate-image --plate id --quality highgenerate-image的--plate模式会完成以裁剪为参考edit 参考图、使用 spec 中的 plate prompt、按区域宽高比选择输出尺寸、把文件写入 plate 路径、嵌入 prompt、并把 plate 与裁剪对比打分。源码实现见 crates/context/src/generate_image.rs它调用gpt-image-2模型--ref传入参考图时走POST /v1/images/edits的 multipart 请求无参考时走/v1/images/generations支持--quality默认medium、--size默认1536x1024也支持WxH形式、多个--ref参考图成功后自动调用embed-prompt内嵌提示词并写out.jsonsidecar含prompt、createdAt、tool、model、refs。路径 Bharness 原生图像工具# 1. 以裁剪作为输入图 .impeccable/skills/impeccable/scripts/impeccable comp-spec --crop id # 2. 取该区域的再生提示词 .impeccable/skills/impeccable/scripts/impeccable comp-spec --plate-prompt id # 3. 生成后把结果写入 plate 路径 # 4. 把完全相同的提示词嵌入资产 .impeccable/skills/impeccable/scripts/impeccable embed-prompt plate --prompt the exact prompt--plate-prompt生成的提示词见 plate_prompt包含几个固定要素把裁剪作为已批准视觉参考并按目标宽高比重建、按 kind 给出类型行纹理无缝可平铺材质/照片同主题同构图同光照/插图同线条同明暗、保留剪影构图透视与调色板取自 spec 全局前三主色、移除所有非画面本身的 UI 文字与界面镀铬、移除信箱黑边/卡片角/投影/布局背景这些由页面代码绘制、不添加物体、不改变概念、不重设计风格画面满幅、边缘到边缘、无留白无边框无背景带。不要用 magick 等工具后处理 plate也不要自己写抠图逻辑——见第三节输出契约与 build-phase 门禁说明。第 3 步读取评分行并决定是否重生成每条生产命令会输出评分行PLATE-SCORE低于50%或出现PLATE-WARN意味着 plate 无法读作该区域把 plate 与 crop 并排打开指出漂移点主题、取景、调色板、风格据此收紧提示词重新生成一次同一区域两次未命中保留较好的一张标记为needs_parent_review用一行说明原因。评分逻辑的底层实现在 build_phase.rs 的plate_verdict对普通板件分别检查structure构图结构、color颜色、detail细节、overall综合阈值PLATE_MIN 0.4、detail_addedcomp 区域平静时 plate 不应携带多余细节噪声阈值 0.45纹理板件采用0.5 * color 0.5 * min(1, detail/0.6)的加权分。此外门禁还会拒绝两类典型作弊直接使用 comp 裁剪图与原始区域的结构相似度 ≥ 0.95 即判定为同一像素的重采样plate ... is the comp crop of region ...与分辨率不足。第 4 步透明抠图cutout当区域是页面地面上的图形或物体figure/object需要透明背景时在一个**画面主体中不存在的平坦色度色flat chroma color**上生成在写 PNG 之前把该色度键为 alphakey to alpha绝不交付带键色背景的图。这样 ink 落在页面自己的地面上而不是一块第二张纸。该要求在门禁侧也有呼应gate_plates会统计透明像素占比超过 5% 的键控板件在对比打分前会被合成到区域采样地面色上见 build_phase.rs确保评分基准一致。禁止事项不重新设计、不添加物体、不换风格、不重新解读——comp 已经按现状获批不触碰页面代码、spec、comp不生产 spec 未列出的任何东西父进程漏掉的区域以一行备注返回而不是擅自出一块板件。五、输出契约机器可读的一行式报告Asset Producer 的回报是严格的一行式报告父进程build-phase 状态机依赖它做机器判定每行一个栅格区域id plate path WxH score% accepted|needs_parent_review|blocked one-line note 或 -随后输出全局且极简的blockers缺少 spec、缺少 comp、无图像能力、密钥耗尽missing spec / missing comp / no image capability / exhausted keyassumptions全局假设。除此之外什么都不输出没有总结、没有表扬、没有实现建议。为什么这么严格因为父进程随后会运行impeccable build-phase advance用同一份 spec 验证板件——你这一行与它那一行必须一致。差异即失败。build-phase 的状态机在 crates/comp-verbs/src/build_phase.rs 定义八个阶段comps → spec → plates → hero → sections → motion → responsive → reviewplates 阶段的门禁gate_plates会逐个 raster 区域检查文件是否存在、是否可解码 PNG、宽度是否达标、综合评分是否过线、是否直接用了 comp 裁剪最后汇总为N/M plates摘要并记录每块板件的 id/路径/尺寸/评分。同时 unreferenced_plates 还会扫描页面源码HTML/CSS/JS/TS/Svelte/Vue/Astro 等扩展名跳过 node_modules/.git/dist 等目录找出 spec 里已生产但从未被页面引用的板件杜绝生产了却没用上。六、可溯源资产prompt 内嵌是板件的出处证明Impeccable 要求生成上下文属于资产本身任何工具生成任何图像后都要把该工具实际收到的完全相同的 prompt 字符串嵌入文件——impeccable generate-image会自动完成这一步。embed-prompt的实现见 crates/context/src/embed_prompt.rsPNG以impeccable:prompt为关键字写入tEXt块幂等若已存在同关键字块则替换重建避免重复堆积JPEG写入COMcomment段其他格式回退到image.jsonsidecar含prompt与createdAt读取/审计embed-prompt file --read恢复 promptembed-prompt --scan dir递归列出仍缺 prompt 的栅格PNG/JPG/JPEG/WebP有缺失时退出码为 3。内嵌 prompt 与 spec 中该区域的行共同构成栅格的provenance出处证明且 artifact 引用的每个栅格都必须携带它。这不仅让资产可审计也让build-phase的 hero/sections 阶段能对用了什么、为什么这样生成做机器可读的回溯。七、把它放进整个 Impeccable 流水线Asset Producer 是 comp 驱动构建comp-led build中的一环上下游关系如下方向与 comps 阶段产出 3 张构图选项用户批准恰好一张sidecarapproved: trueimpeccable comp-spec --comp approved --grid--regions测量出spec.jsonspec 阶段门禁还会要求文本区域用font-match --measure/--rank完成字体度量与选择plates 阶段本指南的主体——逐 raster 区域出板件、评分、内嵌 prompt之后的 hero/sections/motion/responsive 阶段用板件与 spec 构建页面build-phase advance用同一 spec 逐阶段门禁hero 门禁HERO_MIN 0.72、responsive 门禁RESPONSIVE_MIN 0.65等见 build_phase.rs。从源码结构可以推断整个设计刻意把测量comp-spec纯计算、无浏览器与生成generate-image唯一接触外部图像模型的地方分离并用统一的 spec.json 作为两者之间的稳定接口——这正是 Asset Producer 能一份清单、多头并行、结果可对账的架构前提。八、实践要点速查场景正确做法收到任务但没有 spec停下返回一行请先运行impeccable comp-speccomp 区域包含文字/按钮/镀铬全部由代码绘制plate 中必须移除需要透明 cutout在主体外色度色上生成 → key 到 alpha → 才写 PNG评分 50% 或有 WARN对比 crop 命名漂移点收紧提示词重生成一次同一区域两次失败保留较好一张标记needs_parent_review并一行说明分辨率不足至少 1.5× comp 区域像素宽度下限 1536px想直接裁剪 comp 交付禁止——门禁会以结构相似度 ≥95% 拒绝且这是模糊网站的根源生成后忘记 prompt立即embed-prompt plate --prompt exact prompt可--read验证、--scan审计Asset Producer 的全部行为都围绕一个目标让每个栅格资产成为可组合的原始配料而不是自带完整页面外观的成品图。守住不重新设计的边界、以 spec 为唯一清单、让评分与门禁替你兜底就能在并行生产中稳定地把漂亮的 comp转化为清晰的网站。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考