Claude Design es el lienzo visual de Claude, donde describes un prototipo, una presentación o una página de venta y la ves montada en segundos. Funciona por conversación y edición directa sobre el lienzo, y necesita un plan de pago de Claude. Tú le cuentas lo que quieres y lo vas afinando hasta que encaja.
No lo confundas con la design skill de Claude Code, que es un paquete de instrucciones para que el modelo diseñe con tus criterios. Esa skill la usas desde el terminal o desde la app. Vamos a ver qué necesitas antes de abrirlo y seguimos hasta tener un diseño terminado.
Tienes el chat a la izquierda, donde le pides los cambios, y el lienzo a la derecha, donde ves el diseño vivo. Desde ahí recorres el proceso entero, empezando con el proyecto en blanco y acabando con la pantalla lista para exportar.
La herramienta se abre en claude.ai/design, su lienzo en el navegador, con tu misma cuenta de Claude, y también aparece en la barra lateral de la app de escritorio.
El acceso depende del plan, y según la documentación de Claude Design está en beta y llega a los planes Pro, Max, Team y Enterprise. En este último viene desactivada por defecto y la habilita quien administre el espacio de trabajo.
Si tu cuenta es gratuita no vas a poder entrar, porque el plan gratuito no lo incluye.
Lo primero que pide la herramienta es qué vas a construir, y tienes cuatro opciones:
El nivel de detalle también lo eliges dentro de Prototype. Con el wireframe, que es el boceto sin acabados, Claude te devuelve bloques en gris para que valides el orden de la pantalla. La alta fidelidad, en cambio, llega con colores y tipografías finales y gasta más de tu plan en cada cambio.
El tipo y la fidelidad los eliges al crear el proyecto y luego no se cambian, así que para pasar del wireframe a la alta fidelidad lo más limpio es duplicar el proyecto y seguir sobre esa copia. Con el salto de un prototipo a una presentación pasa lo mismo, proyecto nuevo.
Claude Design acepta bastantes cosas como punto de partida:
Con todo eso arma el sistema de diseño que aplicará luego a cada pantalla.
Lo subes antes del primer prompt, que es la instrucción que le escribes a Claude. Puedes arrastrar los archivos, conectar tu repositorio de GitHub o lanzar el comando /design-sync desde Claude Code, que trae a Claude Design el sistema de diseño que ya tienes en tu código.
Y si todavía no tienes ninguno, puedes crearlo antes con Claude Code.
Claude extrae de ahí paleta, tipografías y espaciados, y te enseña un resumen que fija todo lo que genere después. La diferencia se nota en la primera pantalla, que con las referencias puestas ya sale reconocible como tuya y sin ellas queda correcta pero anónima.
Ese primer mensaje funciona cuando le dices qué quieres construir y le das el texto exacto de cada bloque, con las referencias de estilo ya subidas. El contenido real le marca a Claude cuánto espacio necesita cada sección.
Con solo el tema, Claude rellena los huecos con titulares genéricos que luego reescribes uno a uno, mientras que con tus textos la maquetación se ajusta desde el principio. Este ejemplo lleva el contenido ya dentro, así que cópialo y cambia los textos por los tuyos.
Crea una landing de una página para un curso de automatizaciones con IA.
Estilo según el sistema de diseño que acabo de subir.
Bloque 1. Portada con el titular "Automatiza tu negocio sin programar",
subtítulo "Tres semanas, seis herramientas, un flujo funcionando" y un
botón que diga "Empieza gratis".
Bloque 2. Tres beneficios en tarjetas horizontales. Ahorra diez horas a
la semana. Conecta las herramientas que ya usas. Sin código en ningún paso.
Bloque 3. Temario en lista numerada de seis puntos.
Bloque 4. Cierre con testimonio y el mismo botón de la portada.
Tono cercano y directo. Nada de textos de relleno.
Antes de tocar nada, comprueba que estén todos los bloques que pediste, que la jerarquía lleve la vista donde quieres y que los textos sean los tuyos. Arregla los fallos de estructura de una vez y no a base de retoques sueltos.
A partir de ahí tienes cuatro formas de pedir un ajuste, y eliges según lo grande que sea el cambio.
Lo que toca varias pantallas a la vez va a la izquierda, como reordenar secciones, cambiar la paleta entera o añadir un bloque en todas las diapositivas. Es la vía pensada para eso, y de paso agrupas varias peticiones en un mismo mensaje.
Pasa el ratón por encima del bloque que falla y ahí mismo le escribes qué cambiar, igual que en un documento compartido. Claude aplica el cambio solo ahí. El titular que no encaja se reescribe solo y el resto de la pantalla se queda como estaba.
Arrastra el bloque hasta su sitio, redimensiónalo y alinéalo con el ratón. Claude genera además controles deslizantes que cambian espaciado, color o tamaño, y el diseño se actualiza mientras mueves el control. Va bien cuando ya sabes cómo quieres que quede y solo falta cuadrarlo.
Cuando la idea es difícil de contar por escrito, activa el modo de dibujo sobre el propio lienzo y traza una flecha, rodea una zona o esboza una forma encima del diseño. Claude lee ese trazo como una instrucción más, y el dibujo ahorra explicaciones sobre todo cuando toca recolocar elementos.
Con la pantalla terminada, el menú de la esquina superior derecha te da cuatro formatos:
Eso sí, ese HTML sigue siendo una maqueta, se ve y se navega pero detrás no hay datos ni lógica.
El diseño también puedes llevarlo a Canva, Adobe, Gamma, Miro, Base44, Lovable, Replit, Vercel y Wix. Es el camino cómodo cuando el retoque final lo hace otra persona en su herramienta de siempre.
Y cuando toca convertirlo en software, Claude reúne los archivos en un paquete de traspaso, lo que llaman handoff, que envías con una sola instrucción al Claude Code de tu ordenador o a Claude Code Web. Ahí sigues con tus archivos, conectas datos reales, añades usuarios y publicas la aplicación.
En nuestra experiencia, estos fallos son los que más aparecen en las primeras sesiones con la herramienta, y aunque ninguno rompe nada, todos te cuestan tiempo y plan hasta que le coges el ritmo.
Cada ajuste que pides es una generación nueva y todas cuentan contra tu plan. Claude Design llegó con una cuota semanal propia, pero ahora todo lo que hagas consume el mismo saldo que el chat, Claude Code y Cowork, el agente de Claude para trabajar con archivos.
Ese saldo es el número de mensajes y generaciones que tu plan te deja hacer, y lo repartes entre todo lo que hagas con Claude.
Para estirar ese saldo, repasa la pantalla entera, apunta todo lo que cambiarías y mándalo junto en un mensaje, porque un prompt con cinco cambios agrupados suele gastar menos que cinco prompts seguidos.
Si el sistema de diseño llega cuando ya hay ocho pantallas montadas, Claude tiene que reinterpretar colores, tipografías y espaciados sobre un resultado que nació con otros criterios. Casi siempre tendrás que regenerar las pantallas una por una, y cada vez vuelves a gastar.
Reunir las referencias antes de empezar suele ahorrarte esa ronda de regeneraciones.
Claude Design entrega un diseño y un prototipo, no una aplicación. El HTML exportado es una maqueta fiel de lo que has montado, y hasta ahí llega.
Te das cuenta al enseñarlo, porque una pantalla que responde al clic parece una aplicación acabada, pero todo lo que hay detrás está aún por construir. Ese trabajo lo haces en tus herramientas de desarrollo o en Claude Code, donde la design skill mantiene tus criterios visuales mientras el proyecto crece.
A eso se suma que Claude Design sigue en beta desde su lanzamiento y la interfaz ha ido cambiando, así que repasa sus ventajas y limitaciones actuales antes de meterla en un proyecto con fecha de entrega.
Con esto ya puedes montar tu primera pantalla en Claude Design y llevarla adonde la necesites. Lo siguiente es convertirla en un producto que alguien pueda usar.
Si es justo lo que te falta, échale un vistazo al curso gratuito de Claude Code, donde aprendes a convertir tus diseños en aplicaciones reales sin necesidad de programar. Empieza gratis.
Descubre lo que puedes crear en 7 días, sin saber programar
Cada día, un proyecto que podrás construir sin escribir una sola línea de código, directo a tu bandeja de entrada.
Empieza Gratis
Academia de herramientas no-code y low–code
.svg){kind=icon}
