Claude Design
Guía gratis · 12 min

Dejá tu nombre
y entrás.

Te suma a la lista de Morfeo — cuando sale contenido nuevo, te avisamos. Nada más.

No spam, no lo compartimos. Respondemos a paul@morfeoacademy.com.

Guía · Abril 2026 · Morfeo Academy
Guía completa de
Claude Design
5 tips, 5 prompts templates,
y el setup que uso para Morfeo Academy.

La misma guía que mencioné en el carrusel.
Por Paul · @morfeoacademy

01 · El contexto

Figma tembló.

Anthropic lanzó Claude Design el 17/04/2026. La versión corta: prompteás, sale un prototipo. Pero lo importante está en la versión larga.

Claude Design es una herramienta conversacional que genera prototipos interactivos, slide decks, one-pagers y UI mockups desde prompts en lenguaje natural. Corre con Opus 4.7 debajo y está disponible para planes Pro, Max, Team y Enterprise.

Lo que lo hace diferente:

La verdad incómoda

Si tu organización no tiene un brand system configurado, Claude Design te va a devolver outputs genéricos. Con cara de Claude, no con cara tuya. La diferencia entre que esta herramienta sea mágica o mediocre está en los primeros 15 minutos de setup.

02 · Setup (15 min, una vez)

Tu brand system, antes que tu primer prompt.

Esta es la parte que casi nadie hace. Hacela bien y cada output que genere Claude Design va a verse como tu marca.

01
Conectá tu codebase
En Claude Design → Settings → Integrations → GitHub. Autorizá acceso al repo que tiene tus componentes. Si usás Tailwind, Shadcn, Radix, Chakra, etc., Claude Design los va a detectar y usar.
02
Subí tus design files
Si tenés Figma, exportá el archivo de design system y subílo en Settings → Design files. Claude va a parsear variables, estilos y componentes. Si no tenés Figma, saltate este paso — va con el codebase.
03
Configurá brand tokens manualmente
En Brand settings, definí: --brand-primary, --brand-secondary, neutrals (9-step scale), heading font, body font, mono font, border-radius base, y spacing scale. Sí, se hace una sola vez.
04
Definí tu component library preferida
En Preferences → Components, elegí cuál usás: shadcn/ui, Radix, Chakra, Material, o custom. Claude va a priorizar esos patterns en todos los outputs.
05
Subí 3-5 referencias visuales de marca
Screenshots de tu landing actual, un post de Instagram, una captura de tu app. Claude los usa para aprender tu "voz visual" — no solo los tokens técnicos.
06
Primer prompt de test
Antes de usarlo "en producción", probá: "Hacé un landing hero para [producto] con [CTA]." Si el output no respeta tus tokens, volvé al paso 3.
03 · 5 prompts templates

Los 5 prompts que uso todos los días.

Copiá, pegá, ajustá la parte entre corchetes. Funcionan si hiciste bien el setup de la sección anterior.

01
Landing page hero
ConversiónB2B / B2C
# Template 1 — Landing hero
Audiencia: [emprendedores latam 25-45 que venden infoproductos]
Objetivo: [conseguir que agenden una call gratuita de 30 min]
Tono: [directo, rioplatense, sin bullshit]
Referencias: [adjuntar screenshots de 2-3 landings que admires]

Brief:
Generá una sección hero para la home de [producto].
Estructura: eyebrow + headline serif grande + subtítulo claro + CTA primario + prueba social discreta.
Necesito que el headline resuelva una objeción específica: "[objeción]".
Evitá stock photos. Si falta visual, usá una composición tipográfica.
Pro tip

Después del primer output, usá el slider density para ajustar cuánto texto querés en el hero. Más density = más subheadlines y trust signals. Menos density = hero minimalista estilo Linear.

02
Slide de pitch deck
InvestorInternal
# Template 2 — Deck slide
Audiencia: [VCs early-stage en LATAM]
Objetivo: [explicar el tamaño del mercado sin abrumar]
Referencias: [estilo Stripe Atlas deck, Notion launch deck]

