01 Qué es y dónde está
Claude Design es la herramienta de diseño de Anthropic: describes lo que necesitas y Claude genera el diseño en un lienzo junto al chat, donde puedes comentarlo, moverlo y editarlo. Sirve para prototipos y maquetas de interfaz, landings de una página, microsites y piezas para presentaciones. Las presentaciones tienen además su herramienta propia, Claude Slides.
Empezó como una web independiente en claude.ai/design, pero ahora está integrado en Claude. Según el centro de ayuda, la versión independiente cierra el 14 de diciembre de 2026, así que si tienes proyectos o sistemas de diseño allí, migra antes de esa fecha.
| Dónde | Cómo se abre |
|---|---|
| Conversación en Claude | Pide un diseño o elige Output y después Design en el cuadro de mensaje |
| Pestaña Artifacts | Empieza desde una plantilla Design |
| Claude Code | Ejecuta /design seguido de una descripción, en el escritorio o en la terminal |
| Apps de iOS y Android | Pide el diseño en una conversación y ábrelo a pantalla completa en Artifacts; la configuración de compartir solo está en web y escritorio |
02 Tu primer diseño
-
1
Elige el punto de partida
Una conversación o una plantilla Design en Artifacts.
-
2
Aplica tu sistema de diseño
Si tu organización tiene uno, se hereda automáticamente. Si no, adjunta el logo, colores y tipografías.
-
3
Da contexto
Capturas de lo que ya tienes, referencias que te gusten o, en Claude Code, el propio código del proyecto.
-
4
Describe el encargo
Objetivo, público, contenido real y estructura deseada. Cuanto más concreto, menos iteraciones.
-
5
Refina y exporta
Ajusta en el lienzo, revisa y exporta o comparte.
Diseña una landing de una sola página para [servicio] dirigida a [tipo de cliente] en España. Objetivo único: que pidan [una llamada / un presupuesto]. Antes de diseñar, propón en texto la estructura de secciones y espera mi visto bueno.
Contenido que sí tengo: [propuesta de valor, tres beneficios, dos testimonios reales, precios si los hay]. No inventes cifras, logos de clientes ni testimonios; deja huecos marcados donde falte material.
Estilo: [colores, tipografía, referencias]. Prioriza legibilidad en móvil, un único botón de acción repetido y jerarquía clara.
Cuando tengas la primera versión, dime en tres líneas qué decisiones tomaste y qué debería revisar primero.Crea un prototipo navegable de [funcionalidad] para [aplicación]. Incluye estas pantallas: [lista]. Usa los componentes de nuestro sistema de diseño. Muestra estados vacíos, de carga y de error, y textos reales en español de España en lugar de texto de relleno. Después dime qué flujos o casos límite no he contemplado.03 Editar en el lienzo
Volver a pedir el diseño entero por cada cambio pequeño gasta uso y puede romper lo que ya estaba bien. Usa el chat para cambios estructurales y el lienzo para el resto:
Comentarios en línea
Haz clic en un elemento y escribe el cambio concreto. Si no se recoge, pega el comentario en el chat.
Edición directa
Arrastra, redimensiona y alinea elementos con el ratón o el trackpad.
Texto
Pulsa Retorno sobre una capa de texto para editarla y Escape o Tab para terminar.
Cambios globales
Cuando un ajuste te convenza, pide en el chat que se aplique igual en todas las pantallas o secciones.
04 Que respete tu marca: sistemas de diseño
Sin sistema de diseño, el resultado funciona pero es genérico. Con uno, Claude comprueba su propuesta contra tus colores, tipografías y componentes antes de enseñártela. Se puede importar desde un repositorio de GitHub, archivos de diseño, documentos subidos o tu código local. Una organización puede tener varios.
Si tu marca vive en un sistema de componentes React, Claude Code tiene dos comandos: /design-login autoriza el acceso con tu cuenta de claude.ai y /design-sync convierte y sube los componentes para que los diseños usen tus piezas reales. En repositorios grandes, la primera sincronización puede tardar horas.
/design-login
/design-sync Mi Sistema de Diseño05 Exportar, compartir y pasar a código
- ✓Exportar desde el botón Export: .zip, PDF, PPTX, Google Slides o HTML independiente.
- ✓Enviar a herramientas como Canva, Gamma, Miro, HubSpot, Vercel, Netlify, Wix o Lovable, entre otras.
- ✓Compartir: los diseños son privados por defecto; con Share eliges quién puede verlos, comentarlos o editarlos.
- ✓Pasar a Claude Code: envía el diseño a tu agente local o a Claude Code en la web para implementarlo en tu proyecto.
Te paso el diseño aprobado de [pantalla o página]. Impleméntalo en este proyecto reutilizando los componentes y estilos que ya existen; si falta alguno, créalo siguiendo las convenciones del código. Mantén los textos en el sistema de traducciones del proyecto. Antes de empezar, dime qué componentes vas a reutilizar y cuáles vas a crear.Preguntas frecuentes
No del todo. Es muy rápido para pasar de una idea a una propuesta editable y para prototipos, pero para trabajo de detalle en equipo o identidad visual compleja seguirás necesitando herramientas especializadas.
Siguen allí hasta el cierre de la versión independiente, previsto para el 14 de diciembre de 2026. Migra antes tus sistemas de diseño a Claude.
Sí, según el centro de ayuda está disponible en todos los planes, aunque con los límites de uso de cada uno.
Prepara bien el primer encargo, ajusta en el lienzo en lugar de regenerar y, si trabajas con un repositorio grande, sincroniza el sistema de diseño con /design-sync en lugar de adjuntar todo el código.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.