---
name: lanhu-vue-plan
description: 输入蓝湖设计图详情 URL（含 image_id），使用 lanhu MCP image_id 精确链路输出 Vue 3 单文件组件页面规划与代码草稿；annotations 为主路径，单位与圆角归一在 skill 内完成，schema 仅失败兜底，资源统一落盘到 src/assets/lanhu/<screen>/。
---

# 蓝湖 → Vue 3 SFC（image_id 直连 + annotations 主路径 + skill 归一）

## Skill 执行优先级（硬门禁）

当用户消息显式包含 `$lanhu-vue-plan`（或明确点名本 skill）时，必须执行以下规则：

1. **本 skill 规则最高优先级**：
   - 禁止回退到通用 UI 转换文档作为主流程。
   - 禁止输出 XML、Compose、Flutter、React Native、Nuxt、uni-app、Taro。
   - 禁止输出“按视觉估算实现”这类脱离本 skill 数据链路的结论。
2. **先协议、后改文件**：
   - 在完整输出“阶段 1 + 阶段 2（A/B/C/D）”之前，禁止修改项目代码文件。
3. **未满足契约即失败**：
   - 未按约定输出 A) 审计区，视为未执行本 skill。
   - 触发时必须输出：`FAIL_FAST: SKILL_CONTRACT_VIOLATION` 并停止。

## 输入格式（从用户消息解析）

支持任意一种：

- 只给一行蓝湖 URL
- 或 key=value 多行：
  - `LANHU_URL=...`
  - `HOST_ACTIVITY=...`（可选）
  - `HOST_FRAGMENT=...`（可选）
  - `PRESENTATION=auto|embedded|page|dialog|drawer|bottom_sheet|popup`

### 输入硬要求

- `LANHU_URL` 必须是设计图详情链接并包含 `image_id`（`detailDetach?...&image_id=...`）。
- 为兼容既有调用协议，保留 `HOST_ACTIVITY` / `HOST_FRAGMENT` 字段名；在 Vue 场景中仅作为宿主页面或挂载点线索，不生成 Android 代码。
- 若缺少 `LANHU_URL`：仅提示补充后停止。
- 若缺少 `image_id`：`FAIL_FAST: IMAGE_ID_MISSING_IN_URL`。

## 必须使用的 MCP 工具（主路径）

必须调用（禁止无工具猜测）：

- `lanhu_get_ai_analyze_design_result(url, image_ids)`
- `lanhu_get_design_annotations(url, image_id)`
- `lanhu_get_design_slices(url, image_id)`

必要时（仅当链接为 PRD/原型文档且包含 `docId`）：

- `lanhu_get_pages`
- `lanhu_get_ai_analyze_page_result`
- `lanhu_resolve_invite_link`

若 lanhu MCP 不可用：提示用户先启动 lanhu-mcp 并确保 Codex 可见，然后停止。

## URL 与工具路由（强制）

1. 设计稿 URL（`/detailDetach` 且含 `image_id`，不含 `docId`）：
   - 仅走 image_id 精确链路：
     `lanhu_get_ai_analyze_design_result(image_ids)` -> `lanhu_get_design_annotations(image_id)` -> `lanhu_get_design_slices(image_id)`
   - 禁止通过 `design_name/design_names` 选择画板。
   - 禁止为“筛选画板”调用 `lanhu_get_designs`。
2. PRD/原型 URL（含 `docId`，通常为 `/product`）：
   - 才允许调用：`lanhu_get_pages` / `lanhu_get_ai_analyze_page_result`
3. 邀请链接（`/link/#/invite?sid=...`）：
   - 先调用 `lanhu_resolve_invite_link`，再按上面规则选择工具链。

## 数据源策略（强制）

### 主路径数据源（默认）

- 第一优先：`lanhu_get_design_annotations`
- 第二优先：`lanhu_get_design_slices(..., image_id)` 的 metadata（仅补充样式、资源、导出格式）
- `lanhu_get_ai_analyze_design_result(..., image_ids)` 仅用于视觉核对与阶段 1 简述，不参与尺寸计算

### 几何与测量来源（主路径）

