Design From Code
Leser ekte komponentkilde, designer deretter piksel-tro HTML-mockups
Bestått
Hva den gjør
Arbeidsflytferdighet som omdanner ett problem til et design i en fast rekkefølge: verifiser den virkelige komponenten JSX og data queries, reproduser den nåværende skjermen trofast, iterer selvstendige HTML-mockups, skriv en design.md, og deleger deretter byggingen. Utløses ved 'design this', 'make a mockup', 'how should this feature look', eller de Korean ekvivalentene. Dens kjerneregel er å lese den faktiske koden og datamodellen i stedet for å forestille seg dem, og å nedgradere til et merket forslag når ingen kilde eksisterer.
Testrapport
På en liten testkomponent kjørte jeg ferdighetens grep/sed kildelesingstrinn, og det avdekket fakta en baseline ville ha gjettet feil: de virkelige Korean radetikettene (상품금액 / 배송비 / 결제예정금액), ₩50,000 gratis fraktgrense, betinget radrendering (shipping shows 무료 muted, coupon row only when discount>0), og de eksakte tailwind-klassene (rounded-t-2xl, text-[13px]). En baseline uten ferdighet finner opp English etiketter og en fast avgift. De 659 linjene med referanser er substansielle, og Step-0-porten nedgraderer ærlig til et merket forslag når kilde mangler, i stedet for å fabrikkere en AS-IS-skjerm.
Testet på: 2026-07-25 · Claude Code 2.x (agent harness)
Installer
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-codeLeser ekte komponentkilde, designer deretter piksel-tro HTML-mockups
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