Cómo Claude Design pasó de ser un proyecto secundario a un panel visual con millones de usuarios

Introducción

Claude Design nació originalmente como una respuesta práctica ante un cambio incómodo dentro de Anthropic.

En el otoño de 2025, el diseñador de producto Nate Parrott era el único diseñador que trabajaba junto a dos ingenieros en el desarrollo de Claude Code, una extensión de Visual Studio Code. Su objetivo era integrar las funciones basadas en terminal de Claude Code en una interfaz gráfica que los usuarios comunes pudieran comprender y utilizar con mayor facilidad.

El equipo lanzó una versión beta a finales de septiembre. Luego, Claude Opus 4.5 apareció en noviembre, y los ingenieros que rodeaban a Parrott comenzaron a entregar resultados a una velocidad nunca antes vista.

Sin embargo, su propio proceso de diseño no se aceleró al mismo ritmo.

En lugar de esperar a que el flujo de trabajo se reequilibrara por sí solo, Parrott aprovechó su tiempo libre para construir una pequeña herramienta que lo ayudara a mantener el paso. Este proyecto secundario terminó convirtiéndose en Claude Design —un producto de Anthropic Labs— que fue utilizado por más de un millón de personas en su primera semana de lanzamiento.

Esta historia no trata solo del éxito repentino de un producto de diseño con IA. También muestra cómo, por un lado, la IA puede acelerar ciertas partes de un equipo antes que otras, generando nuevos cuellos de botella; y, por otro lado, cómo las personas afectadas por ese desequilibrio utilizan la misma tecnología para rediseñar su propia forma de trabajar.

La ingeniería se acelera antes que el diseño

El equipo inicial era muy pequeño: dos ingenieros y un diseñador de producto.

Antes del lanzamiento de Opus 4.5, su ritmo de trabajo era más o menos sincronizado. La ingeniería y el diseño podían avanzar juntos en una función, sin que ninguna función se adelantara constantemente a la otra.

Una vez que el nuevo modelo estuvo en línea, ese equilibrio se rompió.

Los ingenieros podían usar Claude Code para implementar, probar, modificar y entregar más trabajo. Mientras tanto, Parrott seguía diseñando aproximadamente al mismo ritmo que antes, lo que convirtió al diseño en el eslabón más lento del proceso.

Esto revela un impacto más amplio de las aplicaciones de IA.

La IA no mejora todos los roles en la misma medida ni al mismo tiempo. Una empresa puede ver una aceleración en la implementación de software, pero la estrategia de producto, las revisiones de diseño, las aprobaciones legales, el contenido, las pruebas o la atención al cliente pueden permanecer igual.

El resultado no siempre es un reemplazo inmediato de puestos de trabajo. Más a menudo, su primer impacto es un desajuste entre flujos de trabajo interrelacionados.

Cuando la velocidad de la ingeniería aumenta, el resto de la organización debe responder nuevas preguntas:

• ¿Puede el diseño explorar suficientes direcciones antes de que comience la implementación?
• ¿Puede el gerente de producto tomar decisiones con la suficiente rapidez?
• ¿Pueden los revisores evaluar un número mayor de cambios?
• ¿Pueden los estándares de marca seguir el ritmo de una producción más rápida?
• ¿Puede el equipo llegar a un acuerdo antes de que el desarrollador se comprometa a construir?

La respuesta de Parrott fue crear una herramienta para la parte del proceso que se había convertido en un cuello de botella.

Primer intento: hacer que la IA "haga el diseño"

Claude Code es principalmente textual, por lo que Parrott inicialmente lo trató como

tratar el diseño como otra tarea textual.

Copió la salida del terminal en Claude, agregó capturas de pantalla de la interfaz, describió la función y le pidió al modelo que realizara el diseño.

El resultado fue decepcionante.

El problema no era que a Claude le faltara capacidad visual o de codificación. La solicitud no le proporcionaba al modelo ningún medio sólido para expresar, probar y modificar ideas visuales.

Una descripción de diseño en un chat sigue siendo solo una descripción. No se puede hacer clic, ajustar tamaño, añadir animación ni experimentar como un flujo interactivo.

Parrott experimentó con este proyecto secundario durante aproximadamente un mes. El punto de inflexión llegó cuando, en lugar de pedirle a Claude que generara abstractamente "un diseño", le pidió que creara HTML.

