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.

Search Keywords

Lanhu to Code, Lanhu design to code, Claude Code skills, Claude Code design to code, AI frontend code generator, Vue design to code, React design to code, Figma to code alternative, design token mapping, component reuse, 蓝湖转代码, 蓝湖设计稿生成前端代码, Claude Code 前端工作流.

Skills

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:

4. Use It

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

Paste a Lanhu page URL when prompted.

Recommended GitHub Topics

Add these topics in the GitHub repository sidebar:

claude-code
claude-code-skills
lanhu
lanhu-to-code
design-to-code
ai-coding
frontend
vue
react
design-tokens
component-reuse

Suggested GitHub description:

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

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.
• Add English and Chinese demo posts for launch.

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 会按“读取设计稿 -> 生成框架代码 -> 可选审查”的流程执行。

Launch Copy

Use this when posting to V2EX, Juejin, X, Reddit, or Claude Code communities:

I built a Claude Code skill that turns Lanhu design links into Vue/React frontend code.

It reads Lanhu through MCP, reuses existing project components, maps raw design values to design tokens, marks uncertain APIs/enums as TODO, and can run a review pass after generation.

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

Chinese version:

我做了一个 Claude Code Skill：粘贴蓝湖链接，自动生成前端页面代码。

它会通过蓝湖 MCP 读取设计稿，优先复用项目已有组件，把颜色和间距映射成项目 design token，不确定的 API / 枚举 / 业务逻辑会标 TODO，生成后还能接 code review。

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

Feedback

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

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