Code Format
Converteert een Lanhu HTML export naar Vue of React die uw componenten hergebruikt
Getest · Werkt
Wat het doet
Zet de ruwe HTML/CSS die een Lanhu design export produceert om in een pagina voor uw daadwerkelijke stack: het leest eerst README, docs/components.md, docs/dev-spec.md en docs/tech-spec.md, mapt designwaarden naar uw CSS tokens, hergebruikt gedocumenteerde componenten in plaats van ruwe elementen, en markeert alles wat de specs niet definiëren als TODO. Activeert wanneer u vraagt om een Lanhu export om te zetten in project frontend code.
Testrapport
Dezelfde Lanhu-stijl order-list export twee keer geconverteerd naar een Vue-pagina tegen een project met echte component-, token- en API-documentatie. Zonder de skill leverde de pagina 9 hardgecodeerde hex-kleuren en 15 ruwe px-waarden, verzon het endpoint /api/orders/list, gaf :type door aan een StatusTag waarvan de prop eigenlijk :variant is, hardcodeerde drie Chinese statusstrings en renderde een centbedrag met toFixed(2) — vijf defecten, elk een vermelding in de eigen failure-patterns.md van de skill. Het volgen van de skill produceerde nul px-literalen, 22 design-token referenties, de gespecificeerde GET /v2/orders met zijn keyword/status/page/pageSize params, de correcte :variant prop, de ORDER_STATUS_MAP lookup en formatAmount, plus expliciete waarschuwingen voor de twee kleuren die de token-tabel niet dekt. De skill body is alleen Chinees en verwacht dat de export al op .claude/lanhu-output/<page>/index.html staat, normaal gesproken daar geplaatst door de sibling design-to-code skill via de Lanhu MCP.
Getest op: 2026-08-07 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/code-formatConverteert een Lanhu HTML export naar Vue of React die uw componenten hergebruikt
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面