- 元素坐标与尺寸：`annotations.layers`
- 自动测量优先使用：`annotations.measurements`
  - `text_container_paddings`
  - `icon_text_distances`
  - `nearest_neighbors`
- 当 measurements 缺项时，才回退到图层几何关系推导间距

### 单位与圆角归一规则（主路径）

- `annotations.style.border_radius` 是优先可消费圆角值：
  - 统一圆角输出：`border-radius: ...px;`
  - 分角圆角输出：对应 CSS 四角圆角
  - 仅当 `annotations.style.border_radius` 缺失时，才允许从图层样式补推
- 所有 `*_raw` 字段都视为原始源数据：
  - 禁止直接输出到 Vue 代码
  - 必须先由 skill 完成单位归一、结构归一，再写入 `<template>` / `<style scoped>`
- `annotations.unit = dp` 时：
  - 默认输出到 CSS `px` 基线
  - 字体、间距、圆角、边框、阴影都以归一后的 `px` 写入
  - 禁止再次执行 `411/750` 缩放
- 文本规则：
  - `font_size` -> `font-size`
  - `line_height` -> `line-height`
  - `letter_spacing` -> `letter-spacing`
  - 若项目已明确存在 rem 体系，只有用户显式要求时才允许从 `px` 切换到 rem

### 禁止项

- 禁止使用 OCR
- 禁止无来源猜测文本字号、间距、圆角或阴影
- 禁止在主路径中再次执行 `px -> dp` 缩放
- 禁止把 `*_raw`、未归一的 schema 原值直接塞进 Vue SFC
- 禁止在未明确要求时擅自输出 Tailwind、Less、Sass、CSS-in-JS

## 跨平台高保真约束（统一生效）

1. **测量优先**：
   - 间距、内边距、图文距离、对齐关系优先消费 `annotations.measurements`
   - 仅 measurements 缺项时才允许回退到图层几何关系
   - 禁止用“看起来差不多”替代真实测量
2. **复杂视觉元素优先切图**：
   - 关闭按钮、手势、优惠券票面、不规则卡片、插画、纹理、复杂渐变、复杂阴影组合等元素，优先直接使用 `lanhu_get_design_slices`
   - 仅明显纯色基础几何形且原生样式或组件能稳定逼近蓝湖效果时，才允许直接原生绘制
   - 若原生绘制无法稳定达到接近蓝湖结果，必须回退到 slices
3. **禁止近似替代真实资源**：
   - 同一视觉元素禁止混用“手画近似版”和“真实切图版”
   - 已存在可用 slice 时，禁止为了省事改成低保真近似版本
4. **文本 fidelity**：
   - 必须保留文本层级、强调态、弱化态、删除线、换行策略与截断策略
   - 长文本必须给出溢出策略，旧价/辅助态不得静默省略
5. **适配策略统一**：
   - 禁止整页或整树缩放
   - 优先“主内容限宽 + 居中 + 安全区 + 键盘避让 + 溢出滚动”
   - 底部主按钮、BottomSheet 操作区不得落到安全区外或被键盘遮挡
6. **绝对定位收敛**：
   - 仅角标、浮层锚点、重叠装饰、悬浮手势等场景允许绝对定位或局部偏移
   - 主信息流禁止用绝对定位拼页面
7. **图层透明度（强制）**：
   - 必须读取 `annotations.layers[].style.opacity`
   - 当 `style.opacity` 不为 null（即 < 1.0）时，必须在对应组件上应用平台对应的透明度属性
   - `style.opacity` 影响整个图层，如果是容器背景色，应用到背景色的 alpha 通道
8. **审计与资源清单补充**：
   - A) 审计区除必填字段外，追加 `asset_strategy=native_only|native_plus_slice|slice_priority`
   - A) 审计区除必填字段外，追加 `adaptation_strategy=limit_width|safe_area|ime_avoid|scroll_guard|mixed`
   - D) 资源清单必须说明哪些元素使用原生绘制，哪些元素使用 slices，以及原因

## 网页 schema 兜底链路（仅失败时启用）

仅当以下任一条件成立时触发兜底：

