Design From Code
Odczytuje rzeczywisty kod komponentu, a następnie projektuje wierne pikselowo makiety HTML
Testowano · Działa
Co robi ten skill
Umiejętność przepływu pracy, która przekształca jeden problem w projekt w ustalonej kolejności: weryfikuje rzeczywisty komponent JSX i zapytania o dane, wiernie odtwarza bieżący ekran, iteruje samodzielne makiety HTML, pisze design.md, a następnie deleguje budowę. Uruchamia się na 'design this', 'make a mockup', 'how should this feature look' lub ich koreańskie odpowiedniki. Jej podstawową zasadą jest odczytywanie rzeczywistego kodu i modelu danych zamiast ich wyobrażania sobie, oraz obniżanie do oznaczonej propozycji, gdy nie istnieje żadne źródło.
Raport z testu
Na małym komponencie testowym uruchomiłem krok odczytu źródła grep/sed umiejętności i ujawnił fakty, które bazowa wersja odgadłaby błędnie: rzeczywiste koreańskie etykiety wierszy (상품금액 / 배송비 / 결제예정금액), próg darmowej wysyłki ₩50,000, warunkowe renderowanie wierszy (wysyłka pokazuje 무료 wyciszone, wiersz kuponu tylko gdy discount>0) i dokładne klasy tailwind (rounded-t-2xl, text-[13px]). Bazowa wersja bez umiejętności wymyśla angielskie etykiety i stałą opłatę. 659 linii referencji jest merytorycznych, a bramka Step-0 uczciwie obniża do oznaczonej propozycji, gdy brakuje źródła, zamiast fabrykować ekran AS-IS.
Testowano: 2026-07-25 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/design-from-codeOdczytuje rzeczywisty kod komponentu, a następnie projektuje wierne pikselowo makiety HTML
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