SkillProof tested Claude skills

Design From Code

Liest echten Komponenten-Quellcode und entwirft dann pixelgetreue HTML-Mockups

von nlook-service · nlook-service/design-from-code

Getestet · Funktioniert ★ 8.8/10

Design From Code — Liest echten Komponenten-Quellcode und entwirft dann pixelgetreue HTML-Mockups

Was es kann

Workflow-Skill, der ein Problem in einer festen Reihenfolge in ein Design umwandelt: Überprüfung des echten Komponenten-JSX und der Datenabfragen, getreue Reproduktion des aktuellen Bildschirms, Iteration eigenständiger HTML-Mockups, Schreiben einer design.md und anschließende Delegierung des Builds. Wird ausgelöst bei 'design this', 'make a mockup', 'how should this feature look' oder den Korean equivalents. Die Kernregel ist, den tatsächlichen Code und das Datenmodell zu lesen, anstatt sie sich vorzustellen, und auf einen benannten Vorschlag herabzustufen, wenn keine Quelle existiert.

Testbericht

Bei einer kleinen Testkomponente führte ich den grep/sed-Quellcode-Leseschritt des Skills aus und es wurden Fakten aufgedeckt, die eine Baseline falsch geraten hätte: die echten koreanischen Zeilenbeschriftungen (상품금액 / 배송비 / 결제예정금액), die ₩50,000-Schwelle für kostenlosen Versand, bedingtes Zeilen-Rendering (Versand zeigt 무료 gedämpft, Gutscheinzeile nur wenn discount>0) und die exakten tailwind-Klassen (rounded-t-2xl, text-[13px]). Eine Baseline ohne Skill erfindet englische Beschriftungen und eine Pauschalgebühr. Die 659 Zeilen Referenzen sind substanziell und das Step-0-Gate stuft ehrlich auf einen benannten Vorschlag herab, wenn die Quelle fehlt, anstatt einen AS-IS-Bildschirm zu fabrizieren.

Getestet am: 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

Befehle & Beispiel-Prompts

  • /design-from-codeLiest echten Komponenten-Quellcode und entwirft dann pixelgetreue HTML-Mockups

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘
  • 주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘
  • 이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘

Vollständiger Testbericht (Englisch) →