Claude Design — Del Chat a Producción
Antes tenías que instalar skills, abrir Claude Code y aprender comandos. Ya no. Ahora abres claude.ai/design — le hablas y te arma presentaciones, páginas web y apps clickeables sin salir del chat. Cuando ya te gustó, le dices que lo pase a Claude Code y te genera el código de producción.
Fuentes oficiales
Esta guía está construida a partir del anuncio oficial de Anthropic Labs y del acceso directo al producto. Está incluido en los planes Pro, Max, Team y Enterprise.
01 el cambio
Antes instalabas skills. Ya no.
Hasta hace poco, si querías que Claude te diseñara algo, tenías que instalar una skill, abrir Claude Code desde la terminal, aprenderte comandos y rezar que el prompt jalara. Mucho setup antes de ver el primer pixel.
Con Claude Design eso se acabó. Abres claude.ai/design en el navegador, le escribes qué quieres y Claude te arma la primera versión — presentación, página web o app clickeable — en el mismo chat. Sin instalar nada. Sin terminal. Sin comandos.
¿Por qué importa?
No es solo para diseñadores. Founders, PMs, marketing, ventas — todos los que nunca tocaron Figma pueden armar un prototipo presentable en minutos. Y los diseñadores senior que ya saben lo que hacen, bajan de 20+ prompts a 2 prompts (caso reportado por Brilliant al equipo de Anthropic).
En esta guía te explico qué es, qué puede hacer, cómo ajustar el diseño sin salir del chat, prompts listos para copiar (de principiante a experto) y cómo llevar el diseño a código de producción con Claude Code.
02 qué es
El diseñador visual de Anthropic
Claude Design es un producto nuevo de Anthropic Labs — literalmente la definición oficial es: "un entorno colaborativo para crear trabajo visual pulido como diseños, prototipos, slides, one-pagers y más". Tú describes lo que necesitas, Claude arma la primera versión y después refinan juntos en el chat.
Dónde entras
claude.ai/design
Directo desde el navegador. Mismo login de tu cuenta Claude.
Planes incluidos
Pro · Max · Team · Enterprise
Sin servicio aparte. Entra en los límites de tu plan actual.
Estado actual — research preview
Rollout gradual desde el 17 de abril 2026. Si tienes cuenta Enterprise, viene apagado por default — un admin debe activarlo en Organization settings. Si es tu cuenta personal (Pro/Max), lo activas tú desde el toggle de Anthropic Labs en tu perfil.
Por dentro corre sobre Claude Opus 4.7, el modelo más capaz con visión de Anthropic. Por eso entiende tan bien capturas, Excels y descripciones largas — y por eso las iteraciones se sienten tan naturales.
03 lo que hace
Tres cosas, un solo chat
Todo lo que hace Claude Design cae en tres cubetas — y todas viven en la misma conversación. No tienes que cambiar de modo, ni abrir otra app, ni saltar de pestaña.
Del Excel a las slides, sin dolor
Le avientas tu Excel, tu PPTX viejo o un DOCX con bullets y Claude te arma las slides solito — con su estructura visual, sus gráficas y su narrativa. Cuando ya te gustó, lo exportas a PowerPoint (PPTX) y lo llevas a tu junta. Sin plantillas manuales, sin pelearte con el Keynote.
Ejemplos reales
- Resultados trimestrales a partir de una hoja de Excel
- Pitch deck para levantar capital desde un brief en DOCX
- One-pager ejecutivo desde tres bullets de notas
Clona, inspira, construye
Le mandas una captura de una página que te guste y te la arma donde le puedes picar. Le avientas el link de tu competencia y te copia el estilo — tipografía, paleta, espaciados — sin violar derechos (porque el output es código tuyo). Con el Web Capture Tool puede agarrar elementos vivos de sitios reales y combinarlos.
Ejemplos reales
- Landing para tu taller desde foto de una landing que te inspiró
- Página de ventas agarrando el estilo de un competidor
- Sitio de portfolio combinando 3 referencias visuales
Prototipos clickeables, no mockups muertos
Describe el flujo — onboarding, carrito, perfil, lo que sea — y Claude te arma pantallas clickeables donde los botones jalan, los formularios validan y los estados cambian. Las puedes mandar a usuarios reales para probar antes de escribir una sola línea de código.
Ejemplos reales
- Onboarding de 4 pantallas de una app de fitness
- Carrito + checkout de una e-commerce B2B
- Dashboard de métricas con filtros y drill-down
Y sí — también sirve para frontier stuff (voz, video, shaders, 3D, componentes con IA adentro). Si ya eres diseñador senior, ese es el terreno donde vas a sentir el salto más fuerte.
04 cómo ajustar
Lo tocas ahí mismo
La parte fea del diseño con IA siempre fue iterar: escribías un prompt de 200 palabras, esperabas, el resultado no era lo que querías, y a escribir otro prompt igual de largo. Claude Design rompe ese loop con cuatro formas de ajustar sin tener que re-describir todo.
Comentarios inline
Seleccionas un elemento (un botón, un párrafo, una imagen) y le dejas una nota encima — tipo Figma. Claude la ve y ajusta solo ese elemento sin romper el resto.
Edición directa de texto
Le picas a un texto y lo cambias tú mismo en el lienzo. Sin abrir otro editor, sin pedir permiso — como editar en Google Docs.
Sliders que Claude crea en vivo
Aquí está la magia: Claude te genera sliders custom para tu diseño — para radius, para shadow, para espaciado, para saturación de color. Los mueves y los cambios se aplican al diseño completo, no a un solo elemento. Así iteras sin tener que escribir un prompt por cada tweak.
Design system automático
Si le das acceso a tu codebase o a tus archivos de diseño, Claude lee tu paleta, tu tipografía, tus componentes shadcn/Tailwind — y los aplica automáticamente en todo lo que te arme de ahí en adelante. Un equipo puede mantener varios design systems en paralelo.
Bonus — Web Capture Tool
Dentro del chat puedes invocar el web capture: le pasas una URL viva y agarra elementos concretos (un header, un card, una sección de pricing) para reutilizarlos como referencia visual. Mucho más fino que subir un screenshot completo.
05 prompts listos
De principiante a experto
Nueve prompts escalonados, todos en español. Los de principiante vienen con todo el contexto a mano — copia, pega y ajusta los datos. Los intermedios ya asumen que tienes referencias visuales. Los de experto son para exprimir el design system, los sliders iterativos y el handoff a Claude Code.
Principiante
Empieza aquí si nunca has diseñado nada. Contexto alto, estructura completa.
Tu primera presentación
Para cuando tienes los bullets pero no ganas de pelearte con slides. Claude te arma la estructura, el diseño y el tono de corrido.
Arma una presentación de 6 slides para mi junta del viernes sobre resultados del Q1. Datos que tengo: - Vendimos 2.3 millones (vs. 1.8M el trimestre pasado) - Nuestro mejor canal fue Instagram Ads (38% de las ventas) - El producto estrella fue el curso de ventas (650 unidades) - Cerramos 3 clientes enterprise nuevos - Meta para Q2: llegar a 3.5M Estilo: clean, profesional, paleta oscura con acento turquesa. Que cada slide tenga un número grande (el dato) y una oración de contexto debajo. En la última slide déjame un call-to-action pa’ el equipo.
Tu primera landing page
Para validar una idea o vender un taller sin tener que contratar un diseñador. Mínima fricción, resultado presentable.
Hazme una landing page de una sola scroll para un taller online de "Automatiza tu negocio con Claude". Qué necesito: - Hero con título, subtítulo y botón grande de "Reservar mi lugar" - Sección de "Qué vas a aprender" con 4 módulos - Sección de "Para quién es" con 3 perfiles (freelancer, founder, marketer) - Sección de testimonios con 3 frases cortas - FAQ con 5 preguntas - CTA final con countdown Estilo: moderno, con mucho espacio en blanco, tipografía sans-serif, un solo color de acento (naranja). Todo en español latinoamericano, tono cercano, nada corporativo.
Tu primer onboarding de app
Para cuando tienes una idea de app y quieres enseñársela a alguien antes de invertir en desarrollo.
Diseña el onboarding clickeable de una app móvil de finanzas personales llamada "Ahorrita". 4 pantallas: 1. Splash con el logo y "Empieza aquí" 2. Conecta tu banco (lista de 5 bancos con logos) 3. Define tu meta de ahorro (slider de $500 a $10,000 al mes) 4. Listo — dashboard con saldo, meta y próximo paso Estilo: friendly, paleta verde menta, ilustraciones simples tipo Duolingo, tipografía redonda. Que los botones se sientan clickeables de verdad — con hover states y microanimaciones visibles.
Intermedio
Ya usaste Claude Design un par de veces. Ahora le das referencias y lo aprovechas mejor.
Style transfer desde competencia
Cuando ya sabes qué quieres y tienes una referencia viva. Úsalo para clonar el feel sin copiar el contenido.
Agarra el estilo visual de https://linear.app — su paleta oscura, su tipografía, sus gradientes sutiles, su densidad — y aplícalo a una landing para mi SaaS que se llama "Reportes Claude". El producto genera reportes ejecutivos automáticos desde datos de Stripe, Shopify y Google Analytics. Público objetivo: founders de e-commerce en Latam. Respeta mi contenido pero el look y feel debe sentirse Linear. Hero, 3 features con iconos, social proof, pricing con 2 planes, FAQ.
Excel a presentación ejecutiva
Le subes el Excel crudo y Claude identifica la narrativa, las gráficas que valen la pena y arma la story.
Te adjunto mi Excel de ventas 2026. Tiene 12 hojas — una por mes — con columnas: fecha, producto, canal, ticket, margen. Arma una presentación de 10 slides que cuente la historia del año: - Slide 1: Portada - Slide 2-3: Resumen ejecutivo (3 números que importan) - Slide 4-6: Tendencia mensual (una gráfica por vista clave) - Slide 7-8: Canal ganador y canal a apagar - Slide 9: Producto insignia vs resto del catálogo - Slide 10: 3 apuestas para 2027 Tú decides qué gráficas usar. Estilo: McKinsey — serio, con headlines accionables (no "Ventas por mes" sino "Septiembre fue 2x julio por Black Friday anticipado").
Flujo multi-pantalla con lógica
Para apps con estados y decisiones. Claude entiende las ramas condicionales y te las arma clickeables.
Diseña el flujo de 4 pantallas de una app de delivery enfocada en taquerías locales. Flujo: 1. Home con mapa + lista de taquerías cercanas (tarjeta por taquería con rating, tiempo estimado y rango de precio) 2. Detalle de taquería → menú con categorías (tacos, tortas, bebidas) y botón flotante "Ver carrito ($X)" 3. Checkout → dirección, método de pago, propina (0/10/15/custom) 4. Estado del pedido en vivo con 4 fases (recibido → preparando → en camino → entregado) Cada pantalla clickeable: desde home puedo picar una taquería y llegar al detalle; desde detalle puedo agregar al carrito y abrir checkout; desde checkout puedo confirmar y ver el estado. Estilo: moderno, paleta rojo-blanco-crema, tipografía con carácter, fotos cuadradas con bordes redondeados.
Experto
Para llevarlo al límite — design systems, sliders iterativos, handoff a código.
Aplicar nuestro design system
Cuando ya tienes un design system real y quieres que Claude solo lo aplique — no invente paletas, fuentes ni espaciados.
Aplica nuestro design system en cada componente que generes de aquí en adelante. No inventes colores, tipografías ni espaciados fuera de él. Referencia del design system: - Color primario: #0ea5e9 (sky-500). Primary-hover: #0284c7. - Neutros: zinc-950 a zinc-50 (escala de Tailwind). - Tipografía: Geist Sans para UI, Geist Mono para código. Pesos 400, 500 y 600. - Espaciado: solo la escala default de Tailwind. - Radios: 12px base, 8px para controles chicos, 20px para tarjetas. - Sombras: shadow-sm en elementos en reposo, shadow-lg solo en modales. - Componentes: primitivas de shadcn/ui. Nunca uses inputs HTML crudos. En cada diseño que generes, incluye un panel al final con los tokens usados, pa' poder auditar consistencia.
Variantes + sliders iterativos
Para maximizar el loop de iteración. Claude genera 3 direcciones y te pone sliders para afinar la que te guste.
Genera 3 variantes distintas de una página de pricing para un SaaS B2B (tiers Starter / Pro / Enterprise). Variante A: minimalista, mucho espacio en blanco, un solo color de acento. Variante B: bento-grid, cada tier con su color, tono lúdico. Variante C: editorial denso, formato largo con tabla comparativa. Después — cuando ya haya escogido una — expón sliders custom dentro del chat para que yo pueda afinar estas dimensiones en la variante elegida sin tener que re-promptear: - Radio de las tarjetas (0–32px) - Ritmo vertical / multiplicador de espaciado de secciones (0.8–1.6x) - Tono del color de acento (0–360°) - Profundidad de la sombra (plana → elevada) - Densidad del copy (corto → detallado) Aplica los cambios del slider en vivo a la página completa, no solo al hero.
Handoff bundle pa' Claude Code
El prompt de cierre — le pides a Claude Design que empaquete todo para que Claude Code construya en tu repo real.
Empaqueta este diseño para handoff a Claude Code. Necesito un bundle listo para producción, no solo capturas de pantalla. Stack destino: - Next.js 16 (App Router) - React 19 - TypeScript (strict) - Tailwind CSS v4 - Componentes de shadcn/ui El bundle debe incluir: 1. Árbol de componentes con rutas de archivo correctas (app/, components/ui/, components/feature/) 2. Todos los design tokens como CSS custom properties mapeadas al theme de Tailwind 3. Breakpoints responsivos (mobile first — sm/md/lg/xl) 4. Notas de accesibilidad (roles ARIA, navegación con teclado, focus states) 5. Contenido como strings listos para i18n (español default, inglés como fallback) 6. Dependencias mínimas — nada de librerías de UI extras 7. Un handoff.md que resuma el design intent, los estados de interacción y los TODOs para ingeniería Preserva el design intent para que Claude Code entienda el por qué detrás de cada decisión, no solo el qué.
06 a producción
“Pásalo a Claude Code”
Aquí es donde Claude Design deja de ser un juguete y se vuelve herramienta de trabajo real. Cuando el diseño ya te gustó, en el mismo chat le dices algo como "pásalo a Claude Code" — y Claude empaqueta todo en un handoff bundle.
El bundle no es solo código suelto. Incluye el design intent — el "por qué" detrás de cada decisión — para que Claude Code no reinterprete cosas y el resultado en tu repo real se sienta exactamente como lo diseñaste.
"Lo que antes tardaba una semana de ida y vuelta entre diseño e ingeniería, ahora pasa en una sola conversación."
— Aneesh Kethini, Product Manager, Datadog
Formatos de export disponibles
Si no vas a producción con Claude Code, puedes sacar el diseño en cualquiera de estos formatos sin instalar nada extra:
Tip pa' que el handoff salga bien a la primera
Antes de pedir el handoff, dile a Claude tu stack exacto (Next 16, Tailwind v4, shadcn/ui, TypeScript strict, etc.) y si tienes un design system ya montado. Mientras más explícito, menos iteración en la parte de código.
07 cierre
De la idea al prototipo en una conversación
"Antes pa' diseñar algo con Claude, instalabas habilidades, abrías Claude Code, aprendías comandos. Ya no. Ahora abres claude.ai/design — le hablas y te lo arma."
Esa es la tesis. Y es la primera vez que una herramienta de diseño con IA cubre las tres cubetas importantes — presentaciones, páginas web y apps— en un solo chat, con iteración en vivo, con design system y con camino claro a producción. Todo incluido en tu plan de Claude, sin servicio aparte.
Si eres founder, PM o marketing: esto te quita la dependencia del equipo de diseño para validar ideas. Si eres diseñador senior: es la primera herramienta que de verdad se siente como un compañero que entiende intención, no como un generador que escupe variantes.
Tu siguiente paso
Entra a claude.ai/design ahora mismo y escoge una sola cosa — presentación, página web o app. No intentes las tres hoy. Dominar el flujo en una categoría te da la intuición para las otras dos.