Cómo usar Claude Design y crear tu primera interfaz

Claude Design es la parte de Claude que crea diseños a partir de una conversación. Le describes un prototipo, una página de venta o un documento de una sola página y lo ves montado en segundos. Está en todos los planes de Claude, también en el gratuito.

La design skill de Claude Code, la herramienta de Claude que programa por ti, se parece en el nombre, pero es un conjunto de instrucciones que le dice a Claude cómo diseñar con tus criterios, sin un lienzo donde ver el resultado.

Aquí tienes el recorrido completo, desde abrirlo hasta exportar tu primera pantalla.

Cómo usar Claude Design paso a paso para diseñar tu primera interfaz

El diseño se abre en una ventana al lado de la conversación. En el chat le pides los cambios a Claude y en el lienzo ves el resultado y lo tocas directamente.

Abre Claude Design desde una conversación de Claude

Funciona dentro de Claude, en la web, en la app de escritorio y en las apps del móvil. Para empezar, abre una conversación y elige Output > Design en la caja de mensaje, o pídele directamente a Claude que te diseñe algo. Otra opción es partir de la plantilla Design en la pestaña Artifacts, donde tienes todo lo que has creado con Claude. Y si trabajas con Claude Code, también lo lanzas con el comando /design, en el escritorio o en la terminal.

Según la ayuda oficial de Claude Design, está disponible en los planes Free, Pro, Max, Team y Enterprise y viene activado por defecto.

En las cuentas de empresa, quien administra el espacio de trabajo puede activarla o desactivarla, así que si no te aparece la opción, pregúntale a esa persona.

Si usabas la versión antigua en claude.ai/design, esa web cierra el 14 de diciembre de 2026. Antes de esa fecha, pasa a Claude tu sistema de diseño si tenías uno y descarga los proyectos que quieras conservar.

Elige entre un diseño y una presentación

En el menú Output eliges qué vas a crear:

• Design, para prototipos de app y de web, páginas de venta, documentos de una sola página y otras piezas visuales.

• Slides, para presentaciones. Es Claude Slides, la herramienta de presentaciones de Claude, que monta las diapositivas a partir de tus notas y usa tu sistema de diseño si tienes uno.

El nivel de detalle lo marcas tú en el prompt, el mensaje con el que le pides el diseño. Si todavía no tienes clara la estructura, pídele primero un wireframe, un boceto en gris sin colores ni tipografías finales, y cuando el orden de la pantalla te convenza, pídele los acabados.

Carga tus referencias antes de generar nada

Antes del primer prompt, sube a la conversación lo que tengas de tu marca:

• Capturas de tu web, logos y paletas de color.

• Tu manual de marca en PDF o una presentación anterior.

• Archivos de diseño, como los de Figma.

Con las referencias puestas, la primera pantalla ya sale reconocible como tuya. Sin ellas, Claude elige su propio estilo y el resultado queda correcto pero anónimo.

Si vas a diseñar a menudo para la misma marca, pídele a Claude que monte con esos archivos un sistema de diseño, la colección de colores, tipografías, botones y otros elementos que aplicará a todo lo que crees después. Lo gestionas en Ajustes > Design systems y está en beta en los planes de pago.

Si tu proyecto ya tiene código, otra vía es crear el sistema de diseño con Claude Code y traerlo desde allí.

Escribe el prompt inicial con el contenido real

Ese primer mensaje funciona cuando le dices qué quieres construir y le das el texto exacto de cada bloque. El contenido real le marca a Claude cuánto espacio necesita cada sección. Con solo el tema, rellena los huecos con titulares genéricos que luego tendrás que reescribir uno a uno.

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 logo y los colores 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.

Revisa la primera propuesta y pide los cambios

Comprueba que estén todos los bloques que pediste, en orden y con tus textos, y luego elige cómo pedir cada ajuste según lo que quieras tocar.

Pide por chat los cambios que afectan a todo el diseño

