# Code Gen

> Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.

- Skill: `majiayu000/code-gen` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/code-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/code-gen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/code-gen

---


# code-gen

**职责：** 从蓝湖 MCP 获取设计稿数据，保存到固定路径，供 code-format 消费。

**不做：** 转换框架代码、分析业务逻辑、引入项目上下文。

## 执行步骤

1. **判断 URL 是否指向具体页面**
   - URL 含 `&id=` 或 `&did=` 参数 → 有具体页面，直接取 design_id
   - URL 只有 `pid=`（项目级）或只提供了名称 → 调用 `lanhu_get_designs` 获取设计图列表，**展示给用户选择**，等用户确认后才继续

   展示格式：
   ```
   该项目共有 N 个设计图，请选择要转换的页面：
   1. 页面名称A
   2. 页面名称B
   3. 页面名称C
   ...
   请输入序号：
   ```

2. 用确认的 design_id 调用 `lanhu_get_ai_analyze_design_result`，等待 status=completed（异步，需轮询）

3. 调用 `lanhu_get_design_slices`，下载切图到 `assets/`

4. 保存产物到 `.claude/lanhu-output/<页面名称>/`

5. 返回路径摘要给调用方

## 输出约定

```
.claude/lanhu-output/<页面名称>/
├── index.html
├── style.css       （如有）
└── assets/
```

返回格式：
```
路径：.claude/lanhu-output/<页面名称>/
切图：N 个
主要元素：<3-5 行简述顶层结构>
```

## 关键陷阱

- `lanhu_get_ai_analyze_design_result` 是异步的，必须等 status=completed 再读
- design_id 不能猜，必须从 `lanhu_get_designs` 返回值中取
- 项目级 URL（只有 pid）**不能自动选第一个**，必须展示列表让用户选
- `lanhu_get_pages` 是 Axure 原型页面接口，不是设计稿，不要混用