Claude Design · Kit
Claude Designby Anthropic Labs · Research Preview
Masterclass · 60 min · Club de la IA

Kit del
Alumno.

Cómo creo landing pages, presentaciones, gráficos y motion con Claude Design — y el método para sacar resultados pro sin quemar tokens.

01 · El método

Rebota barato,
ejecuta caro.

El truco no es escribir un prompt mágico de un tiro. Es pensar en el chat normal de Claude (que casi no consume), salir de ahí con el prompt perfecto, y recién entonces gastar los tokens caros de Claude Design en una sola generación que ya sale bien.

1

Rebota la idea

En el chat normal de Claude. Le cuento qué quiero, le pido que me haga preguntas y que afinemos juntos.

Chat · barato
2

Saca el prompt

Le pido que me redacte el prompt final con el brief de 4 partes. Lo copio.

Chat · barato
3

Llévalo a Design

Pego el prompt pulido en Claude Design. Primera versión en el canvas.

Design · caro
4

Sube referencias

Imágenes que marquen la estética + tus assets. (El sistema de diseño existe, pero hoy mandamos con referencias.)

Design · caro
5

Refina y exporta

Pocas rondas, feedback preciso. Export a HTML, PDF, PPTX, Canva o Claude Code.

Design · caro
¿?
Por qué funciona. Claude Design corre sobre Opus 4.7 y consume de tu límite de tokens — un tester gastó su cupo con 1 system design + 2 one-pagers + 1 deck + 1 video. El chat normal es donde piensas gratis. Llega a Design con la tarea ya resuelta, no a improvisar.
Atajo con skills. Los pasos 1 y 2 (rebotar y sacar el prompt) son justo lo que hacen las skills landing-brief, deck-narrativa y carrusel-ia. Si las tienes instaladas, la skill es el rebote: te entrevista y te entrega el prompt + los assets de un tiro. ¿No las tienes? Rebota a mano en el chat — mismo resultado, solo más lento.
02 · La fórmula del prompt

El brief de 4 partes.

Esto es lo que separa un resultado genérico de uno pro. Todo prompt que llevo a Claude Design responde estas cuatro preguntas. Si falta una, el diseño sale a medias.

Objetivo

Qué es y para qué sirve. “Una landing para vender mi curso”.

Audiencia

Para quién es. “Creativos hispanohablantes que recién empiezan con IA”.

Contenido

Las secciones y datos. “Hero, 3 beneficios, prueba social, CTA”.

Tono visual

La estética. “Editorial, cálido, premium, un acento de color, mucho aire”.

Truco de oro: cierra tu charla en el chat normal con “ahora redáctame el prompt final para Claude Design con objetivo, audiencia, contenido y tono visual”. Te lo entrega listo para pegar.
01

Landing page

Una página que convierte. Nuestro ejemplo en toda la guía: RocoBurgers (ROCO Hamburguesas) — el objetivo es que la gente vea el menú y ordene.

