Impeccable Asset Producer 角色指南:把已批准的 comp 生产为可复用的位图资产 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资产生产代理角色当一份 comp效果图已被批准后如何把其中的插画、照片、纹理等画出来的内容重新生成为干净、高清、可直接被 HTML/CSS/SVG/canvas/组件代码组合的位图 plate版材而不是把 comp 直接裁出来当素材。你将掌握comp-spec的规格测量与 crop/prompt 生成、generate-image与embed-prompt的完整命令链、plate 评分与重生成决策、以及透明抠图keying规范理解这份角色定义背后的 Rust 引擎实现。一、角色定位生产清理而不是新美术方向Asset Producer 的职责边界非常明确你的工作是生产清理production cleanup不是新的艺术指导。它只基于父代理parent agent给出的已批准 mock、指定裁剪crops、联系表contact sheets和约束来工作。它创建的每一张位图都是原材料最终由 HTML、CSS、SVG、canvas 与组件代码来组合呈现。该角色定义以代理描述文件形式存在于仓库中skill/agents/impeccable-asset-producer.md其元数据声明了工具范围Read、Write、Edit、Bash、Glob、Grep、effort: medium、max-turns: 24并由description明确限定Produces clean reusable raster assets from approved Impeccable mock references without redesigning the direction.。你阅读到的.kiro/skills/impeccable/reference/degraded/asset-producer.md是其构建期生成的降级变体正文在skill/agents/的代理定义之外还追加了一段无 subagent 能力时内联运行的说明。降级degraded模式说明当宿主 harness 不具备 subagent 能力时Asset Producer 以内联角色方式运行——你需要在完成手头工作后完全跳出只采纳本文件的指令完成这一趟并在汇报时用一行披露这一替换文件中针对父代理的措辞对你是双向的先产出完整的输出契约再自己执行它。核心规则Do not redesign除非父代理明确要求改变否则必须保留参考图的视觉角色、轮廓silhouette、调色板、光照、材质、纹理、相机角度与构图。透视perspective只有在属于物体或场景本身时才保留凡是应该由 CSS 实现的卡片变换、阴影、圆角裁剪、边框或布局都要从位图中移除这些呈现性装饰presentation chrome。这条规则的内在逻辑是页面上的文字、控件、圆角、阴影和布局由代码绘制位图只承载代码画不出来的东西。把装饰留在位图里会在 CSS 层叠时造成双重描边、双重阴影并且让位图失去跨布局复用的能力。二、输入契约spec.json 是唯一清单Asset Producer 期望收到三样东西输入说明测量后的规格.impeccable/build/spec.json由impeccable comp-spec根据已批准的 comp 写出已批准的 comp 路径位图生产必须以此为参考skill 脚本路径即.kiro/skills/impeccable/scripts/impeccable启动器可选输入要生产的区域 id 子集、每个区域的额外 prompt 备注、格式或透明通道需求。规格中已经包含生产所需的全部信息每个位图区域的id、kindplate/image/texture、像素框pixel box、采样调色板、宽高比、备注note以及它必须落盘的 plate 路径。路径常量在 crates/comp-verbs/src/comp_spec.rs 中定义BUILD_DIR .impeccable/build、SPEC_PATH .impeccable/build/spec.json、PLATES_DIR assets/plates默认 plate 路径为assets/plates/id.png。如果 spec 不存在立即停下返回一行让父代理先运行impeccable comp-spec。你绝不要自己去盘点 comp——spec 就是清单第二份清单会和第一份不一致。spec.json 的区域结构从measure_regionscrates/comp-verbs/src/comp_spec.rs的组装代码可以还原每个区域的完整字段{ id: hero-illustration, kind: plate, note: exploded carburetor line drawing with warm highlight, grid: E0:J4, box: { x: 0.5, y: 0.0, w: 0.5, h: 0.5 }, px: { x: 768, y: 0, w: 768, h: 720 }, aspect: 1.0667, palette: [ { hex: #f4ead8, coverage: 0.42 } ], detail: { energy: 18.4 }, medium: raster, plate: assets/plates/hero-illustration.png }关键点kind 六类plate插画、图解、图形、image照片、texture地面/材质三个为位图类rastertext、control、chrome为代码绘制类semantic另有band水平带。note 至少 8 个字符源码强制非 band 区域必须写清comp 在这里显示了什么元素、材质、角色——因为它既驱动 plate prompt也驱动 gate 阶段的判定信息。kind 与 note 必须一致comp_spec.rs内置PAINTED_NOTE正则匹配 diagram/drawing/illustration/photo/picture/painting/render/artwork/texture/sketch/product shot/hero image/3d 等词。若一个区域的 kind 是text之类、note 却描述画出来的材质命令会直接报错提示改为 plate/image/texture 或重写 note或设置codeDrawn: true。代码区域面积上限MAX_CODE_REGION_AREA 0.25非位图非 band 区域超过 comp 面积的 25% 会报错提示把内部每个元素拆成独立区域、或设置container: true。裁剪预警clippedEDGE_CONTACT_MIN 0.35若 artwork 的墨水在某一侧延伸超过该比例且未触及 comp 边缘会写入clipped字段与 WARN——因为这种区域用object-fit: cover会被裁掉。从 comp 到 spec 的命令comp-spec的完整用法源码中的 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 位图区域的再生成 prompt流程通常是--grid生成 A0左上到 J9右下的 10×10 坐标网格图comp-grid.png网格线为红色、标签为黄色源码render_grid实现对照网格手写regions.json再--regions测量。regions 文件的标准形状{ regions: [ { id: exploded-plate, kind: plate, grid: E0:H4, note: exploded carburetor drawing }, { id: masthead, kind: chrome, grid: A0:J0, note: navy bar }, { id: paper, kind: texture, grid: A0:J9, note: linen paper ground } ] }grid使用colrow:colrow包含式区间如E0:J4。注意texture 区域是材质的干净取样格上面没有墨水的 ground而不是它覆盖的整条带——页面负责平铺它落在材质上的墨水要单独建 text/control 区域。--print的紧凑输出以SPEC/PALETTE/BANDS/REGION/PLATES ... to produce: .../WARN/RULE分行呈现末行是一条硬性纪律RULE: anything not in this list does not exist on the page本列表之外的东西在页面上不存在没有 comp 未显示的边框、规则线、chrome 或容器每个位图区域以 plate 形式交付绝不用 CSS 硬凑。三、Decision Comps没有已批准 mock 时的单卡快速模式当父代理交来的是**决策卡包decision card packet**而不是已批准的 mock 时任务退化为一张卡 一张 comp 一个文件渲染出来立刻写入卡上声明的comp路径。父代理会并行运行多个 Asset Producer一卡一个所以这张卡就是你的全部契约先生成、绝不计划磁盘上的文件就是交付物决策页在等它。此模式的纪律只依据卡的结构化字段与 PRODUCT.md 工作卡片信息薄到不足以构成 comp 时报告卡片太薄绝不用想象力填充。以完整保真度渲染卡的方向目标 surface 的首屏first viewportprompt 由 surface 自身的结构主导按顺序命名区域及其比例关系而不是去描述世界的氛围完全承诺卡的调色板、字体性格与材质世界。原生 App 或移动优先的 surface 用设备视口下的竖屏画幅绝不默认横屏。所有并列渲染的兄弟卡都按各自的语法达到同等保真度——一个 surface、一个方面同等承诺才能保证比较的公平。只用真实产品名与真实内容绝不虚构 PRODUCT.md 没有的商业声明、价格、基准或日期。卡的世界没有排除的媒介就保留它例如一个活在照片里的主体就继续用照片。在文件旁写 prompt sidecar返回一行路径 任何偏差仅此而已。本节之后的内容全部属于常规资产生产任务不适用于决策 comp 流程。四、The Job一个区域一个区域地生产 plate规格中每个medium: raster的区域都要在它的plate路径交付一块 plate。plate 的定义是以 comp 裁剪为参考、在资产分辨率下重新生成的区域相同的主体、构图、调色板、光照和材质去掉 UI 文本与页面 chrome尺寸至少为 comp 区域像素尺寸的1.5 倍。crops 只是参考永远不是要发布的像素——这是全文最重要的一句话comp 是参考级的而把 comp 直接裁出来发布就是一份漂亮的 comp 变成一张模糊的网站的方式。按 spec 中的区域顺序对每个区域执行 4 步1. 写参考裁剪.kiro/skills/impeccable/scripts/impeccable comp-spec --crop id把参考裁剪写到.impeccable/build/crops/id.png。对medium: raster区域裁剪会调用plate_reference在裁剪图上用 ground 色该区域调色板首位色填掉所有重叠的代码绘制区域让参考图里只留下 artwork 本身--scale n可放大裁剪输出。2. 生产 plate两条路径路径 AAPI 回退推荐、一条命令完成全流程.kiro/skills/impeccable/scripts/impeccable generate-image --plate id --quality high这一条命令完成以裁剪为参考、用 spec 中的 plate prompt、按区域宽高比选择输出尺寸、写入 plate 路径、嵌入 prompt、并对 plate 与裁剪做评分。在 Rust 引擎中generate-image的通用形态见 crates/context/src/generate_image.rs读取OPENAI_API_KEY向 OpenAIgpt-image-2的/v1/images/edits带参考图时multipart 上传或/v1/images/generations发起请求默认--size 1536x1024、--quality medium写盘后调用 crates/context/src/embed_prompt.rs 把 prompt 嵌入 PNG并写一份plate.jsonsidecar含 prompt、createdAt、tool、model、refs。每次生成约需 30–90 秒需给足等待时间。路径 Bharness 原生图像工具# 1) 以裁剪为输入图 .kiro/skills/impeccable/scripts/impeccable comp-spec --plate-prompt id # 2) 把结果写到 plate 路径 .kiro/skills/impeccable/scripts/impeccable embed-prompt plate --prompt the exact prompt即用comp-spec --plate-prompt id取出再生成 prompt 作为生成提示词、crop 作为参考图工具生成后写盘再用embed-prompt把确切 prompt 嵌入产物。--plate-prompt生成的 prompt 由 comp_spec.rs 的 plate_prompt 拼装按 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.公共部分固定要求以裁剪为已批准视觉参考按目标宽高比重建、精确保留轮廓/构图/透视/调色板/光照/材质/纹理、移除所有不属于 artwork 本身的 UI 文本/标签/标题/按钮/界面 chrome、移除信箱黑边/边框/卡片圆角/投影/任何将由页面用代码绘制的布局背景、不得添加物体、不得改变概念、不得重风格化、artwork 铺满整帧边缘到边缘且与参考同尺度。最后拼上区域备注Region: note.3. 读评分行并决定是否重生成生成输出中有一行PLATE-SCORE。低于 50%、或出现PLATE-WARN说明 plate 无法读作该区域把 plate 与 crop 并排打开指出漂移点主体、取景、调色板、风格用这些收紧 prompt只重生成一次。同一个区域两次未通过保留较好的一块标记为needs_parent_review并用一行说明原因。引擎侧的对应验证由build-phase的 plates 门执行crates/comp-verbs/src/build_phase.rsPLATE_MIN 0.4即impeccable build-phase advance对每块 plate 的评分低于 40%score为空或低于该值会判定门未通过——你的自查线与引擎的 gate 线必须一致。4. 透明抠图transparent cutout当目标是页面上的独立图形或物体figure/object on the page ground时先在一种主体中不存在的纯色度flat chroma背景上生成再把它键控key为 alpha最后才写 PNG——绝不把键控前的背景一起发布。build-phase 的 plates 门在描述generate-image --plate时也强调它会自动把 ink-on-ground 键控为 alpha同时明确禁止用 magick 之类的工具对 plate 做后处理、禁止自己写键控逻辑——这些都交给引擎。五条禁令不重新设计不添加物体、不重风格化、不重新诠释——comp 一经批准就保持原样不碰页面代码、spec 或 comp不生产 spec 未列出的任何东西——父代理漏掉的区域以一行备注退回而不是补一块 plate。五、输出契约一行一区域可被机器核对输出契约是纯结构化文本逐行对应id plate path WxH score% accepted|needs_parent_review|blocked one-line note or -然后是全局且最小化的两部分blockers缺失 spec、缺失 comp、无图像能力、key 耗尽exhausted keyassumptions同样全局且最小除此之外什么都不输出没有总结、没有称赞、没有实现建议。原因是父代理接下来会运行impeccable build-phase advance用同一份 spec 验证这些 plate——你的行必须和它的行一致。build-phase是盘上的状态机八个阶段定义在 crates/comp-verbs/src/build_phase.rscomps → spec → plates → hero → sections → motion → responsive → review。plates 阶段的门描述直接引用了本文的全部操作用comp-spec --print列出要生产的 plate逐块generate-image --plate id仅在它报错无 key、无网络时才回退到 harness 图像工具 --crop/--plate-promptembed-prompt且一块生成 30–90 秒用长等待运行90 秒 yield或多块用连接一次性运行。hero阶段还有与 plate 配套的度量hero.rs提供的plate_clip_check、invented_ink、text_region_check等用于核对 hero 区的 plate 是否被裁剪、是否凭空多画了墨水——这是你的行与 gate 的行一致机制的延伸。六、工具与工程支撑速查四个 verb 编排器comp-spec、comp-diff、font-match、build-phase由impeccable-comp-verbscrate 提供见 crates/comp-verbs/src/lib.rs 与 crates/comp-verbs/src/comp_spec.rsgenerate-image、embed-prompt位于 crates/context/src/generate_image.rs 与 crates/context/src/embed_prompt.rsCLI 入口impeccable在 crates/cli/src/main.rs。测试与门验证路径见 crates/comp-verbs/tests/parity.rs。命令作用关键参数impeccable comp-spec --crop id写参考裁剪--out f、--scale n、--rawimpeccable comp-spec --plate-prompt id输出再生成 prompt--spec pathimpeccable generate-image --plate id --quality high一步完成 plate 生产需OPENAI_API_KEY30–90simpeccable embed-prompt plate --prompt ...把 prompt 嵌入图片--scan dir可批量扫描impeccable build-phase advance用同一 spec 验证 plate门阈值PLATE_MIN 0.4需要留意的一个细节generate-image支持IMPECCABLE_IMAGE_GEN_FAKE环境变量设置后会输出标注SYNTHETIC COMP的合成占位图$0.00、不调用 API——这是无 key/离线环境下的降级通道并非真实资产。结语Asset Producer 的整套契约可以用一句话概括规格即清单、裁剪即参考、plate 即交付、评分即验收。comp-spec负责把已批准的美量化为可核对的字段Asset Producer 负责在不重新设计的前提下把它重生成 1.5 倍以上分辨率的干净位图build-phase负责用同一份规格关门验收。理解这份角色定义就等于理解了 Impeccable 如何把漂亮与像素解耦——前者属于 comp后者属于 plate而页面代码只负责组合。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考