Claude Design te permite crear diseños, prototipos interactivos, presentaciones y más conversando con Claude. Esta guía te acompaña en la creación de tu primer proyecto, iteración de diseños y aprovechamiento máximo de la herramienta.
Claude Design ahora está disponible en beta para planes Pro, Max, Team y Enterprise. Esta capacidad está desactivada por defecto en planes Enterprise. Puedes usarla en la web en claude.ai/design o desde la barra lateral en Claude Desktop.
Esta guía asume que el sistema de diseño de tu organización ya ha sido configurado, por lo que todo lo que crees usará automáticamente los colores, tipografía y patrones de componentes de tu marca. Si eres un líder de diseño que necesita configurar o modificar el sistema de diseño en sí, consulta Configura tu sistema de diseño en Claude Design.
Cómo funciona Claude Design
Claude Design tiene dos áreas principales: una interfaz de chat a la izquierda y un lienzo a la derecha. Describes lo que quieres en el chat, y Claude genera un diseño funcional en el lienzo. Desde allí, iteras—refinando a través de conversación, comentarios en línea y directamente en el lienzo hasta que sea perfecto.
El flujo típico es:
Crea un proyecto.
Adjunta o importa el sistema de diseño con el que quieres que Claude construya.
Añade cualquier contexto relevante (capturas de pantalla, una base de código).
Describe lo que quieres construir.
Revisa lo que Claude genera en el lienzo.
Refina a través del chat, edita directamente en el lienzo o deja comentarios en línea.
Exporta o comparte cuando estés satisfecho con el resultado.
Muévete entre Claude Design y Claude Code
Puedes moverte entre trabajar en Claude Design y Claude Code manteniendo tu trabajo sincronizado. Usa /design-sync para incorporar tu sistema de diseño, de modo que todo lo que construyas en Claude Design comience desde tus componentes existentes. Cuando un diseño esté listo para convertirse en software, puedes entregarlo a Claude Code, que continúa desde tu trabajo existente en lugar de comenzar de nuevo desde una captura de pantalla.
Si prefieres trabajar desde Claude Code, conecta el servidor MCP de Claude Design para crear y editar diseños sin salir de tu terminal:
Añade el servidor:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Ejecuta /design-login para iniciar sesión.
Una vez conectado, puedes importar un diseño a tu base de código, exportar tu código como un prototipo en vivo, o dejar que Claude construya todo de principio a fin.
Crea un nuevo proyecto
Cuando creas un proyecto, hereda automáticamente el sistema de diseño de tu organización. No necesitas cargar activos de marca ni configurar nada—tus colores de marca, fuentes y componentes ya están en su lugar.
Adjunta o importa tu sistema de diseño
Incorpora uno o varios sistemas de diseño desde un repositorio de GitHub, archivos de diseño, cargas sin procesar o tu base de código local usando el comando /design-sync en Claude Code. Claude construye con tus componentes reales del sistema de diseño, verifica su propio resultado contra tu sistema de diseño y realiza correcciones antes de que los veas.
Para equipos más grandes, el rol personalizado de administrador de Claude Design permite que un administrador apruebe un sistema estándar y bloquee ediciones, de modo que el trabajo siempre coincida con las directrices de tu empresa.
Añade contexto a tu proyecto
Cuanto más contexto le des a Claude, mejor será tu resultado. Puedes adjuntar material de referencia en cualquier momento durante un proyecto.
Capturas de pantalla, imágenes o activos existentes: Carga capturas de pantalla de diseños existentes, productos de competidores, wireframes o inspiración visual. También puedes adjuntar una presentación de diapositivas existente o un documento con un estilo de diseño que quieras replicar. Útil para solicitudes de "hazlo parecer así".
Bases de código y archivos de diseño existentes: Vincula un repositorio de código para que Claude entienda tus componentes existentes, arquitectura y patrones de estilo. Esto hace que los prototipos sean más listos para producción desde el principio. La importación también admite múltiples formas de cargar trabajo de diseño de producto existente.
Escribe indicaciones efectivas
No necesitas ser diseñador para obtener excelentes resultados. Sé específico sobre qué estás construyendo, para quién es y qué es lo más importante.
Una buena indicación incluye el objetivo (qué estás construyendo), el diseño (cómo deben organizarse las cosas), el contenido (qué información mostrar) y la audiencia (quién lo usará). Claude también hará preguntas aclaratorias si necesita más información.
Aquí hay algunos ejemplos de indicaciones que funcionan bien:
"Crea un panel de control que muestre ingresos mensuales con filtros por región y línea de productos."
"Diseña un flujo de incorporación de aplicación móvil con 4 pantallas que guíe a los usuarios a través de nuestras características principales."
"Construye una página de destino para nuestro nuevo producto API con una sección de héroe, ejemplos de código y precios."
"Crea un formulario para recopilar comentarios de clientes con preguntas condicionales basadas en la categoría."
"Diseña una herramienta interna para que tu equipo de operaciones revise y apruebe envíos de contenido."
Refina tu diseño
La primera generación es un punto de partida. El valor real viene de iterar.
Usando chat
El chat es mejor para cambios amplios que afecten el diseño general:
"Haz que la paleta de colores sea más oscura y minimalista."
"Reorganiza el panel de control para que las métricas estén en la fila superior y el gráfico esté debajo."
"Añade un panel de configuración en el lado derecho."
"Muéstrame 2–3 diseños alternativos para esta página."
También puedes pedirle a Claude que explique sus decisiones de diseño, sugiera mejoras o revise el diseño para accesibilidad.
Usando comentarios en línea
Los comentarios en línea te permiten hacer clic directamente en una parte específica del lienzo y solicitar un cambio dirigido. Esto es más rápido que describir la ubicación en el chat.
Ejemplos de buenos comentarios en línea:
"Haz que el relleno de este botón sea más grande."
"Cambia esto a un menú desplegable en lugar de botones de radio."
"Usa el color de marca principal aquí."
"Haz que esta sección sea plegable."
Nota: Si tus comentarios no se están recogiendo, pega la retroalimentación directamente en el chat en su lugar. Esta es una solución alternativa conocida para un problema intermitente donde los comentarios pueden desaparecer antes de que Claude los lea.
Edita directamente en el lienzo
Usa controles de diseño enriquecido para cambios visuales y estéticos rápidos, específicamente para arrastrar, redimensionar y alinear elementos directamente.
Cuándo usar chat vs. comentarios vs. editar directamente
Usa comentarios para cambios dirigidos a nivel de componente ("arregla este botón", "ajusta este espaciado"). Usa chat para cambios estructurales, nuevas secciones o cualquier cosa que requiera explicación o contexto. Edita directamente para cambios visuales y estéticos rápidos.
Gestiona versiones y revisiones
Si quieres explorar una dirección diferente sin perder tu trabajo actual, dile a Claude: "Guarda lo que tenemos e intenta un enfoque completamente diferente." Claude guardará tu proyecto actual y confirmará dónde se guardó, para que puedas hacer referencia a iteraciones anteriores en la conversación fácilmente.
Exporta y comparte
Una vez que tu diseño esté listo, puedes compartirlo con colegas o exportarlo para usarlo en otro lugar. El formato correcto depende de tu caso de uso—ya sea que estés obteniendo comentarios de partes interesadas, entregando a ingeniería o presentando a un grupo.
Usa el botón "Exportar" en la esquina superior derecha al ver tu proyecto para elegir entre los siguientes formatos de exportación.
Descargar como .zip
Exportar como PDF
Exportar como PPTX
Enviar a Canva
Exportar como HTML independiente
Envía a las herramientas que ya usas, incluyendo Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel y Wix, con más destinos próximamente.
Entrega a Claude Code
Enviar al agente de codificación local
Enviar a Claude Code Web
También puedes compartir proyectos dentro de tu organización usando un enlace compartible. Las opciones de compartir incluyen acceso de solo lectura, comentario y edición.
Uso y precios
Claude Design cuenta hacia los mismos límites de uso que el resto de Claude. La actividad de diseño se extrae del grupo compartido que usas para chat, Claude Code y Cowork, por lo que no hay una asignación separada de Claude Design para rastrear. Los proyectos complejos con bases de código grandes o muchas iteraciones consumen más uso.
Si alcanzas tus límites de uso, Claude Design no estará disponible hasta que se reinicien tus límites. Si has habilitado créditos de uso, puedes seguir trabajando después de alcanzar tus límites incluidos. Obtén más información sobre cómo funcionan los límites de uso y longitud.
Nota: Claude Design anteriormente tenía su propia asignación semanal, separada de tus otros límites de uso. Toda la actividad de Claude Design ahora cuenta hacia los límites compartidos de tu plan.
Consejos para obtener los mejores resultados
Importa un sistema de diseño completo. Importa un sistema de diseño completo que incluya tus estilos, fuentes y componentes.
Comienza simple, luego añade complejidad. Comienza con el diseño y contenido principal, luego añade interacciones, casos extremos y pulido. Claude responde bien a solicitudes incrementales.
Sé específico en tu retroalimentación. "Esto no se ve bien" es difícil de actuar. "Reduce el espaciado entre campos de formulario a 8px" le da a Claude exactamente lo que necesita.
Haz referencia a tu sistema de diseño. Si sabes que existe un componente en el sistema de tu marca, menciona por nombre: "Usa el componente Botón Principal" o "Aplica el patrón de diseño Tarjeta".
Piensa en la capacidad de respuesta temprano. Menciona si tu diseño necesita funcionar en móvil, tableta y escritorio, o solo en uno de esos.
Pide variaciones. Si no estás seguro de una dirección, pídele a Claude que te muestre 2–3 opciones. Comparar alternativas es mucho más rápido que adivinar.
Pídele a Claude retroalimentación. Claude puede revisar tu diseño para accesibilidad, relaciones de contraste, jerarquía de información y usabilidad general. Trátalo como un colaborador de diseño, no solo como un generador.
Limitaciones conocidas
Claude Design ahora está disponible en beta. Hay algunas cosas a tener en cuenta:
Persistencia de comentarios: Los comentarios en línea ocasionalmente no aparecen en la página, pero aún puedes verlos abriendo la vista de comentarios.
Bases de código grandes: Considera vincular repositorios muy grandes desde Claude Code para evitar retrasos o problemas del navegador. Para sincronizar un sistema de diseño, usa
/design-syncdesde Claude Code.Errores de chat: Si encuentras un error "chat upstream", intenta iniciar una nueva pestaña de chat dentro del mismo proyecto.
Disponibilidad: Claude Design está disponible solo en web y escritorio.
Edición multiusuario: Dos o más personas editando un proyecto de diseño al mismo tiempo aún es básico y puede no funcionar de manera confiable.
Importación del sistema de diseño: La importación del sistema de diseño es tan buena como su fuente. Una base de código desordenada o un archivo incompleto se mostrará en el resultado.