HTML se convierte en el lienzo visual

El HTML suele considerarse el formato de los sitios web, pero Parrott reconoció que podía servir como un medio visual e interactivo amplio.

Una página web puede contener:

• Diseños y tipografía.
• Movimiento y animaciones.
• Controles interactivos.
• Prototipos en los que se puede hacer clic.
• Gráficos e ilustraciones.
• Secuencias tipo presentación.
• Video y audio.
• Formularios y flujos de producto.
• Versiones responsivas de una misma idea.

Esto convirtió al HTML en un puente útil entre la conversación y el trabajo visual.

Parrott creó una interfaz de pantalla dividida:

• A la izquierda, la conversación con Claude.
• A la derecha, la vista previa del HTML en vivo.

Cuando el usuario describía un cambio, Claude actualizaba la página subyacente y el resultado se mostraba en el lienzo.

Esto era más útil que generar imágenes estáticas, porque el resultado podía funcionar como un producto. Los botones funcionaban, las transiciones se ejecutaban y los prototipos podían incluir múltiples estados sin necesidad de dibujar y enlazar manualmente cada pantalla.

Solo el HTML no es suficiente

Un prototipo técnicamente funcional aún puede parecer genérico o incoherente.

Parrott consideró que el diseño de producto depende de comprender el producto y la marca detrás de cada decisión. Un modelo que sabe cómo crear HTML no sabe automáticamente qué fuentes, colores, componentes, reglas de espaciado y principios visuales pertenecen a Anthropic.

Por lo tanto, incorporó el sistema visual de Anthropic al contexto de trabajo de la herramienta.

Esto incluía:

• Tipografía.
• Selección de colores.
• Recursos existentes.
• Componentes de interfaz.
• Patrones de diseño.
• Principios de diseño.

Este cambio hizo que el trabajo generado ya no pareciera una interfaz de IA aleatoria, sino que formara parte de la familia de productos de Anthropic.

Este experimento interno se convirtió posteriormente en una función central de Claude Design.

Durante el proceso de incorporación, Claude Design puede analizar código fuente, como repositorios de código, referencias de diseño, diapositivas, documentos, capturas de pantalla, logotipos, paletas de colores y especificaciones tipográficas. Luego, genera un sistema de diseño reutilizable que incluye elementos como colores, tipografía, componentes,

y patrones de diseño.

Para organizaciones en los planes Team y Enterprise, el sistema se puede publicar para todo el equipo. Los administradores pueden aprobar sistemas estándar y restringir los permisos de edición, asegurando que los proyectos cumplan con las normas de la empresa.

El prototipo se difunde dentro de Anthropic

Parrott integró el flujo de trabajo HTML con el contexto de la marca Anthropic para crear un pequeño prototipo interno.

Los diseñadores de producto comenzaron a usarlo para crear prototipos interactivos.

En un flujo de trabajo tradicional basado en clics, los diseñadores podían necesitar dibujar cada estado de cada pantalla y conectarlos manualmente. Con el prototipo interno de Claude Design, los diseñadores solo necesitaban proporcionar el material, explicar el comportamiento esperado y dejar que Claude implementara la experiencia.

Cada resultado generaba un enlace compartible.

Esto cambió la posición del prototipo.

Ya no se trata solo de archivos privados dentro de una aplicación de diseño, sino de documentos compartidos que los colegas pueden abrir, hacer clic, discutir y modificar, funcionando exactamente como un documento compartido.

El momento decisivo ocurrió durante una actividad fuera de la oficina en los laboratorios de Anthropic.

Parrott observó cómo los asistentes utilizaban la herramienta para crear diapositivas de presentación para una sesión de propuestas creativas, a veces directamente durante la reunión, justo antes de que les tocara exponer.

Esta adopción espontánea convenció al equipo del laboratorio de que este proyecto secundario resolvía una necesidad real. Claude Design recibió un equipo de apoyo dedicado y pasó de ser un experimento interno informal a un producto oficial.

Por qué Anthropic Labs es el caldo de cultivo natural

En enero de 2026, Anthropic Labs se expandió aún más, dedicándose específicamente a incubar productos experimentales basados en las capacidades emergentes de Claude.

