尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Impeccable Asset Producer 完全指南:以 comp 为师的栅格资产(Plate)生产工作流与源码级拆解

Impeccable Asset Producer 完全指南:以 comp 为师的栅格资产(Plate)生产工作流与源码级拆解 Impeccable Asset Producer 完全指南以 comp 为师的栅格资产Plate生产工作流与源码级拆解【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文围绕 Impeccable 设计语言中 Asset Producer资产生成 Agent的完整职责展开它不负责创意与构图只负责把已批准的 comp设计稿拆解成干净、可复用的栅格资产plate。你将掌握 spec.json 输入契约、comp-spec/generate-image/embed-prompt命令链、PLATE-SCORE 评分门槛与一次重生成纪律以及build-phase advance如何反向校验你交付的每一块 plate。文中所有命令与阈值均可直接在当前仓库skill/agents/impeccable-asset-producer.md、crates/comp-verbs/src、crates/context/src中溯源验证。一、角色定位生产清理而非新的美术方向Asset Producer 的核心定位一句话概括Do not redesign禁止重新设计。它只从父级 Agent 给出的三样东西出发——已批准的 mockcomp、分配好的 crops、联系表与约束——产出 HTML、CSS、SVG、canvas 与组件代码将要组合的原始原料raw ingredient。核心规则要求保真除非父级明确要求改动否则保留参考图的视觉角色、剪影silhouette、调色板、光照、材质、纹理、机位与构图。透视归属只有当透视属于物体或场景本身时才保留凡是应当由 CSS 实现的卡片变换、阴影、圆角裁剪、边框或布局都必须从栅格中移除这些展示层装饰presentation chrome。这条规则的工程落地体现在comp-spec的plate_prompt中。在 crates/comp-verbs/src/comp_spec.rs 的plate_prompt函数里prompt 会明确写入Remove every piece of UI text, label, caption, button, and interface chrome以及Remove letterboxing, borders, card corners, drop shadows, and any layout background that the page will draw in code——即页面用代码绘制的东西不进图片plate 只承载代码画不出来的内容。二、决策对比图模式Decision Comps当父级交给你的不是已批准的 mock而是一组决策卡片decision card packet时任务形态完全不同一卡一图一文件。每个卡片是一份完整契约写到哪里由卡片声明的comp路径决定渲染即写入。父级会并行运行多个 Asset Producer每卡一个因此先生成、不要规划generate first, plan never磁盘上的文件就是交付物决策页正在等它。只能依据卡片的结构化字段与 PRODUCT.md 创作卡片信息太薄时如实报告无法据此构绘 comp绝不用想象力填充。以卡片方向渲染全保真的北星 comp以表面自身结构组织 prompt按顺序列出 region 及其比例关系而非渲染氛围完全投入到卡片自己的调色板、字体性格与材质世界中原生 App 或移动优先的表面必须用设备视口的竖版画幅而不是横版默认值。真实产品名与真实内容绝不虚构 PRODUCT.md 中没有的商业主张、价格、基准或日期。产出 prompt 侧车文件sidecar放在图片旁回报一行路径 任何偏差即可。注意决策对比模式属于上方段落的特殊任务文档其余部分描述的都是正式资产生产作业二者不混用。三、输入契约spec.json 是唯一的清单正式资产生产作业的输入是三者测量后的规格文件.impeccable/build/spec.json由impeccable comp-spec从已批准的 comp 生成已批准的 comp 路径skill 脚本路径。可选输入要生产的 region id 子集、每个 region 的附加 prompt 备注、格式或透明需求。关键纪律如果没有 spec立即停下并回报一行请父级先运行impeccable comp-spec。你不自己盘点 comp——spec 就是清单第二份清单一定会和第一份不一致。这句话在 crates/comp-verbs/src/comp_spec.rs 中同样成立build-phase的gate_spec会校验spec.json中的 comp 路径与构建开始时记录的一致防止拿错 comp 测量。3.1 从 comp 到 spec 的命令链comp-spec的工作流实现见 crates/comp-verbs/src/comp_spec.rs 的run函数分四步# 1) 在 comp 上叠 10x10 标注网格A0 左上到 J9 右下同时输出采样调色板与横向 band impeccable comp-spec --comp png --grid # 2) 依据网格写出 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 } ] } # 3) 测量 region - 写 .impeccable/build/spec.json impeccable comp-spec --comp png --regions regions.json # 4) 查看紧凑版 spec impeccable comp-spec --printregion 的kind分为两组分组kind交付方式栅格rasterplate插画/图示/图形、image照片、texture材质地面每块都作为 plate 交付语义semantictext、control、chrome、band由代码绘制每条 region 在 spec 中携带id、kind、note、grid、box归一化坐标 x/y/w/h、px像素框、aspect、采样palette、detail.energy细节能量、medium、plate路径与text。这些字段在measure_regions中逐项组装crates/comp-verbs/src/comp_spec.rs栅格 region 的plate默认落在assets/plates/id.png。3.2 测量期的四道拒绝refusalcomp-spec不只是一个测量器它在测量时就会拒绝明显不合格的输入对应源码中的错误返回note 缺失非bandregion 必须有至少 8 个字符的 note说明该处元素、材质与角色因为 note 驱动 plate prompt 与门禁消息油漆冒充代码text/control/chrome的 note 若描述的是画的/照片的/纹理的内容由正则PAINTED_NOTE判定涵盖 diagram、drawing、photo、texture、watercolor、blueprint 等词除非显式codeDrawn: true否则拒绝超大代码区非栅格、非band的 region 面积超过 comp 的 25%MAX_CODE_REGION_AREA说明一个 region 装下了多个元素需拆细或标记container: true未命名的墨迹超过 3 个网格单元承载墨迹却没有任何 region 命名uncovered_ink_cells需补 region 或确认空白后设置allowUncovered: true。此外栅格 region 的图若在框内某边溢出墨水触边比例 ≥ 35%即EDGE_CONTACT_MIN会给出clipped警告——plate 若以object-fit: cover放在该框上会被裁掉。四、正式作业每个medium: rasterregion 交付一块 plateplate 的定义以 comp 裁剪图为参考、在资产分辨率下重新生成的 region——同一主体、同一构图、同一调色板、同一光照与材质但移除 UI 文字与页面装饰尺寸至少为 comp region 像素尺寸的1.5 倍。页面用代码画文字、控件、圆角、阴影与布局plate 只携带代码画不出来的东西。最关键的原则是comp 的 crops 只是参考永远不是交付像素——comp 是参考级直接交付裁剪图就是让漂亮的设计稿变成模糊网站的过程a comp is reference grade and a shipped crop is how a beautiful comp becomes a blurry site。按 spec 顺序逐 region 执行四步4.1 第 1 步导出参考裁剪图impeccable comp-spec --crop id该命令把 region 写为.impeccable/build/crops/id.png。对栅格 regioncomp-spec --crop走的是plate_reference逻辑它会先用 region 采样地面色把同区域内的代码绘制元素text/control/chrome遮盖掉再裁出干净的主体参考源码见 crates/comp-verbs/src/comp_spec.rs 的plate_reference因此裁剪图天然不含会被代码重新绘制的 UI 文字。4.2 第 2 步生产 plate两条路径路径 AAPI 兜底一条命令完成全部impeccable generate-image --plate id --quality high这条命令实现见 crates/context/src/generate_image.rs自动完成以裁剪图为参考、取 spec 的 plate prompt、按 region 宽高比选择输出尺寸、写入 plate 路径、嵌入 prompt、并将 plate 与裁剪图对比打分。从源码看它的底层行为需要环境变量OPENAI_API_KEY未设置时会提示改用 harness 原生图片工具有--ref参考图时走POST /v1/images/editsmultipart 携带image[]文件无参考图时走POST /v1/images/generations模型为gpt-image-2请求字段含model、prompt、size默认1536x1024可传--size WxH、quality默认medium此处显式--quality high、n1返回图片写盘后引擎进程内调用embed_prompt把 prompt 嵌入图片元数据并写一份out.json侧车记录 prompt、createdAt、tool、model、refs若嵌入失败会在报错中标注离线/CI 场景可设IMPECCABLE_IMAGE_GEN_FAKE1此时不调 API生成带SYNTHETIC COMP水印的占位图SVG 或 PNG用于离线管线走通门禁。路径 Bharness 原生图片工具# 1) 以裁剪图为输入图 impeccable comp-spec --crop id # 2) 取该 region 的重生成 prompt impeccable comp-spec --plate-prompt id # 3) 用原生工具以 crop 为输入、plate-prompt 为提示词生成写入 plate 路径 # 4) 把确切 prompt 嵌入图片 impeccable embed-prompt plate --prompt the exact promptcomp-spec --plate-prompt id打印的 promptplate_prompt函数结构是固定的三层约束种类行texture 要求无缝可平铺材质、无对象无文字无暗角image 要求同主体同取景同光照其余按设计插画要求同绘制、同风格、同线宽同着色保真行保留剪影、构图、透视、采样调色板、光照、材质、纹理palette 取 spec 前三个主色清除行移除 UI 文字、letterboxing、边框、卡片圆角、阴影禁止新增对象。embed-prompt实现见 crates/context/src/embed_prompt.rs把 prompt 以impeccable:prompt关键字写入 PNG 的tEXt块或 JPEG 的 COM 段对不支持的格式回退为写file.json侧车。它还支持--read回读与--scan dir扫描目录中所有缺失 prompt 的栅格文件返回码 3 表示存在缺失。4.3 第 3 步读评分行一次重生成机会生成后必须读评分行PLATE-SCORE低于 50%或出现PLATE-WARN说明 plate 与 region 对不上把 plate 与 crop 并排打开明确指出漂移点主体、取景、调色板、风格据此收紧 prompt重生成一次同一 region两次未命中保留较好的一张标记为needs_parent_review并用一行说明原因。4.4 第 4 步透明抠图页面地面上的图形/物体figure or object on the page ground在主题色中不存在的纯色色度flat chroma color上生成写入 PNG 前将其 key 到 alpha绝不交付带底色背景的图。在generate-image --plate流程中线条图或扁平地面上的图形会自动 key 到 alphaPLATE-CHROMA交付后用普通img放在页面自身地面上即可不透明白底的 plate 则应通过mix-blend-mode: multiply融入页面。4.5 材质textureregion 的特殊处理材质纸、布、颗粒不先走生成用comp-spec --crop id --raw裁一块无墨迹的干净材质样格镜像平铺mirror-tile到 plate 尺寸后保存为 plate仅在找不到干净样格时才生成。门禁会按整个 region 框给材质打分所以材质 region 应围绕干净地面样格绘制而不是围绕它下面的墨迹绘制页面在材质覆盖处平铺它。4.6 纪律红线禁止重新设计、禁止添加对象、禁止换风格、禁止重新诠释——comp 已经按现状被批准。不碰页面代码、spec 或 comp。spec 里没有列出的东西一律不产出父级漏掉的 region 以一行业务备注回报而不是擅自生成一块 plate。五、输出契约与验证闭环每个栅格 region 回报一行格式严格固定id plate path WxH score% accepted|needs_parent_review|blocked one-line note or -随后是blockers缺 spec、缺 comp、无图片能力、key 耗尽与assumptions均为全局性、极简描述。除此之外什么都不输出不写总结、不写赞美、不给实现建议。5.1 门禁反向校验build-phase advance父级用impeccable build-phase advance按同一份 spec 校验你的 plate——你的回报行必须与门禁的输出一致。构建是一个磁盘上的状态机8 个阶段crates/comp-verbs/src/build_phase.rs 的PHASEScomps → spec → plates → hero → sections → motion → responsive → review其中plates门禁gate_plates会逐 region 执行存在性plate路径缺失 → 报plate missing for id状态missing可解码文件必须能按 PNG 解码否则unreadable尺寸非材质 plate 宽度必须 ≥min(1536, region像素宽 × 1.5)即至少 1.5 倍且不低于 1536px 下限——在资产尺寸重生成不要裁剪 comp相似度用plate_reference生成的参考图与 plate 比对cover对齐、按 kind 加权overall低于40%PLATE_MIN、structure低于40%PLATE_STRUCTURE_MIN都会拒绝comp region 本身平静detail.energy 12而 plate 新增细节超过 45% 的单元会报加了 comp 没有的噪点/纹理禁裁剪图plate 与原始 region 的structure_score≥ 95%重采样同一像素会被直接拒绝——comp 的裁剪图永远不是 plate这条在 docs/COMP-FIDELITY.md 的缺陷表中记录为bad asset crop (crops are never allowed)未引用检查构建走完后unreferenced_plates会扫描产物 HTML 及其关联 CSS、项目源码任何 spec 中声明却未被引用的 plate 都会被记入确保已通过的 plate 是真正被放置的素材。阈值常量都在 crates/comp-verbs/src/build_phase.rs 顶部PLATE_MIN: f64 0.4、PLATE_STRUCTURE_MIN: f64 0.4plate 阈值 0.5 是generate-image --plate的 50% 警告线与build-phase40% 硬线的差别所在——前者是给生产者的自我校验后者是构建门禁的硬门槛。六、常见失败模式与工程纪律结合 docs/COMP-FIDELITY.md 的多次评估记录与门禁消息plate 生产中最常见的失分点与对应防线失败模式防线直接交付 comp 裁剪图crops are never allowedplates 门禁以 structure ≥ 95% 拒绝重采样同一像素的文件plate 在框内被裁object-fit: cover 裁边spec 测量期clipped警告 hero 门禁plate_clip_check逐边读数加了 comp 没有的细节/噪点/颗粒平静 regionenergy 12拒绝新增细节 45%生成了 plate 却用 CSS/SVG 重画plate 未放置构建后unreferenced_plates扫描产物引用未引用的 plate 拒绝进入下一阶段门禁未过强行推进build-phase advance只认磁盘状态plate 缺失/未引用时拒绝打开下一阶段一条实战建议同样来自门禁消息generate-image --plate单次生成需 30–90 秒应当用长等待90 秒 yield或用把多个 plate 合成一条命令执行而不是一个回合一个回合地轮询空会话。七、degraded 变体无子代理环境下的内联执行本文所依据的文档位于 .hermes/skills/impeccable/reference/degraded/asset-producer.md它是由 skill/agents/impeccable-asset-producer.md 在构建期生成的degraded 变体文件头注释注明Generated from skill/agents/ at build time. Do not edit。差异只有一点当 harness 没有子代理能力时该角色改为内联运行——你既是父级也是生产者先按上文完整输出契约先产出完整输出契约再亲自执行并在回报时用一行披露这一替换。命令中的脚本路径.hermes/skills/impeccable/scripts/impeccable即 skill 脚本入口在 skill/scripts 中有同名实现command-metadata.json记录了全部命令的元数据供 harness 发现命令能力。八、一句话总结Impeccable 的资产生产是一条测量驱动、门禁校验的流水线comp-spec把批准的设计稿变成唯一权威的 spec.jsonAsset Producer 按 spec 逐 region 把裁剪参考重生成成 1.5 倍以上的干净 plate 并嵌入 promptbuild-phase advance用同一份 spec 反向验证每块 plate 的存在、尺寸、相似度与最终引用。spec 是清单plate 是原料crop 永远是参考——遵守这条纪律页面就能以代码绘制结构、以 plate 承载质感最终在 hero 门禁中拿到与 comp 一致的保真分数。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表