Antes para diseñar con Claude tenías que instalar skills · abrir Claude Code y aprenderte comandos. Ya no. Ahora entrás a claude.ai/design · le hablás y te arma presentaciones · páginas web y apps clickeables sin salir del chat. Está incluido en Pro · Max · Team y Enterprise (research preview desde el 17 de abril 2026 · corre sobre Opus 4.7). Esta guía cubre qué es · las 3 cubetas que llena · los 4 modos de iterar inline · 9 prompts copy-paste de principiante a experto · cómo hacer el handoff a Claude Code en un click · y 7 reglas honestas para no romperte la primera semana · incluidos los comentarios inline que a veces fallan y el bug del chat de pestaña.
Mapa rápido · saltá a la cubeta que te interese
Cubeta 1 · lo que hace
Tres cubetas, un solo chat
Presentaciones · páginas web · apps clickeables. Le hablás y te lo arma. Sin cambiar de modo · sin abrir otra app.
Cubeta 2 · cómo ajustás
Lo tocás ahí mismo
Comentarios inline · edición directa · sliders custom · design system desde tu codebase. Cuatro formas de iterar sin re-promptear.
Cubeta 3 · a producción
Pásalo a Claude Code
Un click y Claude empaqueta el bundle con design intent (Next 16 · Tailwind v4 · shadcn). O exportás a PPTX · PDF · HTML · Canva.
Claude Design · Anthropic Labs · research preview
1 producto oficial · 3 cubetas de diseño · 4 modos de iterar inline · 9 prompts copy-paste · 5 formatos de export · 7 reglas para arrancar bien
Esta entrada destila Claude Design · el producto que Anthropic Labs lanzó el 17 de abril 2026 en claude.ai/design. Cubre la definición oficial (qué es · planes incluidos · estado research preview), las 3 cubetas que resuelve (presentaciones a PPTX · páginas web a HTML/handoff · apps clickeables con estados), los 4 modos de iteración inline que reemplazan re-promptear (comentarios estilo Figma · edición directa · sliders custom que vos pedís · design system automático desde tu codebase) + el Web Capture Tool como bonus, 9 prompts copy-paste en voseo Latam escalonados (3 principiante · 3 intermedio · 3 experto incluyendo el handoff bundle) y la sección de handoff a Claude Code con los 5 formatos de export · los 7 frameworks soportados · y la cita de Datadog. Cierra con 7 reglas honestas (chat con bug · sliders no aparecen por default · comentarios inline que fallan · subir codebase en la primera prompt · repos grandes que laggean · stack antes del handoff · y el límite real · no hay hosting · DB · auth · Stripe) más el prompt maestro para arrancar bien · y cross-links a 6 guías hermanas — hyperframes-claude-design (motion), open-design (local-first), 5-skills-diseno-claude (skills en Code), claude-code-setup (post-handoff), cual-plan-claude e instalar-claude-code.
01 qué es
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'. Vos describís lo que necesitás · Claude arma la primera versión · y después refinan juntos en el mismo chat. La interfaz es chat-izquierda · canvas-derecha · y todo lo que generás se mueve en vivo del lado derecho mientras vos seguís hablando del lado izquierdo.
Lo lanzaron el 17 de abril 2026 · vive en claude.ai/design (mismo login de tu cuenta Claude) · y está incluido en los planes Pro · Max · Team y Enterprise sin servicio aparte ni costo extra. Si tenés Enterprise · viene apagado por default · un admin lo activa desde Organization settings. Si es Pro o Max · lo activás vos desde el toggle de Anthropic Labs en tu perfil.
Por eso entiende tan bien capturas, Excels, PDFs y descripciones largas · y por eso las iteraciones se sienten naturales. Le podés subir tu codebase · tus archivos de Figma · screenshots de la competencia · y los procesa como contexto antes de generar nada. La visión es lo que diferencia esto de un generador de templates · es un par de ojos que mira lo que le mostrás.
Presentaciones (que exportás a PPTX para llevar a una junta) · páginas web (que exportás a HTML standalone o pasás a Claude Code) · apps clickeables (prototipos con estados que mandás a usuarios reales antes de programar). Es la primera herramienta de diseño con IA que cubre las 3 categorías sin obligarte a saltar entre apps · y sin pedirte que aprendas un editor visual nuevo.
No es Figma · no es Vercel · no es Lovable
Claude Design es upstream del código · vive antes de tu repo. No reemplaza Figma para diseño detallado de íconos vectoriales · no reemplaza Vercel para hosting · no reemplaza Lovable o Bolt para apps full-stack con backend (no tiene base de datos · no tiene auth · no tiene Stripe). Lo que sí hace · y nadie más hace igual · es cubrir las 3 cubetas (slides · web · apps clickeables) en un solo chat con iteración inline · y pasarte el bundle listo para Claude Code cuando ya está pulido. Pensalo como el primer 50 por ciento del flujo · el handoff cubre el 50 por ciento restante.
02 lo que hace
Todo lo que hace Claude Design cae en 3 cubetas · y las 3 viven en la misma conversación. No tenés que cambiar de modo · ni abrir otra app · ni saltar de pestaña. Vos elegís cuál cubeta vas a llenar hoy · y mañana arrancás otra desde el mismo chat.
Le tirás tu Excel · tu PPTX viejo o un DOCX con bullets y Claude te arma las slides solo · con su estructura visual · sus gráficas y su narrativa. Cuando ya te gustó · lo exportás a PowerPoint (PPTX) y lo llevás a tu junta. Sin plantillas manuales · sin pelearte con el master slide.
Ejemplos reales
Le mandás una captura de una página que te guste y te la arma donde le podés picar. Le tirás 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 en tu mockup.
Ejemplos reales
Describí el flujo (onboarding · carrito · perfil · lo que sea) y Claude te arma pantallas clickeables donde los botones disparan · los formularios validan · y los estados cambian. Las podés mandar a usuarios reales para hacer user testing antes de escribir una sola línea de código de producción.
Ejemplos reales
Y sí · también sirve para frontier stuff · voz · video · shaders WebGL · 3D · componentes con IA adentro. Si ya sos diseñador senior · ese es el terreno donde vas a sentir el salto más fuerte · porque resolvés en 5 minutos cosas que antes requerían sumar un developer para que escriba el demo.
03 cómo ajustás
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 4 formas de ajustar sin tener que re-describir todo desde cero.
Seleccionás un elemento (un botón · un párrafo · una imagen) y le dejás una nota encima. Claude la ve y ajusta solo ese elemento sin romper el resto. Cuidado · este es el modo que a veces falla (el cuadro de comentario no abre) · si te pasa · pegá la nota en el chat normal y andá igual.
Le picás a un texto y lo cambiás vos mismo en el lienzo · sin abrir otro editor · sin pedirle permiso a Claude · como editar en Google Docs. Útil para arreglar copy chico · cambiar un número en una slide · ajustar un CTA · sin gastar un turno de prompt.
Acá está la magia · Claude te genera sliders custom para tu diseño · para el radius · la sombra · el espaciado · la saturación del color. Los movés y los cambios se aplican al diseño completo · no a un solo elemento. Pero ojo · Claude no los pone por default · pedíselos explícitamente · ejemplo 'agregame sliders para radius, sombra y tono de acento'.
Si le das acceso a tu codebase o a tus archivos de diseño en la primera prompt · 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 · uno por cliente o por proyecto.
Bonus · Web Capture Tool
Dentro del chat podés invocar el web capture · le pasás 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 · porque Claude entiende qué pediste y respeta el resto del diseño.
04 prompts listos
Nueve prompts escalonados · todos en español Latam con voseo natural. Los de principiante vienen con todo el contexto a mano · copiá · pegá y ajustá los datos. Los intermedios ya asumen que tenés referencias visuales o un Excel para subir. Los de experto son para exprimir el design system · los sliders iterativos · y el handoff bundle a Claude Code.
Empezá acá si nunca diseñaste nada. Contexto alto · estructura completa · solo cambiás los datos.
Para cuando tenés los bullets pero no ganas de pelearte con slides. Claude te arma la estructura · el diseño y el tono de corrido.
Armame 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) - Mejor canal · Instagram Ads (38% de las ventas) - Producto estrella · 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. Cada slide con un número grande (el dato) y una oración de contexto debajo. En la última slide dejame un call-to-action claro para el equipo.
Para validar una idea o vender un taller sin contratar diseñador. Mínima fricción · resultado presentable.
Hacéme una landing page de una sola scroll para un taller online de "Automatizá tu negocio con Claude". Qué necesito: - Hero con título · subtítulo y botón grande de "Reservar mi lugar" - Sección "Qué vas a aprender" con 4 módulos - Sección "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 · mucho espacio en blanco · tipografía sans-serif · un solo color de acento (naranja). Todo en español Latam · tono cercano · nada corporativo.
Para cuando tenés una idea de app y querés enseñársela a alguien antes de invertir en desarrollo.
Diseñame el onboarding clickeable de una app móvil de finanzas personales llamada "Ahorrita". 4 pantallas: 1. Splash con el logo y "Empezá acá" 2. Conectá tu banco (lista de 5 bancos con logos) 3. Definí 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.
Ya usaste Claude Design un par de veces. Ahora le das referencias visuales o Excels y lo aprovechás mejor.
Cuando ya sabés qué querés y tenés una referencia viva. Usalo para clonar el feel sin copiar el contenido.
Agarrá el estilo visual de https://linear.app · su paleta oscura · su tipografía · sus gradientes sutiles · su densidad · y aplicalo 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 · founders de e-commerce en Latam. Respetá mi contenido pero el look and feel tiene que sentirse Linear. Hero · 3 features con iconos · social proof · pricing con 2 planes · FAQ.
Le subís 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. Armame 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 Vos decidís qué gráficas usar. Estilo · McKinsey · serio · con headlines accionables (no "Ventas por mes" sino "Septiembre fue 2x julio por Black Friday anticipado").
Para apps con estados y decisiones. Claude entiende las ramas condicionales y te las arma clickeables.
Diseñame 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 · 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 pico una taquería y llego al detalle · desde detalle agrego al carrito y abro checkout · desde checkout confirmo y veo el estado. Estilo · moderno · paleta rojo-blanco-crema · tipografía con carácter · fotos cuadradas con bordes redondeados.
Para llevarlo al límite · design systems · sliders iterativos · handoff bundle a Claude Code.
Cuando ya tenés un design system real y querés que Claude solo lo aplique · no invente paletas · fuentes ni espaciados.
Aplicá nuestro design system en cada componente que generes de acá 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 · incluí un panel al final con los tokens usados · para poder auditar consistencia.
Para maximizar el loop de iteración. Claude genera 3 direcciones y te pone sliders para afinar la que te guste.
Generame 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 elegí una · exponé sliders custom adentro del chat para que 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) Aplicá los cambios del slider en vivo a la página completa · no solo al hero.
El prompt de cierre · le pedís a Claude Design que empaquete todo para que Claude Code construya en tu repo real.
Empaquetá 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 tiene que 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 Preservá el design intent para que Claude Code entienda el por qué detrás de cada decisión · no solo el qué.
05 a producción
Acá es donde Claude Design deja de ser un juguete y se vuelve herramienta de trabajo real. Cuando el diseño ya te gustó · adentro del mismo chat le decís algo como 'pasalo a Claude Code' · y Claude empaqueta todo en un handoff bundle que 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
El dato de Brilliant que se cita en todos lados
El equipo de Brilliant le pasó a Anthropic el siguiente número · 'páginas complejas que requerían 20+ prompts en otras herramientas se resolvieron en 2 prompts con Claude Design'. Esto no se debe solo al modelo · se debe a la combinación de Opus 4.7 con visión · los sliders custom (que reemplazan 5-10 prompts por slider) · y el design system automático (que evita re-explicar la paleta en cada turno).
5 formatos de export · usá Claude Code o salí en otro formato sin instalar nada
Frameworks que el handoff bundle entiende mejor
El handoff bundle está optimizado para los frameworks que Claude Code conoce mejor · te alineás con uno de éstos para que el código que genera Claude Code después del handoff salga limpio a la primera.
React 19
Con clsx · cva o tailwind-variants para variants
Next.js 16 · App Router
Soporte nativo de Server Components
Vue 3
Class bindings y composition API
Svelte 5
Class directives y runes
Nuxt 3 · Astro
Frameworks meta del lado de Vue / multi-framework
Tailwind CSS v4
Default · soporte completo de los tokens del bundle
shadcn/ui
Default · los componentes que Claude Code conoce mejor
06 para arrancar bien
Claude Design es nuevo · y como todo producto en research preview tiene gotchas reales que el anuncio oficial no menciona. Estas 7 reglas las saqué de usar el producto durante el primer mes de rollout · del foro de la comunidad y del support article oficial. Aplicalas desde el primer día y te ahorrás la frustración del comentario inline que no abre · el chat que se traba · y el handoff que sale flojo porque no le dijiste tu stack.
Es el bug conocido más común · de la nada el chat se pone gris · no responde · o te tira un error rojo. No insistas refrescando la pestaña · ahí sí perdés el contexto. Lo que hacés es abrir el mismo proyecto en una pestaña nueva (claude.ai/design · entrás a tu proyecto reciente) y seguís donde estabas. El estado del canvas se preserva del lado del server · vos solo perdés el último mensaje sin enviar.
El handoff bundle se arma sobre la base del stack que Claude infirió durante la conversación. Si vos no le dijiste 'Next 16 + Tailwind v4 + shadcn' en algún momento · te va a empaquetar HTML/CSS genérico que Claude Code después tiene que traducir. Resultado · el handoff toma 2x más turnos. Tirale el stack en la primera prompt (ejemplo · 'mi stack destino es...') · y el bundle sale alineado a la primera.
Bug oficialmente reportado en el support article · seleccionás un elemento · el cuadro de comentario no aparece. No te volvás loco buscando el botón · no existe workaround del lado del UI. Lo que sí funciona · copiá la descripción del cambio en el chat normal con un 'aplicame esto al [elemento X · ejemplo · el botón del hero]'. Claude lo aplica igual · solo perdés la asociación visual del comentario al elemento.
El design system automático solo se activa si Claude ve tus archivos al inicio de la sesión · cuando arranca a inferir patrones. Si subís el codebase en el turno 5 · ya generó 4 versiones con paleta arbitraria · y la inferencia sale con ruido. Hacelo así · arrancás un proyecto nuevo · subís los archivos (Figma · screenshots · package.json · CSS de tu app) · y RECIÉN ahí describís lo que querés diseñar.
Para monorepos de más de 10 mil archivos · el escaneo inicial se traba o tarda 5+ minutos. La solución es selectiva · subí solo el subdirectorio que importa para este diseño (ejemplo · packages/web · no todo el monorepo) y los archivos clave del root (package.json · tailwind.config.ts · el design tokens si existe). Claude infiere igual de bien · y arrancás en 30 segundos en lugar de esperar el timeout.
Los sliders son la feature que más diferencia a Claude Design del resto · pero solo aparecen si los pedís por nombre. La primera vez que arranques un diseño · agregá al final del prompt 'agregame sliders custom para [radius · espaciado · saturación de color · ritmo vertical]'. Después de eso · vivís en el slider · evitás 10 prompts de tweaking. Si no los pedís · Claude te entrega la V1 sin sliders y los siguientes ajustes salen por chat (mucho más lento).
El error más caro · arrancar a diseñar pensando que Claude Design es Lovable o Bolt. No lo es. No tiene base de datos · no tiene autenticación · no tiene integración con Stripe · no te hostea nada. Es el primer 50 por ciento del flujo · diseño visual + handoff. Para el otro 50 por ciento (backend · DB · auth · deploy) usás Claude Code (para construir en tu repo) o Lovable (si querés el full-stack en una herramienta sola). Confundir esto te lleva a pedirle a Claude Design cosas que no puede hacer y a frustrarte sin razón.
Prompt maestro para arrancar bien con Claude Design
Pegá esto tal cual en tu primer mensaje cuando arranques un proyecto nuevo · activa design system · pide sliders · alinea el stack para el handoff · y previene los gotchas conocidos: Voy a diseñar [presentación / landing / app] de [tema en 1 frase]. Mi stack destino es Next.js 16 + Tailwind v4 + shadcn/ui + TypeScript strict. Adjunto · [codebase / Figma / capturas de referencia / Excel con datos]. Antes de generar nada: 1. Leé mis archivos y armá un design system con mi paleta, tipografía y componentes existentes 2. Confirmame qué entendiste en 3 bullets cortos 3. Después generá la V1 con 3 sliders custom para [radius, espaciado, tono de acento] Tono · español Latam · voseo natural · nada corporativo.
Guía de la comunidad
Esta entrada destila Claude Design · el producto de Anthropic Labs lanzado el 17 de abril 2026 en claude.ai/design. Es parte de la bóveda de tododeia, una colección libre de recursos para quienes construyen con Claude todos los días.
Cierre personal
“Si ya construiste algo con Claude Code · esta es la pieza que te faltaba antes del código · el diseño visual sin abrir Figma · sin contratar diseñador y sin pelearte con un editor. Claude Design no reemplaza a Figma para iconos vectoriales ni a Vercel para hosting · pero cubre el 50 por ciento del flujo que antes te costaba más horas que la programación misma. Y el handoff a Code es lo que cierra el círculo · diseñás en el navegador · pasás el bundle a tu repo · y Claude Code lo construye sobre tu stack real. Esa es la diferencia entre un generador de mockups y una herramienta de trabajo · y la razón por la que esta guía vale la pena.”
Anuncio oficial · Anthropic Labs
El blog post del 17 de abril 2026 donde Anthropic anuncia Claude Design · qué cubetas resuelve · las 3 features clave (sliders · design system · handoff) y los testimonios de Brilliant y Datadog. Fuente primaria de esta guía.
Support article · Get started with Claude Design
Documentación oficial · cómo entrar · cómo crear un proyecto · cómo invocar el web capture · troubleshooting de los bugs más comunes (chat error · comentarios inline). Imprescindible si te topás con un error.
Entrar a Claude Design · claude.ai/design
La URL directa del producto · entrás con tu cuenta de Claude (mismo login que claude.ai). Si te aparece la pantalla de waitlist · tu plan no tiene el feature todavía · revisá el toggle de Anthropic Labs en tu perfil.
Claude Code Quickstart · code.claude.com
Docs oficiales de Claude Code · la herramienta que recibe el handoff bundle del lado de producción. Si nunca instalaste Claude Code · pasá por acá antes del Paso 5 de esta guía.
Guías hermanas que cruzan con claude-design
Hyperframes + Claude Design · motion graphics
Para cuando ya armaste la página en Claude Design y querés convertirla en video animado (MP4 · WebM con alpha) sin abrir Premiere ni After Effects. Es la guía hermana especializada en motion.
Open Design · alternativa local-first sin cuenta Pro
Si preferís correr todo en tu compu · sin depender de claude.ai · y sin cuenta Pro · Open Design es el alternativo open-source. Útil cuando trabajás en industrias reguladas donde no podés subir archivos a un servicio externo.
5 skills de diseño dentro de Claude Code
Las 5 skills de @AlchainHust V2.0 que meten 7 capacidades de diseño adentro de Claude Code (prototipos iPhone · slide decks editables · motion · infografías print). Cuando ya estás en terminal y no querés salir al navegador a usar claude.ai/design.
Claude Code Setup · el plugin que escanea tu proyecto
Después del handoff de Claude Design · cuando ya estás en Claude Code adentro de tu repo · este plugin oficial te recomienda qué hooks · skills y MCPs te suman para que el código del handoff arranque bien configurado.
Cuál plan de Claude necesitás
Claude Design viene en Pro · Max · Team y Enterprise · pero hay features que solo aparecen en planes más altos (ejemplo · proyectos con más contexto · Team-wide design systems). Esta guía te ayuda a decidir si te conviene upgradear.
Instalar Claude Code · el paso 0 del handoff
Para que el botón 'Pasalo a Claude Code' funcione · necesitás tener Claude Code instalado y configurado en tu máquina. Esta guía te lleva paso a paso · cualquiera de los 2 caminos (app de escritorio o terminal).
Por dónde empezar si llegaste sin saber qué es Claude Design
Por dónde empezar si llegaste sin saber qué es Claude Design · (1) entrá a claude.ai/design con tu cuenta Pro · Max · Team o Enterprise · si no tenés cuenta Claude · creala gratis y subí a Pro (es el plan más barato que incluye Design), (2) leé las 3 cubetas del Paso 02 y elegí una para hoy · presentación si tenés una junta esta semana · landing si querés validar una idea · app clickeable si querés mostrar un flujo, (3) copiá el prompt principiante que corresponde a tu cubeta del Paso 04 y pegalo · adaptando los datos a los tuyos, (4) cuando ya tengas la V1 · usá el Paso 03 para iterar inline · pedí los sliders explícitamente, (5) si vas a producción · seguí al Paso 05 y leé las 7 reglas del Paso 06 ANTES de pedir el handoff. No intentes las 3 cubetas el primer día · dominar una te da la intuición para las otras dos.
Para quién no aplica esta página
Para quién no aplica esta página · usuarios con plan Free (Claude Design solo está en Pro · Max · Team y Enterprise · el toggle no aparece en Free). Equipos en industrias reguladas donde no podés subir tu codebase ni archivos de diseño a un servicio externo · andá a /community/open-design por la alternativa local-first. Diseñadores que necesitan control pixel-perfect sobre iconos vectoriales y tipografía custom · seguí con Figma · Claude Design no reemplaza eso. Y si lo que querés es un constructor full-stack con backend · DB · auth y deploy en una sola herramienta · esto NO es eso · andá a Lovable o Bolt · Claude Design es upstream · diseño + handoff al código.