Design From Code
Lee el código fuente real del componente, luego diseña mockups HTML fieles a los píxeles
Probado · Funciona
Qué hace
Habilidad de flujo de trabajo que convierte un problema en un diseño en un orden fijo: verificar el JSX del componente real y las consultas de datos, reproducir fielmente la pantalla actual, iterar mockups HTML autocontenidos, escribir un design.md y luego delegar la construcción. Se activa con 'design this', 'make a mockup', 'how should this feature look' o sus equivalentes Korean. Su regla central es leer el código real y el modelo de datos en lugar de imaginarlos, y degradar a una propuesta etiquetada cuando no existe una fuente.
Informe de la prueba
En un pequeño componente de prueba, ejecuté el paso de lectura de código fuente grep/sed de la habilidad y reveló hechos que una línea base habría adivinado incorrectamente: las etiquetas de fila reales Korean (상품금액 / 배송비 / 결제예정금액), el umbral de envío gratuito de ₩50,000, la renderización condicional de filas (shipping shows 무료 muted, coupon row only when discount>0), y las clases exactas de tailwind (rounded-t-2xl, text-[13px]). Una línea base sin habilidad inventa etiquetas English y una tarifa plana. Las 659 líneas de referencias son sustantivas y la puerta del Paso 0 degrada honestamente a una propuesta etiquetada cuando falta la fuente en lugar de fabricar una pantalla AS-IS.
Probado el: 2026-07-25 · Claude Code 2.x (agent harness)
Instalación
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
Comandos y prompts de ejemplo
/design-from-codeLee el código fuente real del componente, luego diseña mockups HTML fieles a los píxeles
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