El equipo está diseñado para un modelo de desarrollo de producto único:

1. Construir prototipos toscos en los límites de las capacidades del modelo.
2. Dejar que usuarios reales los prueben lo antes posible.
3. Observar los flujos de trabajo que los usuarios eligen repetidamente.
4. Asignar más personal e infraestructura a los experimentos que demuestren ser efectivos.
5. Escalar las ideas exitosas hasta convertirlas en productos fiables.

Anthropic señala a Claude Code como un ejemplo temprano de este camino: comenzó como una vista previa de investigación y en seis meses se convirtió en lo que Anthropic denomina un producto de mil millones de dólares.

Claude Design sigue una trayectoria de desarrollo similar:

• Proyecto secundario construido por una sola persona.
• Adoptado por diseñadores internos.
• Utilizado por colegas para fines no previstos por su creador.
• Propuestas internas confirman una necesidad clara.
• El laboratorio asigna recursos.
• Publicado como vista previa de investigación.
• Posteriormente, entra en fase de pruebas.

Este camino de abajo arriba es crucial, ya que los productos nativos de IA a menudo son difíciles de especificar claramente de antemano. Las capacidades del modelo evolucionan rápidamente y los usuarios descubren flujos de trabajo que el equipo original no había previsto.

En este caso, dado que la gente lo sigue utilizando para la comunicación visual, no solo para prototipos de interfaz, el alcance del producto se ha ido expandiendo continuamente.

Del prototipo de producto a la comunicación visual

Inicialmente, Claude Design fue posicionado como una herramienta de diseño de productos.

Pero esta descripción pronto resultó demasiado restrictiva.

El equipo comenzó a usarlo para crear:

• Prototipos de productos interactivos
• Esquemas de página (wireframes) y maquetas
• Exploraciones de diseño
• Documentos de propuesta
• Diapositivas de presentación
• Páginas de aterrizaje
• Documentos imprimibles de una página
• Material de marketing
• Correos electrónicos
• Animaciones
• Contenido visual para redes sociales
• Experimentos visuales impulsados por código.

Parrott describe la herramienta como un nivel por encima del diseño de productos de producción. Su función principal es ayudar al equipo a explorar y comunicar ideas antes de comenzar el desarrollo. Esta distinción conlleva una división de responsabilidades más clara:

Claude Design	Claude Code
Exploración visual temprana	Desarrollo de software de producción
Prototipos y pruebas de concepto	Implementación y gestión del repositorio
Presentaciones y comunicación visual	Modificación, pruebas e implementación de código
Acuerdo previo al desarrollo	Desarrollo una vez definida la dirección
Lienzo editable y controles visuales	Flujo de trabajo de codificación en IDE y terminal

Ambas herramientas pueden usarse juntas, pero no son sustitutivas.

Cambiando entre Claude Design y Claude Code

Anthropic ha añadido un flujo de trabajo bidireccional entre diseño y código. En Claude Code, usa el siguiente comando:

/design-sync

Puede importar un sistema de diseño existente al flujo de trabajo, permitiendo que el trabajo visual se base en los componentes actuales de la organización. Usa el comando:

/design

Puede crear, editar y sincronizar proyectos de Claude Design desde la terminal. El equipo puede iniciar el trabajo desde cualquiera de las dos direcciones.

Empezando desde Claude Design

1. Explorar múltiples direcciones visuales
2. Construir prototipos interactivos reales
3. Recoger comentarios y lograr consenso en el equipo
4. Empaquetar los resultados para la transferencia
5. Continuar la implementación en Claude Code

Empezando desde Claude Code

1. Trabajar sobre una aplicación o biblioteca de componentes existente
2. Sincronizar el sistema de diseño
3. Convertir el código en prototipos visuales en tiempo real
4. Refinar en Claude Design
5. Llevar las direcciones de diseño actualizadas de vuelta al flujo de trabajo de código

Esto es mucho más fiable que simplemente pasar una captura de pantalla al desarrollador y pedirle que reproduzca el comportamiento deseado. La transferencia puede incluir prototipos funcionales y el contexto de diseño relevante, no solo una imagen plana.

El sistema de diseño se convierte en el núcleo del uso diario

