Design From Code
Läser verklig komponentkälla och designar sedan pixeltrogna HTML-mockups
Testad · Fungerar
Vad den gör
Arbetsflödesfärdighet som omvandlar ett problem till en design i en fast ordning: verifiera den verkliga komponenten JSX och datafrågor, återge den aktuella skärmen troget, iterera fristående HTML-mockups, skriv en design.md och delegera sedan byggnationen. Utlöses vid 'design this', 'make a mockup', 'how should this feature look' eller de koreanska motsvarigheterna. Dess kärnregel är att läsa den faktiska koden och datamodellen istället för att föreställa sig dem, och att nedgradera till ett märkt förslag när ingen källa finns.
Testrapport
På en liten testkomponent körde jag färdighetens grep/sed-källläsningssteg och det avslöjade fakta som en baslinje skulle ha gissat fel: de verkliga koreanska radetiketterna (상품금액 / 배송비 / 결제예정금액), tröskeln för fri frakt på ₩50 000, villkorlig radrendering (frakt visar 무료 dämpad, kupongrad endast när rabatt>0) och de exakta tailwind-klasserna (rounded-t-2xl, text-[13px]). En baslinje utan färdighet uppfinner engelska etiketter och en fast avgift. De 659 raderna med referenser är substantiella och Step-0-grinden nedgraderar ärligt till ett märkt förslag när källan saknas snarare än att fabricera en AS-IS-skärm.
Testad: 2026-07-25 · Claude Code 2.x (agent harness)
Installation
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
Kommandon och exempelprompter
/design-from-codeLäser verklig komponentkälla och designar sedan pixeltrogna HTML-mockups
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