Code Format
Konvertiert einen Lanhu HTML-Export in Vue oder React, das Ihre Komponenten wiederverwendet.
Getestet · Funktioniert
Was es kann
Wandelt den rohen HTML/CSS-Code, den ein Lanhu-Design-Export erzeugt, in eine Seite für Ihren tatsächlichen Stack um: Es liest zuerst README, docs/components.md, docs/dev-spec.md und docs/tech-spec.md, ordnet Designwerte Ihren CSS-Tokens zu, verwendet dokumentierte Komponenten anstelle von Rohelementen wieder und markiert alles, was die Spezifikationen nicht definieren, als TODO. Wird ausgelöst, wenn Sie darum bitten, einen Lanhu-Export in Projekt-Frontend-Code zu konvertieren.
Testbericht
Ich habe denselben Lanhu-Stil-Bestelllisten-Export zweimal in eine Vue-Seite konvertiert, gegen ein Projekt mit echten Komponenten-, Token- und API-Dokumenten. Ohne den Skill lieferte die Seite 9 fest codierte Hex-Farben und 15 rohe px-Werte, erfand den Endpunkt /api/orders/list, übergab :type an ein StatusTag, dessen Prop tatsächlich :variant ist, fest codierte drei chinesische Status-Strings und rendert einen Cent-Betrag mit toFixed(2) — fünf Fehler, jeder ein Eintrag in der eigenen failure-patterns.md des Skills. Das Befolgen des Skills erzeugte null px-Literale, 22 Design-Token-Referenzen, das spezifizierte GET /v2/orders mit seinen keyword/status/page/pageSize-Parametern, die korrekte :variant-Prop, den ORDER_STATUS_MAP-Lookup und formatAmount, plus explizite Warnungen für die beiden Farben, die die Token-Tabelle nicht abdeckt. Der Skill-Body ist nur auf Chinesisch und erwartet, dass der Export bereits unter .claude/lanhu-output/<page>/index.html liegt, normalerweise dort platziert durch den Geschwister-Design-to-Code-Skill über den Lanhu MCP.
Getestet am: 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
Befehle & Beispiel-Prompts
/code-formatKonvertiert einen Lanhu HTML-Export in Vue oder React, das Ihre Komponenten wiederverwendet.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面