| name | design-to-code |
| description | Lanhu to Code workflow for Claude Code. Convert Lanhu design URLs into Vue/React frontend code with component reuse, design token mapping, TODO-safe business logic, and optional code review. |
design-to-code
三阶段工作流：code-gen → code-format → code-review
入参收集（开始前必须确认）
第一步：蓝湖页面信息
未提供时必须先问：
请提供要转换的蓝湖页面地址（URL）或页面名称，例如：
- https://lanhuapp.com/web/#/item/project/stage?pid=xxx&id=yyy（指定页面）
- https://lanhuapp.com/web/#/item/project/stage?pid=xxx（项目级，需从列表中选页面）
- 或直接告诉我页面名称，我来查
不能假设或猜测页面，必须等用户明确给出后再继续。
第二步：判断意图（新建 vs 改造）
运行前置检查后，根据 TECH_SPEC 是否存在：
| 情况 | 操作 |
|---|
| 有 tech-spec | 在 tech-spec 中查找设计页面名对应的已有路由/文件 |
| → 找到匹配 | 自动判定"改造旧页面"，记录现有文件路径 |
| → 未找到匹配 | 自动判定"新建页面" |
| 无 tech-spec（NEEDS_DECISION） | 向用户询问（见下方话术） |
无 tech-spec 时的询问话术：
docs/tech-spec.md 不存在，无法自动判断这是新页面还是改造。
请告诉我：
1. 新建页面（根据设计稿生成新文件）
2. 改造现有页面（请同时告诉我现有文件路径，如 src/pages/home/index.vue）
前置检查
运行 scripts/check-prerequisites.sh <项目根目录>，按 exit code 处理：
| exit | STATUS | 行为 |
|---|
| 1 | BLOCKED | 告知原因，停止 |
| 2 | NEEDS_DECISION | 显示缺失文档列表，按对应话术询问用户后继续 |
| 0 | OK | 读取 CONTEXT_FILES，进入意图判断，然后阶段 1 |
脚本 stdout 包含 CONTEXT_FILES 块：
CONTEXT_FILES:
TECH_STACK=CLAUDE.md
COMPONENT_DOC=docs/开发规范与组件文档.md
DEV_SPEC=docs/开发规范与组件文档.md
TECH_SPEC=docs/tech-spec.md
将这些路径 + 意图（新建/改造+文件路径）一并传给 code-format。
component-doc 缺失时的询问话术：
docs/ 中没有找到组件文档，有三个选项：
1. 立即运行 component-doc-gen 生成初稿，审阅后再继续（推荐）
2. 以降级模式继续（扫描 src/ 推断可用组件，生成后请重点 review 组件使用部分）
3. 取消
阶段 1：code-gen
使用 Skill 工具调用 /code-gen，传入蓝湖页面 URL 作为参数。
code-gen 以隔离的 subagent 运行（context: fork），完成后返回路径 + 元素摘要，不会污染主会话上下文。
URL 无具体页面 ID 时（如只有 pid 没有 id）：code-gen 会展示该项目的所有设计图列表，等用户选择后才继续，不自动选第一个。
阶段 2：code-format
⚠️ 强制检查点：CSS 值对照表（必须执行）
在写任何样式代码之前，必须先完成以下步骤：
- 读取蓝湖产物中的 HTML+CSS 代码
- 提取所有 CSS 属性值（渐变、颜色、间距、字体、圆角等）
- 输出 CSS 值对照表，格式如下：
## CSS 值对照表
| 选择器 | 属性 | 设计稿值 | 代码值 |
|--------|------|----------|--------|
| .income-stats-card | background | linear-gradient(135deg, #FFF5F0 0%, #FFFFFF 100%) | (待填写) |
| .debt-item | border-radius | 24rpx | (待填写) |
| ... | ... | ... | ... |
- 填写"代码值"列时，必须与"设计稿值"完全一致
- 对照表输出后，等待确认再继续
禁止事项
- 禁止简化渐变为纯色
- 禁止自作主张添加条件判断（如 v-if 权限控制）
- 禁止"改进"设计稿的值
- 禁止跳过对照表直接写代码
只有输出完整的对照表后，才能开始写代码。
传递给 code-format 的信息
将以下信息传给 code-format：
- CONTEXT_FILES（技术栈、组件文档、规范文档路径）
- 蓝湖产物路径（
.claude/lanhu-output/<页面名称>/）
- 意图：
新建 或 改造:src/pages/xxx/index.vue
阶段 3：code-review（可选）
阶段 2 完成后询问用户是否 code review，确认后调用 /code-review-expert。
进度反馈
[前置检查] 通过 / 需要决策...
[意图判断] 新建页面 / 改造 src/pages/xxx/index.vue
阶段 1/3：正在从蓝湖获取设计稿数据...
✓ 阶段 1 完成 → 阶段 2/3：正在生成框架代码...
✓ 阶段 2 完成 → 是否进行 code review？(y/n)
完整失败模式见 → workflow-guide.md#失败模式
