Claude Design es la función de Claude que crea diseños, prototipos y documentos de una sola página a partir de una conversación. Lo que te devuelve depende sobre todo del prompt, el mensaje con el que se lo pides.
Aquí tienes seis listos para copiar, uno por cada tipo de pieza, y la fórmula que siguen todos para que escribas el tuyo cuando lo necesites.
Qué poner en tu prompt para que el diseño no salga genérico
Si no le das indicaciones, Claude elige una de sus estéticas favoritas y el diseño sale correcto pero parecido a cualquier otro. Los prompts de este artículo le dan estos cinco datos, que amplían lo que recomienda la ayuda oficial de Claude Design.
Qué pieza es, por ejemplo una landing o una presentación de 10 diapositivas.
Para quién es, porque un diseño para inversores no se parece a uno para estudiantes.
Qué contenido lleva y en qué orden, con tus textos reales si ya los tienes.
Qué estilo quieres, con colores, tipografías o capturas de webs que te gusten.
Qué condiciones debe cumplir, como verse bien en móvil o dejar un hueco en vez de inventarse cifras y testimonios.
Si no tienes claro el estilo, pídele 2 o 3 versiones y quédate con la que más te guste.
Un prompt vago como «Diseña un post para anunciar mi webinar» deja casi todo en manos de Claude, y con la fórmula queda así.
Diseña una imagen cuadrada para LinkedIn que anuncie un webinar gratuito sobre [tema, p. ej. cómo crear tu primera app sin programar] para [audiencia, p. ej. emprendedores sin perfil técnico]. Incluye título, fecha, hora y un botón de «Reserva tu plaza». Estilo sobrio, fondo blanco y acento en [color, p. ej. verde]
Diseña una imagen cuadrada para LinkedIn que anuncie un webinar gratuito sobre [tema, p. ej. cómo crear tu primera app sin programar] para [audiencia, p. ej. emprendedores sin perfil técnico]. Incluye título, fecha, hora y un botón de «Reserva tu plaza». Estilo sobrio, fondo blanco y acento en [color, p. ej. verde]
Diseña una imagen cuadrada para LinkedIn que anuncie un webinar gratuito sobre [tema, p. ej. cómo crear tu primera app sin programar] para [audiencia, p. ej. emprendedores sin perfil técnico]. Incluye título, fecha, hora y un botón de «Reserva tu plaza». Estilo sobrio, fondo blanco y acento en [color, p. ej. verde]
Lo que va entre corchetes lo cambias por tu dato, y borras también los corchetes y el ejemplo que llevan dentro.
Prompts para Claude Design según la pieza que quieras crear
Para usarlos, abre una conversación en Claude, elige Output > Design en la caja de mensaje y pega el prompt. Funciona en todos los planes, también en el gratuito.
Landing page
Úsala cuando quieras que quien llegue a tu página haga una sola cosa, como apuntarse o pedir una demo. Cuando la tengas, puedes descargarla en HTML o pasársela a Claude Code para que programe la web por ti.
Diseña una landing page de [producto, p. ej. una app de reservas para clínicas de fisioterapia] para [audiencia, p. ej. dueños de clínicas pequeñas]. Incluye, en este orden, cabecera con botón de [acción, p. ej. «Prueba gratis»], tres beneficios, cómo funciona, precios y preguntas frecuentes. Estilo [p. ej. azul marino y tipografía redondeada]
Diseña una landing page de [producto, p. ej. una app de reservas para clínicas de fisioterapia] para [audiencia, p. ej. dueños de clínicas pequeñas]. Incluye, en este orden, cabecera con botón de [acción, p. ej. «Prueba gratis»], tres beneficios, cómo funciona, precios y preguntas frecuentes. Estilo [p. ej. azul marino y tipografía redondeada]
Diseña una landing page de [producto, p. ej. una app de reservas para clínicas de fisioterapia] para [audiencia, p. ej. dueños de clínicas pequeñas]. Incluye, en este orden, cabecera con botón de [acción, p. ej. «Prueba gratis»], tres beneficios, cómo funciona, precios y preguntas frecuentes. Estilo [p. ej. azul marino y tipografía redondeada]
One-pager en PDF
Si quieres presentar tu servicio o tu proyecto en una sola hoja para mandarla por email a un posible cliente, pide un one-pager. Como lo vas a descargar en PDF, el prompt fija el tamaño de la hoja.
Crea un one-pager en A4 vertical que presente [qué ofreces, p. ej. diseño web para restaurantes] a [lector, p. ej. dueños de restaurantes]. Incluye el problema que resuelves, [número, p. ej. 3] ventajas, cómo trabajas, precio orientativo y contacto con [email y teléfono]. Estilo [p. ej. sobrio con acento naranja]
Crea un one-pager en A4 vertical que presente [qué ofreces, p. ej. diseño web para restaurantes] a [lector, p. ej. dueños de restaurantes]. Incluye el problema que resuelves, [número, p. ej. 3] ventajas, cómo trabajas, precio orientativo y contacto con [email y teléfono]. Estilo [p. ej. sobrio con acento naranja]
Crea un one-pager en A4 vertical que presente [qué ofreces, p. ej. diseño web para restaurantes] a [lector, p. ej. dueños de restaurantes]. Incluye el problema que resuelves, [número, p. ej. 3] ventajas, cómo trabajas, precio orientativo y contacto con [email y teléfono]. Estilo [p. ej. sobrio con acento naranja]
Presentación o pitch deck
Las presentaciones las hace Claude Slides, la herramienta de presentaciones de Claude, así que en el menú Output elige Slides en vez de Design. El ejemplo es un pitch deck para pedir inversión, pero vale para cualquier presentación si cambias las diapositivas que pides. Si tienes una anterior, adjúntala para que Claude copie su estilo. Al terminar, descárgala en PPTX para abrirla en PowerPoint o pásala a Google Slides.
Prepara un pitch deck de [número, p. ej. 10] diapositivas sobre [proyecto, p. ej. una app que conecta paseadores de perros con vecinos] para [audiencia, p. ej. inversores en una primera reunión]
Prepara un pitch deck de [número, p. ej. 10] diapositivas sobre [proyecto, p. ej. una app que conecta paseadores de perros con vecinos] para [audiencia, p. ej. inversores en una primera reunión]
Prepara un pitch deck de [número, p. ej. 10] diapositivas sobre [proyecto, p. ej. una app que conecta paseadores de perros con vecinos] para [audiencia, p. ej. inversores en una primera reunión]
Prototipo de app móvil
Ver las pantallas antes de programar la app te ahorra rehacerla después. Este prompt monta las 4 pantallas que ve quien abre la app por primera vez. Si quieres profundizar, la academia oficial de Claude tiene un tutorial sobre prototipos y experiencia de usuario.
Diseña las 4 pantallas de bienvenida de una app móvil de [qué hace, p. ej. gastos compartidos entre compañeros de piso] para [audiencia, p. ej. estudiantes]. La primera saluda, la segunda explica [función principal], la tercera [segunda función]
Diseña las 4 pantallas de bienvenida de una app móvil de [qué hace, p. ej. gastos compartidos entre compañeros de piso] para [audiencia, p. ej. estudiantes]. La primera saluda, la segunda explica [función principal], la tercera [segunda función]
Diseña las 4 pantallas de bienvenida de una app móvil de [qué hace, p. ej. gastos compartidos entre compañeros de piso] para [audiencia, p. ej. estudiantes]. La primera saluda, la segunda explica [función principal], la tercera [segunda función]
Herramienta interna o dashboard
Un dashboard reúne en una pantalla los datos que tu equipo revisa cada día. El diseño no se conecta a tus datos reales, así que el prompt pide valores de ejemplo para que veas cómo queda.
Necesito un panel interno para [equipo, p. ej. atención al cliente de una tienda online] con [métricas, p. ej. tickets abiertos y tiempo medio de respuesta], filtros por [p. ej. canal y agente], una tabla con los últimos tickets y un gráfico semanal. Pensado para escritorio, con estilo [p. ej. limpio, fondo claro y acento azul]
Necesito un panel interno para [equipo, p. ej. atención al cliente de una tienda online] con [métricas, p. ej. tickets abiertos y tiempo medio de respuesta], filtros por [p. ej. canal y agente], una tabla con los últimos tickets y un gráfico semanal. Pensado para escritorio, con estilo [p. ej. limpio, fondo claro y acento azul]
Necesito un panel interno para [equipo, p. ej. atención al cliente de una tienda online] con [métricas, p. ej. tickets abiertos y tiempo medio de respuesta], filtros por [p. ej. canal y agente], una tabla con los últimos tickets y un gráfico semanal. Pensado para escritorio, con estilo [p. ej. limpio, fondo claro y acento azul]
Manual de marca
Si estrenas marca o la tienes repartida en archivos sueltos, el manual la reúne en un documento con el logo, los colores, las tipografías y el tono. Pedirle primero tres propuestas de estilo te deja elegir la que te encaja sin esperar a que desarrolle el manual entero.
Crea un manual de marca para [marca, p. ej. una academia online de cerámica] pensado para [quién lo usará, p. ej. el diseñador y quien lleva las redes]. Incluye usos del logo, paleta con códigos de color, tipografías, tono de voz con tres frases de ejemplo y aplicaciones en [piezas, p. ej. un post de Instagram]
Crea un manual de marca para [marca, p. ej. una academia online de cerámica] pensado para [quién lo usará, p. ej. el diseñador y quien lleva las redes]. Incluye usos del logo, paleta con códigos de color, tipografías, tono de voz con tres frases de ejemplo y aplicaciones en [piezas, p. ej. un post de Instagram]
Crea un manual de marca para [marca, p. ej. una academia online de cerámica] pensado para [quién lo usará, p. ej. el diseñador y quien lleva las redes]. Incluye usos del logo, paleta con códigos de color, tipografías, tono de voz con tres frases de ejemplo y aplicaciones en [piezas, p. ej. un post de Instagram]
Cómo pedir cambios sin rehacer el diseño entero
Lo que le pides a Claude en Claude Design sale del mismo saldo de uso que el chat y Claude Code, así que cada vuelta de ajustes suma.
Lo que afecta a todo el diseño
Junta en un solo mensaje del chat todo lo que quieras cambiar y dile qué debe quedarse igual.
Haz estos cambios en todo el diseño.
1. Cambia la paleta a [nueva paleta, p. ej. tonos tierra con acento terracota].
2. Mueve [sección, p. ej. precios] justo después de [otra sección, p. ej. beneficios].
3. Añade [elemento, p. ej. preguntas frecuentes al final]
Haz estos cambios en todo el diseño.
1. Cambia la paleta a [nueva paleta, p. ej. tonos tierra con acento terracota].
2. Mueve [sección, p. ej. precios] justo después de [otra sección, p. ej. beneficios].
3. Añade [elemento, p. ej. preguntas frecuentes al final]
Haz estos cambios en todo el diseño.
1. Cambia la paleta a [nueva paleta, p. ej. tonos tierra con acento terracota].
2. Mueve [sección, p. ej. precios] justo después de [otra sección, p. ej. beneficios].
3. Añade [elemento, p. ej. preguntas frecuentes al final]
Lo que afecta a un solo elemento
Haz clic sobre él en el diseño y déjale un comentario para que Claude cambie solo esa parte. Si el comentario no aparece, pega el mismo texto en el chat.
Ajustes pequeños a mano
Mover, alinear o cambiar el tamaño de un bloque o corregir una palabra lo haces tú directamente sobre el diseño. Esas ediciones no gastan tokens, la unidad con la que Claude mide el uso. Además, como cuenta el diseñador que construyó Claude Design, el tamaño y la alineación salen mejor a ojo.
Para afinar el espaciado o el color, pídele controles deslizantes. Son barras que mueves con el ratón, y el diseño cambia al momento mientras las mueves.
Crea controles deslizantes para ajustar en vivo [qué, p. ej. el espaciado entre secciones y el tamaño del titular]
Crea controles deslizantes para ajustar en vivo [qué, p. ej. el espaciado entre secciones y el tamaño del titular]
Crea controles deslizantes para ajustar en vivo [qué, p. ej. el espaciado entre secciones y el tamaño del titular]
Copia el prompt de tu pieza y rellena los corchetes con tus datos, o escribe el tuyo con la fórmula. Cuando tengas el primer diseño, junta los cambios grandes en un solo mensaje.
Si es tu primera vez con la herramienta, en cómo usar Claude Design tienes el recorrido completo. Y si prefieres retocarlo en Figma, otra herramienta de diseño, aquí tienes cómo pasar de Claude Design a Figma con cada elemento editable.
Cuando lo que has creado sea una app o una web que quieres poner en marcha, Claude Code la construye a partir de tu diseño. Empieza gratis con nuestro curso de Claude Code y aprende a hacerlo sin necesidad de programar.
