ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Impeccable Asset Producer:从已定稿 comp 到可交付栅格资产的工业生产管线

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这一专职角色展开讲解它如何把一张已批准的设计稿approved comp通过impeccable comp-spec、impeccable generate-image、impeccable embed-prompt与impeccable build-phase advance等命令转成一组干净、高分辨率、可被 HTML/CSS/SVG/canvas 组件代码自由组合的栅格素材plate。读完你既能掌握这套以 spec 为唯一清单、以分数门禁验收的生产工作流也能理解底层实现的评分逻辑与验收标准。本角色的完整定义见 skill/agents/impeccable-asset-producer.md技能内嵌的降级副本位于 .claude/skills/impeccable/reference/degraded/asset-producer.md。两者的正文指令一致差异仅在降级副本声明无子代理能力时由父代理内联执行本角色并在回报时用一行披露这一替代。一、角色定位生产清理而非新的艺术指导Asset Producer 的职责边界在文档开头就被严格限定你是 Impeccable craft 的资源生产代理。你的工作是生产清理production cleanup不是新的艺术指导。只从父代理交给你的已批准 mock、分配的裁剪区crops、联系图contact sheets与约束出发。你创建的每张栅格图都是 HTML、CSS、SVG、canvas 与组件代码将组合的原始配料raw ingredient。这决定了它所有行为的不做什么原则不重新设计除非父代理明确要求变更否则必须保留参考稿的视觉角色、剪影、调色板、光照、材质、纹理、镜头角度与构图只保留属于对象/场景本身的透视当卡片翻转、阴影、圆角裁剪、边框或布局应当由 CSS 生成时必须把这类表现层装饰presentation chrome从栅格中剔除。换句话说plate 只承载代码画不出来的东西凡是代码能画的一律交给代码。这一分工贯穿整个生产流程也是后面所有命令参数设计的出发点。二、两种工作模式决策 comp 与资产生产同一角色在两条工作流中承担不同任务文档明确划分了界限2.1 决策 comp 模式decision comps当父代理给的不是已批准 mock而是一张决策卡片包decision card packet时任务退化为一张卡片、一个文件每张卡片只产出一个 comp文件必须渲染完成的那一刻立刻写入卡片声明的comp路径父代理会为每张卡片并行运行多个该角色实例因此先产出不要规划generate first, plan never——磁盘上的文件就是交付物决策页面正在等它只依据卡片的结构化字段与 PRODUCT.md出图卡片信息薄到无法支撑 brief 时就如实回报绝不靠想象补内容comp 是北极星级全保真画面是目标表面的首屏first viewport提示词由表面自身的结构引导按顺序命名各区域及其比例关系而不是描述宏观氛围完整采用卡片自身的调色板、字体性格与材质世界原生 App / 移动优先表面必须是竖屏画幅设备视口绝不默认横屏所有平行渲染的兄弟卡片以各自语法、同等保真产出保证对比公平只能使用真实产品名与真实内容绝不虚构 PRODUCT.md 没有的商业声明、价格、基准数据或日期每张 comp 旁要写提示词侧车文件prompt sidecar回报时仅一行路径与任何偏差。文档特别强调本节以下全部内容都属于资产生产任务不适用于决策 comp 模式——两条工作流的产出物、验收方式完全不同。2.2 资产生产模式本文主体当拿到的是已批准 comp 时进入正式的生产管线把 comp 中每个medium: raster的区域变成可交付的 plate。以下各节详述。三、输入契约spec 是唯一清单资产生产模式的输入非常明确实测 spec.impeccable/build/spec.json由impeccable comp-spec从已批准 comp 生成已批准 comp 的路径技能脚本路径即skill/scripts下的impeccable启动器所在目录可选要生产的区域 id 子集、每个区域的额外提示词备注、格式或透明需求。spec 里已经包含生产所需的一切每个栅格区域的id、kindplate 插图 / image 照片 / texture 材质、像素框pixel box、采样调色板、宽高比aspect、note区域说明以及它必须落盘的plate路径。关键纪律如果没有 spec就停下用一行回报让父代理先运行impeccable comp-spec。代理不会自己去清点 comp——spec 就是清单第二份清点会与第一份冲突。这从机制上杜绝了凭印象生产的偏差。四、主工作流把区域重生成成 plate文档定义了 plate 的核心概念plate 是以 comp 裁剪区为参考、按资产分辨率重新生成该区域的结果同样的主体、构图、调色板、光照与材质但去掉 UI 文字与页面装饰尺寸至少是 comp 区域像素尺寸的1.5 倍。页面在代码中绘制文字、控件、圆角、阴影与布局plate 只承载代码画不出来的东西。comp 裁剪区只是参考永远不是交付像素——comp 是参考级直接裁剪交付是让漂亮 comp 变成模糊网站的捷径。随后文档给出每个区域的四步操作按 spec 顺序执行第 1 步产出参考裁剪区impeccable comp-spec --crop id该命令把该区域的参考裁剪图写入.impeccable/build/crops/下。它只是参考物绝不出货。实现上comp-spec的--crop分支会先读取spec.json中该区域的px像素框对 comp 做精确裁剪并额外支持--out、--scale n与--raw参数对 raster 区域默认还会调用plate_reference将区域内交叠的其他语义区域用背景色抹除使裁剪图干净聚焦见 crates/comp-verbs/src/comp_spec.rs。第 2 步生成 plate两种方式方式 AAPI 回退一条命令完成全流程impeccable generate-image --plate id --quality high这一步内部自动完成以裁剪图为参考、使用 spec 中该区域的 plate prompt、按区域宽高比选择输出尺寸、把文件写入其 plate 路径、嵌入 prompt并把 plate 与裁剪图打分。从 crates/context/src/generate_image.rs 看其底层调用的是 OpenAIgpt-image-2带参考图走/v1/images/edits的 multipart 上传无参考图走/v1/images/generations--size默认1536x1024--quality默认medium且需要设置OPENAI_API_KEY生成成功后会尽力嵌入 prompt并额外写出out.json侧车文件。另外若设置了IMPECCABLE_IMAGE_GEN_FAKE环境变量会走本地的合成 comp假图路径无需 API 调用、零成本用于开发联调。方式 Bharness 原生图像工具把裁剪图作为工具的输入图像用impeccable comp-spec --plate-prompt id取该区域的再生成提示词作为 prompt将结果写到 plate 路径再执行impeccable embed-prompt plate --prompt exact prompt把提示词写进文件。--plate-prompt输出的提示词模板在 crates/comp-verbs/src/comp_spec.rs 中可查它按kind区分提示语texture 输出可平铺无缝材质、image 保持同一主体/取景/光照、其他默认为插画 plate 保持同一画法与线宽并统一要求保留剪影、构图、透视、调色板、光照、材质、纹理移除所有不属于作品本身的 UI 文字、标签、按钮与界面装饰移除信箱黑边、边框、卡片圆角、投影与页面背景这些由代码绘制不要加物体、不要改概念、不要重新造型。embed-prompt的实现细节见 crates/context/src/embed_prompt.rs对 PNG 写入以impeccable:prompt为关键字的tEXt块已存在则重建块列表、幂等替换对 JPEG 写入COM注释段其他格式回退为file.json侧车--read可读出已嵌入的提示词--scan可扫描目录中缺失提示词的栅格文件。第 3 步读分数决定是否重生成生成后读取打分行PLATE-SCORE低于 50%或出现PLATE-WARN说明 plate 没有呈现为原区域。此时把 plate 与裁剪图并排打开明确指出漂移点subject 主体、framing 取景、palette 调色、style 风格据此收紧提示词只再生成一次同一区域第二次仍不合格保留较好的一张标记为needs_parent_review并在一行内说明原因。第 4 步透明抠图若区域是页面底图上的图形或物体figure/object on the page ground则在与主体无关的平坦色度flat chroma背景上生成写 PNG 前把该色度抠成 alpha 通道绝不交付带抠像背景的文件。五、纪律红线与输出契约5.1 不可越界的行为不重新设计、不添加物体、不重样式、不重新诠释——comp 已获批保持原样不碰页面代码、spec 或 comp不生产 spec 未列出的任何东西父代理遗漏的区域以一行备注回传而不是擅自补一张 plate。5.2 输出契约严格的最小化回报每个栅格区域输出一行id plate path WxH score% accepted|needs_parent_review|blocked one-line note or -随后是两个全局最小化字段blockers缺失 spec、缺失 comp、无图像能力、密钥耗尽missing spec / missing comp / no image capability / exhausted keyassumptions全局且最小。除此之外什么都不输出不要总结、不要溢美之词、不要实现建议。父代理随后运行impeccable build-phase advance用同一份 spec 验收这些 plate——你的回报行必须与它的验收行一致。六、验收闭环build-phase 的 plates 门禁impeccable build-phase把 comp 驱动的构建实现为磁盘上的状态机阶段依次为 comps、spec、plates、hero、sections、motion、responsive、review实现见 crates/comp-verbs/src/build_phase.rs。其中plates 阶段的门禁gate_plates正是对 Asset Producer 交付物做独立校验的机器对每个medium: raster区域先检查 plate 文件是否存在、是否为可解码 PNG分辨率门禁非 texture 区域的 plate 宽度必须至少min(1536, 区域像素宽 × 1.5)小于此值报请在资产尺寸下重新生成不要裁剪 comp疑似裁剪检测若 plate 与 comp 原始区域的结构相似度 ≥ 0.95说明交付物只是 comp 裁剪的重采样——comp 的裁剪永远不是 plate要求用generate-image --plate id以裁剪图为参考重新生成评分门禁plate_verdict见 crates/comp-verbs/src/build_phase.rs整体分overall低于40%PLATE_MIN、或结构分structure低于 40%PLATE_STRUCTURE_MIN时判定不合格提示用comp-spec --crop id作为参考图重生成comp 区域本身平静detail energy 12而 plate 却新增了超过 45% 单元的细节噪点、颗粒、更复杂的题材同样判不合格texture 材质采用加权分0.5×color 0.5×min(1, detail/0.6)低于 40% 时建议直接裁剪 comp 区域的干净色块做镜像平铺而非强行生成。值得注意的是门禁中的40%是 build-phase 机器的验收线而生产文档要求代理以50%为自我判定线低于 50% 或出现 WARN 就重生成一次——代理标准比机器验收更严正好解释了你的行与它的行必须一致为何能成立。另有一处源码级细节带透明通道超过 5% 像素 alpha128的 plate 在打分前会先合成到区域采样底色上再与参考图比较确保透明抠图不会因为空白背景被误判。此外门禁还会扫描源码文件检查每个 plate 是否真正被页面引用未被引用的 plate 会出现在验收报错里。七、常见失败与一次重生成策略综合文档与源码生产中最高频的失败与处置如下失败信号含义处置PLATE-SCORE 50% 或PLATE-WARNplate 读不出原区域并排对比指出主体/取景/调色/风格漂移收紧 prompt 重生成一次同区域二次失败两次都不合格保留较优者标needs_parent_review一行说明原因无 spec / 无 comp / 无图像能力 / key 耗尽环境性阻塞列入blockers一行回报不生产plate 结构相似度 ≥ 0.95交付的是 comp 裁剪重采样机器直接拒绝须以裁剪图为参考重新生成plate 宽度不足min(1536, px_w×1.5)分辨率不达资产级在资产尺寸下重生成禁止裁剪 comp平静区域新增大量细节被加了 comp 没有的噪点/颗粒以裁剪图为参考重生成不加纹理整套设计的核心思想可以浓缩为一句裁出来的永远是参考只有按 spec 重新生成、经过打分验证、尺寸达标的 plate 才是交付物。这样既保住了已批准 comp 的视觉方向不被二次创作污染又让 HTML/CSS 拿到的是可直接object-fit、可平铺、可叠透明层的干净素材——从决策 comp 到最终网页之间的像素每一步都有清单、有分数、有可追溯的 prompt 嵌入形成一条完整可复验的生产链。进一步阅读完整的命令行为与退出码可查阅impeccable启动器 skill/scripts/impeccable 与命令元数据skill/scripts/command-metadata.jsoncomp-spec的网格坐标A0 左上到 J9 右下、区域 kindplate/image/texture 出货text/control/chrome 由代码绘制等细节见 crates/comp-verbs/src/comp_spec.rs。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表