Code Format
Convertit un export HTML Lanhu en Vue ou React qui réutilise vos composants
Testé · Fonctionne
Ce que fait
Transforme le HTML/CSS brut produit par un export de design Lanhu en une page pour votre stack actuelle : il lit d'abord README, docs/components.md, docs/dev-spec.md et docs/tech-spec.md, mappe les valeurs de design sur vos tokens CSS, réutilise les composants documentés au lieu des éléments bruts, et marque tout ce que les spécifications ne définissent pas comme TODO. Se déclenche lorsque vous demandez de convertir un export Lanhu en code frontend de projet.
Rapport de test
J'ai converti le même export de liste de commandes de style Lanhu en une page Vue deux fois contre un projet avec de vrais composants, tokens et docs API. Sans la compétence, la page contenait 9 couleurs hexadécimales codées en dur et 15 valeurs px brutes, a inventé le endpoint /api/orders/list, a passé :type à un StatusTag dont la prop est en fait :variant, a codé en dur trois chaînes de statut chinoises et a rendu un montant en cents avec toFixed(2) — cinq défauts, chacun étant une entrée dans le failure-patterns.md de la compétence. Suivre la compétence a produit zéro littéraux px, 22 références de tokens de design, le GET /v2/orders spécifié avec ses paramètres keyword/status/page/pageSize, la prop :variant correcte, la recherche ORDER_STATUS_MAP et formatAmount, plus des avertissements explicites pour les deux couleurs que la table de tokens ne couvre pas. Le corps de la compétence est uniquement en chinois et s'attend à ce que l'exportation se trouve déjà à .claude/lanhu-output/<page>/index.html, normalement placé là par la compétence sœur design-to-code via le Lanhu MCP.
Testé le: 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
Commandes et exemples de prompts
/code-formatConvertit un export HTML Lanhu en Vue ou React qui réutilise vos composants
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面