- `lanhu_get_design_annotations` 调用失败
- annotations 缺关键字段（`unit/layers/measurements`）
- `lanhu_get_design_slices` 调用失败且无法获取关键资源信息
- `lanhu_get_ai_analyze_design_result` 调用失败（仅影响阶段 1 语义描述时可降级为 `EMPTY`）

触发兜底后：

- 启用旧 schema 链路（优先复用当前 Lanhu MCP 运行环境中的 `LANHU_COOKIE`，再按 `project/image` + `store_schema_revise` 执行）
- 仅在此链路使用换算：`round(px * 411 / 750)`
- 所有 schema 原值先落入 `*_raw`，再完成归一后才能输出到 Vue 代码
- A) 审计区必须标注：`source_mode=web_schema_fallback` 与 `fallback_reason`

### 兜底 cookie 约束

- 第一优先：复用当前 Lanhu MCP 进程已有的 `LANHU_COOKIE`
- 若当前任务必须从文件读取 cookie，必须先检查当前 MCP 启动脚本或由用户显式提供路径，禁止写死历史路径
- 仅当环境变量缺失且已确认文件路径时，才允许读取该文件作为 `Cookie` 请求头
- 日志与输出中禁止回显 cookie 内容

## 硬门禁（强制）

1. URL 缺少 `image_id`：
   - `FAIL_FAST: IMAGE_ID_MISSING_IN_URL`
2. 主路径 annotations 缺关键结构且兜底失败：
   - `FAIL_FAST: PRIMARY_AND_FALLBACK_BOTH_FAILED`
3. 进入兜底后未获取到可用 cookie（`LANHU_COOKIE` 缺失，且未提供可读的 cookie 文件路径）：
   - `FAIL_FAST: COOKIE_SOURCE_UNAVAILABLE`
4. 进入兜底后预检失败或返回非成功 code：
   - `FAIL_FAST: COOKIE_INVALID_OR_EXPIRED`
5. 进入兜底后 schema 拉取失败：
   - `FAIL_FAST: SCHEMA_FETCH_FAILED`
6. 进入兜底后 schema 解析失败：
   - `FAIL_FAST: SCHEMA_PARSE_FAILED`

默认一律硬失败，禁止静默降级为估算模式。

## Vue 硬约束（必须严格执行）

1. **仅 Vue 3 SFC**：
   - 阶段 2 的代码产出只能是 Vue 单文件组件内容。
   - 默认输出 `<template>` + `<script setup lang="ts">` + `<style scoped>`。
   - 禁止输出 React、RN、Flutter、XML、Compose。
2. **布局组件优先级**：
   - 优先使用语义化 `div` / `img` / `button` / `input`
   - 默认使用 flex 布局
   - 仅在常规布局无法覆盖视觉结果时才允许 `position: absolute`
3. **圆角输出规则**：
   - 统一圆角：`border-radius`
   - 分角圆角：对应四角属性
   - 禁止输出未归一的圆角数组或 `*_raw`
4. **资源落盘规则**：
   - 所有切图、图标、背景资源统一放到：`src/assets/lanhu/<screen>/`
   - 资源命名使用语义化名称，例如：`ic-close.png`、`img-banner.webp`、`bg-card.png`
5. **资源使用约束**：
   - 常规资源使用 `import` 或相对路径 `new URL(..., import.meta.url).href`
   - 仅明显纯色基础几何形才允许直接用 CSS 绘制
   - 若图形复杂到必须使用 SVG 或 Canvas，需在规格表与审计区明确说明原因

6. **切图格式约束**：
   - 切图默认输出 `webp`（透明或质量异常可回退 `png`，并在规格表标注原因）
   - 所有栅格切图统一落盘到：`src/assets/lanhu/<screen>/`
7. **icon / 切图来源约束（强制）**：
   - 除"明显纯色填充的基础几何形（无渐变/阴影/描边/纹理）"外，icon 不得手动用 CSS/SVG 绘制
   - 常规 icon 必须直接使用 `lanhu_get_design_slices(url, image_id)` 返回的资源
   - 当 slices 提供了某个区域的完整合成切图（如 `bg`、`编组`、`layer-group` 类型的切图，且面积覆盖该区域 >= 80%），必须优先使用切图 `<img>` 或 `background-image` 作为背景，禁止用 annotations 的纯色/渐变去模拟多层叠加效果
