Code Format
Converte un export HTML di Lanhu in Vue o React che riutilizza i tuoi componenti
Promosso
Cosa fa
Trasforma l'HTML/CSS raw prodotto da un export di design Lanhu in una pagina per il tuo stack attuale: legge prima README, docs/components.md, docs/dev-spec.md e docs/tech-spec.md, mappa i valori di design sui tuoi token CSS, riutilizza i componenti documentati invece degli elementi raw, e contrassegna come TODO qualsiasi cosa le specifiche non definiscano. Si attiva quando chiedi di convertire un export Lanhu in codice frontend di progetto.
Rapporto di test
Ho convertito lo stesso export di lista ordini in stile Lanhu in una pagina Vue due volte contro un progetto con documentazione reale di componenti, token e API. Senza la skill la pagina spediva 9 colori esadecimali hardcoded e 15 valori px raw, inventava l'endpoint /api/orders/list, passava :type a un StatusTag la cui prop è in realtà :variant, hardcodava tre stringhe di stato cinesi e rendeva un importo in centesimi con toFixed(2) — cinque difetti, ognuno una voce nel failure-patterns.md della skill. Seguendo la skill ha prodotto zero letterali px, 22 riferimenti a token di design, il GET /v2/orders specificato con i suoi parametri keyword/status/page/pageSize, la prop :variant corretta, la ricerca ORDER_STATUS_MAP e formatAmount, più avvisi espliciti per i due colori che la tabella dei token non copre. Il corpo della skill è solo in cinese e si aspetta che l'export sia già in .claude/lanhu-output/<page>/index.html, normalmente posizionato lì dalla skill gemella design-to-code tramite il Lanhu MCP.
Testato il: 2026-08-07 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/code-formatConverte un export HTML di Lanhu in Vue o React che riutilizza i tuoi componenti
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面