⚡️ Aprende a usar Claude Design en 5 min
Decks, landings, prototipos, manuales de marca. Todo por chat.
La semana pasada, Anthropic lanzó algo que llamó mucho la atención. Presentó Claude Design, una herramienta dentro de Claude que convierte un prompt en decks, landings, prototipos de app, manuales de marca o casi cualquier pieza visual que necesites. Todo por chat.
Claude Design llama la atención por cómo aterriza el trabajo visual dentro de Claude. Con Artifacts o Claude Code ya había formas de resolver varias piezas, pero acá la experiencia se vuelve más directa para equipos que piensan desde marca. Puedes subir tu identidad visual (capturas de tu web, logos, paletas, referencias de sitios que te gustan) y usar todo eso como base para lo que generes después. Así, cada pieza arranca con mucho más contexto y suele sentirse más cercana a tu marca.
El mercado lo notó rápido. Figma, que tiene entre 80 y 90% del mercado global de UI/UX, cayó 7% en bolsa el mismo día. Mike Krieger, el CPO de Anthropic, había renunciado al board de Figma tres días antes. Hagan sus propias conclusiones.
Hoy te contamos qué es, cómo funciona, y te dejamos dos ejemplos paso a paso que puedes copiar hoy mismo.
Empezamos. 🔥
¿Qué es Claude Design y para qué sirve?
Claude Design es un nuevo espacio dentro de Claude, en claude.ai/design, pensado para generar material visual sin tocar Figma, Canva ni abrir un solo archivo de diseño.
Está disponible para cuentas Pro, Max, Team y Enterprise. Usa los mismos límites de tu plan, corre sobre Claude Opus 4.7 y todavía está en research preview.
Puedes generar presentaciones, landings, prototipos interactivos, wallpapers animados, kits de UI para apps móviles, one-pagers, manuales de marca, microsites.
También conviene entender bien qué resuelve. Claude Design trabaja sobre interfaces y visuales en código (HTML, CSS y componentes React), así que funciona muy bien para iterar pantallas, piezas visuales y prototipos contigo en tiempo real. Si tu objetivo es llevar eso a una experiencia completa con backend, pagos, base de datos y usuarios reales, puedes exportarlo y pasarlo a Claude Code para seguir desde ahí.
La interfaz en 30 segundos
Abres claude.ai/design y te recibe una pantalla partida en dos. A la izquierda, el panel para armar tu proyecto. A la derecha, tu biblioteca.
En el panel izquierdo hay cuatro pestañas arriba: Prototype para interfaces interactivas, Slide deck para presentaciones, From template para arrancar desde una plantilla oficial, y Other para todo lo demás (banners, animaciones, one-pagers, wallpapers).
Debajo eliges entre dos modos. Wireframe te devuelve un esqueleto sin estilo, sirve solo para validar estructura rápida. High fidelity te entrega algo muy cerca del resultado final, con color, tipografía y componentes ya pulidos. Deja High fidelity seleccionado el 90% del tiempo.
Más abajo verás un botón que dice Set up design system. Esa es la parte más potente de la herramienta y la cubrimos en la sección 3. Por ahora, ignóralo.
A la derecha está tu biblioteca con cuatro pestañas: Recent con lo último en lo que trabajaste, Your designs con todo lo guardado, Examples con plantillas oficiales de Anthropic para inspirarte y Design systems con los sistemas visuales que vayas creando.
El flujo es simple. Le pones nombre al proyecto, confirmas High fidelity, haces clic en Create, y ahí se abre el entorno real de trabajo: chat a la izquierda, canvas a la derecha. Escribes lo que quieres y Claude empieza a generar.
El truco que cambia el resultado
Esta es la parte que casi no aparece en los tuits virales. Antes de empezar a generar, dedica 10 minutos a construir tu Design System.
Es una función dentro de Claude Design que te deja subir referencias (capturas de pantalla, logos, paletas, fuentes, incluso repositorios de código enteros) para que Claude destile un sistema visual reutilizable.
Una vez configurado, todo lo que generes después arranca desde esa base. Tus colores, tu tipografía, tus componentes, tu estilo. Ya no tienes que repetir en cada prompt cómo quieres que se vea todo.
Ejemplo: Un deck con estilo Weplash
Vamos a crear un deck de 4 slides para Weplash. El objetivo es que, al terminar, la presentación parezca hecha por nuestro equipo de diseño, no por una IA genérica.
Paso 1. Prepara las referencias
Tómate 5 minutos y reúne todo lo que represente visualmente a tu marca. Para este ejemplo:
4 o 5 screenshots de la landing actual de Weplash (desktop y mobile si tienes)
El logo en PNG o SVG
Una captura de un post de Instagram o LinkedIn que te guste cómo se ve
Si tienes manual de marca en PDF, súbelo también
Cuantas más referencias coherentes subas, mejor destila Claude el estilo.
Paso 2. Activa el Design System
Entra a claude.ai/design, entra a la sección Design System y sube las referencias. Claude empieza a analizarlas: va a extraer la paleta, las tipografías, el tono visual, los espaciados, el uso de emojis, los gradientes, los acentos de color.
Dale unos minutos para que termine. Te va a devolver un resumen visual de tu sistema. Revísalo y confírmalo.
✍️ Nota: como ves en el setup de Design system te deja subir muchas cosas más. Un repo de GitHub o una carpeta local con código, un archivo .fig de Figma que se procesa directo en tu navegador sin subirse a ningún servidor, y un campo libre para notas de marca (tono, sensación, principios). Todas esas opciones son para equipos con producto digital, design system propio o diseñadores in-house que ya tienen todo estructurado.
Para el 80% de los casos (una marca, un freelancer, una agencia que arranca) alcanza con lo que hicimos arriba: logo, screenshots y una o dos capturas de referencia. Si más adelante creces y quieres un sistema más robusto, esas puertas ya están abiertas.
Paso 3. Genera el deck con el prompt correcto
Una vez creado tu design system, este se activa por default y será la base de diseño de lo que le pidas a Claude.
Te vas al inicio de Claude Design, Slide deck, le pones nombre + tu Design System y el prompt.
Genera un deck de 4 slides sobre tips para usar Claude. Usa el texto exacto que te doy en cada slide. No inventes ni agregues contenido.
Slide 1 Portada Título: 4 tips para usar Claude como un profesional Frase gancho: La mayoría lo usa como buscador. Tú no.
Slide 2 El problema Título: El error más común al usar Claude Cuerpo: Le das instrucciones vagas y esperas magia. Claude no adivina: responde exactamente lo que le das. Prompt vago = resultado genérico. Prompt específico = resultado que usas tal cual.
Slide 3 Los 4 tips Título: Esto cambia todo Punto 1: Dale contexto — quién eres, para quién escribes, qué tono usas Punto 2: Dile el formato — lista, párrafo corto, tabla, hilo de X Punto 3: Ponle ejemplos — “escríbelo como esto que te pego” Punto 4: Pídele que itere — “ahora hazlo más corto / más directo / sin adjetivos”
Slide 4 CTA Título: Empieza hoy, no cuando “tengas tiempo” Subtítulo: Cada semana publico prompts listos para usar en mi newsletter. Acción: Suscríbete gratis → [link]
Tip: Dile exactamente qué quieres en cada slide. Claude Design funciona mucho mejor cuando le das el guion de contenido, no solo el tema.
Paso 4. Itera
Aquí viene lo bueno. En vez de escribir “oye, me gustaría que el slide 3 fuera distinto”, haz clic directamente sobre el elemento en el canvas y escribe el cambio ahí. Claude aplica el ajuste solo en ese punto, sin romper el resto del deck.
Arriba vas a ver tres botones.
Comment sirve para dejar una nota sobre algo puntual sin tocar nada, ideal cuando quieres marcar “este color no me cuadra” y que Claude lo resuelva. Edit es para meterle mano directo: cambias el texto, mueves elementos, reemplazas lo que sea tú misma. Y con Draw dibujas flechas, encierras zonas, garabateas sobre el diseño y Claude entiende lo que le pides visualmente.
Los tres le sirven como input, solo que cada uno se siente distinto. Pruébalos y vas a encontrar cuál va con tu forma de trabajar.
Paso 5. Exporta
Arriba a la derecha del canvas tienes Export. Opciones: PPTX para PowerPoint, PDF para enviar por correo, mandar a Canva si quieres retocar algún detalle con el equipo de diseño, HTML standalone para subirlo a una web, o handoff a Claude Code si quieres convertirlo en una landing web interactiva.
Y esto es solo la punta del iceberg
Hicimos un deck porque es lo que más usamos para el trabajo día a día. Pero Claude Design no se queda ahí.
Con el mismo flujo (abrir proyecto, dar contexto, escribir prompt) puedes generar landings completas, logos animados, prototipos de apps móviles con pantallas clickeables, videos animados para redes, banners de LinkedIn, post cuadrados para Instagram, infografías, wallpapers interactivos, editores con efectos visuales, tablas de precios, one-pagers para propuestas comerciales, manuales de marca, microsites enteros listos para publicar y mucho más.
Cada uno sale en minutos. Y si los hilas entre sí usando el mismo Design System, tienes un kit completo de marca sin haber abierto Figma una sola vez. Te dejo algunos ejemplos rápidos (todos hechos sin design system):
1. Hero section de landing
“Basado en la imagen adjunta, diseña un hero section para una agencia de marketing con IA. Headline grande: ‘Marketing que piensa solo.’ Subhead corto, 2 botones (primario y ghost). Fondo oscuro con gradiente sutil en una esquina.”
2. Pricing table
“Basado en este estilo, crea una pricing table con 3 planes: Starter 29 USD, Pro 99 USD, Agency 299 USD. Plan Pro destacado con borde luminoso y badge ‘Más popular’. 5 features por plan, un botón CTA cada uno. Estilo SaaS minimalista.”
3. Desing motion de logo
“Toma este logo y dame una animación de intro de 3 segundos en loop. Estilo limpio, minimalista, tipo intro de producto SaaS.”
4. Prototipo de app móvil animado
“Diseña un flujo de onboarding para una app de finanzas para freelancers latinos llamada Flux. Muestra 4 pantallas iOS sobre un canvas horizontal: welcome, registro, conectar bancos, dashboard inicial. Paleta azul noche con acento lima. Tipografía moderna sans serif. Añade fade entre pantallas, microinteracciones en los botones, y un cursor animado que recorre el flujo simulando a un usuario real usando la app. Loop infinito.”
Tips de uso real
Cosas que aprendimos probando durante estos días:
✅ Cuidado con los Design Systems. Son extremadamente útiles, pero por ahora consumen bastantes tokens. Si vas a crearlos, haz 1 por cuenta. Si no, quédate con subir tus referencias visuales por ahora.
✅ Arranca siempre con referencia visual. Un prompt que dice “estilo minimalista con paleta cálida” se queda corto. Una captura del sitio que te gusta le da muchísimo más contexto. Claude Design fue diseñado para trabajar con imágenes de entrada, así que conviene usarlo así.
✅ Si Claude te hace preguntas, respóndelas. Al inicio del proyecto muchas veces te pregunta cosas tipo “¿qué tono prefieres, formal o casual?”, “¿hay algún color que evitar?”. La tentación es saltarlas. No lo hagas. Cada pregunta que respondes ahorra tres iteraciones después.
✅ La cuota corre aparte. Y se renueva cada semana. Claude Design consume tokens independientes del chat normal. El reset es semanal, no cada pocas horas como estás acostumbrado. Si la quemas en una tarde, esperas varios días para volver. Úsala en bloques.
Lo que más nos emociona
Va bastante más allá de la herramienta.
Hace seis meses, armar una landing para un cliente se iba fácil a una semana. Un carrusel, horas enteras. Un video animado, días de trabajo. Hoy, con 10 minutos de preparación y 15 de iteración, ya tienes algo presentable. Y con criterio, algo que puedes mandar a cliente sin pensarlo dos veces.
Esto mueve el perfil de quien trabaja en marketing, agencias o freelance. Quien aprende a usar estas herramientas con criterio gana velocidad, rango y capacidad de ejecución.
Por eso construimos la Academia. 😎
🎓 Academia de IA de Weplash
Si esta edición te dejó pensando en todo lo que ya puedes crear dentro de Claude, en la Academia lo llevamos a terreno práctico.
Cada semana subimos cursos, recursos y ejercicios para que estas herramientas no se te queden en teoría. La idea es que aprendas a usarlas con criterio, entiendas cuándo valen la pena y salgas con cosas aplicables a tu trabajo real.
También hay retos, certificaciones y proyectos para practicar construyendo, no solo mirando cómo otros lo hacen.
Cursos nuevos de esta semana:
- Crea tu Primer Workflow Inteligente con Google Workspace.
- Automatiza Instagram, Gmail, Asana y Slack con los Conectores de Claude.
- Crea y Personaliza tus Propios Skills y Plugins en Claude Cowork.
Analiza, Optimiza y Crea Creatividades para tus tus Meta Ads con Manus.
Libera espacio de tu Ordenador en 10 minutos con Claude
Convierte Cualquier Imagen Estática en un Diseño Editable con Canva
Crea Intros Animadas Profesionales para tu Marca con Manus.
Y para que entres ya y empieces a sacarle provecho desde el primer día, tienes 30% OFF en tu primer ciclo con el código CLAUDE.
Nos vemos dentro, probablemente diseñando algo que antes te habría tomado media semana. 😉