Design From Code
Læser ægte komponentkilde, designer derefter pixeltro HTML-mockups
Testet · Virker
Hvad det gør
Workflow-skill, der omdanner et problem til et design i en fast rækkefølge: verificer den ægte komponent JSX og data queries, reproducer den aktuelle skærm trofast, iterer selvstændige HTML-mockups, skriv en design.md, og deleger derefter build'et. Udløses ved 'design this', 'make a mockup', 'how should this feature look' eller de Korean ækvivalenter. Dens kerneregel er at læse den faktiske kode og datamodel i stedet for at forestille sig dem, og at nedgradere til et mærket forslag, når ingen kilde eksisterer.
Testrapport
På en lille testkomponent kørte jeg skill'ens grep/sed kildelæsnings-trin, og det afdækkede fakta, som en baseline ville have gættet forkert: de ægte Korean rækkelabels (상품금액 / 배송비 / 결제예정금액), ₩50,000 gratis forsendelsesgrænsen, betinget række-rendering (shipping shows 무료 muted, coupon row only when discount>0) og de præcise tailwind-klasser (rounded-t-2xl, text-[13px]). En baseline uden skill opfinder English labels og et fladt gebyr. De 659 linjer med referencer er substantielle, og Step-0-porten nedgraderer ærligt til et mærket forslag, når kilden mangler, snarere end at fabrikere en AS-IS-skærm.
Testet: 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
Kommandoer og eksempelprompter
/design-from-codeLæser ægte komponentkilde, designer derefter pixeltro HTML-mockups
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