Code Format
Konverterer en Lanhu HTML-eksport til Vue eller React, der genbruger dine komponenter
Testet · Virker
Hvad det gør
Omdanner den rå HTML/CSS, en Lanhu designeksport producerer, til en side for din faktiske stack: den læser først README, docs/components.md, docs/dev-spec.md og docs/tech-spec.md, mapper designværdier til dine CSS-tokens, genbruger dokumenterede komponenter i stedet for rå elementer, og markerer alt, hvad specifikationerne ikke definerer, som TODO. Udløses, når du beder om at konvertere en Lanhu-eksport til projekt frontend-kode.
Testrapport
Konverterede den samme Lanhu-stil ordrelister-eksport til en Vue-side to gange mod et projekt med ægte komponent-, token- og API-dokumentation. Uden skill'en leverede siden 9 hardkodede hex-farver og 15 rå px-værdier, opfandt endpointet /api/orders/list, sendte :type til en StatusTag, hvis prop faktisk er :variant, hardkodede tre kinesiske statusstrenge og gengav et centbeløb med toFixed(2) — fem defekter, hver især en post i skill'ens egen failure-patterns.md. Ved at følge skill'en produceredes nul px-literaler, 22 design-token-referencer, den specificerede GET /v2/orders med dens keyword/status/page/pageSize parametre, den korrekte :variant prop, ORDER_STATUS_MAP opslaget og formatAmount, plus eksplicitte advarsler for de to farver, token-tabellen ikke dækker. Skill-body'en er kun kinesisk og forventer, at eksporten allerede ligger på .claude/lanhu-output/<page>/index.html, normalt placeret der af den søskende design-to-code skill via Lanhu MCP.
Testet: 2026-08-07 · Claude Code 2.x (agent harness)
Installation
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
Kommandoer og eksempelprompter
/code-formatKonverterer en Lanhu HTML-eksport til Vue eller React, der genbruger dine komponenter
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面