Brief:
Slide #[N] del deck.
Tema: [TAM / SAM / SOM del mercado de X en LATAM].
Formato: 1 stat grande centrado + 3 sub-stats laterales + fuente pequeña.
Sin pie charts. Números redondos. Tipografía serif en los stats.
Ancho 16:9.
03
One-pager / ad creative
Meta / IGPrint
# Template 3 — One-pager ad
Audiencia: [creators de contenido 20-35 en español]
Objetivo: [hook visual fuerte para ad de Meta]
Formato: [1:1 para IG feed, 9:16 para stories]

Brief:
Creative de ad para [producto].
Hook tipográfico: "[copy del hook, máx 8 palabras]".
Estilo editorial — parece un poster, no un ad.
Paleta restringida (2-3 colores máx, usá mi brand system).
Sin personas. Sin stock. Sin íconos genéricos.
Evitá que se vea hecho por IA.
04
Carousel de Instagram
EducativoConversión
# Template 4 — IG carousel
Audiencia: [mi audiencia de @morfeoacademy]
Objetivo: [educar sobre X + cerrar con CTA a DM]
Slides: [7 slides, 4:5 (1080x1350)]

Brief:
Carousel educativo sobre [tema].
Slide 1: hook tipográfico + pill con el tema central.
Slides 2-6: un tip por slide con número italic serif.
Alterná fondo claro y oscuro (intercalado).
Slide 7: CTA tipo "comentá [keyword]".
Aplicá mi design system. Sin logos dentro de los slides.
Meta-insight

Este mismo carousel que promociona esta guía fue armado con un prompt casi idéntico al template 4.

05
Mobile app screen
iOS / AndroidHandoff a code
# Template 5 — App screen
Audiencia: [usuarios mobile de mi app [nombre]]
Objetivo: [pantalla de onboarding paso [N]]
Plataforma: [iOS native-feel / Android Material You]

Brief:
Pantalla [N] del onboarding.
Incluye: ilustración simple top + headline claro + 1-2 sub-bullets + CTA primario full-width + link secundario "skip".
Usá mis componentes (buttons, cards) del codebase.
Cuando apruebe, empaquetá para handoff a Claude Code con instrucción: "genera el componente [NombreScreen] en React Native usando nuestras primitives".
04 · Workflow end-to-end

Cómo encadeno los 5 tips en un flujo real.

La primera vez que usé Claude Design para diseñar un post de Morfeo, el flujo completo me tomó 12 minutos. Esto incluye idea → slides finales en Instagram.

  1. 1.
    Abrís Claude Design y tipeás un prompt usando el Template correspondiente.

    Pegás el template de arriba, completás los corchetes, adjuntás 2-3 referencias visuales. Enter.

  2. 2.
    Revisás el primer output y usás los sliders para ajustar.

    Claude genera sliders específicos al proyecto. Jugalos en vivo: spacing, density, contrast, saturation.

  3. 3.
    Iterás con inline edits si hace falta.

    Click en un elemento específico, escribís el cambio puntual.

  4. 4.
    Exportás o pasás a Claude Code.

    Si es un post de IG → exportás a PNG. Si es una pantalla de app → click en "Handoff to Claude Code".

  5. 5.
    Publicás / deployás.

    Total: 10-15 min para asset estático, 25-40 min para una pantalla de app con código funcional.

05 · Errores que vi seguido

Los 4 errores que vas a cometer.

Los cometí yo. Los vi en 3 marcas que pasaron por mi workspace esta semana. No son bugs de Claude Design — son del usuario.

1. Saltarse el setup de brand system.

"Después lo configuro." No, no vas a hacerlo después. El brand system son 15 minutos. Ponelo en la agenda.

2. Prompts telegráficos.

"Hacé un deck lindo." Claude Design no adivina tu intención. El diff entre un prompt de 4 palabras y uno de 12 con contexto es 3-4× la calidad del output.

3. No subir referencias visuales.

Adjuntá screenshots. Siempre. Claude Design es mejor interpretando imágenes que texto.

4. Olvidar que existe el handoff a Claude Code.

La diferencia más grande vs Figma no es el diseño — es que el diseño se convierte en código con un prompt.

Cierre
¿Querés
más cosas
como esta?

Seguime en @morfeoacademy. Todas las semanas subo algo nuevo sobre Claude, ComfyUI, Flux y workflows de generación de contenido.

M
Morfeo Academy
¿Y si en vez de leer
lo ejecutás?
Te enseñamos a montar tu propio sistema de contenido con IA — el mismo que uso para Morfeo.
Ver la oferta