lanhu-to-code

Lanhu to Code for Claude Code: AI design-to-code skills that turn Lanhu design links into Vue / React frontend code with component reuse, design token mapping, and optional code review.

中文说明 · Quickstart · Issues

Why This Exists

Frontend teams using Lanhu often lose time on repetitive design-to-code work:

• copying layout, spacing, colors, and images from Lanhu
• rebuilding components that already exist in the project
• converting raw design values into project design tokens
• guessing API names, enum values, and business logic
• reviewing AI-generated code for style drift and missing TODOs

lanhu-to-code packages that workflow into Claude Code skills. Paste a Lanhu page URL, and Claude Code follows a structured pipeline instead of improvising.

What It Does

Give Claude Code a Lanhu page URL and it will:

1. Read the design through Lanhu MCP.
2. Inspect your frontend project conventions from README.md, CLAUDE.md, and docs/.
3. Reuse existing components from docs/components.md before creating new ones.
4. Generate framework code for Vue, React, or the stack described by your project.
5. Convert raw design values to project design tokens instead of hard-coding colors and spacing.
6. Mark uncertain API paths, enums, and business logic as TODO.
7. Ask whether to run a code review pass after generation.

It does not guess backend contracts, silently invent enum values, or hide uncertain logic.

Demo Output

Input:
https://lanhuapp.com/web/#/item/project/stage?pid=xxx&id=yyy

Output:
src/views/order/index.vue

Reused components:
- SearchInput
- StatusTag
- OrderCard

New components:
- DateRangePicker

TODO:
- Confirm GET /api/orders pagination params.
- Confirm order status enum because docs/tech-spec.md does not define it.

A 60-second demo GIF works extremely well for this kind of project. Recommended path: add assets/demo.gif and place it here.

Skills

Skill	Trigger	Purpose
design-to-code	/design-to-code	Main workflow. Runs prerequisite checks, design extraction, code generation, and optional review.
code-gen	Called by design-to-code	Reads Lanhu HTML/CSS/assets through Lanhu MCP in an isolated subagent context.
code-format	Called by design-to-code	Converts Lanhu output into project framework code with token and component mapping.
component-doc-gen	/component-doc-gen or CI	Scans src/ and generates docs/components.md so Claude Code can reuse existing components.

Quick Start

1. Install Lanhu MCP

git clone https://github.com/dsphper/lanhu-mcp ~/.claude/mcp-servers/lanhu-mcp
cd ~/.claude/mcp-servers/lanhu-mcp
bash easy-install.sh

Register it in Claude Code:

claude mcp add lanhu --transport http http://localhost:8000/mcp -s user

Verify:

curl http://localhost:8000/mcp

After restarting your computer, start the MCP service again:

bash ~/.claude/mcp-servers/lanhu-mcp/start.sh &

2. Install These Skills

git clone https://github.com/ursazoo/lanhu-to-code ~/lanhu-to-code
bash ~/lanhu-to-code/install.sh

Verify:

ls ~/.claude/skills/

You should see design-to-code, code-gen, code-format, and component-doc-gen.

3. Configure Your Frontend Project

Run these commands in your frontend project root:

cp ~/.claude/skills/design-to-code/templates/project-CLAUDE.md ./CLAUDE.md

mkdir -p .claude
cp ~/.claude/skills/design-to-code/templates/project-dot-claude-settings.json .claude/settings.json

Prepare project docs:

File	Purpose
docs/components.md	Reusable components, props, and examples. Can be generated by component-doc-gen.
docs/tech-spec.md	API paths, enums, permissions, and interaction rules.
docs/dev-spec.md	File structure, naming rules, CSS tokens, spacing, and styling conventions.

4. Use It

cd your-frontend-project
claude
/design-to-code

Paste a Lanhu page URL when prompted.

Roadmap

• Add assets/demo.gif with a 60-second Lanhu-to-code workflow.
• Add a real Vue example generated from a Lanhu page.
• Add a real React example generated from a Lanhu page.
• Add Claude Code plugin marketplace installation support.
• Add Figma adapter notes for teams that use both Figma and Lanhu.

Architecture

/design-to-code
    |
    +-- Prerequisite checks
    |   +-- README.md / CLAUDE.md / package.json
    |   +-- docs/tech-spec.md
    |   +-- docs/components.md
    |   +-- docs/dev-spec.md
    |
    +-- Stage 1: code-gen
    |   +-- Lanhu MCP -> HTML, CSS, assets
    |   +-- Save to .claude/lanhu-output/<page-name>/
    |   +-- Return path and element summary
    |
    +-- Stage 2: code-format
    |   +-- Read project docs
    |   +-- Map raw CSS values to design tokens
    |   +-- Map design elements to existing components
    |   +-- Generate framework code
    |
    +-- Stage 3: optional review
        +-- Run code-review-expert after user confirmation

code-gen runs in an isolated context because Lanhu HTML can be large. The main conversation receives only the output path and a compact summary, leaving more context for project docs and code generation decisions.

Common Failure Modes

Hard-coded design values

Lanhu may return #7c3aed, but your project might use var(--color-primary). Keep docs/dev-spec.md updated with token mappings.

Missing component reuse

If docs/components.md is missing or stale, Claude Code cannot reliably know which components already exist. Run:

claude -p "run component-doc-gen skill"

Static views without business logic

If docs/tech-spec.md does not define APIs, enums, permissions, or state transitions, generated code will mark them as TODO instead of guessing.

中文说明

lanhu-to-code 是一组面向 Claude Code 的前端工作流 skills，用来把蓝湖设计稿链接转换成项目内可落地的 Vue / React / 其他前端代码。

它的重点不是“把截图变成一堆 HTML”，而是让 Claude Code 按团队工程规范工作：

• 通过蓝湖 MCP 读取设计稿结构、样式和切图。
• 优先复用项目已有组件，减少重复造轮子。
• 把蓝湖里的颜色、间距等原始值映射成项目 design token。
• 根据 docs/tech-spec.md 识别 API、枚举和交互逻辑。
• 对不确定内容明确标记 TODO，不偷偷编造。
• 生成后可选择进入 code review。

中文快速使用

git clone https://github.com/ursazoo/lanhu-to-code ~/lanhu-to-code
bash ~/lanhu-to-code/install.sh

cd your-frontend-project
claude
/design-to-code

粘贴蓝湖页面 URL 后，Claude Code 会按“读取设计稿 -> 生成框架代码 -> 可选审查”的流程执行。

Feedback

Found a bug or have a workflow idea? Open an issue:

https://github.com/ursazoo/lanhu-to-code/issues