Design From Code
Leest echte componentbroncode, ontwerpt vervolgens pixel-getrouwe HTML mockups
Getest · Werkt
Wat het doet
Workflow skill die een probleem omzet in een ontwerp in een vaste volgorde: verifieer de echte component JSX en data queries, reproduceer het huidige scherm getrouw, itereer zelfstandige HTML mockups, schrijf een design.md, en delegeer vervolgens de build. Activeert op 'design this', 'make a mockup', 'how should this feature look', of de Koreaanse equivalenten. De kernregel is om de daadwerkelijke code en het datamodel te lezen in plaats van ze te verzinnen, en om af te schalen naar een gelabeld voorstel wanneer er geen bron bestaat.
Testrapport
Op een kleine testcomponent voerde ik de grep/sed bron-leesstap van de skill uit en het bracht feiten aan het licht die een baseline verkeerd zou hebben geraden: de echte Koreaanse rijlabels (상품금액 / 배송비 / 결제예정금액), de ₩50,000 drempel voor gratis verzending, voorwaardelijke rijweergave (verzending toont 무료 gedempt, couponrij alleen wanneer discount>0), en de exacte tailwind klassen (rounded-t-2xl, text-[13px]). Een no-skill baseline verzint Engelse labels en een vast bedrag. De 659 regels referenties zijn inhoudelijk en de Step-0 gate degradeert eerlijk naar een gelabeld voorstel wanneer de bron ontbreekt in plaats van een AS-IS scherm te fabriceren.
Getest op: 2026-07-25 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/design-from-codeLeest echte componentbroncode, ontwerpt vervolgens pixel-getrouwe HTML mockups
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