Design From Code
Legge il codice sorgente reale dei componenti, quindi progetta mockup HTML fedeli al pixel
Promosso
Cosa fa
Skill di workflow che trasforma un problema in un design in un ordine fisso: verifica il JSX del componente reale e le query dei dati, riproduce fedelmente la schermata corrente, itera mockup HTML autocontenuti, scrive un design.md, quindi delega la build. Si attiva su 'design this', 'make a mockup', 'how should this feature look' o gli equivalenti Korean. La sua regola fondamentale è leggere il codice e il modello di dati effettivi invece di immaginarli, e declassare a una proposta etichettata quando non esiste una fonte.
Rapporto di test
Su un piccolo componente di test ho eseguito il passaggio di lettura del codice sorgente grep/sed della skill e ha rivelato fatti che una baseline avrebbe sbagliato: le vere etichette delle righe Korean (상품금액 / 배송비 / 결제예정금액), la soglia di spedizione gratuita di ₩50,000, il rendering condizionale delle righe (la spedizione mostra 무료 muted, la riga del coupon solo quando discount>0) e le classi tailwind esatte (rounded-t-2xl, text-[13px]). Una baseline senza skill inventa etichette inglesi e una tariffa fissa. Le 659 righe di riferimenti sono sostanziali e il gate Step-0 degrada onestamente a una proposta etichettata quando la fonte è mancante piuttosto che fabbricare una schermata AS-IS.
Testato il: 2026-07-25 · Claude Code 2.x (agent harness)
Installazione
git clone --depth 1 https://github.com/nlook-service/design-from-code.git mkdir -p ~/.claude/skills cd design-from-code && cp -r skills/design-from-code ~/.claude/skills/design-from-code
Comandi e prompt di esempio
/design-from-codeLegge il codice sorgente reale dei componenti, quindi progetta mockup HTML fedeli al pixel
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