Reordenar secciones, cambiar la paleta entera o añadir un bloque en todas las pantallas va por el chat. Junta en un mismo mensaje todo lo que quieras cambiar y dile qué debe quedarse igual.

Comenta sobre el elemento concreto que quieres cambiar

Haz clic en el bloque que falla y escríbele ahí mismo qué cambiar, igual que en un documento compartido. Claude toca solo ese elemento y deja el resto de la pantalla como estaba. Si Claude no recoge el comentario, pega el mismo texto en el chat.

Mueve y ajusta los elementos a mano en el lienzo

Arrastra un bloque hasta su sitio, cambia su tamaño, alinéalo o corrige un texto directamente con el ratón. Va bien cuando ya sabes cómo quieres que quede, y estas ediciones a mano no gastan de tu límite de uso.

Pide controles para ajustar en vivo

Para afinar el espaciado, el color o el tamaño sin describirlos con palabras, pídele a Claude controles deslizantes. Son barras que mueves con el ratón mientras ves cómo cambia el diseño, y cuando des con el punto, le pides que aplique ese ajuste a todo el diseño.

Exporta el diseño y llévatelo donde lo necesites

Con la pantalla terminada, el botón Export de la esquina superior derecha te da estos formatos:

• ZIP con todos los archivos del diseño.

• PDF para revisiones.

• PPTX para abrirlo en PowerPoint.

• Google Slides, si has montado una presentación.

• HTML independiente, una página que se abre en cualquier navegador.

Ese HTML es una maqueta. Se ve y se navega, pero no guarda datos ni tiene usuarios.

El diseño también lo envías directamente a Canva, Adobe, Gamma, Miro, Base44, Lovable, Replit, Vercel y Wix, entre otras herramientas. Es el camino cómodo cuando el retoque final lo hace otra persona en su herramienta de siempre.

Y cuando toca convertirlo en una aplicación, en el mismo botón Export tienes la opción de pasárselo a Claude Code, en tu ordenador o en la web. Claude Code sigue desde el diseño que ya tienes en vez de empezar de cero.

Errores habituales al empezar y cómo evitarlos

Estos son los fallos que más vemos en las primeras sesiones con la herramienta. Ninguno rompe nada, pero todos te cuestan tiempo y uso hasta que le coges el ritmo.

Pedir cambios sin control se come tus límites de uso

Todo lo que le pides a Claude en Claude Design sale del mismo límite de uso que el resto de Claude, Claude Code incluido, y una petición grande, como un diseño completo, gasta más que un mensaje normal.

En los planes de pago, ese límite se renueva cada cinco horas y además hay un tope semanal. Cuando llegas a él, no puedes seguir hasta que se renueve, salvo que tengas activado el uso extra, que se paga aparte.

Para estirarlo, repasa la pantalla entera antes de pedir cambios, haz a mano en el lienzo los ajustes pequeños y deja el chat para los cambios que necesitan a Claude.

Subir las referencias cuando el diseño ya está hecho

Si tu logo y tus colores llegan cuando ya tienes varias pantallas montadas, Claude tiene que adaptar colores, tipografías y espaciados a un diseño que nació con otros criterios. Cada vuelta de ajustes vuelve a gastar, y el resultado rara vez queda tan limpio como si los hubieras subido al principio.

Esperar que el diseño funcione como una aplicación

Una pantalla que responde al clic parece una aplicación terminada, pero no guarda datos ni tiene cuentas de usuario ni pagos. Todo eso lo construyes después en Claude Code, donde la design skill mantiene tus criterios visuales mientras el proyecto crece.

Antes de usar Claude Design en un proyecto con fecha de entrega, repasa sus ventajas y limitaciones, porque la herramienta sigue cambiando.

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 quieres dar ese paso, en el curso gratuito de Claude Code aprendes a crear apps y webs describiéndolas con tus palabras, sin necesidad de programar.