Code Format
Konwertuje eksport HTML z Lanhu do Vue lub React, który ponownie wykorzystuje Twoje komponenty
Testowano · Działa
Co robi ten skill
Przekształca surowy HTML/CSS wygenerowany przez eksport projektu Lanhu w stronę dla Twojego rzeczywistego stosu: najpierw odczytuje README, docs/components.md, docs/dev-spec.md i docs/tech-spec.md, mapuje wartości projektowe na Twoje tokeny CSS, ponownie wykorzystuje udokumentowane komponenty zamiast surowych elementów i oznacza wszystko, czego specyfikacje nie definiują, jako TODO. Uruchamia się, gdy poprosisz o konwersję eksportu Lanhu na kod frontendowy projektu.
Raport z testu
Skonwertowano ten sam eksport listy zamówień w stylu Lanhu na stronę Vue dwukrotnie w projekcie z prawdziwymi komponentami, tokenami i dokumentacją API. Bez umiejętności strona zawierała 9 zakodowanych na stałe kolorów szesnastkowych i 15 surowych wartości px, wymyśliła endpoint /api/orders/list, przekazała :type do StatusTag, którego prop to faktycznie :variant, zakodowała na stałe trzy chińskie ciągi statusu i wyrenderowała kwotę w centach z toFixed(2) — pięć defektów, każdy z nich to wpis w własnym failure-patterns.md umiejętności. Zgodnie z umiejętnością wygenerowano zero literałów px, 22 odniesienia do tokenów projektowych, specyfikowany GET /v2/orders z jego parametrami keyword/status/page/pageSize, poprawny prop :variant, wyszukiwanie ORDER_STATUS_MAP i formatAmount, plus wyraźne ostrzeżenia dla dwóch kolorów, których tabela tokenów nie obejmuje. Treść umiejętności jest tylko w języku chińskim i oczekuje, że eksport już znajduje się w .claude/lanhu-output/<page>/index.html, normalnie umieszczany tam przez pokrewną umiejętność design-to-code za pośrednictwem Lanhu MCP.
Testowano: 2026-08-07 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/code-formatKonwertuje eksport HTML z Lanhu do Vue lub React, który ponownie wykorzystuje Twoje komponenty
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码先读一下docs里的组件文档和设计规范,再把这份蓝湖导出的页面转成React组件这是蓝湖的HTML导出文件,帮我映射成我们项目的设计token,并转换成对应的Vue页面