Contenido verificado el 2026-05-07 · experimento de Eggthropic
Claude Design: del prototipo al código en un solo ciclo
Usar Claude Design (research preview de Anthropic Labs) para convertir un brief escrito en prototipo interactivo y pasárselo a Claude Code para la implementación — cerrando el ciclo diseño-desarrollo.
Objetivo
Comprobar si el traspaso Claude Design → Claude Code produce un componente usable en producción desde un único brief escrito, sin traducción manual diseño-desarrollo.
Contexto
Claude Design es un producto de Anthropic Labs (research preview, abril 2026) que crea diseños, prototipos interactivos, slides y one-pagers conversando. Funciona con Claude Opus 4.7 para suscriptores Pro, Max, Team y Enterprise. Su diferencial es el mecanismo de handoff: cuando el diseño está listo, Claude lo empaqueta en un bundle que se pasa directamente a Claude Code. Este experimento prueba el ciclo completo con un brief real: el componente ExperimentCard de Eggthropic.
Prompt utilizado
Design an ExperimentCard UI component for a developer lab website called Eggthropic. Dark mode, glassmorphism aesthetic, dark navy background (#080c14). The card shows: title, one-line description, category tag, difficulty badge (beginner/intermediate/advanced), status badge (complete/in-progress/experimental), date, and a list of tool badges. Should feel like a futuristic lab report card — technical, not decorative. Make it interactive: hover lifts the card with a subtle glow. Output a ready-to-hand-off prototype.
Notas de implementación
Claude Design construyó el prototipo inicial en una pasada, infiriendo la estética glassmorphism de la descripción sin darle valores hex. Los mandos de ajuste que generó (intensidad del glow, elevación, opacidad de badges) resultaron útiles de verdad para iterar rápido. El bundle de handoff incluía HTML/CSS anotado, specs del componente y un prompt pre-escrito para Claude Code, que lo consumió y produjo un componente React/Tailwind funcional en dos turnos. Tiempo total del brief al componente: unos 18 minutos.
Resultado
El ciclo de handoff funcionó de punta a punta. El componente resultante quedó tan cerca de nuestro ExperimentCard real que solo hubo que ajustar espaciados. La extracción de design system no se probó (requiere vincular el codebase durante el onboarding). El prototipo compartible por URL fue útil para recibir feedback antes de codificar.
Qué funcionó
- Claude Design infirió la estética visual con precisión desde una descripción en prosa
- Los mandos de ajuste sustituyeron varios prompts de revisión de espaciado y color
- El bundle de handoff traía el prompt de Claude Code ya escrito: cero traducción manual
- La URL del prototipo permitió feedback asíncrono antes de comprometerse con el código
- Claude Code consumió el bundle correctamente al primer intento
Qué falló
- Claude Design es research preview: los comentarios inline desaparecieron dos veces durante la iteración (bug conocido; workaround: pegar el comentario en el chat)
- La extracción de design system requiere acceso al codebase en el onboarding — no probada aquí
- El consumo de tokens fue significativo: Claude Design corre sobre Opus 4.7 y cuenta contra los límites de la suscripción
- El prototipo usó píxeles absolutos en algunos puntos; Claude Code tuvo que convertirlos a clases responsive de Tailwind
- Las funciones 3D y de shaders aún no aportan en trabajo de componentes UI estándar
Próxima iteración
Probar el flujo completo de extracción de design system vinculando el codebase de Eggthropic en el onboarding. Medir con qué precisión aplica los tokens de Tailwind existentes a diseños nuevos sin especificarlos a mano.
Reprodúcelo tú
Este experimento es un playbook: con las herramientas de arriba y el prompt exacto de esta página puedes repetirlo en tu propio entorno. Si lo haces — funcione o no — cuéntanoslo en GitHub: las réplicas con resultados distintos son tan valiosas como el experimento original.