Paso 1 · Rebote en el chat
Le doy contexto y dejo que me entreviste. Salgo con la estructura clara.
Chat normal · barato
Tengo una hamburguesería, RocoBurgers / ROCO Hamburguesas (onda urbana y divertida; marca en negro y amarillo). Ayúdame a pensar una landing que haga que la gente ordene: qué secciones, qué mostrar primero y qué llamado a la acción. Hazme las preguntas que te falten antes de responder. Cuando lo tengamos claro, redáctame el prompt final para Claude Design con objetivo, audiencia, contenido y tono visual.
Paso 2 · Prompt pulido → Claude Design
Pego lo que salió del chat. Esto ya es el brief de 4 partes completo.
Claude Design · caro
Diseña una landing page para RocoBurgers (ROCO Hamburguesas), una hamburguesería con onda urbana y divertida. Objetivo: que la gente vea los combos y ordene por WhatsApp. Audiencia: jóvenes y familias con antojo, cerca de la zona. Secciones: (1) header con el logo ROCO y botón "Ordena ya"; (2) hero a pantalla con una hamburguesa jugosa, el claim "Hechas para repetir." y CTA "Ordena ya"; (3) galería de los 5 combos con precio (Ro $159, Ale $149, Adri $129, Fal $149, Master Alfredo $189); (4) por qué RocoBurgers (carne smash, pan brioche, ingredientes frescos); (5) reseñas: «La mejor smash de la ciudad» — Andrea M., «El Combo Kling me arregló el viernes» — Diego R., «Papas ROCO = adicción» — Sofía L.; (6) ubicación: Av. Reforma 123, Mar–Dom 1–11 pm, con mapa; (7) CTA final con pedido por WhatsApp. Tono visual: negro (#0A0D18) y amarillo mostaza (#F9B94E) sobre crema (#FAF7F2), títulos en Anton, textos en Inter, muy apetitoso. Mobile-first.
Paso 3 · Referencias y assets
Subo 2-3 capturas de webs de hamburgueserías que me gusten (la estética) + las fotos reales de RocoBurgers (logo sticker, hamburguesas, vaso), paleta negro/amarillo mostaza (#F9B94E)/crema y fuentes. El sistema de diseño lo dejamos para otra clase — hoy trabajamos con referencias.
Paso 4 · Refino con precisión
Comentarios inline en los botones, perillas para spacing y color. Feedback concreto: “aprieta el espaciado del hero a la mitad”, “usa mi amarillo de marca en todos los CTA”.
Paso 5 · Export
HTML standalone para publicar ya, o handoff a Claude Code si quiero convertirla en sitio real con dominio.
02

Presentación / pitch deck

De una idea a un deck completo en minutos. Ejemplo: la presentación a los dueños de RocoBurgers para lanzar la nueva línea de combos. El detalle que nadie más hace bien: las notas del orador.

Paso 1 · Rebote en el chat
Le paso el texto crudo y construimos la narrativa antes de diseñar nada.
Chat normal · barato
Quiero presentar a los dueños de RocoBurgers la nueva línea de 5 combos para que los aprueben. Ayúdame a armar la narrativa de un deck (gancho → por qué combos → un combo por slide → cómo se ven en el menú → siguiente paso) y luego dame el prompt final para Claude Design, pidiéndole notas del orador en cada slide.
Paso 2 · Prompt pulido → Claude Design
Claude Design · caro
Crea una presentación de 9 slides para presentar a los dueños de RocoBurgers la nueva línea de combos. Tono: apetitoso y divertido, negro + amarillo mostaza (#F9B94E) sobre crema, títulos en Anton y textos en Inter. Estructura: 1 portada "Nueva línea de combos ROCO"; 2 gancho (la gente quiere combos, no solo hamburguesas); 3-7 un combo por slide con nombre, frase, precio y su imagen — Ro Combo $159 ("El original. Los demás son copia."), Ale Combo $149 ("Incluye comentarios innecesarios."), AdriCombo $129 ("Tamaño compacto, potencia completa."), FalCombo $149 ("Ahora con 20% menos sueño."), Combo Master Alfredo $189 ("Nivel desbloqueado. Los demás siguen en tutorial."); 8 cómo se ven juntos en el menú; 9 cierre con el siguiente paso. Incluye notas del orador en cada slide.
Paso 3 · Referencias y assets
Subo 1-2 decks de referencia + logo, paleta, fuentes y las imágenes de cada slide. Le digo: «este estilo, mi contenido».
Paso 4 · Refino
“Unifica la tipografía de los títulos”, “convierte la slide 7 en una infografía de un solo dato grande”.
Paso 5 · Export
HTML para presentar con punch (animaciones incluidas). El PPTX sale más simple y con fondos flojos — úsalo solo si necesitas editar en PowerPoint.
03

Gráfico, carrusel y one-pager

Contenido para redes. Ejemplo: el carrusel de oferta del COMBO KLING. Aquí las imágenes de referencia mandan: subo lo que me gusta y Claude entiende el estilo al instante.

Paso 1 · Rebote en el chat
Chat normal · barato
Quiero un carrusel de Instagram para la oferta del COMBO KLING de RocoBurgers. Ayúdame con el gancho de la primera tarjeta y el copy de cada una (máximo 2 líneas). Luego dame el prompt para Claude Design en formato cuadrado 1:1.
Paso 2 · Prompt pulido → Claude Design
Carrusel o, cambiando una línea, one-pager / infografía a partir de un texto.
Claude Design · caro
Diseña un carrusel de 5 tarjetas para Instagram (1080×1080) para la oferta del COMBO KLING de RocoBurgers. Tarjeta 1: gancho grande con el sello "COMBO KLING" y la hamburguesa ("La oferta que esperabas"). Tarjetas 2-4: qué incluye (hamburguesa + papas ROCO + bebida) y el precio de oferta ($149), una idea por tarjeta. Tarjeta 5: CTA "Pídelo hoy · @rocoburgers". Estilo: negro + amarillo mostaza (#F9B94E), títulos en Anton, fotos apetitosas, coherencia entre las 5.
Paso 3 · Referencias y assets
2-3 capturas de carruseles que admiro («este estilo, mi contenido») + logo, handle, paleta y fuentes.
Paso 4 · Refino
“Más contraste en la tarjeta 1”, “alinea todos los títulos a la izquierda”.
Paso 5 · Export
PDF o HTML y capturo cada tarjeta. Listo para subir.
04

Motion graphics (timeline animado)

Aquí hacemos un timeline animado (tipo video): escenas que entran una tras otra. Ejemplo: la historia de RocoBurgers. Se arma como HTML animado en Design (CSS, sin código complejo) y se graba con QuickTime para tener el video. Sin editores de video, sin terminal.

Paso 1 · Rebote en el chat
Describo la animación que quiero y dejo que me afine el prompt.
Chat normal · barato
Quiero un timeline animado (tipo video) con la historia de RocoBurgers, para grabarlo y subirlo a redes. Ayúdame a definir los hitos de la historia y cómo deben aparecer animados, y dame el prompt final para Claude Design (HTML animado con CSS).
Paso 2 · Prompt pulido → Claude Design
Claude Design · caro
Crea un timeline animado a pantalla completa (16:9) con la historia y evolución de RocoBurgers, estilo motion graphics MUY animado, en negro (#0A0D18) y amarillo mostaza (#F9B94E), títulos en Anton. Fondo con movimiento y tipografía cinética; cada escena 2-3 s, que arranque solo. Cada año entra con su foto real (zoom/parallax suave): intro con el logo ROCO rebotando; 2019 "Roco asa su primera hamburguesa en una parrilla prestada" (foto de la parrilla); 2020 "Sale el primer carrito ROCO a la calle" (foto del carrito); 2022 "Abre el primer local — nacen las papas ROCO" (foto del local); 2024 "Llega el legendario COMBO KLING" (sello COMBO KLING); FINAL: la foto de la inauguración del nuevo local a pantalla completa con el texto "Hoy: un nuevo ROCO" y el claim "Hechas para repetir." — un cierre que presenta el nuevo local y la evolución de la marca. Solo HTML y CSS, pensado para grabarse en pantalla como video.
Paso 3 · Referencias y assets
Subo 1-2 capturas o videos de animaciones que me gustan como referencia + logo, paleta y fuentes.
Paso 4 · Grábalo como video
Reproduzco el timeline y grabo la pantalla con QuickTime (Cmd + Shift + 5 en Mac) → mi .mp4 listo para redes. Cero terminal, cero código.
El momento "wow". Contar la historia de tu marca como un video animado, hecho con una sola descripción y grabado de tu pantalla — sin editores de video ni código.
04 · Prepara antes de empezar

Los assets que necesitas.

Como hoy trabajamos con imágenes de referencia (no con sistema de diseño), reúne esto antes de gastar tokens en Design. Orden de fiabilidad: adjuntos (capturas, PDF, guía de marca) › texto pegado (HEX, tipografías, copy) › investigación › URLs.

Base Para todos

  • Logo en PNG con fondo transparente (+ SVG si tienes)
  • Paleta: 3-5 colores en HEX
  • Tipografías: nombres exactos (Google Fonts) o archivos
  • Foto tuya o del ponente, alta resolución
  • Claim y tono de voz en una frase

01 Landing

  • Hero: 1 imagen principal (foto, mockup o generada)
  • 2-3 capturas de landings de referencia
  • Prueba social: testimonios (texto + foto) y logos
  • Screenshot del producto o local
  • Iconos de beneficios (o que los genere)

02 Presentación

  • 1-2 decks de referencia (estilo)
  • Imagen o ilustración por slide
  • Un dato real para la slide de estadística
  • Guion o texto base (lo que rebotas en el chat)

03 Carrusel

  • 2-3 carruseles de referencia
  • Imagen o avatar para la tarjeta de CTA
  • Formato 1:1 (1080×1080)
  • Copy: gancho + 3 ideas + CTA

04 Motion (animación)

  • Logo y elementos del hero a animar
  • Texto: título, claim, datos a destacar
  • 1-2 referencias de animaciones que te gusten
  • Paleta y fuentes
  • (Para video) QuickTime para grabar la pantalla

Tip Cómo entregarlos

  • Adjunta archivos > pegar texto > URLs (Design lee adjuntos con detalle)
  • Pega los HEX y nombres de fuente dentro del prompt
  • Nombra las referencias: «copia este estilo, no el contenido»
  • Ten todo en una carpeta por proyecto
05 · Para llevar

Cheat-sheet.

Lo que pego junto a mi monitor. Cuatro listas que resuelven el 90% de los tropiezos.

Feedback Habla preciso

  • "no me gusta""baja la opacidad de la imagen al 70%"
  • "se ve mal""aprieta el espaciado a 8px"
  • Nombra componentes: "usa el botón Primary", "aplica el estilo Card"
  • Pídele variantes: "dame 3 versiones del hero" y comparas
  • Pídele auditoría: "revisa contraste WCAG AA y corrígelo"

Tokens No los quemes

  • Piensa en el chat (o deja que una skill lo haga), ejecuta en Design
  • Llega con el brief de 4 partes ya resuelto
  • Máximo ~5 rondas de refino; luego exporta a código
  • Guarda versión antes de un cambio estético grande
  • Lo pesado (publicar, iterar mil veces) → Claude Code

Límites Tenlos presentes

  • Comentarios inline a veces desaparecen → pega el feedback en el chat
  • El motion es animación web (CSS); para video, graba la pantalla con QuickTime
  • El PPTX sale más simple que el HTML
  • Repos muy grandes pueden ir lentos
  • Requiere plan Pro / Max / Team / Enterprise

Export A dónde mando cada cosa

  • Landing / web → HTML standalone o Claude Code
  • Deck con punch → HTML  ·  editable → PPTX
  • Carrusel / gráfico → PDF o capturas
  • Seguir en equipo → Canva o link de organización
  • Video → graba la animación con QuickTime (.mp4)
06 · Tu regalo

Las skills del kit.

Cuatro herramientas que hacen el rebote por ti. Viven en el chat de claude.ai: te entrevistan y te entregan el prompt pulido + los assets, listos para pegar en Design. Instálalas una vez y aplicas el método sin pensarlo.

Chat landing-brief

  • Hace: idea → prompt de landing + checklist de assets
  • Se dispara: «quiero una landing para mi…»
⤓ Descargar landing-brief.zip

Chat deck-narrativa

  • Hace: texto → presentación con narrativa + notas del orador
  • Se dispara: «pásame este post a diapositivas»
⤓ Descargar deck-narrativa.zip

Chat carrusel-ia

  • Hace: tema → copy de las tarjetas + prompt 1:1
  • Se dispara: «un carrusel sobre…»
⤓ Descargar carrusel-ia.zip

Chat assets-listos

  • Hace: te dicta qué assets juntar antes de empezar
  • Se dispara: «¿qué necesito para…?»
⤓ Descargar assets-listos.zip
Cómo instalarlas. Cada skill es un ZIP. En claude.ai → Ajustes → Personalizar → Skills → Subir skill → actívala (una por una). Requiere plan de pago. Para regalarlas, pásales los 4 ZIP a tus alumnos y que hagan lo mismo.
⚡ Super hack

Renderiza tu motion como video real (.mp4)

Grabar con QuickTime funciona, pero si quieres un MP4 perfecto, sin grabar pantalla (sin perder color ni frames, hasta en 4K), tienes dos rutas. La primera no necesita código.

Sin código Fácil

  1. En Claude Design, dale a Share → descargar el proyecto como .zip.
  2. Entra a claude2video.com, sube el .zip y sigue las instrucciones.
  3. Descarga tu MP4 (1080p o 4K, 24-60 fps). Hasta le puedes añadir música o voz IA.

Gratis · sin registro · <1 min → claude2video.com

Con Claude Code App · sin terminal

  1. En Claude Design: Share → hand off a Claude Code. Tu proyecto se abre en la app de Claude Code.
  2. Solo la primera vez, escríbele: «Instala Node.js, FFmpeg y la skill de HyperFrames (heygen-com/hyperframes), y renderiza este proyecto como video MP4 en 1080p.»
  3. Claude Code instala todo, hace el render y te entrega el .mp4. Tú solo le das aceptar — nunca tocas la terminal.
  4. Para los siguientes videos ya no reinstalas: solo haces Share → hand off y le dices «renderiza esto en MP4».

La instalación es de una sola vez. Después: solo mover el proyecto + renderizar.