![\"Anuncio](\"https://soymarketingultra.com/wp-content/uploads/mku-resena-design-doc-20260911.png\")
El comando /design conecta Claude Code con Claude Design para trabajar con prototipos visuales desde un proyecto de código. Lo interesante es poder explorar una dirección, verla y llevarla a implementación conservando contexto. Lo peligroso sería confundir una maqueta convincente con una web terminada.
Esta herramienta forma parte de estos recopilatorios: Skills para Claude Code, Codex y otros agentes de código · Recursos de diseño para agentes de código
Hemos revisado la documentación oficial, una demostración en inglés y experiencias de usuarios sobre el traspaso a código. No hemos medido una implementación propia de principio a fin. La versión anterior daba una fecha de lanzamiento, un requisito exacto de versión y una cuota separada que no sostenían las fuentes actuales. Los retiramos.
\nAnthropic ya describía /design, /design-sync y los límites compartidos en su anuncio del 17 de junio de 2026. La guía de inicio actual explica el acceso desde la web y Claude Desktop y su estado beta. Para compatibilidad y disponibilidad, esa documentación manda sobre un tutorial antiguo.
Piensa en una landing para una campaña. Antes de programar el formulario y la conexión al CRM, necesitas decidir qué verá la persona que llega: mensaje principal, oferta, prueba, llamada a la acción y orden de lectura. /design puede ayudar a convertir esas decisiones en alternativas visibles.
La petición útil no es «haz algo moderno». Es «necesito una landing para captar reservas; estas son las objeciones del cliente, estos son nuestros componentes y estas son las tres direcciones que quiero comparar». Un buen brief no desaparece porque hayas abierto la terminal.
Anthropic documenta la importación de sistemas de diseño desde repositorios, archivos y otros materiales, la edición sobre el lienzo y el paso entre diseño y código. Eso amplía las opciones para trabajar con una marca existente. No demuestra que cada salida vaya a respetarla sin revisión.
\nTristen O’Brien enseña el flujo en inglés. En 2:26 explica cómo lanzarlo; en 3:20 trabaja el prompt para varias opciones; en 4:45 aborda el problema de las imágenes. Son puntos útiles para mirar el proceso, no una garantía de que tu cuenta tenga exactamente la misma interfaz.
\n\n![\"Ejemplo](\"https://soymarketingultra.com/wp-content/uploads/mku-resena-design-video-20260911.png\")
«it misses small details»
DanyrWithCheese, Reddit
Este usuario describe una página cuya implementación conservó la idea general pero cambió detalles: pestañas subrayadas se convirtieron en botones tipo píldora. Su caso trata del paso desde Claude Design a Claude Code; no demuestra que cada uso de /design falle igual.
\n«a full design pattern library and rules in an MD file»
mdutton27, en el mismo hilo
Cuenta que le funciona entregar reglas y patrones junto con los recursos del diseño. Es una experiencia positiva con un método concreto: hacer explícito lo que la implementación debe conservar.
\nJordanJCaron también explica en esa conversación que solicita un archivo de entrega en Markdown para implementar las páginas y que ese método le ha funcionado. No son tres pruebas controladas: son un problema y dos maneras de abordarlo. La coincidencia útil es que el paquete de entrega importa.
\n![\"Testimonio](\"https://soymarketingultra.com/wp-content/uploads/mku-resena-design-reddit-20260911.png\")
En otra conversación, lundren10 cuenta que le resultó útil explorar varias direcciones para una aplicación móvil, pero acumuló más de cien lienzos y acabó teniendo problemas al abrir el proyecto. Recomienda conservar la opción elegida y limpiar las exploraciones. Es una experiencia de una versión anterior, no un límite técnico universal; también comparte recursos propios en el hilo.
| Paso | Qué comprobar | Qué no dar por hecho |
|---|---|---|
| Brief | Objetivo, contenido real y sistema de marca | Que el modelo entienda prioridades a partir de un logo |
| Prototipo | Jerarquía, estados y versión móvil | Que una pantalla bonita cubra errores o textos largos |
| Traspaso | Componentes, tipografías, imágenes y espaciado | Que compartir un enlace preserve todos los detalles |
| Implementación | Formulario, navegación, accesibilidad y medición | Que generar código deje una campaña lista para publicar |
Guardaría una captura del diseño aprobado y otra de la implementación a los mismos anchos. Compararía también estados que suelen olvidarse: menú abierto, mensaje de error, formulario enviado y contenido largo. Si solo revisas la portada del prototipo, lo más caro se queda fuera de la prueba.
Para una marca, pediría nombres y valores concretos: familias tipográficas, pesos, colores, radios y componentes. También comprobaría la procedencia de las imágenes. Una caja con un paisaje genérico puede servir para explorar; no es un recurso aprobado para una campaña.
\nEl consumo forma parte de los límites compartidos que describe Anthropic. Repetir variaciones y rehacer una entrega tiene un coste aunque no aparezca un precio al lado de cada botón. Para valorar la herramienta, mide el recorrido completo: explorar, elegir, entregar y corregir la implementación.
No pondría a competir /design con Figma o Canva como si fueran el mismo producto. Para decidir entre opciones, concreta la tarea: explorar una interfaz desde el repositorio, mantener un sistema de diseño entre profesionales o producir piezas con una plantilla aprobada. La respuesta puede cambiar en cada caso.
\nMe interesa para acortar la distancia entre «creo que debería verse así» y una propuesta que todo el equipo pueda mirar. Pero el ahorro hay que medirlo hasta la implementación. Si ganas veinte minutos al generar y pierdes dos horas corrigiendo el traspaso, el balance no es el que parecía.
Pruébalo con una página pequeña, contenido real y una referencia aprobada. Si conserva bien el sistema visual y reduce correcciones, amplía el uso. El prototipo te ayuda a decidir; las pruebas deciden si el resultado está listo.
\n", "markdown_url": "https://soymarketingultra.com/claude-code-design-prototipos-terminal.md" }