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

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

Las funciones han aumentado y la interfaz ha cambiado.

Lo he comprobado mientras lo uso yo mismo, así que voy a detallar dónde hacer clic en la pantalla en orden.

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

Por favor, léelo 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 tarifas adicionales.

¿Qué es Claude Design?

Es una herramienta de IA que te permite crear diapositivas, landing pages, prototipos de apps, 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 con movimiento.

Cómo Leer la Pantalla

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

Pestañas Superiores

Área "Make something new"

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

Debajo de "Designs", 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 "Continue" para iniciar la generación.

Cómo Crear Diapositivas (Presentaciones)

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

Paso 1. Haz clic en "Slides" en la Pantalla de Inicio

Haz clic en la tarjeta que dice "Presentations & pitch decks."

Paso 2. Ingresa el Contenido de las Diapositivas que Quieres Crear

Al hacer clic, llegas a esta pantalla.

En la barra lateral izquierda aparece "What's the presentation about?".

Puedes elegir entre tres métodos de entrada:

• Upload a doc: Crear diapositivas a partir de documentos existentes como Word o PDF.
• Paste your notes: Pegar notas o texto y hacer que se estructuren.
• Existing deck: Reconstruir basándose en una presentación existente.

Si no adjuntas nada, solo ingresa el contenido en el campo de texto debajo 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 expertos en informática
3Duración: Para un seminario de 20 minutos
4Estructura: Problemas actuales → Qué se puede resolver con IA → Detalles del servicio → Tarifas → Cómo solicitarlo
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 cómo usar IA
3Logros: Automatización de operaciones con Claude Code, construcción de 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: Educado, suave y que no intimide

Opciones de presentación (Opcional)

• Optimize for Google Slides: Usa solo Google Fonts (conveniente al abrir en Google Slides).
• Add speaker notes: Añade automáticamente notas del orador a cada diapositiva.

Paso 3. Espera a que se Genere

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

Cuando termina, se ve así.

Paso 4. Ajusta con los Botones en la Parte Superior Derecha

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

"Tweaks" es el más usado. Solo ingresa algo como "Haz el título de la primera diapositiva más grande" como si fuera 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 medio camino, la coherencia tiende a romperse.

Es más rápido definir el marco general y luego arreglar los detalles.

Cómo Crear Prototipos de Producto (Prototipos Interactivos)

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

Cuando termina, queda en un estado en el que puedes hacer clic y operarlo realmente.

Paso 1. Haz clic en "Product prototype" en la Pantalla de Inicio

Haz clic en la tarjeta que dice "Interactive app mockups."

Paso 2. Ingresa el Contenido de la Pantalla de la App 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 detalle escribas. Incluir lo siguiente mejorará la calidad:

• Tipo de app: 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, combinación de colores brillantes, etc.

Ejemplos de Prompts

1Por favor, crea un prototipo para una app de reserva de salón de belleza.
2En una pantalla de smartphone (390×844px).
34 pantallas:
41. Inicio: Nombre del salón, lista de servicios (Corte/Color/Tratamiento)
52. Selección de servicio: 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 en rosa, diseño redondeado
9Cuando se toque el botón "Reservar", transicionar a la pantalla "¡Reserva Completa!"

Paso 3. Espera a que se Genere

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

Queda en un estado en el que puedes operarlo haciendo clic. Presionar el botón "Reservar" te lleva a la siguiente pantalla.

Paso 4. Ajusta con los Botones en la Parte Superior Derecha

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

"Tweaks" es el más usado. Solo ingresa algo como "Cambia el color de fondo a blanco" o "Haz la fuente más grande" como si fuera un chat, y lo corregirá por ti.

Si Quieres Añadir Animación

Claude Design no añade animación por defecto.

Si quieres añadir movimiento, especifícalo explícitamente.

1Agranda el botón a 1.05x al pasar el cursor, con una transición de 200 ms.
2Las tarjetas aparecen con fundido + deslizamiento hacia arriba al cargar la página, mostrándose en orden con intervalos de 150 ms.

