Impeccable Asset Producer 实战指南从设计稿到可交付资源的 Plate 生产工作流【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本指南围绕 Impeccable 项目中负责资源生产的Asset Producer角色定义见 .grok/skills/impeccable/reference/degraded/asset-producer.md展开系统讲解它如何把一张已批准的 comp设计稿拆解为可被 HTML、CSS、SVG、canvas 与组件代码组合使用的原始光栅资源plate。读完本文你将掌握impeccable comp-spec的 spec 测量与裁剪、--plate-prompt提示词生成、impeccable generate-image与embed-prompt的底层机制以及impeccable build-phase advance对 plates 的自动化验收门禁能够独立跑通裁剪 → 提示词 → 生成 → 校验的完整资源生产链路。角色定位生产清理而非新的艺术方向Asset Producer 是 Impeccable craft 流程中的资源生产代理。它最根本的一条约束是不要重新设计。除非父代理parent明确要求改变否则必须保留参考reference的视觉角色、剪影silhouette、调色板、光照、材质、纹理、相机角度与构图同时只有当透视本身属于对象或场景时才保留它——凡是应该由 CSS 完成的卡片变换、阴影、圆角裁剪、边框或布局都要把这些呈现性装饰presentation chrome从光栅中移除。它生产的每一张光栅都是原材料页面上的文字、控件、圆角、阴影与布局全部由代码绘制plate 只承载代码画不出来的部分。这决定了后面所有步骤的取舍标准。Decision Comp 模式一张卡片、一个文件、一次渲染当父代理交付的是决策卡片包decision card packet而非已批准的 mock 时任务变成一卡一 comp一张卡片、一个文件渲染完成即写入卡片声明的comp路径。父代理会为每张卡片并行运行多个实例因此这张卡片就是你的全部契约——先生成永远不要先规划因为磁盘上的文件才是交付物决策页面正在等待它。此时只能依据卡片的结构化字段与 PRODUCT.md 工作卡片信息薄到无法支撑一个 comp 时直接上报too thin绝不靠想象填充。渲染要求以卡片方向为准按全保真度输出 north-star comp即所请求表面的首屏first viewport提示词由表面自身的结构主导按顺序命名各区域及其比例关系而不是描述世界的氛围完全投入卡片自己的调色板、字体气质与材质世界原生 App 或移动优先的表面使用竖版portrait设备视口帧绝不默认横版所有兄弟卡片在同一保真度、各自语法下渲染一个表面、一个比例均等的投入保证比较的公平只使用真实产品名与真实内容绝不虚构 PRODUCT.md 未承载的商业声明、价格、基准或日期在文件旁写一个提示词 sidecarprompt sidecar返回时仅一行说明路径与任何偏差。注意Decision Comp 是一次性任务本节以下的所有内容都属于常规资源生产任务不适用于决策 comp 运行。输入契约spec 就是清单常规任务下Asset Producer 期望收到三类输入测量后的 spec.impeccable/build/spec.json由impeccable comp-spec从已批准的 comp 生成已批准的 comp 路径skill 脚本路径即impeccable命令本身仓库内的可执行脚本见 skill/scripts/impeccable。可选输入包括要生产的区域 id 子集、每个区域的额外提示词备注、格式或透明度需求。其余一切信息都在 spec 里每个光栅区域的id、kindplate/image/texture、像素盒pixel box、采样调色板、宽高比、note以及它必须落盘的plate路径。如果没有 spec立即停止并返回一行提示父代理先运行impeccable comp-spec。你不自行清点 comp——spec 就是清单第二份清点会与第一份不一致。从源码看spec 的生成集中在 crates/comp-verbs/src/comp_spec.rs。其中定义了构建目录常量.impeccable/build第 18 行、spec 路径.impeccable/build/spec.json第 19 行、网格图.impeccable/build/comp-grid.png第 20 行以及默认 plate 目录assets/plates第 21 行。measure_regions第 384 行起会为每个区域输出box归一化坐标、px像素盒、aspect、palette最多 5 个主色及其覆盖率、detail.energy、mediumraster 或 semantic与plate路径等字段。它还执行若干质量校验非 raster 区域若覆盖超过 25% 的 compMAX_CODE_REGION_AREA 0.25会被判定为一个区域装了多个元素而报错除非设置container: true区域 note 描述绘制的材质命中 PAINTED_NOTE 正则如 illustration、photograph、texture 等词汇而 kind 却是代码区域时会被拒绝——凡是绘制/拍摄/纹理内容都必须以 raster plate 交付光栅区域的艺术内容触及区域边缘超过 35%EDGE_CONTACT_MIN且不是 comp 边缘出血时会给出clipped警告未被任何区域命名的墨迹网格单元超过 3 个时要求补充区域定义否则需显式设置allowUncovered: true。这些检查保证了 spec 本身每一块内容都有归属、每张 plate 都有出处正是 Asset Producer 只信任 spec 的原因。四步资源生产流程对 spec 中每个medium: raster的区域按 spec 顺序执行以下四步。plate 的定义是以 comp 裁剪为参考、按资源分辨率重新生成的区域——相同的主体、构图、调色板、光照与材质但移除 UI 文字与页面装饰尺寸至少是 comp 区域像素尺寸的 1.5 倍。裁剪只作参考永远不是交付像素comp 是参考级reference grade直接裁剪发货只会让一张精美的 comp 变成模糊的网站。第 1 步导出参考裁剪impeccable comp-spec --crop id该命令把参考裁剪写入.impeccable/build/crops/。从 comp_spec.rs 的 run 实现 可以看到两个关键细节对 raster 区域默认走plate_reference第 607 行起先按区域像素盒裁剪再用区域采样调色板的首色把 comp 上其他非 raster 区域文字、控件、chrome的像素涂掉得到干净的画面参考输出的裁剪 PNG 会写入impeccable:crop-of元数据文本形如comp路径#区域id并打印CROP ... Reference only: regenerate the plate from it, never ship it.。第 2 步选择背景并生成提示词先判断背景类型页面上孤立的图形、物体或线稿属于透明抠图transparent cutout照片、整幅插画或纹理保持不透明opaque。然后运行# 抠图 impeccable comp-spec --plate-prompt id --background transparent prompt.txt # 不透明 impeccable comp-spec --plate-prompt id --background opaque prompt.txt提示词文件必须以 UTF-8 保存。--background只接受transparent、opaque、auto三值非法值直接报错comp_spec.rs。透明提示词会保留参考的摆放位置与清晰边距、白色颜料、精细边缘与内部孔洞。plate_prompt的生成逻辑在 comp_spec.rs 第 643 行起它会按区域 kind 注入不同指示texture无缝表面纹理可平铺无对象、无文字、无暗角image照片或插画图像区域输出相同主体、相同取景、相同光照其他设计插画 plate输出相同画作、相同风格、相同线宽与明暗。提示词固定包含以裁剪为已批准视觉参考按目标宽高比重建为干净的生产资产、全局前三主色组成的调色板串、移除 UI 文字与界面 chrome 等指令透明模式下还会追加移除页面地面与内部间隙为真正的透明 alpha、保持白色颜料与实色前景不透明、保留精细边缘、仅对真实半透明材质或柔和阴影保留部分 alpha、禁止色键背景/棋盘格/遮罩等要求并以Output a transparent PNG cutout收尾。区域 note 会以Region: note.追加到末尾。第 3 步生成 plate 并写入精确路径在 spec 规定的精确plate路径产出 plate先创建输出目录选择与区域宽高比匹配且至少为 comp 区域像素尺寸 1.5 倍的受支持输出尺寸。优先使用 harness 原生的图像工具以裁剪为输入、以保存的提示词为参数抠图请求透明 PNG随后运行impeccable embed-prompt plate --prompt-file prompt.txt如果精修过提示词必须保存并嵌入实际发送的原文。API 回退路径使用impeccable generate-image --ref crop.png --prompt-file prompt.txt \ --out plate.png --size WxH --quality high --background transparent抠图用--background transparent否则用--background opaque。API 回退会自动嵌入提示词并把背景记录到 sidecar。输出必须是 PNG——回退路径请求原生 alpha不做任何色键chroma-key处理。从 crates/context/src/generate_image.rs 的实现看默认模型为gpt-image-2.5-flare第 9 行可通过--model覆盖--size默认1536x1024--quality默认medium带--ref时走POST /images/edits的 multipart 编辑接口多个--ref以image[]字段上传支持 PNG/WebP/JPEG不带则走POST /images/generations传递--background时会同时携带output_formatpng请求OPENAI_API_KEY环境变量未设置时报错并提示改用 harness 原生图像工具响应解码后除写 PNG 外还会进程内嵌入提示词调用 embed_prompt 逻辑PNG 用tEXt块并把prompt、createdAt、tool、model、background、refs等写入out.jsonsidecar支持IMPECCABLE_IMAGE_GEN_FAKE环境变量走零成本合成图fake synthetic comp便于无密钥时的流程调试且透明模式下真实输出 RGBA 通道PNG 颜色类型 6。embed_prompt 的实现 说明了嵌入机制的细节关键词为impeccable:prompt第 9 行。对 PNG它逐块解析parse_png在 IEND 之前插入或幂等替换tEXt文本块对 JPEG 则在 SOI 后插入 COM 段对其他格式回退写file.jsonsidecar。它还提供--read读出已嵌入提示词与--scan 目录递归扫描仓库内全部光栅资产报告缺失提示词的文件缺失时退出码为 3两种校验模式——后者可用来验证整站资源的可溯源覆盖。第 4 步对照裁剪校验 plate把 plate 与裁剪并排对比主体、摆放、比例、调色板与风格。对抠图必须确认存在真正的 alpha 通道并在浅色与深色底上检查合成效果白色颜料必须保持实色、内部孔洞必须清透、精细边缘不能出现光晕玻璃与柔和阴影要仔细检查部分 alpha 不等于可信的半透明。绝不能对原生透明输出做色键也不能在保存前展平。若原生工具返回不透明像素或绘制出棋盘格则改用 API 回退重试否则上报透明度阻塞。视觉不合格时收紧提示词重生成一次同一区域两次不合格保留较好的一张标记为needs_parent_review并说明漂移点。父代理会在所有资源就绪后运行 plates 门禁在获得门禁评分前报告unscored。输出契约一行一区阻塞与假设另起返回格式为每个 raster 区域一行id plate路径 WxH score%|unscored accepted|needs_parent_review|blocked 一行备注或 -随后是全局性的blockers缺少 spec、缺少 comp、无图像能力、密钥耗尽与assumptions均需最小化。除此之外什么都不输出不写总结、不写赞美、不给实现建议。父代理用impeccable build-phase advance对同一份 spec 验证 plates——视觉上通过不能覆盖失败的门禁。plates 门禁build-phase advance 如何验收build-phase advance的 plates 门禁在 crates/comp-verbs/src/build_phase.rsgate_plates第 468 行起中实现它逐区对照 spec 验证常见失败点包括缺文件spec 声明的plate路径不存在提示用comp-spec --crop idgenerate-image --ref crop.png --prompt-file prompt.txt --out plate.png重新生产不可解码plate 不是可读 PNG尺寸不足plate 宽度小于 comp 区域像素宽度的 1.5 倍——必须在资源尺寸下重新生成不要裁剪 comp构图漂移plate_verdict第 426 行起按结构structure、颜色color、细节detail三项评分若结构分数过低说明 plate 的构图不是该区域的主体、朝向或裁剪不同要求以--crop id为参考图重生成直接裁剪冒充plate 与 comp 裁剪的结构相似度极高说明它只是原始区域的像素重采样——comp 的裁剪永远不是 plate。门禁把每个区域的判定ok/missing/unreadable/…记录在 gate 记录的plates字段中汇总为N/M plates的摘要任何一条 reason 都会导致门禁失败failAsset Producer 的视觉接受并不代表验收通过。该状态机也贯穿后续阶段comps → spec → plates → hero → sections → motion → responsive → reviewplate 是其中承上启下的一环。相关行为还有 crates/comp-verbs/tests/parity.rs 的端到端测试与 crates/context/src/generate_image.rs 内的 round-trip 测试覆盖编辑接口、透明度保持、提示词嵌入与 sidecar 记录。落地建议与注意事项先跑通 spec没有.impeccable/build/spec.json就不要动手生成任何 platecomp-spec --print可以随时查看紧凑版 spec含每个区域的 box/px/宽高比/调色板/plate 路径与 notecomp-spec --grid则输出带 A0~J9 坐标标签的 10×10 网格图用于手工撰写 regions JSON。抠图优先保 alpha透明度是 plate 与 CSS 组合正确的前提任何把透明输出当 JPG/展平/色键的行为都会在暗色背景合成时暴露。提示词要可溯源无论走原生工具还是 API 回退最终嵌入的必须是实际发送的提示词原文embed-prompt --scan可批量校验资源的提示词覆盖。尊重门禁而非肉眼构图、颜色、细节三项评分与尺寸门槛是硬约束标记needs_parent_review只是把决策权交还父代理不绕过build-phase advance。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考