蓝湖设计稿转本地代码

把蓝湖设计稿转换为用户项目中的可运行代码，并保留可审阅的设计输入、代码变更、评分结果和验证证据。对新页面和新组件，优先使用工作区中的 work/lanhu-d2c CLI 做标准化的“本地输入 → 生成 → 渲染 → 评分 → 安全修复”闭环；对已有业务页面，默认只做受控的局部增量修改，不能用全量生成或自动修复覆盖已有逻辑。

模式路由

| 场景 | 模式 | 必读参考 | CLI 使用边界 | |------|------|----------|--------------| | 新页面或新组件 | 整页/新组件生成 | data-extraction.md、code-generation.md | 设计输入就绪后优先使用 loop | | 只改已有页面的一部分，或目标文件已经存在 | 局部增量改造 | data-extraction.md、incremental-edit.md、必要时 code-generation.md | 先做最小补丁；只有隔离的新增生成目录才可使用自动修复 |

目标文件已存在时，默认走局部增量改造。只有用户明确要求整页重写，才允许覆盖页面入口或整组文件。无法把蓝湖区域唯一映射到现有组件时，先列出候选并暂停确认。

不可违反的边界

蓝湖页面交互只能通过已登录的 catdesk browser-action 完成。禁止用 curl、服务端 requests 或其他方式直连蓝湖接口；页面上下文内的 evaluate + fetch 是允许的取数方式。
原始 JSON、截图和切图只写入本地工作区。不要输出、记录或上传 Cookie、Authorization、签名 URL 或其他登录凭据。
写码前必须展示设计上下文和修改计划，等用户确认后再修改项目代码。取数、解析和生成计划可以先做。
切图必须复制到项目资源目录并用本地路径引用，不得把蓝湖 CDN 临时 URL 写入产物。
代码必须遵循目标项目已有目录、组件、样式和资源规范；不得借机升级依赖、重构公共组件或格式化无关文件。
已有页面必须保留现有 props、事件、插槽、状态、请求、埋点、路由和测试选择器，除非用户明确同意改变它们。
声称完成前必须有编译/运行证据、评分报告和截图或等价的视觉验证。缺少设备、后端或运行环境时，要明确写出未验证的门槛。
Web 产物必须使用真实响应式布局，不能用整页 transform: scale() 伪造适配；短屏不能用 overflow: hidden 隐藏关键内容。
CLI 只接受安全的本地设计包，绝不把蓝湖链接、远程图片 URL、Cookie、Authorization 或绝对来源路径写入 manifest、账本、生成代码或运行摘要。
自动修复不是通用重构工具。它只可作用于本次 CLI 生成目录，最多运行三轮；遇到业务逻辑、组件结构、公共样式、资源缺失或低置信度问题，停止自动修改并转人工处理。

工作目录与本地输入契约

浏览器取稿中间产物统一放在：

<workspace>/work/lanhu-d2c/<image_id>/
├── raw.json                 # 蓝湖结构化图层导出
├── reference.png            # 设计基准截图
├── slices/                  # 本地切图
├── source.manifest.json     # 供 CLI 闭环消费的本地输入清单
├── design-context.md
└── layers.json

source.manifest.json 必须是本地安全清单，status 为 ready，raw、reference 及每个 assets[].file 都是相对清单所在目录的路径，不得使用绝对路径、..、反斜杠或软链接逃逸。每个资产须有唯一 layerId。清单只保留 version、status、raw、reference 及资产的 layerId、name、file；不要将 URL、凭据或浏览器元数据写进去。

{
  "version": "1.0",
  "status": "ready",
  "raw": "raw.json",
  "reference": "reference.png",
  "assets": [
    { "layerId": "hero", "name": "hero", "file": "slices/hero.png" }
  ]
}

CLI 闭环运行工件位于 <project>/work/lanhu-d2c-runs/<run-id>/。完成且用户确认代码无误后，才清理浏览器取稿中间目录；项目资源、代码和用户确认保留的评分证据不删除。

执行流程

1. 确认输入、项目与目标

