Code Format
Converts a Lanhu HTML export into Vue or React that reuses your components
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Aug 7, 2026
- Environment
- Claude Code 2.x (agent harness)
Converted the same Lanhu-style order-list export into a Vue page twice against a project with real component, token and API docs. Without the skill the page shipped 9 hardcoded hex colors and 15 raw px values, invented the endpoint /api/orders/list, passed :type to a StatusTag whose prop is actually :variant, hardcoded three Chinese status strings and rendered a cents amount with toFixed(2) — five defects, each one an entry in the skill's own failure-patterns.md. Following the skill produced zero px literals, 22 design-token references, the spec'd GET /v2/orders with its keyword/status/page/pageSize params, the correct :variant prop, the ORDER_STATUS_MAP lookup and formatAmount, plus explicit warnings for the two colors the token table does not cover. The skill body is Chinese-only and expects the export to already sit at .claude/lanhu-output/<page>/index.html, normally placed there by the sibling design-to-code skill via the Lanhu MCP.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 4/5
What Code Format does
Turns the raw HTML/CSS a Lanhu design export produces into a page for your actual stack: it reads README, docs/components.md, docs/dev-spec.md and docs/tech-spec.md first, maps design values onto your CSS tokens, reuses documented components instead of raw elements, and marks anything the specs do not define as TODO. Triggers when you ask to convert a Lanhu export into project frontend code.
How to install Code Format
git clone https://github.com/ursazoo/lanhu-to-code.git
mkdir -p ~/.claude/skills
cd lanhu-to-code && cp -r skills/code-format ~/.claude/skills/code-format
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Code Format
-
/code-formatConverts a Lanhu HTML export into Vue or React that reuses your components
It also activates on plain-language prompts like these:
-
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码 -
先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件 -
这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面
Frequently asked questions
- Is the Code Format skill free?
- Yes. The skill itself is free from ursazoo/lanhu-to-code. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Code Format work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Aug 7, 2026. Verdict: Tested · Works. Converted the same Lanhu-style order-list export into a Vue page twice against a project with real component, token and API docs. Without the skill the page shipped 9 hardcoded hex colors and 15 raw px values, invented the endpoint /api/orders/list, passed :type to a StatusTag whose prop is actually :variant, hardcoded three Chinese status strings and rendered a cents amount with toFixed(2) — five defects, each one an entry in the skill's own failure-patterns.md. Following the skill produced zero px literals, 22 design-token references, the spec'd GET /v2/orders with its keyword/status/page/pageSize params, the correct :variant prop, the ORDER_STATUS_MAP lookup and formatAmount, plus explicit warnings for the two colors the token table does not cover. The skill body is Chinese-only and expects the export to already sit at .claude/lanhu-output/<page>/index.html, normally placed there by the sibling design-to-code skill via the Lanhu MCP.
- What is the Code Format SkillProof Score?
- 9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 4/5.
- How do I install Code Format?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Code Format with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.