8. **字体/颜色（可读性优先）**：
   - 禁止为单个元素创建额外的 CSS class
   - 字体属性完全相同在同一界面出现 `>=2` 次才允许抽成共享 class，否则一律 inline style
   - 颜色默认使用 CSS 变量；同色 `>=3` 次或全局语义色才建议归并到 :root 变量

## Vue UI 适配优化（必须执行）

1. **根布局适配**：
   - 页面根节点优先使用 `min-height: 100vh`
   - 主内容区优先结合 `max-width` + `margin: 0 auto` 控制版心
   - 禁止整页 `transform: scale(...)` 适配不同屏宽
2. **安全区与系统栏**：
   - 移动 H5 吸底区域优先使用 `padding-bottom: calc(... + env(safe-area-inset-bottom))`
   - 顶部区域按需考虑 `env(safe-area-inset-top)`
3. **滚动与溢出**：
   - 只要垂直内容有超出风险，优先使用正常文档流滚动或局部滚动容器
   - 禁止把底部按钮写死到视口外；只有设计明确要求吸底操作区时，才允许固定到底部
4. **大屏与横屏策略**：
   - 大屏优先“居中主栏 + 最大宽度约束”
   - 横屏优先重排容器，不做整页缩放
5. **文本与图片适配**：
   - 长文本必须给出多行截断或换行策略
   - 图片必须显式声明 `object-fit`
   - 比例敏感资源优先补 `aspect-ratio`
6. **绝对定位收敛**：
   - 仅重叠装饰、角标、浮层锚点允许使用 `position: absolute`
   - 主信息流禁止用绝对定位拼页面

## 间距计算规则（强制）

1. **必须使用 annotations 绝对坐标计算间距**：
   - 垂直间距 = `next_element.position.y - (current_element.position.y + current_element.size.height)`
   - 水平间距 = `next_element.position.x - (current_element.position.x + current_element.size.width)`
   - 禁止使用"大约"、"看起来像"等估算方式
2. **优先使用 `measurements.sibling_spacings`**（如果可用）：
   - 直接读取 `gap_to_next` 作为 `margin-top/margin-left` 或 `gap` 属性
   - 当 `layout_direction = horizontal` → 使用 `display: flex; flex-direction: row`
   - 当 `layout_direction = vertical` → 使用 `display: flex; flex-direction: column`
   - 当 `layout_direction = stack` → 使用 `position: relative` + 子元素 `position: absolute`
3. **禁止用固定值替代 annotations 中的精确间距**

## 层级树消费规则（强制）

1. **当 `layout_tree` 可用且有层级时，必须按树结构组织模板**：
   - 树的每个 group 节点对应一个容器 `<div>` 或语义化标签
   - 子节点按 `children` 数组顺序排列
   - 禁止忽略树结构而自行猜测层级
2. **当 `layout_tree` 不可用或扁平时**，从 `layer_path` 和 `parent_name` 重建
3. **当以上均不可用时**，从绝对坐标推断

## 边框与阴影消费规则（强制）

1. **边框**：读取 `style.borders_parsed[]`
   - 输出：`border: {width}px solid {color}`
2. **阴影**：读取 `style.shadows[]`
   - 输出：`box-shadow: {offsetX}px {offsetY}px {blur}px {color}`
3. **圆角**：`border_radius` 和 `border_radius_detail_raw` 已转为 dp（px）
   - 禁止对圆角值再次执行缩放
   - 输出：`border-radius: {value}px` 或分角 `border-top-left-radius` 等

## 输出契约（严格）

- **阶段 1**：只输出“选中画板 + 默认承载方式 + 预期产出文件清单”。
  - 不输出 Vue 代码
  - 不输出 slices 列表
  - 不输出接入说明
- **阶段 2**：只输出「A) 审计区 + B) 规格表 + C) Vue SFC 文件内容 + D) 资源清单」。
  - A 必须先于 B/C/D 输出，且字段完整
  - 不输出接入指引、验收说明、状态总结

### A) 审计区强制字段（缺一即失败）

必须包含以下字段，缺任意一项时立即：
`FAIL_FAST: SKILL_CONTRACT_VIOLATION`