从详情链接提取 image_id；stage 列表链接先展示画板列表，让用户选择，不能自行猜测。
按“用户明确指定 > CLI 项目检测 > 询问用户”确定目标栈。CLI 支持 react、next、vue、nuxt、wxapp、taro-react、taro-vue、uniapp 和 static-web；React 与 Vue 信号同时存在时，必须显式指定 --stack。
新建目标确认页面/组件名和目录；增量目标确认页面、组件文件或组件名，以及允许修改的范围。
增量模式先记录工作区基线。已有未提交修改视为用户输入，不能覆盖、回退或清理。
CLI 默认输出到 src/generated/lanhu/<component>/，微信原生小程序输出到 pages/<component>/。已有目标必须先确认，只有显式 --force 才允许覆盖；不能将 --force 用于用户既有业务页面。

2. 获取、解析并本地化设计数据

先读 references/data-extraction.md，通过浏览器获取 raw.json、reference.png 和 slices/。遇到登录页、无权限、401/403 或取数失败时停止并如实说明，不绕过权限，也不退化成未声明的盲写。

解析阶段应使用 CLI 的 DesignIR 归一化能力，或等价地生成同一份可审阅的设计上下文。归一化会保留画板、节点、tokens 和本地资产，安全过滤危险样式值，并保守推断正常流式布局与真实叠层关系。不能把远程 URL、url()、expression()、javascript:、@import 等值带入 DesignIR 或生成 CSS。

node ./bin/lanhu-d2c.js normalize \
  --input '<workspace>/work/lanhu-d2c/<image_id>/raw.json' \
  --output '<workspace>/work/lanhu-d2c/<image_id>/design.ir.json'

检查 design-context.md、layers.json、DesignIR 与设计稿截图是否相互对应。解析告警、空画板、空图层树、缺失切图或截断结果必须在确认摘要中标出。准备 source.manifest.json 后，可先用以下命令校验本地输入契约；它不会访问网络：

node ./bin/lanhu-d2c.js fetch \
  --mode manifest \
  --source-manifest '<workspace>/work/lanhu-d2c/<image_id>/source.manifest.json'

若 CLI 的 fetch --mode browser 已接入可用的结构化 source bundle，可通过它物化本地设计包；它遇到登录、权限或缺失结构化数据时必须返回阻塞状态，不能截图兜底。默认蓝湖取稿仍以本 Skill 的浏览器流程和本地 manifest 为准。

3. 确认后生成或最小化修改

写码前向用户展示：画板尺寸、页面/区域结构、切图数量、检测到的技术栈、计划改动文件、保护的业务契约、未触碰的文件和验证/评分计划。用户确认后再继续。

整页/新组件：读取 references/code-generation.md，用 CLI 或等价生成器生成代码并本地化资产。图层 ID、设计 token 和本地资产引用要保留在可评分的生成结果中。
局部增量：读取 references/incremental-edit.md，只生成最小补丁，严格遵守文件/符号白名单。设计图没有表达的业务逻辑沿用旧代码；不使用假数据或空壳请求替换现有实现。
视觉要求若必然改变公共 API、共享组件或业务流程，暂停并说明影响。
Web/React/Vue 将表单、列表、按钮、正文、协议区等正常内容组织为 flex/grid 和受控容器；只有实际覆盖的装饰或悬浮内容使用绝对定位。窄屏应重排、换行或受控收缩，宽屏应保持主内容最大宽度并居中，短屏应可以滚动至关键内容。

对新组件的推荐闭环命令如下。仅在本地 manifest、项目路径与渲染器准备就绪后执行：

node ./bin/lanhu-d2c.js loop \
  --project '<project>' \
  --component '<ComponentName>' \
  --source-manifest '<workspace>/work/lanhu-d2c/<image_id>/source.manifest.json' \
  --stack '<detected-or-confirmed-stack>' \
  --renderer browser \
  --renderer-url 'http://127.0.0.1:<port>/<preview-path>' \
  --max-iterations 3 \
  --target-score 95

真实 Web 渲染只能经 catdesk browser-action，并且本地浏览器渲染地址只使用 file://、http://localhost 或 http://127.0.0.1。离线回归可使用 fixture renderer；小程序/Taro/uni-app 的 CLI renderer 只保留统一协议，实际编译、打开页面和截图必须交给 wechatide 的 compiler/debugger 流程。

4. 评分、诊断与受控修复

每次可运行的整页/新组件生成都必须产生结构化评分。单独评分可使用：

node ./bin/lanhu-d2c.js score \
  --design '<design.ir.json>' \
  --code '<generated-dir>' \
  --reference '<reference.png>' \
  --generated '<rendered.png>' \
  --report '<score.json>'