La popularidad temprana de Claude Design demostró que la capacidad de generación por sí sola no es suficiente. El equipo necesitaba que la herramienta mantuviera la coherencia entre proyectos y respetara los sistemas de marca existentes. Anthropic rediseñó el flujo de trabajo de importación del sistema de diseño, permitiendo a los usuarios importar uno o varios sistemas desde:

• Repositorios de GitHub
• Bases de código y bibliotecas de componentes
• Referencias de diseño
• Presentaciones
• Documentos
• Capturas de pantalla
• Recursos de marca originales

Claude utiliza estos componentes para construir, revisa los resultados contra el sistema y corrige inconsistencias antes de la presentación. Esto hace que la herramienta sea más práctica en el trabajo diario. Una página de aterrizaje generada por IA de una sola vez puede ser impresionante, pero es difícil de implementar en una empresa real. Un flujo de trabajo consciente del sistema permite a las organizaciones partir de las opciones existentes, en lugar de crear un nuevo lenguaje visual desde cero cada vez.

La edición directa reduce las indicaciones innecesarias

La versión beta de Claude Design incluye controles directos sobre el lienzo. El usuario puede:

• Seleccionar elementos
• Editar texto
• Arrastrar para recolocar
• Ajustar el tamaño de los objetos
• Modificar colores
• Ajustar el espaciado
• Alinear elementos
• Añadir comentarios en línea
• Pedir a Claude que aplique cambios globalmente al diseño

Esto es importante porque escribir indicaciones no es la mejor interfaz para cada ajuste.

El usuario no necesita escribir varias frases para mover un título ligeramente a la izquierda o reducir el ancho de una tarjeta. A menudo es más rápido realizar pequeñas correcciones visuales mediante manipulación directa.

Parrott sugiere usar Claude para exploración amplia y cambios estructurales, y luego hacer los pequeños ajustes finales manualmente.

La edición directa también evita consumir tokens del modelo en cambios que son más fáciles de juzgar visualmente.

Exportar y seguir creando en otras herramientas

Claude Design puede exportar el trabajo a:

• PDF
• PPTX
• HTML independiente
• Carpeta de proyecto
• Enlace interno compartible

Anthropic también proporciona conectores para enviar el trabajo a otras herramientas creativas y de desarrollo.

La lista oficial de conectores incluye Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel y Wix, y se añadirán más plataformas en el futuro.

El objetivo no es reemplazar cada herramienta especializada.

Una presentación puede comenzar su creación en Claude Design y luego continuar en Gamma o Canva. Un concepto puede moverse a Miro para colaboración. Un prototipo puede pasar a Replit, Vercel, Lovable o Wix para su construcción e implementación posteriores.

Claude Design actúa como un espacio de trabajo visual temprano, ayudando a las ideas a llegar a la herramienta adecuada siguiente con menos reconstrucción manual.

Casos en los que Claude Design no es adecuado

Claude Design tiene limitaciones claras.

No es un modelo de generación de imágenes

Anthropic afirma que Claude Design no tiene un modelo de imágenes dedicado.

Por lo tanto, no es adecuado para generar logotipos finales ni crear material gráfico original desde cero.

El usuario debe traer sus propios logotipos, imágenes de producto, ilustraciones, fotografías y activos de marca.

Claude puede organizar y utilizar estos elementos dentro de una composición visual más grande.

No es una plataforma de software de nivel de producción

Claude Design puede crear prototipos interactivos y piezas visuales impulsadas por código, pero Anthropic recomienda usar Claude Code para el desarrollo de software de nivel de producción.

Los prototipos pueden transmitir la experiencia deseada, pero no necesariamente cumplen con los requisitos de seguridad, accesibilidad, pruebas, mantenibilidad, rendimiento, fiabilidad del backend o despliegue en producción.

No reemplaza el juicio estético

Claude puede generar rápidamente múltiples opciones.

Pero debe ser una persona quien decida qué dirección es adecuada, qué detalles parecen mediocres, si la pieza transmite el mensaje correcto, qué contenido eliminar y si el prototipo está listo para influir en la producción.

El rol del diseñador ya no se limita a crear manualmente cada variante, sino que se orienta hacia definir la dirección, construir sistemas, juzgar la calidad y coordinar al equipo.

Métodos prácticos para usar Claude Design de manera más efectiva

1. Piensa antes de escribir un prompt

Un briefing claro suele dar mejores resultados que corregir repetidamente solicitudes vagas.

Define la audiencia, el objetivo, el contenido, las sensaciones deseadas,

Antes de pedirle a Claude que construya algo, establece claramente las restricciones y el formato de salida.

2. Describe la dirección visual

Sin orientación, los sistemas de IA pueden recurrir a estilos estéticos comunes.

Especifica claramente tipografías, colores, casos de referencia, moodboards y ejemplos de lo que la pieza debe evitar o a lo que debe acercarse.

3. Construye un sistema de diseño reutilizable

Sube ejemplos reales de la marca, no solo especificaciones abstractas.

Una página de aterrizaje completa, una presentación o una interfaz muestran la identidad visual de la marca con mucha más claridad que una simple lista de colores.

4. Genera múltiples direcciones

Solicita varias opciones y compáralas.

El objetivo de aumentar la velocidad de generación no es aceptar la primera respuesta, sino explorar más posibilidades antes de tomar la decisión final.

5. Usa bocetos cuando las palabras sean insuficientes

Los bocetos dibujados a mano pueden transmitir relaciones espaciales de manera más eficiente que largas explicaciones textuales.

6. Empieza con wireframes y luego añade detalles

Cuando el problema central es la estructura o el flujo, comienza con wireframes de baja fidelidad.

Esto permite que el modelo se enfoque en la jerarquía y la interacción, en lugar de en los estilos decorativos.

7. Ajusta manualmente el último tramo

Realiza los ajustes visuales finales, como alineación, espaciado y dimensiones, editando directamente.

8. Proporciona a Claude el contexto del producto real

Conectar con el repositorio de código existente, el sistema de diseño, los componentes y las interfaces ayuda a Claude a producir piezas que se alineen con el producto real.

¿Quién puede usar Claude Design?

Claude Design se encuentra actualmente en fase beta y está disponible en las siguientes versiones:

• Claude Pro
• Claude Max
• Claude Team
• Claude Enterprise

Se puede usar con el plan de suscripción correspondiente, y su funcionamiento consume el crédito de uso de Claude de la cuenta.

Para organizaciones empresariales, Claude Design está desactivado por defecto y requiere que un administrador lo habilite en la configuración de la organización.

Anthropic indica que el uso compartido a nivel de organización permite que los diseños permanezcan privados, pudiendo compartirse mediante un enlace para que los colegas los vean, o abrirlos para edición colaborativa.

La disponibilidad del producto y los términos del plan pueden cambiar. Los equipos deben consultar la página actual de Claude Design y la documentación de ayuda antes de estandarizar sus flujos de trabajo en torno a él.

Preguntas frecuentes

¿Qué es Claude Design?

Claude Design es un producto de Anthropic Labs que permite crear y perfeccionar piezas visuales mediante conversación y edición directa. Puede generar prototipos, presentaciones, páginas de aterrizaje, piezas individuales, animaciones, materiales de marketing y otros resultados interactivos basados en HTML.

¿Quién creó Claude Design?

El prototipo beta inicial fue desarrollado por Nate Parrott, diseñador de productos de Anthropic. Lo creó como un proyecto personal después de que Claude Code acelerara la velocidad de entrega del equipo de ingeniería más allá de su flujo de trabajo de diseño existente.

¿Claude Design ha alcanzado realmente el millón de usuarios?

Anthropic afirma que Claude Design fue utilizado por más de un millón de personas en su primera semana. Este dato se publicó en la actualización de producto de Anthropic de junio de 2026.

¿Cómo usa Claude Design HTML?

Claude genera piezas visuales como contenido web interactivo, en lugar de simplemente describir el diseño o generar imágenes estáticas. HTML proporciona un lienzo flexible para diseños, controles, animaciones, prototipos, diapositivas y otras experiencias visuales.

¿Puede Claude Design utilizar sistemas de marca existentes?

Sí.

Puede analizar repositorios de código, bibliotecas de componentes, presentaciones, documentos, capturas de pantalla, logotipos, colores, tipografías y otros materiales para generar sistemas de diseño reutilizables. Los usuarios de equipos y empresas pueden publicar sistemas compartidos para su uso en proyectos.

¿Puede Claude Design crear logotipos?

Anthropic indica que Claude Design no incluye un modelo de generación de imágenes, por lo que no es adecuado para crear logotipos. Los logotipos y materiales gráficos existentes deben subirse y utilizarse en los diseños.

¿Cuál es la diferencia entre Claude Design y Claude Code?

Claude Design es adecuado para la ideación temprana, el diseño de prototipos, la comunicación visual y la alineación del equipo. Claude Code es la herramienta recomendada para la implementación y el mantenimiento de software de nivel de producción.

¿Qué planes incluyen Claude Design?

Claude Design se ofrece actualmente en beta pública a los usuarios de Pro, Max, Equipos y Empresas. Los administradores empresariales deben habilitarlo primero para que los miembros de la organización puedan usarlo.

Herramientas relacionadas

• Claude Design: El espacio de trabajo visual de Anthropic para prototipos, presentaciones, páginas de aterrizaje y trabajo creativo de marca.
• Claude Code: El agente de codificación de Anthropic para trabajo en repositorios, implementación, pruebas y desarrollo de software.
• Model Context Protocol: Un protocolo abierto para conectar aplicaciones de IA con herramientas, servicios y datos externos.
• Canva: Una plataforma de diseño colaborativo que puede recibir piezas editables de Claude Design.
• Miro: Un espacio de trabajo visual colaborativo conectado con Claude Design para que los equipos perfeccionen y unifiquen ideas.
• Vercel: Plataforma de desarrollo y despliegue web, uno de los destinos de conexión de Claude Design.

Enlaces relacionados

• Reflexión de Nate Parrott sobre Claude Design: Relato en primera persona del creador sobre cómo nació el producto y cómo lo usa.

• Presentación de Claude Design: Anuncio oficial de lanzamiento de Anthropic, que cubre una visión general de funciones, disponibilidad en planes y opciones de exportación.

• Actualización del millón de usuarios de Claude Design: Actualización de Anthropic sobre la adopción en la primera semana, sistemas de diseño, sincronización con Claude Code, edición y conectores.

• Configuración del sistema de diseño en Claude Design: Instrucciones oficiales para importar materiales de marca y publicar sistemas de diseño reutilizables en equipo.

• [Presentación de Anthropic Labs](https://www.anthropic.

• Presentación de Anthropic Labs: Explicación de Anthropic sobre el equipo de incubación de productos experimentales detrás de Claude Design.

• Claude Code en VS Code: Documentación oficial de la interfaz gráfica de Claude Code, cuyo diseño inicial contó con la ayuda de Parrott.

• Presentación de Claude Opus 4.5: Versión del modelo relacionada con la aceleración de ingeniería, lanzada en noviembre de 2025.

Tal como se describe en la historia de Parrott.

Resumen

Claude Design nació de la necesidad de que un diseñador mantuviera el ritmo de dos ingenieros, cuya productividad se disparó tras el lanzamiento de Claude Opus 4.5.

El avance de Nate Parrott consistió en dejar de pedir a la IA que generara diseños como respuestas abstractas, y en su lugar proporcionar a Claude un lienzo HTML con el sistema de marca de la empresa integrado, haciendo que los resultados fueran interactivos y fáciles de compartir.

A medida que la herramienta empezó a adoptarse internamente, este proyecto secundario evolucionó hasta convertirse en un producto oficial de Anthropic Labs. En su primera semana, Claude Design superó el millón de usuarios y se expandió gradualmente hasta convertirse en un espacio creativo que admite prototipos, presentaciones, páginas de aterrizaje, animaciones, resúmenes de una página y otros contenidos de comunicación visual.

Este producto no pretende sustituir la codificación de nivel de producción, la generación profesional de imágenes ni el juicio humano en diseño. Su valor reside en las etapas más tempranas: explorar más direcciones, materializar ideas, fomentar el consenso en el equipo y entregar conceptos más maduros a las herramientas y personas encargadas de la ejecución final.

A medida que la IA acelera cada vez más el proceso de implementación, el trabajo de mayor valor para los diseñadores se está desplazando hacia las etapas iniciales: desde dibujar cada interfaz una por una, hasta seleccionar la dirección correcta, definir el sistema, y ayudar al equipo a ponerse de acuerdo sobre "qué deberíamos construir".