Cómo Crear Wireframes de Producto (Diseño de 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 avanza en este orden".

Paso 1. Haz clic en "Product wireframe" en la Pantalla de Inicio

Haz clic en la tarjeta que dice "Lo-fi screens & flows."

### 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 "Add a screenshot" 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 → Tarifas → Formulario de solicitud → Finalización
3Con que pueda ver qué colocar en cada pantalla, está bien. El diseño detallado no es necesario.

1Por favor, crea un wireframe para una LP de solicitud de seminario.
2Secciones: Hero section → Presentación del ponente → Contenido → Precio de participación → Formulario de solicitud
3En vista de smartphone.

Paso 3. Espera a que se Genere

Cuando termina, se ve así.

El esqueleto de la pantalla se muestra con recuadros grises. Úsalo para confirmar la ubicación como "botón aquí" e "imagen aquí". Los diseños detallados se hacen con Product prototype o Document.

Paso 4. Ajusta con los Botones en la Parte Superior Derecha

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

Indicar algo como "Añadir visualización de tarifas en la 3ra pantalla" en "Tweaks" hará correcciones adicionales.

Cómo Crear Documentos (LPs, Propuestas, Documentos)

Crea landing pages, 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 "Document" en la Pantalla de Inicio

Haz clic en la tarjeta que dice "Resumes, PDFs, etc."

### Paso 2. Ingresa el Contenido que Quieres Crear

Al hacer clic, llegas a esta pantalla.

Una función exclusiva de la tarjeta Document es "Talk it out".

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

Si tienes un PDF o materiales, puedes subirlos con "Upload a PDF or notes."

Ejemplos de Prompts

1Por favor, crea una LP para un servicio de consultoría de IA para personas físicas.
2Propósito: Aumentar registros en LINE
3Estructura:
4- Hero section: Eslogan + Botón de registro
5- ¿Tienes estos problemas? (3 ítems)
6- Qué se puede resolver con el servicio (3 ítems)
7- Tarifas
8- FAQ (3 ítems)
9- CTA final: Botón de registro en LINE
10Público objetivo: Autónomos que no son expertos en informática, mujeres de 50 años
11Estilo: Simple y cálido, blanco + acentos en coral

1Por favor, crea una propuesta para un servicio de consultoría para empresas.
2Estructura: Problemas actuales → Contenido de la propuesta → Efectos esperados → Tarifas → 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 termina, se ve así.

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

Paso 4. Ajusta con los Botones en la Parte Superior Derecha

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

Con solo indicar el texto o los colores de la LP en "Tweaks", lo corregirá en el acto.

Cómo Crear Animaciones

Puedes crear banners animados y motion graphics.

Paso 1. Haz clic en "Animation" en la Pantalla de Inicio

Haz clic en la tarjeta que dice "Motion graphics & loops."

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 "Drop a storyboard or images."

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

Ejemplos de Prompts

1Por favor, crea un banner animado para introducción de servicio.
2Contenido: El texto "IA x Sistematización" aparece con fundido → El nombre del servicio aparece desde abajo → El botón CTA parpadea
3Fondo: Oscuro, líneas de acento en 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 muestre la página.

Cuando termina, se ve así.

Paso 3. Ajusta con los Botones en la Parte Superior Derecha

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

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

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

Cómo Usar Blank Canvas (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 Start with a File (Crear desde 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 para ti.

Paso 1. Haz clic en "Start with a file"

Haz clic en la tarjeta que dice "Turn it into a design." Se abrirá un 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 Instrucciones

Cuando seleccionas un archivo, se sube y aparece un campo de entrada de texto grande. Ingresa lo que quieres crear y presiona el botón "Start project".

Otras tarjetas tienen un botón "Send", pero esta tarjeta tiene "Start project."

Ejemplos de Prompts

1Por favor, convierte la propuesta de Word adjunta en diapositivas de propuesta visuales.
2Haz 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 LP.
2Público objetivo: Autónomos principiantes en IA
3Objetivo: Solicitud de consultoría

Cuando termina, 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 "+ Tweaks" abre un campo de entrada de chat donde puedes dar instrucciones adicionales para cambios finos.

Cómo Usar Design Systems [Nuevo en esta Actualización]

Hay un botón "Set up design system" debajo de la lista de tarjetas en la pantalla de inicio.

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

Esto resuelve el problema de "colores inconsistentes cada vez".

Presionar el botón muestra el modal "Add a design system".

Hay dos métodos de registro.

① Create here (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)
• Archivos de fuente, logotipo y recursos

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

② Create using Claude Code (BEST FIDELITY)

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

Una vez registrado, no tendrás que especificar "con este color y esta fuente" cada vez que crees una LP, 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 a partir del código de servicio creado con reglas de React. Casi no hay casos de uso para uso individual.

Cómo Usarlo

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 (Reescribe colores y fuentes con los de 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 registra en la pestaña "Design systems". Este color y fuente se usarán automáticamente en 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 formato HTML.

Consejos para el Ajuste (Panel Tweaks)

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

Ejemplos de instrucciones efectivas:

• "Haz el texto del encabezado más grande"
• "Haz que el botón destaque más"
• "Hazlo más simple en general"
• "Verifica el diseño cuando se vea en un smartphone"

En lugar de intentar cambiarlo 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 busques la perfección desde el principio; es más rápido crear un marco general y luego arreglar las cosas una por una.

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

▼ Puedes recibir cómo usar Claude, que incluso los no expertos en informática pueden empezar, 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