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: