Claude Code Design: prototipa sin salir de la terminal

Anthropic acaba de meter diseño visual dentro de la terminal. Claude Code /design convierte tu línea de comandos en un lienzo donde prototipas, editas y exportas a código listo para producción: sin abrir Figma, sin pasar archivos al equipo de desarrollo. ¿Exageración? Vamos a abrirlo.

TL;DR: El resumen sin rodeos

• Diseño en la terminal: el comando /design genera prototipos visuales desde Claude Code y los abre en el navegador para edición directa.
• Código, no maquetas: lo que sale es HTML, CSS y JavaScript. Punto de partida real, no decoración.
• Cuota limitada: requiere suscripción Pro o superior y consume una asignación semanal de diseño separada.
• Vista previa, no versión final: lanzada el 18 de agosto de 2026 como vista previa de investigación. Puede cambiar sin aviso.

Veredicto: herramienta prometedora para prototipos rápidos en equipos de marketing. Pruébala, pero no abandones Figma todavía.

El problema que resuelve

Si alguna vez has necesitado un prototipo rápido para una campaña (una landing, un carrusel para redes), conoces el circuito: abres Figma, diseñas, exportas, se lo pasas al equipo de desarrollo, esperas, corriges, vuelves a esperar. O directamente lo montas tú en Canva y rezas para que "quede bien" en código.

Herramientas de diseño sobran. Lo que falta es que diseño y código vivan en el mismo planeta. Cada salto entre uno y otro es tiempo y contexto que se pierde por el camino.

Claude Code /design va directo a eso. Describes lo que necesitas, lo ves en el navegador, lo retocas y te llevas el código. Sin intermediarios. Si ya te interesa cómo la IA está transformando el diseño web, esto es el siguiente paso lógico.

Cómo se pone en marcha

El flujo es directo. Escribes /design en tu terminal de Claude Code, describes lo que necesitas y el sistema genera un artefacto visual que se abre en tu navegador. Desde ahí puedes hacer clic en cualquier elemento, ajustar propiedades, dejar comentarios y volver a Claude Code para seguir iterando. Según Anthropic, Claude construye un sistema de diseño durante la configuración inicial leyendo tu código y tus archivos de diseño existentes.

Los requisitos para probarlo:

• Claude Code en versión 2.1.234 o superior.
• Suscripción Pro, Max, Team o Enterprise. No hay plan gratuito para esta función.
• El uso consume una cuota semanal de diseño, separada de la cuota general.

Y luego está /design-sync. Establece un puente bidireccional entre tu código existente y Claude Design. Si tu repositorio ya tiene un sistema de diseño definido (colores, tipografía, componentes), Claude lo lee y lo usa como base para cada proyecto nuevo. Es una de las skills para Claude Code con más potencial para equipos con identidad visual consolidada.

La función está en vista previa de investigación desde el 18 de agosto de 2026. Funciona, pero no esperes la estabilidad de una versión final.

Comprueba que tengo Claude Code en versión 2.1.234 o superior. Ejecuta /design y genera un prototipo de landing page para [describe tu producto aquí], con formulario de registro, CTA principal y los colores de marca [#hex1, #hex2]. Abre el resultado en el navegador para revisión.

Usándola en marketing real

Un equipo de marketing pequeño necesita prototipar una landing para una campaña de paid media. Sin /design, el flujo típico pasa por Figma para el maquetado, revisión con el cliente, implementación por desarrollo y las inevitables rondas de "mueve esto tres píxeles a la izquierda". Con /design, el gestor describe la landing en una frase y tiene un prototipo visual en minutos.

Si el equipo usa /design-sync con un sistema de diseño sincronizado, el resultado respeta la identidad visual sin intervención manual. Según la documentación oficial, basta con importar el sistema de diseño al proyecto y Claude lo aplica automáticamente a cada prototipo nuevo.

Para piezas de redes sociales funciona igual de rápido. En el vídeo que origina este artículo, se genera un póster de Instagram escribiendo una línea. No sustituye a un diseñador senior en una campaña compleja, pero para prototipos y piezas de volumen te quita de encima las idas y vueltas de siempre. Y si ya trabajas con Claude Code dentro de un flujo de automatización de contenido con IA, /design encaja como una pieza más del mismo engranaje.

Lo que no te cuentan

La función se lanzó como "vista previa de investigación". Suena a beta con corbata. Anthropic no garantiza estabilidad, y las funciones en este estado tienen la costumbre de cambiar sin aviso. Si montas un flujo de producción encima de /design hoy, hazlo sabiendo que mañana puede ser diferente.

El código que genera es HTML, CSS y JavaScript plano. Si trabajas con React, Vue o cualquier modelo basado en componentes, lo que sale de /design es un punto de partida, no el componente final. Alguien va a tener que adaptarlo. Eso no lo dice el marketing de la función.

Ojo con la cuota. "Incluido en tu plan" no significa "ilimitado". Existe una asignación semanal separada para diseño, ampliable pagando más. En un equipo que prototipe a diario, esos límites se notan antes de lo que piensas.

Y la pega más sutil: /design-sync promete leer tu sistema de diseño existente, pero eso requiere que TENGAS un sistema de diseño documentado en tu repositorio. Si tu "identidad de marca" es un PDF de 2019 y cuatro hexadecimales en un Google Doc, el puente bidireccional no tiene mucho que cruzar. Apostaría a que el 90% de los equipos de marketing que conozco están en ese caso.

Veredicto

Claude Code /design mete diseño visual dentro de un entorno de código con IA, y lo hace en serio. Si ya usas Claude Code y necesitas prototipos rápidos, la diferencia se nota.

Pero es una vista previa, no un producto terminado. La cuota aprieta y la función puede cambiar mañana sin aviso. Pruébala, mide si encaja en tu caso y no abandones tu herramienta de diseño principal. Todavía no.