Diseñá tu landing o app con Claude Design

Claude Design es la herramienta de Anthropic que te deja diseñar productos, landings, apps y presentaciones conversando con IA. Sin saber diseño. Sin Figma. Con calidad de estudio.

📌 Nivel 2 de la ruta: Fundamentos.

Cuándo usar esta guía y cuándo no:

→ Usá esta (Claude Design) si querés diseño con sistema propio: dos direcciones visuales, paleta, tipografía, componentes, y exportar a Canva, HTML o handoff a código. → Usá página web en 5 minutos con v0 si solo querés tu primera web rápida publicada con un link, sin pensar en sistema de diseño. → Usá landing cinematográfica con Claude si querés código React real de una landing que vende, lista para deployar en Vercel.

En corto: v0 = web publicada ya. Claude Design = diseño editable con sistema. Mega-prompt = código.

Paso 0 — Antes de arrancar

Tené resuelto esto antes de abrir el chat:

• Plan Pro de Claude activo (USD 20/mes mínimo) • Nombre del negocio o producto y qué hace en una línea • Quién es el cliente ideal (edad, contexto, qué problema tiene) • 2-3 marcas cuyo estilo te gusta (Linear, Stripe, Apple, lo que sea) • Qué querés diseñar: ¿landing? ¿app? ¿pitch deck?

El detalle: cuanto más concreto el brief, mejor el diseño. "Una barbería" da algo genérico. "Barbería de nicho para hombres profesionales, turno online, estética Linear oscura" da algo a medida.

Paso 1

Entrás a claude.ai/design

Paso 2

Iniciás sesión con tu cuenta Pro / Max / Team / Enterprise.

Paso 3

Copiás la plantilla de abajo y la pegás en el chat. Completás los campos con los datos de tu negocio o producto.

Paso 4

Claude te entrega la primera versión del diseño. Desde ahí refinás:

• Comentás directo sobre elementos específicos ("este botón más grande")
• Editás texto en vivo
• Ajustás color, espaciado y layout con sliders
• Pedís cambios más grandes conversando normal

Paso 5

Cuando esté listo, exportás. Cada formato sirve para algo distinto:

• Canva → cuando querés seguir editando lo visual a mano o se lo pasás al cliente para que lo toque
• PDF o PPTX → para presentaciones (pitch deck, propuesta)
• HTML standalone → cuando lo querés publicar directo, sin programar
• Handoff a Claude Code → cuando querés convertirlo en código real (React, Next.js) para una web de producción

Resultado

Plantilla

Actuá como un Principal Product Designer con 10 años de experiencia en producto digital,
mobile-first y conversion-focused. Tu tarea es diseñarme lo que te pido abajo con calidad
de estudio, design system propio, y listo para exportar.

---

## NEGOCIO / PRODUCTO

- Nombre: [ej: Premium Barber]
- Qué hace (una línea): [ej: barbería de nicho para hombres profesionales]
- Industria / Rubro: [ej: servicios / SaaS / ecommerce / restaurante / consultoría]
- Ubicación o mercado: [ej: Montevideo / LATAM → US / global online]

---

## CLIENTE IDEAL

- Quién es: [edad, contexto, ocupación]
- Qué problema tiene: [1-2 oraciones]
- Por qué te elegiría a vos y no a otro: [tu propuesta de valor en 1 línea]

---

## DIFERENCIAL

Listá 2-3 cosas que hacés distinto vs la competencia:
  1. [ej: Turno online sin esperar]
  2. [ej: Entrega en 48hs garantizada]
  3. [ej: Soporte directo por WhatsApp]

---

## TONO DE MARCA

- Personalidad (elegí una o dos): [aspiracional / cercana / técnica / juvenil / premium / disruptiva]
- Referencias visuales que te gustan (2-3 marcas): [ej: Linear, Stripe, Apple, Notion, Arc Browser]
- Lo que NO querés: [ej: gradientes pastel, emojis random, estética genérica de AI]

---

## QUÉ NECESITO QUE DISEÑES

Marcá una opción (o varias en orden de prioridad):
  - [ ] Landing page completa (hero + servicios/productos + pricing + FAQ + contacto)
  - [ ] App o Dashboard (login + home + 3-5 pantallas principales)
  - [ ] Pitch deck (10-12 slides para inversores o clientes)
  - [ ] Prototipo de producto (onboarding + pantallas core)
  - [ ] Marketing assets (posts, banners, one-pagers)
  - [ ] Rediseño de algo que ya existe (subí el screenshot o URL)

---

## CTA Y CONTACTO

- Qué querés que haga el visitante: [ej: me escriba por WhatsApp / agende una llamada / compre directo / se registre]
- Contacto: [WhatsApp, email o link]

---

## STACK (opcional, si vas a implementar después)

- [ej: Next.js + Tailwind + shadcn / no-code con Framer / solo HTML exportable / no sé todavía]

---

## CÓMO QUIERO QUE TRABAJEMOS

1. Primero proponeme 2 direcciones visuales distintas (paleta, tipografía, 1 componente de ejemplo). Elijo una y avanzamos.
2. Después armá el design system completo: colores, fuentes, spacing, componentes base.
3. Después entregá las pantallas / slides / assets en mobile y desktop.
4. Al final, empaquetá todo en un handoff bundle listo para Claude Code (si aplica).

Si algo no se puede hacer bien, decímelo y proponé alternativa. No asumas, preguntá.

Empezá por las 2 direcciones visuales.

Ejemplo completo (brief rellenado)

Así se ve la plantilla cargada para una barbería real. Copiá la estructura, cambiá los datos:

## NEGOCIO / PRODUCTO
- Nombre: Premium Barber
- Qué hace: barbería de nicho para hombres profesionales en zona céntrica
- Industria: servicios / belleza masculina
- Ubicación: Montevideo, Uruguay

## CLIENTE IDEAL
- Quién es: hombres 28-45, oficinistas y profesionales, ingreso medio-alto
- Qué problema tiene: no quiere esperar ni que lo atienda alguien distinto cada vez
- Por qué te elegiría: turno online fijo, siempre el mismo barbero, sin esperas

## DIFERENCIAL
  1. Turno online sin esperar
  2. El mismo profesional siempre
  3. Productos premium incluidos en el servicio

## TONO DE MARCA
- Personalidad: premium + cercana
- Referencias: Linear, Stripe, Aesop
- Lo que NO quiero: gradientes pastel, emojis, estética genérica de AI

## QUÉ NECESITO QUE DISEÑES
  - [x] Landing page completa

## CTA Y CONTACTO
- Qué quiero que haga el visitante: que reserve turno por WhatsApp
- Contacto: +598 99 555 123

Resultado: Claude propone dos direcciones (una oscura tipo Linear, una clara tipo Aesop). Elegís la oscura. Arma el design system (paleta negro/ocre, tipografía display + body, spacing), y entrega la landing en mobile y desktop con hero "Premium Barber — Turno sin esperas", servicios, diferencial y CTA a WhatsApp. Desde ahí refinás conversando.

Cómo saber si el diseño está bueno

Antes de exportar o mostrárselo a un cliente, chequeá estos 4 puntos. Si fallan, pedile el ajuste:

• Jerarquía clara → lo primero que ves es lo más importante (el título y el CTA), no todo al mismo peso • CTA visible → el botón de acción se ve sin scrollear y se destaca del resto • Coherencia de marca → colores y tipografía consistentes en toda la pieza, no cambia de personalidad sección a sección • Mobile primero → en el celular se ve igual de bien que en la compu, sin texto desbordado

Si dos direcciones visuales no te convencen, no avances: pedí dos nuevas con otra referencia ("ahora probá algo más editorial tipo revista").

Cómo cobrar esto

El cliente sigue percibiendo el valor de un estudio de diseño. Vos lo entregás en una tarde. Ese margen es el negocio.

Rangos referenciales para LATAM:

Script de pitch (negocios con web fea o desactualizada):

Hola [nombre], vi la web de [negocio]. Te puedo rediseñar la página con un diseño actual, nivel de las marcas grandes, y te lo muestro antes de que decidas. Sin compromiso. ¿Te paso una propuesta?

El gancho: el cliente piensa que un diseño así cuesta miles y semanas. Vos se lo entregás en una tarde y cobrás 600. El margen es tuyo.

Tu turno

Agarrá un negocio (el tuyo o uno conocido) y armá el brief completo como el ejemplo de Premium Barber. Pegalo en Claude Design y pedile las dos direcciones visuales.

Checklist:

• El brief tiene negocio, cliente ideal, diferencial y referencias cargados
• Claude entregó 2 direcciones visuales distintas
• Elegiste una y armó el design system
• La landing pasa los 4 puntos de "cómo saber si el diseño está bueno"
• Exportaste al formato correcto según para qué la querés

Siguiente paso

Cuando quieras código real de una landing que vende —nivel Apple/Stripe, lista para deployar— seguí con Cómo crear landing pages cinematográficas con Claude.

La mejor comunidad de IA

Esto no termina acá. En la comunidad compartimos lo que funciona de verdad: proyectos reales, precios que cierran y los nudos de llevar esto a clientes que pagan.

→ Sumate a la comunidad de WhatsApp 🚀