企业官网建设流程全解析

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、kind（plate 插图 / 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（两种方式）

方式 A：API 回退（一条命令完成全流程）

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 调用、零成本），用于开发联调。

方式 B：harness 原生图像工具

• 把裁剪图作为工具的输入图像；
• 用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 没有呈现为原区域。此时：

1. 把 plate 与裁剪图并排打开；
2. 明确指出漂移点（subject 主体、framing 取景、palette 调色、style 风格）；
3. 据此收紧提示词，只再生成一次；
4. 同一区域第二次仍不合格：保留较好的一张，标记为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 key）；
• assumptions：全局且最小。

除此之外什么都不输出：不要总结、不要溢美之词、不要实现建议。父代理随后运行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% 像素 alpha<128）的 plate 在打分前会先合成到区域采样底色上再与参考图比较，确保透明抠图不会因为空白背景被误判。此外门禁还会扫描源码文件，检查每个 plate 是否真正被页面引用（未被引用的 plate 会出现在验收报错里）。

七、常见失败与一次重生成策略

综合文档与源码，生产中最高频的失败与处置如下：

整套设计的核心思想可以浓缩为一句：裁出来的永远是参考，只有按 spec 重新生成、经过打分验证、尺寸达标的 plate 才是交付物。这样既保住了已批准 comp 的视觉方向不被二次创作污染，又让 HTML/CSS 拿到的是可直接object-fit、可平铺、可叠透明层的干净素材——从决策 comp 到最终网页之间的像素，每一步都有清单、有分数、有可追溯的 prompt 嵌入，形成一条完整可复验的生产链。

进一步阅读：完整的命令行为与退出码可查阅impeccable启动器 skill/scripts/impeccable 与命令元数据skill/scripts/command-metadata.json；comp-spec的网格坐标（A0 左上到 J9 右下）、区域 kind（plate/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