- `tool_route=design_chain|prd_chain`
- `mcp_calls`
- `selection_key=image_id`
- `selected_image_id`
- `source_mode=mcp_annotations_primary|web_schema_fallback`
- `unit=dp|px`
- `conversion_applied=true|false`
- `dimen_baseline=not_applicable`
- `text_source_priority`
- `data_source=text/icon/spacing=annotations|dds_schema`
- `fallback_reason`（仅兜底时必填）

## 阶段 1（定位/选中/默认承载）

1. 解析 `LANHU_URL`，提取 `image_id`
2. 不调用 `lanhu_get_designs` 进行筛选；直接以该 `image_id` 作为唯一目标
3. 调用 `lanhu_get_ai_analyze_design_result(url, image_ids=[image_id])` 获取视觉核对信息（失败可记 `EMPTY`）
4. 默认 `PRESENTATION` 规则：
   - `bottom_sheet`：含“底部弹窗/底部弹出/bottom sheet”
   - `dialog`：含“弹窗/对话框/提示/确认/dialog”
   - `drawer`：含“抽屉/侧滑层”
   - `popup`：含“气泡/悬浮/tooltip/pop”
   - `page`：明确“独立整屏页面/导航入口/深链页”
   - 否则 `embedded`
5. 阶段 1 输出：
   - `SELECTED: image_id=... name=... size_dp=...`
   - `PRESENTATION: <value>（一句理由）`
   - `FILES: src/views/<Screen>.vue, src/assets/lanhu/<screen>/...`

## 阶段 2（审计 + 规格 + Vue + 资源）

前置：`selected_image_id` 已确定。

1. 调用 `lanhu_get_design_annotations(url, image_id)` 获取结构化标注（主路径）
2. 校验 `unit` 与关键字段（`layers/measurements`）
3. 调用 `lanhu_get_design_slices(url, image_id)` 获取切图与资源信息
4. 主路径生成规则：
   - 几何值按已归一的 CSS `px` 输出
   - 文本值按已归一的 `font-size` / `line-height` / `letter-spacing` 输出
   - 间距优先使用 measurements，缺项时回退几何关系
   - 圆角优先读取 `annotations.style.border_radius`
5. 若步骤 1~3 任一失败或缺关键字段，触发 `web_schema_fallback`
6. 输出 A) 审计区（必须完整）
7. 输出 B) 规格表（<=3 层组件树）
8. 输出 C) Vue SFC 文件内容（仅 SFC）
9. 输出 D) 资源清单（仅列表）

### B) 规格表字段（主路径）

- `component | tag | parent | strategy`
- `position(x,y) | size(w,h) | normalized_value`
- `font_size | line_height | letter_spacing`
- `text_padding(measurements) | icon_text_distance | nearest_neighbor`
- `width_strategy | height_strategy | safe_area | scroll_strategy | large_screen_strategy | keyboard_strategy`
- `border_radius_source | border_radius_output`
- `asset_format(webp/png/svg) | asset_output_dir(src/assets/lanhu/<screen>/) | asset`

### C) Vue SFC 文件内容约束

- 只允许输出 Vue SFC 文件内容
- 默认输出 `<template>`、`<script setup lang="ts">`、`<style scoped>`
- 需要根据页面风险显式体现版心控制、滚动容器、底部安全区、吸底操作区策略
- 资源引用使用：`import xxx from '@/assets/lanhu/<screen>/...'` 或等价相对路径
- 禁止输出未归一的 `*_raw`、schema 原值、XML/Android 属性名
- 禁止输出路由接入代码、状态管理接线、构建配置或验收说明

### D) 资源清单最少字段

- `asset_root=src/assets/lanhu/<screen>/`
- `asset_import_strategy=import|new URL(..., import.meta.url).href`
- `asset_format(webp/png/svg) | asset_output_dir(src/assets/lanhu/<screen>/) | asset`

### 兜底路径补充字段（仅 fallback）

- `scale_formula=411/750`
- `conversion_rule=round(px * 411 / 750)`
- `schema_version_id`
- `schema_source_url`

除 A/B/C/D 外不要输出任何内容。