Claude Design → Claude Code: el handoff en vivo
Mueve los mandos de ajuste (glow, elevación, opacidad de badges) sobre el prototipo de ExperimentCard y observa cómo el código React/Tailwind generado cambia con ellos — el ciclo diseño-a-código del caso.
El artefacto se ejecuta en un iframe con sandbox (solo scripts). Si algo no se ve bien, ábrelo a pantalla completa.
— PROMPT QUE LO GENERÓ
Recrea el flujo de handoff del caso 'Claude Design: del prototipo al código': un prototipo de ExperimentCard con mandos de ajuste (intensidad del glow, elevación al hover, opacidad de badges) que actualizan en vivo tanto la vista previa como un fragmento de código Tailwind representativo del componente real.
— CÓMO SE HIZO
Los tres mandos de ajuste y el flujo brief → Claude Design → bundle de handoff → Claude Code son los descritos en el caso, donde el traspaso completo tomó unos 18 minutos y el componente resultante necesitó solo ajustes de espaciado.
Caso — Claude Design: del prototipo al código— LIMITACIONES (SIN HUMO)
- ▸El código mostrado es representativo del componente real, no una captura literal de la sesión de Claude Code
- ▸No reproduce el editor real de Claude Design ni sus comentarios inline
- ▸Los valores de los mandos son ilustrativos, no los exactos usados en la sesión original