¿Qué es Claude Design? Guía completa sobre precios, 7 métodos de creación y ejemplos de prompts [Actualizado 2026]

Traducción completada con éxito. Aquí está el texto en español latinoamericano, manteniendo el formato Markdown, los nombres de productos, las URLs y las etiquetas estructurales. Se han traducido todos los contenidos de texto siguiendo las pautas de naturalidad y localización.

El 18 de junio de 2026, Claude Design recibió una gran actualización.

Las funciones han aumentado y la interfaz ha cambiado.

Lo he revisado mientras lo uso yo mismo, así que escribiré en orden dónde hacer clic en la pantalla.

Este artículo está pensado para "aprender mientras lo usamos juntos".

Por favor, lee esto mientras abres [claude.ai/design](//claude.ai/design).

¿Se puede usar gratis?

No, no se puede.

Claude Design es exclusivo para planes de pago.

Puedes usarlo si tienes un plan Pro ($20/mes). No se requieren cargos adicionales.

¿Qué es Claude Design?

Es una herramienta de IA que te permite crear diapositivas, páginas de aterrizaje, prototipos de aplicaciones, propuestas y más, solo dando instrucciones generales en español.

Anthropic la lanzó el 17 de abril de 2026. Esta actualización ha aumentado significativamente su funcionalidad.

El resultado es "HTML en vivo". No es una imagen estática; genera un diseño interactivo y animado.

Cómo leer la pantalla

Cuando abres [claude.ai/design](//claude.ai/design), se muestra esta pantalla.

Pestañas superiores

Área "Crear algo nuevo"

Elige el tipo de cosa que quieres crear aquí. Hay siete tarjetas alineadas.

Debajo de "Diseños", se listan tus diseños anteriores.

Cuando Claude hace preguntas de seguimiento (Común a todas las tarjetas)

Después de seleccionar una tarjeta y enviar un prompt, si Claude determina que falta información, puede mostrar preguntas adicionales en el lado derecho de la pantalla.

El contenido de las preguntas cambia según el prompt.

Hay elementos obligatorios y opcionales.

Responde los elementos y presiona "Continuar" para comenzar la generación.

Cómo crear Slides (Materiales de presentación)

Crea materiales para seminarios, diapositivas informativas y presentaciones desde aquí.

Paso 1. Haz clic en "Slides" en la pantalla de inicio

Haz clic en la tarjeta que dice "Presentaciones y pitch decks".

Paso 2. Ingresa el contenido de las diapositivas que quieres crear

Al hacer clic, llegas a esta pantalla.

"¿De qué trata la presentación?" se muestra en la barra lateral izquierda.

Puedes elegir entre tres métodos de entrada:

• Subir un documento: Crea diapositivas a partir de documentos existentes como Word o PDF.
• Pegar tus notas: Pega notas o texto y haz que se estructuren.
• Presentación existente: Reconstruye basándose en una presentación de diapositivas existente.

Si no adjuntas nada, solo ingresa el contenido en el campo de texto a continuación y presiona Enviar.

Ejemplos de prompts

1Por favor, crea una diapositiva de introducción para un servicio de consultoría de IA.
2Público objetivo: Autónomos y freelancers que no son buenos con las computadoras
3Duración: Para un seminario de 20 minutos
4Estructura: Problemas actuales → Qué se puede solucionar con IA → Detalles del servicio → Precios → Cómo aplicar
5Ambiente: Amigable, sin jerga técnica
6Apariencia: Simple y fácil de leer, fondo blanco

1Por favor, crea una diapositiva de presentación personal.
2Antiguo ingeniero de software, actualmente enseño a usar IA
3Logros: Automatización de operaciones con Claude Code, construí un sistema por 300,000 yenes/mes
4Público objetivo: Autónomos principiantes en IA
5Número de diapositivas: 5-7, fáciles de ver con mucho espacio en blanco

1Por favor, crea una diapositiva introductoria sobre cómo usar Claude Code.
2Audiencia: Principiantes que nunca han escrito código
3Duración: 10 minutos
4Contenido: ¿Qué es Claude Code? → Pasos de instalación → Primer comando → Fallos comunes y soluciones
5Tono: Cortés, amable y que no asuste

Opciones de la presentación (Opcional)

• Optimizar para Google Slides: Usa solo fuentes de Google (útil al abrir en Google Slides).
• Añadir notas del orador: Agrega automáticamente notas de voz a cada diapositiva.

Paso 3. Espera a que se genere

Tarda unos minutos. Puedes revisar el progreso en el panel izquierdo.

Cuando termine, se ve así.

Paso 4. Ajusta con los botones en la parte superior derecha

Una vez que la generación termina, aparecen botones en la parte superior derecha.

" Ajustes" es el que más se usa. Solo escribe algo como "Haz más grande el título de la primera diapositiva" como un chat, y lo corregirá por ti.

Puntos a tener en cuenta

Primero decide el estilo visual de las diapositivas.

Si dices "cambia todos los colores" a mitad de camino, la coherencia tiende a romperse.

Es más rápido decidir el marco general y luego corregir los detalles.

Cómo crear prototipos de producto (Prototipos interactivos)

Puedes crear pantallas de aplicaciones, flujos de reserva de servicios y maquetas de servicios web.

Cuando termines, estará en un estado en el que puedes hacer clic y operarlo realmente.

Paso 1. Haz clic en "Prototipo de producto" en la pantalla de inicio

Haz clic en la tarjeta que dice "Maquetas de aplicaciones interactivas".

Paso 2. Ingresa el contenido de la pantalla de la aplicación que quieres crear

Al hacer clic, llegas a esta pantalla.

Al igual que con Slides, ingresa el contenido en el campo de texto y presiona Enviar.

Los prototipos aumentan en precisión cuanto más detalles escribas. Incluir lo siguiente mejorará la calidad:

• Qué tipo de aplicación: Sistema de reservas, gestión de tareas, pantalla de pago, etc.
• Número de pantallas: Cuántas pantallas.
• Contenido de cada pantalla: Qué se muestra.
• Flujo de operación: Dónde presionar para pasar al siguiente paso.
• Tamaño del dispositivo: Para smartphone (390×844px) o PC.
• Color/Estilo: Tema oscuro, esquema de colores brillantes, etc.

Ejemplos de prompts

1Por favor, crea un prototipo para una aplicación de reserva de salón de belleza.
2En una pantalla de smartphone (390×844px).
34 pantallas:
41. Inicio: Nombre del salón, lista de menús (Corte/Color/Tratamiento)
52. Selección de menú: Seleccionar para continuar
63. Selección de fecha/hora: Calendario y franjas horarias
74. Confirmación/Finalización: Detalles de la reserva y botón "Reservar"
8Estilo: Fondo blanco, acentos rosas, diseño redondeado
9Cuando se toque el botón "Reservar", transicionar a la pantalla "¡Reserva Completada!".

Paso 3. Espera a que se genere

Tarda unos minutos. Cuando termine, se ve así.

Está en un estado en el que puedes operarlo realmente haciendo clic. Presionar el botón "Reservar" transiciona a la siguiente pantalla.

Paso 4. Ajusta con los botones en la parte superior derecha

Una vez que la generación termina, aparecen botones en la parte superior derecha.

" Ajustes" es el que más se usa. Solo escribe algo como "Haz el color de fondo blanco" o "Haz la fuente más grande" como un chat, y lo corregirá por ti.

Si quieres agregar animación

Claude Design no agrega animación por defecto.

Si quieres agregar movimiento, especifícalo explícitamente.

1Agranda el botón a 1.05x al pasar el ratón, con una transición de 200ms.
2Atenúa + desliza hacia arriba las tarjetas al cargar la página, mostrándolas en orden con intervalos de 150ms.

Cómo crear wireframes de producto (Diseño del esqueleto)

Úsalo cuando quieras decidir primero la "configuración de la pantalla".

Crea solo el esqueleto del diseño, no un diseño detallado.

Es adecuado para confirmar el flujo de "el usuario procede en este orden".

Paso 1. Haz clic en "Wireframe de producto" en la pantalla de inicio

Haz clic en la tarjeta que dice "Pantallas y flujos de baja fidelidad".

### Paso 2. Ingresa la configuración de la pantalla que quieres crear

Al hacer clic, llegas a esta pantalla.

Solo ingresa el contenido en el campo de texto y presiona Enviar. Si tienes una pantalla que quieras usar como referencia, adjuntarla con "Agregar una captura de pantalla" mejorará la precisión.

Ejemplos de prompts

1Por favor, crea un wireframe para un flujo de solicitud de servicio de consultoría.
2Pasos: Inicio → Descripción del servicio → Precios → Formulario de solicitud → Finalización
3Con tal de que pueda ver qué colocar en cada pantalla, está bien. No es necesario un diseño detallado.

1Por favor, crea un wireframe para una página de aterrizaje de solicitud de seminario.
2Secciones: Sección principal → Presentación del orador → Contenido → Tarifa de participación → Formulario de solicitud
3En vista de smartphone.

Paso 3. Espera a que se genere

Cuando termine, se ve así.

El esqueleto de la pantalla se muestra con cajas grises. Úsalo para confirmar la ubicación como "botón aquí" e "imagen aquí". Los diseños detallados se hacen con Prototipo de producto o Documento.

Paso 4. Ajusta con los botones en la parte superior derecha

Una vez que la generación termina, aparecen botones en la parte superior derecha.

Indicar algo como "Agregar visualización de tarifas a la 3ra pantalla" en " Ajustes" hará correcciones adicionales.

Cómo crear Documentos (Páginas de aterrizaje, Propuestas, Documentos)

Crea páginas de aterrizaje, propuestas, informes y currículums desde aquí.

Entre los 7 tipos de tarjetas, esta es la más versátil.

Paso 1. Haz clic en "Documento" en la pantalla de inicio

Haz clic en la tarjeta que dice "Currículums, PDF, etc.".

### Paso 2. Ingresa el contenido que quieres crear

Al hacer clic, llegas a esta pantalla.

Una característica única de la tarjeta Documento es "Hablar sobre ello".

Si ingresas tus pensamientos como si estuvieras hablando para organizarlos, leerá la estructura tal cual.

Si tienes un PDF o materiales, puedes subirlos con "Subir un PDF o notas".

Ejemplos de prompts

1Por favor, crea una página de aterrizaje para un servicio de consultoría de IA para particulares.
2Propósito: Aumentar los registros de LINE
3Estructura:
4- Sección principal: Eslogan + Botón de registro
5- ¿Tienes estos problemas? (3 elementos)
6- Qué se puede solucionar con el servicio (3 elementos)
7- Precios
8- Preguntas frecuentes (3 elementos)
9- CTA final: Botón de registro de LINE
10Público objetivo: Autónomos que no son buenos con las computadoras, mujeres de 50 años
11Estilo: Simple y cálido, blanco + acentos coral

1Por favor, crea una propuesta para un servicio de consultoría para empresas.
2Estructura: Problemas actuales → Contenido de la propuesta → Efectos esperados → Precios → Pasos de implementación → Sobre la próxima reunión
3Estilo: Simple y confiable, azul marino x blanco

1Por favor, crea un material de presentación personal (portafolio) como freelancer.
2Contenido a incluir: Perfil, habilidades, logros, tarifas, información de contacto
3Estilo: Monocromático + 1 color de acento, moderno y limpio

Paso 3. Espera a que se genere

Tarda unos minutos. Cuando termine, se ve así.

Puedes revisar el resto desplazándote. Para una página de aterrizaje, se generará todo, desde precios y preguntas frecuentes hasta el pie de página.

Paso 4. Ajusta con los botones en la parte superior derecha

Una vez que la generación termina, aparecen botones en la parte superior derecha.

Solo con indicar el texto o los colores de la página de aterrizaje en " Ajustes", lo corregirá en el momento.

Cómo crear Animaciones

Puedes crear banners animados y gráficos en movimiento.

Paso 1. Haz clic en "Animación" en la pantalla de inicio

Haz clic en la tarjeta que dice "Gráficos en movimiento y bucles".

Paso 2. Ingresa el contenido de la animación que quieres crear

Al hacer clic, llegas a esta pantalla.

Si tienes un storyboard o imágenes, puedes subirlos con "Subir un storyboard o imágenes".

Si tienes un guion (texto), también puedes pegarlo con "Pegar un guion".

Ejemplos de prompts

1Por favor, crea un banner animado para la introducción del servicio.
2Contenido: El texto "IA x Sistematización" aparece gradualmente → El nombre del servicio aparece desde abajo → El botón CTA parpadea
3Fondo: Oscuro, líneas de acento coral
4Tamaño: 1200×630px
5Reproducción en bucle

1Por favor, crea un número de conteo animado.
2Con el texto "3,000 personas inscritas", cuenta de 0 a 3,000 en 2 segundos.
3Comienza cuando se muestra la página.

Cuando termine, se ve así.

Paso 3. Ajusta con los botones en la parte superior derecha

Una vez que la generación termina, aparecen botones en la parte superior derecha.

A diferencia de otras tarjetas, no hay un botón "Editar". Como las animaciones se ejecutan con código (CSS/JavaScript), no puedes editar elementos directamente haciendo clic en ellos. Las correcciones solo son posibles indicándoselas a la IA en " Ajustes".

Si exportas una animación a PDF, el movimiento se perderá. Si quieres conservar el movimiento, elige el formato HTML.

Cómo usar el Lienzo en blanco (Crear desde cero)

Sin plantillas, sin preguntas. Úsalo cuando quieras empezar desde un lienzo completamente en blanco.

Elige esto para "cosas que no encajan en ninguna tarjeta" o "cuando quieras decidirlo todo tú mismo".

Solo ingresa lo que quieres crear en el campo de entrada de texto y presiona Enviar.

Cómo usar Comenzar con un archivo (Crear desde un archivo)

Esta tarjeta convierte archivos existentes en diseños. Solo dándole a Claude un archivo de Word, PDF o PPTX, creará un diseño por ti.

Paso 1. Haz clic en "Comenzar con un archivo"

Haz clic en la tarjeta que dice "Convertirlo en un diseño". Se abrirá un cuadro de diálogo de selección de archivos.

Los formatos de archivo compatibles son DOCX, PPTX, XLSX, PDF, JPG y PNG.

Paso 2. Sube el archivo e ingresa las instrucciones

Cuando selecciones un archivo, se subirá y aparecerá un gran campo de entrada de texto. Ingresa lo que quieres crear y presiona el botón "Iniciar proyecto".

Otras tarjetas tienen un botón "Enviar", pero esta tarjeta tiene "Iniciar proyecto".

Ejemplos de prompts

1Por favor, convierte la propuesta de Word adjunta en diapositivas de propuesta visuales.
2Haz que sea una configuración de 5-7 diapositivas con un diseño simple y fácil de leer.

1Por favor, convierte las ideas de esta nota manuscrita en una propuesta de página de aterrizaje.
2Público objetivo: Autónomos principiantes en IA
3Objetivo: Solicitud de consultoría

Cuando termine, se ve así.

Paso 3. Ajusta con los botones en la parte superior derecha

Después de la generación, puedes ajustar con la barra de herramientas en la parte superior derecha. Presionar el botón "+ Ajustes" abre un campo de entrada de chat donde puedes dar instrucciones adicionales para cambios finos.

Cómo usar Sistemas de diseño [Nuevo en esta actualización]

Hay un botón "Configurar sistema de diseño" debajo de la lista de tarjetas en la pantalla de inicio.

Al registrar colores, fuentes y logotipos de la marca una vez, se reflejarán automáticamente en los diseños posteriores.

Esto soluciona el problema de "los colores son inconsistentes cada vez".

Presionar el botón muestra el modal "Agregar un sistema de diseño".

Hay dos métodos de registro.

① Crear aquí (Para principiantes)

Puedes configurarlo solo ingresando la información necesaria en el formulario.

Cosas que puedes registrar:

• Nombre de la empresa/Descripción de la marca (entrada de texto)
• URL del repositorio de GitHub
• Archivo de Figma (subir archivo .fig)
• Fuentes, logotipo y archivos de recursos

Puedes usarlo sin código. Si lo pruebas por primera vez, esto es lo recomendado.

② Crear usando Claude Code (MEJOR FIDELIDAD)

Esta es una función para que Claude Code aprenda información de la marca.

Una vez registrado, no tendrás que especificar "con este color y esta fuente" cada vez que crees una página de aterrizaje, página de inicio o diapositiva. Los diseños unificados como marca saldrán automáticamente.

Principalmente para equipos de desarrollo corporativos. Esta es una función para leer automáticamente la información de la marca desde el código del servicio creado con reglas de React. Casi no hay casos de uso para uso individual.

Cómo usar

Puedes crearlo desde cero con los siguientes pasos.

Paso 1. Verificar Node.js

Paso 2. Crear carpetas y archivos

1Cualquier carpeta/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Reescribir colores y fuentes a tu marca)

1export const colors = {
2  primary: "#DA7756",      // Color principal
3  background: "#F5F4F0",   // Color de fondo
4  text: "#1C1917",         // Texto del cuerpo
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Paso 3. Ejecutar /design-sync

Ejecuta el siguiente comando en Claude Code:

1/design-sync

Cuando termine, la marca se registrará en la pestaña "Sistemas de diseño". Este color y fuente se usarán automáticamente en las generaciones de diseño posteriores.

Métodos de exportación

Los diseños terminados se pueden exportar en varios formatos.

Si hay animación, el movimiento se perderá si se exporta a PDF.

Si quieres conservar el movimiento, elige el formato HTML.

Consejos para el ajuste (Panel de Ajustes)

Después de la generación, presionar el botón "Ajustes" te permite dar instrucciones de ajuste fino a la IA.

Ejemplos de instrucciones efectivas:

• "Hacer el texto del encabezado más grande"
• "Hacer que el botón destaque más"
• "Hacerlo más simple en general"
• "Revisar el diseño cuando se ve en un smartphone"

En lugar de intentar cambiar todo a la vez, dar instrucciones una por una facilita obtener el resultado deseado.

Qué cambió en esta actualización

Resumen — Elige una tarjeta según lo que quieras crear

Claude Design está disponible para planes Pro ($20/mes) y superiores. No se puede usar gratis.

Elige una tarjeta según lo que quieras crear

La precisión aumenta cuando el prompt incluye cuatro puntos: "Propósito, Estructura, Público objetivo y Estilo".

No apuntes a la perfección desde el principio; es más rápido crear un marco general y luego corregir las cosas una por una.

Si te gustó este artículo, me alegraría si presionas "Me gusta".

▼ Puedes recibir cómo usar Claude, que se puede iniciar incluso si no eres bueno con las computadoras, a través de LINE.

Al registrarte, recibirás una guía de instalación de Claude Code como regalo.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso