Design From Code
Čte skutečný zdroj komponenty, poté navrhuje pixelově věrné HTML mockupy
Otestováno · Funguje
Co umí
Dovednost workflow, která přemění jeden problém na design v pevném pořadí: ověří skutečný JSX komponenty a datové dotazy, věrně reprodukuje aktuální obrazovku, iteruje samostatné HTML mockupy, napíše design.md a poté deleguje sestavení. Spouští se na 'design this', 'make a mockup', 'how should this feature look' nebo korejské ekvivalenty. Jejím hlavním pravidlem je číst skutečný kód a datový model namísto jejich představování a snížit se na označený návrh, pokud neexistuje žádný zdroj.
Testovací report
Na malé testovací komponentě jsem spustil krok čtení zdrojového kódu grep/sed dovednosti a odhalil fakta, která by baseline uhádl špatně: skutečné korejské popisky řádků (상품금액 / 배송비 / 결제예정금액), práh dopravy zdarma ₩50,000, podmíněné vykreslování řádků (doprava ukazuje 무료 ztlumené, řádek kupónu pouze když discount>0) a přesné tailwind třídy (rounded-t-2xl, text-[13px]). Baseline bez dovednosti vymýšlí anglické popisky a paušální poplatek. 659 řádků referencí je podstatných a brána Step-0 se upřímně sníží na označený návrh, když zdroj chybí, namísto vytváření AS-IS obrazovky.
Testováno: 2026-07-25 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/design-from-codeČte skutečný zdroj komponenty, poté navrhuje pixelově věrné HTML mockupy
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