评分规则如下：有可解析的 RGB/RGBA PNG 截图时，综合分 = 视觉还原分 × 65% + 工程质量分 × 35%；没有两张可用截图时，综合分只代表工程质量，confidence 必须标识为 engineering-only，不能宣称视觉达标。

视觉评分检查尺寸相似度、像素颜色差、边缘差异，并输出最多八个 4×4 热点。工程评分检查设计节点、token、本地资产覆盖率，以及非空文件、分隔符平衡、无远程蓝湖资产、合理文件大小和行长度。DOM 结构评估通过 data-lanhu-id 将 DOM 映射到 DesignIR，报告缺失节点、文本偏差和几何偏差。查看 score.json 中的 overall、confidence、visual、engineering、structure.findings 与 diagnostics，先根据热点和结构问题判断原因，再决定是否进入修复。

自动修复仅针对本次生成目录中的 .css、.scss、.wxss，且只允许修改 width、height、left、top、font-size、color、border-radius、display、opacity、letter-spacing、text-align、z-index。它只能作用于安全的单一 class 或 id 选择器，值必须是受校验的字面量。几何类动作置信度为 0.95，自动应用门槛为 0.8；缺失节点、文本、复杂阴影、业务/结构问题、低置信度或被拦截的动作必须列为人工处理，不得强行修改。

闭环默认目标分 95，最大三轮，相邻轮次综合分提升低于 0.5 时停止。也必须在达到目标分、没有安全 CSS 动作、渲染失败/无截图或显式 --no-repair 时停止。所有停下来的原因都要从 summary.json 和每轮 score.json、repair-plan.json、repair-result.json 中如实汇报；不能把“循环已停止”表述为“视觉已通过”。单独 repair 命令默认只生成计划，只有显式 --apply 才落盘，并在生成目录保留 repair-history.json。

5. 验证与汇报

小程序用 wechatide 编译并截图；React/Vue 启动项目或打开产物并截图。CLI browser renderer 不可用时，明确报告 unavailable，不使用 curl、Playwright、Puppeteer 或其他后备浏览器。
设计基准视口外，移动画板默认覆盖 320×568、基准尺寸、430×932、768×1024、1280×800；桌面画板覆盖基准、1024×768、1440×900 与窄窗口。
每个视口检查 document.documentElement.scrollWidth <= window.innerWidth、关键内容位于视口/内容容器内、登录/提交等相邻关键区域不重叠；短屏还要确认可滚动到最后一个关键交互区，宽屏确认主内容居中且未被不必要拉伸。
增量模式额外检查 git diff --check；非 Git 项目检查前后文件清单/校验值、白名单、旧组件契约和至少一个既有关键交互。
运行目录必须保留 design.ir.json、asset-ledger.json、assets.manifest.json、summary.json，以及每轮的 render.json、score.json、repair-plan.json 和可选 repair-result.json。asset-ledger.json 应显示资产从复制、设计引用、生成引用到评分匹配/缺失的状态；不得包含 URL、凭据或绝对来源路径。
汇报实际修改文件、资源路径、CLI runId、总分/置信度、视觉/工程子分、未解决的热点或人工项、验证命令/结果、视觉偏差和未完成的运行时验证。只有同时具备通过的构建/运行证据、适用的多视口验证和准确评分结论，才可以声明完成。

常见失败处理

Figma 或 MasterGo：转交对应的 nocode-cli D2C 流程，不使用本 skill 的蓝湖取数规则。
登录或权限失败：停止，请用户在集成浏览器登录或申请权限。
图层树为空或被截断：先检查解析告警和 data-extraction.md 排查清单，不得直接按截图猜写。
source manifest 校验失败：修正为清单目录内的相对本地文件，移除 URL、绝对路径、..、反斜杠和重复 layerId；不要绕过路径或软链接校验。
资源下载失败：回到页面上下文重新取数并立即下载；仍失败则在汇报中列出缺失资源，不能添加远程 CDN 兜底。
React 与 Vue 同时被检测到：要求明确 --stack，不能猜测。
渲染器没有截图或返回 unavailable/blocked：记录为未完成的视觉验证并停止修复；可在环境就绪后从本地输入重新运行。
总分未达目标但没有自动修复：根据 repair-plan.json、结构发现和热点提出人工最小修改建议，不扩大自动修复白名单。