impeccable 视觉化指南Direction Comp 三选一审批、规格化与光栅资产溯源全流程【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable这篇技术指南围绕 impeccable 的 comp-led 构建路径展开当新工作流new-work已经定下视觉世界、且图像生成可用时如何把方向转译为三张高保真 north-star 组合稿comp交给用户审批再把被选中的 comp 规格化为可测量的构建契约最终为每一块光栅资产写入可检索的 provenance来源元数据。读完本文你将掌握 comp 生成纪律、唯一的审批点、approval 落盘机制、comp-spec 区域分类与 plates 生产、以及impeccable embed-prompt的资产溯源操作——它们共同构成了 impeccable 从方向到可验证的像素级交付的完整闭环。本文以 visualize.md 为主体骨架相关命令的底层实现均可在仓库对应源码中核验。适用场景与前置条件什么情况下加载这份契约visualize.md不是一条永远执行的通用流程而是一份有明确触发条件的契约加载条件comp-led 构建由 new-work.md 发起且图像生成可用——无论是 harness 原生图像工具还是 API 回退impeccable context报告的IMAGE_TOOLS行。前置条件PRODUCT.md与DESIGN.md必须已经存在。new-work 已经解析了视觉世界palette、typography、材料语言、组件性格、imagery stance、motion grammar本文件绝不重新打开它——它是一次探针测试不是第二次身份工作坊。跳过条件按设计而非漂移code-led 构建默认跳过本文件若 new-work 的表面级结构轮次已经把三张可视化的卡片摆到用户面前established world该轮次即视为已履行——锁定卡片的 comp 就是已批准的 comp直接记录审批并在 After approval 处继续不再生成任何新内容。文档原文用一句话点明了这条纪律A code-led contract skips this file by design, not by drift; do not load it then.从源码看comp-led 还是 code-led是一个记录在磁盘上的工作流偏好crates/comp-verbs/src/build_phase.rs中read_build_path会依次读取.impeccable/config.json与.impeccable/config.local.json后者在单机配置与团队提交值不一致时优先buildPath字段取comp或code两者都未记录且图像生成存在时默认 comp-led。生成三个 compositional options三选一而不是三选一之外的选项comp 轮次运行在构建的 phase 状态之内。文档明确要求impeccable build-phase start --direction seed key --kind assigned|pick|challenger|canon必须先执行 startroll 的输出会命名具体命令其compsphase 才会在生成第一张 comp 之前打开。在 start 运行之前渲染的 comp 位于状态之外从该点恢复的会话没有可遵循的 phaseimpeccable generate-image会拒绝向.impeccable/mocks/写入直到 start 已运行harness 原生图像工具受同样的顺序约束。渲染规格与基准三张不同的高保真 north-star comp保存到.impeccable/mocks/下以跨越会话。在 surface 自身的 viewport 下构图原生 App 或 mobile-first 表面用竖屏设备尺寸桌面端用横屏手机屏幕以横屏构图是对构图的误述。comp 是构建线程自己的工作绝不委托写 prompt 的线程持有方向的完整上下文构建开始时已见过每一张 comp。用 workspace 相对路径打开每张图片沙箱化查看器拒绝绝对路径项目根下的任何东西都有相对路径。基于真实内容与已与用户开发好的 surface 概念构图。既有世界established world上的锚定在既有世界上每张 comp 都必须锚定真实身份截图一张有代表性的现有页面作为参考图传入——harness 图像工具的 input image或impeccable generate-image --ref。prompt 以新 surface 的结构开头参考图承载 palette、type 与组件性格因为DESIGN.md words alone drift where a pixel reference does not仅靠 DESIGN.md 的文字描述会漂移像素参考不会。需要明确命名参考图贡献了什么、不贡献什么从参考图继承参考图绝不能贡献chrome浏览器/设备框架、palette、type、组件性格参考页面自身的内容—逐字照搬的 banner、hero 或卡片这是参考泄漏不是保真为什么是三这个数字Three is the number: one comp invites rubber-stamping; the spread between three surfaces the composition worth building.一张 comp 会招致橡皮图章式通过三张之间的跨度才能暴露值得构建的构图。被选中的卡片其 decision comp 是三张中的第一张——它已经在完整保真度下渲染过该方向因此只需再生成两张让第一张固定下来的变量产生变化然后把三张一起送到审批点。只有一种情况需要在此处渲染全部三张轮次到达时没有 decision comp降级 roll、identity-mode 页面、未经决策轮次而固定方向。comp 纪律三种失败模式与自检文档给出了三条判据每一条都配了自检命令comp 是被设计的 surface不是主题的照片。prompt 必须以 surface 自身的结构开头该设计拥有的区域按顺序命名并给出比例关系没有导航的页面就明说没有导航非常规 surface 要陈述它非常规的骨架。A prompt that leads with atmosphere gets a vignette back: the model paints the fish market instead of the fish markets website.自检如果它挂起来像一张海报或者读起来像贴了文字的摄影作品那就不是 comp——用更字面的布局脚手架重新生成。反面同样是失败surface 里完全没有主题对象。主题以区域所承载的内容出现世界是框的装饰绝不取代框里展示的东西。删除通常搭着 prompt 的排除清单混进来所以排除项要约束虚构声明媒介禁令属于既定的 imagery stance永远不属于谨慎。接受渲染前先指向主题一张描绘了世界的一切却与主题无关的渲染无论氛围多忠实都是失败。重新生成时按区域逐个命名主题内容。像发布后的屏幕一样评判 comp访客的 job 必须仅凭图像就能读懂。不借助说明文字就能读出 surface 的模式读不出模式的渲染只是没有 surface 的艺术指导。以访客的 job 作为 prompt 的主干重新生成。承诺的深度与结构性变化承诺是深度不是覆盖世界通过一个主导动作加上支撑它的材料、字体与间距进入其余区域保持静止让那个动作可被读取。检查削减的是竞争不是内容——被安静化的区域保留信息只是停止表演。两个元素在同一尺度上竞争命名过的焦点时刻就是 shouting在喊叫没有命名焦点时刻时多个区域同时表演概念是同样的喊叫。保留最强的动作安静其余的——Busy is louder, not bolder杂乱只是更吵不是更大胆。用户短列了多个概念时把三张分布到它们之上。单一方向已承诺时变化图像能解决的结构性不确定项拓扑、序列、密度、层级、焦点构图、或交互取景。展示足够超越开场时刻的内容证明概念能统治整个 surface。不生成 palette 产物、不提出新的氛围问题、不引入不同的字体声音、不发明新 motif如果已承诺的世界支撑不了概念回到概念短列表而不是改变世界。每张 comp 都是方向测试不是截图规格。核心 UI 文本、响应式行为、可访问性、语义和交互状态仍然属于实现责任——这也是后文 spec 阶段与 hero gate 存在的原因。一个审批点没有替代品没有跳过条件三张 comp 必须一起展示在决策页上展示impeccable serve-question每个 comp 一个选项comp 作为该选项的 hero 图或仅当 harness 能内联渲染图像时在 harness 内展示——纯文本表面不算展示。问三件事什么应该 carry forward向前带、什么对世界来说是虚假的、所选概念应该 approved / combined / revised / rejected。然后停下来等待。结构化模拟用户同样被视为已到场收到同样的问题。用户批准方向或明确授权之前不要开始写代码。若用户授权用 task brief、PRODUCT.md、DESIGN.md决策并陈述证据。审批细化任务概念它不修改 DESIGN.md。当结构化提问工具出错时回退到决策页只有两者都失败后才可以把选择视为委托——委托的选择与审批记录方式完全相同并在第一次回复中披露而不是最后一次。finish reviewer 会把没有记录审批的 comp 轮次视为 material finding实质发现.impeccable/mocks/decision/下的 decision comp 是方向轮的产物不是 comp 轮的输出本身不暗示审批。从源码看impeccable serve-question的实现位于 serve_question.rs支持--schema打印 payload 形状、--start --payload filedaemonize 并打印页面 URL 与 key、--wait --key key轮询收集选择退出码 3 表示继续等待、--update --key key --payload file在同一张桌子上交付后续轮次。ANSWER以 JSON 打印包含optionId、comp路径等信息其中comp为真时会提示the decision comp at that path is compositional option one与 visualize.md 的措辞一一对应。批准后的记录让工具能找到的地方被批准 comp 的路径写入surface brief。其.jsonprompt sidecar 增加approved: true——通过impeccable generate-image生成的每张 comp 都有一个 sidecar原生工具没写的话就手动创建。sidecar 随 mocks 文件夹一起迁移因此审批能跨越看不到 brief 的会话和机器它正是impeccable build-phase advance读取以关闭 comps phase 的东西。总结构图与 comp 中不得字面化的部分返回 new-work.md记录来自已批准概念的 direction contract然后构建。After approvalcomp 变成 spec已批准的 comp 是翻译为语义化、响应式、可访问代码的北极星绝不是重新构图的许可keeping the palette and mood while redrawing the topology is a second art direction保留 palette 和氛围却重画拓扑是第二次艺术指导。禁止把核心 UI 文本或控件栅格化未经询问不得在批准后替换不同的视觉驱动。comp 展示的是被测量的不是被记住的。new-work 的第 6 节把构建运行为 phasesimpeccable build-phasespec phase把 comp 转成带采样 palette 的区域框impeccable comp-spec。每个区域的媒介取决于像素是什么而不是什么可构建图形、产品对象、机械、任何带透视/阴影/绘画技巧的插画、以及任何按名出现的纹理编织布、纸纹、织物、皮革、拉丝金属→plate/image/texture区域以光栅交付文本、控件、chrome、可数元素的图表、扁平形状系统、以及任何必须移动/缩放/响应的东西 → 语义化。Writing CSS for a sculpted panels finish, or a many-vertex clip-path for a torn edge, is the quiet deletion of the approved design——为雕刻面板的质感写 CSS、为撕裂边缘写多顶点 clip-path都是对已批准设计的安静删除。检测器规则organic-clip-path与buried-raster见 tests/fixtures/antipatterns/organic-clip-path.html 与 buried-raster.html以及 hero gate 的区域分数会抓住它。删除图像原生区域是用户在审批点做出的范围决策绝不是审批后的静默扁平化。最后一句契约Generated imagery is a material, not a claim: evidence rules bind assertions, specs, testimonials, and photographs presented as real, never render fidelity.生成的图像是材料不是主张。Plates and provenance每一块光栅都携带它的来源plates phase每块光栅区域的 plate 在 plates phase 生产——在任何页面代码之前——由随附的 asset producer 或当前线程完成impeccable generate-image --plate id或用 harness 图像工具以裁剪图impeccable comp-spec --crop id为输入图像、以 spec 的 plate promptimpeccable comp-spec --plate-prompt id为 prompt随后运行impeccable embed-prompt。关键约束comp 的裁剪图是参考绝不是发货像素。plate gate 检查每个 plate 存在、至少是区域尺寸的 1.5 倍、并且读起来就是该区域页面代码必须等待此 gate——先于 plate 写出的页面是用 CSS 画材料的页面。生成上下文是资产的一部分生成图像后无论用什么工具运行.claude/skills/impeccable/scripts/impeccable embed-prompt image --prompt promptprompt 必须与工具实际收到的字符串完全一致impeccable generate-image会自己做这件事。--read恢复它--scan dir列出仍缺失的 rasters。嵌入的 prompt 加上 spec 中该区域的行就是光栅的 provenanceartifact 引用的每块光栅都携带它sourced / stock / 既有光栅则嵌入其 origin 而非 prompt。修复批次或 reviewer 重建中创建或替换的光栅以同样方式生产被修复放弃的光栅在同一批次中删除。从源码看generate_image.rs 在成功写入图像后会自动调用embed_prompt::run把 prompt 嵌入文件并同时写入 sidecar JSON包含prompt、createdAt、tool、model以及有参考图时的refs数组它还支持--size默认1536x1024、--quality默认medium与多--ref参考图走POST /v1/images/edits的 multipart 路径无参考图时走/v1/images/generations并设了IMPECCABLE_IMAGE_GEN_FAKE环境变量用于生成带SYNTHETIC COMP标记的占位图——与文档label it synthetic的要求一致。embed_prompt.rs 的实现细节PNG 走tEXtchunk关键字为impeccable:prompt源码KEYWORD常量按 chunk 遍历后重写文件幂等处理已有嵌入JPEG 走COM注释段prompt 过长超过段长上限时报错其他格式回退到image.jsonsidecar--scan递归遍历目录跳过node_modules与点开头目录列出所有 PNG/JPG/JPEG/WebP 中缺 provenance 的文件缺失时退出码为 3全部就绪时为 0——该退出码可直接用于 CI 或脚本断言。图像转换用impeccable context在启动时报告的转换器IMAGE_TOOLS行转换图像仅当它报告没有转换器时才 probe每会话至多一次绝不每张图一次。返回主线方向契约、分阶段构建与收尾approval 落盘、spec 与 plates 就绪后返回 new-work.md那里有 direction contract 的六个 blockTHESIS / OWN-WORLD / STORY / FIRST VIEWPORT / FORM / FINISH、分阶段构建comps → spec → plates → hero → sections → motion → responsive → review与收尾审查。值得注意的是crates/comp-verbs/src/build_phase.rs中定义的八个 phase 与文档一一对应其中 hero gate 的通过线是 72% 整体匹配HERO_MIN 0.72responsive gate 为 65%plates 为 40%——这些数值让comp 是测量的契约落到了可执行的机器判据上。一言以蔽之visualize.md 保证方向在被写代码之前先被可视化并获批而获批之后每一像素都被测量、每一块光栅都带着可检索的来源。这两条合起来就是 impeccable 把 AI 构建从看起来差不多推向按契约交付的核心机制。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考