Code Format

Konwertuje eksport HTML z Lanhu do Vue lub React, który ponownie wykorzystuje Twoje komponenty

Autor: ursazoo · ursazoo/lanhu-to-code

Testowano · Działa ★ 9.2/10

Code Format — Konwertuje eksport HTML z Lanhu do Vue lub React, który ponownie wykorzystuje Twoje komponenty

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页面