원클릭으로
code-gen
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.
Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation.
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.
| name | code-gen |
| description | Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code. |
| model | sonnet |
| user-invocable | false |
| context | fork |
| agent | general-purpose |
| allowed-tools | mcp__lanhu__*, Read, Write, Bash |
职责: 从蓝湖 MCP 获取设计稿数据,保存到固定路径,供 code-format 消费。
不做: 转换框架代码、分析业务逻辑、引入项目上下文。
判断 URL 是否指向具体页面
&id= 或 &did= 参数 → 有具体页面,直接取 design_idpid=(项目级)或只提供了名称 → 调用 lanhu_get_designs 获取设计图列表,展示给用户选择,等用户确认后才继续展示格式:
该项目共有 N 个设计图,请选择要转换的页面:
1. 页面名称A
2. 页面名称B
3. 页面名称C
...
请输入序号:
用确认的 design_id 调用 lanhu_get_ai_analyze_design_result,等待 status=completed(异步,需轮询)
调用 lanhu_get_design_slices,下载切图到 assets/
保存产物到 .claude/lanhu-output/<页面名称>/
返回路径摘要给调用方
.claude/lanhu-output/<页面名称>/
├── index.html
├── style.css (如有)
└── assets/
返回格式:
路径:.claude/lanhu-output/<页面名称>/
切图:N 个
主要元素:<3-5 行简述顶层结构>
lanhu_get_ai_analyze_design_result 是异步的,必须等 status=completed 再读lanhu_get_designs 返回值中取lanhu_get_pages 是 Axure 原型页面接口,不是设计稿,不要混用