Claude Design de Anthropic Labs 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 de Anthropic Labs ahora está disponible en vista previa de investigación para planes Pro, Max, Team y Enterprise. Esta capacidad está desactivada por defecto para planes Enterprise.
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 utilizará 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 y comentarios en línea hasta que sea perfecto.
El flujo típico es:
Crea un proyecto y 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.
Itera usando mensajes de chat y comentarios en línea.
Exporta o comparte cuando estés satisfecho con el resultado.
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.
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 documento con un estilo de diseño que quieras replicar. Útil para solicitudes de "hazlo verse 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 inicio. 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 estar organizadas 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 categoría."
"Diseña una herramienta interna para que nuestro equipo de operaciones revise y apruebe envíos de contenido."
Itera en 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 conocida para un problema intermitente donde los comentarios pueden desaparecer antes de que Claude los lea.
Cuándo usar chat vs. comentarios
Usa comentarios para cambios dirigidos a nivel de componente ("arregla este botón", "ajusta este espaciado"). Usa chat para cambios estructurales, nuevas secciones, cambios estéticos, o cualquier cosa que requiera explicación o contexto.
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 está guardado, para que puedas referenciar 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 retroalimentación 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
Entrega a Claude Code
Enviar a 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 de suscripción y precios
Consulta aquí para más detalles: Uso de suscripción y precios de Claude Design.
Consejos para obtener los mejores resultados
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.
Referencia tu sistema de diseño. Si sabes que un componente existe en el sistema de tu marca, menciona por nombre: "Usa el componente Primary Button" o "Aplica el patrón de diseño Card layout."
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 sobre 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 retroalimentación a Claude. 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 está disponible como una vista previa experimental de Anthropic Labs. Hay algunas cosas a tener en cuenta:
Persistencia de comentarios: Los comentarios en línea ocasionalmente desaparecen antes de que Claude los lea. Para evitar esto, pega el texto del comentario en el chat.
Errores de guardado en vista compacta: El modo de diseño compacto puede desencadenar errores de guardado. Si esto sucede, cambia a vista completa e intenta de nuevo.
Bases de código grandes: Vincular repositorios muy grandes puede causar retrasos o problemas del navegador. Vincula subdirectorios específicos en lugar de monorepos completos.
Errores de chat: Si encuentras un error "chat upstream error", intenta iniciar una nueva pestaña de chat dentro del mismo proyecto.