Un sistema de diseño captura tus colores, tipografía, componentes y patrones de diseño, para que Claude los aplique a cada nuevo diseño y presentación. Claude los extrae de los activos que proporcionas, como bases de código, presentaciones o referencias de diseño.
Los sistemas de diseño están disponibles en beta en los planes Pro, Max, Team y Enterprise. Están activados por defecto en los planes Pro, Max y Team. En los planes Enterprise, están desactivados hasta que un propietario active Design systems en Organization settings > Artifacts. Claude Design independiente en claude.ai/design tiene su propia configuración separada.
Esta guía es para el diseñador o propietario de marca que configurará el sistema de diseño. En los planes Team y Enterprise, solo necesitas hacerlo una vez, y el trabajo de todos lo utilizará después.
Antes de empezar
En los planes Team y Enterprise, Design systems debe estar activado para tu organización, y un propietario puede limitar quién puede publicar o establecer el valor predeterminado.
Necesitarás al menos uno de los siguientes como material de origen:
Una base de código con tu sistema de diseño o biblioteca de componentes
Una presentación o documento que refleje tu identidad visual
Activos de directrices de marca (logotipos, paletas de colores, especificaciones de tipografía)
Crear un sistema de diseño
Desde un chat
Pídele a Claude que construya un sistema de diseño a partir de tus aplicaciones conectadas, archivos cargados, archivos de Figma, presentaciones, logotipos y fuentes. Funciona mejor para sistemas de diseño de marca con fuentes, colores y directrices.
Desde Claude Code
Si tu sistema de diseño ya existe como componentes React, ejecuta /design-sync en Claude Code. Lee tus tokens y componentes directamente, y funciona mejor para sistemas de diseño de productos en código.
Traer un sistema de diseño desde claude.ai/design
Abre la pestaña "Design" en la parte inferior de la barra lateral.
Haz clic en "Migrate team design systems" en el banner.
Cada sistema de diseño se convierte en un artefacto que Claude puede usar en cualquier chat, incluyendo en Claude Code. Los sistemas de diseño migrados pueden necesitar limpieza, por lo que cada uno muestra un banner donde puedes hacer clic en "Let Claude clean it up", y Claude organiza su guía, tokens y componentes.
Gestiona tus sistemas de diseño
Gestiona tus sistemas de diseño en Settings > Design systems. En los planes Enterprise, los administradores pueden reservar la publicación, establecer el valor predeterminado de la organización y eliminar sistemas de diseño para usuarios específicos. Obtén más información en la Artifacts admin guide for Team and Enterprise plans.
Usar un sistema de diseño con un teclado
Para entrar y salir del panel de artefactos, consulta Use artifacts with a keyboard or screen reader. Ese artículo también explica qué significa enfoque, qué hacer en una MacBook o en Safari, y cómo se escriben los atajos.
Un sistema de diseño se abre como una lista de secciones junto a la sección que estás leyendo. Presionar Retorno en una sección de la lista te lleva a ella, Cmd+F6 (Ctrl+F6 en Windows) se mueve entre la lista y la sección, y Cmd+Z (Ctrl+Z en Windows) deshace un cambio cuando no estás en un cuadro de texto.
Nota: Las vistas previas de componentes en vivo en un sistema de diseño no se pueden alcanzar con Tab, por lo que no se pueden operar desde el teclado. Se puede leer el nombre y las notas de cada componente.
Configura un sistema de diseño en claude.ai/design
Estos pasos utilizan Claude Design independiente.
Crea o cambia a tu organización
Abre Claude Design.
En la esquina inferior izquierda del selector de proyectos, haz clic en el nombre de la organización actual.
Selecciona tu organización o crea una nueva.
Completa el flujo de incorporación al que se te redirige.
Carga tus activos de marca y producto
Durante la incorporación, o después desde la configuración de tu organización, carga los activos que definen tu marca y producto. Claude los analiza y extrae un sistema de diseño reutilizable.
Bases de código: Si tu sistema de diseño vive en código, como una biblioteca de componentes React, vincula o carga el repositorio. Claude lee los componentes y estilos.
Prototipos: Capturas de pantalla, flujos web y archivos de diseño existentes.
Presentaciones o documentos: Incluso un PowerPoint o PDF bien diseñado que refleje tu marca puede funcionar. Claude extrae colores, patrones de diseño y opciones tipográficas.
Activos individuales: Logotipos, archivos de paleta de colores, especímenes de tipografía.
Solo necesitas una fuente para empezar, pero más fuentes le dan a Claude más con lo que trabajar.
Revisa el sistema de diseño generado
Después de cargar, Claude genera un sistema de diseño para tu organización. Esto típicamente incluye:
Paleta de colores: Colores primarios, secundarios y de acento extraídos de tus activos.
Tipografía: Familias de fuentes, tamaños y pesos.
Componentes: Botones, tarjetas, elementos de navegación y otros patrones de interfaz reutilizables.
Patrones de diseño: Espaciado, sistemas de cuadrícula y estructuras de página.
Para validarlo, crea un proyecto de prueba y verifica si el resultado coincide con tu marca. Prueba con indicaciones como:
"Crea una página de inicio para [tu producto]."
"Diseña un panel de control que muestre [métricas relevantes]."
"Haz un documento de una página sobre [un tema que tu equipo presenta comúnmente]."
Ponlo a disposición de tu equipo
Cuando estés satisfecho con el sistema de diseño, activa el botón "Published". Después de publicar, los proyectos creados desde la pantalla de inicio de Claude Design en tu organización utilizan tu sistema de diseño en lugar del predeterminado.
Actualiza tu sistema de diseño
Cuando tu sistema de diseño cambia, puedes actualizarlo dentro de Claude Design. Desde la configuración de tu organización de Claude Design, haz clic en el botón "Open" junto al sistema de diseño que deseas editar. Haz clic en el botón "Remix" en la esquina superior derecha para abrir la interfaz de chat en el lado izquierdo de la ventana. Desde aquí, puedes trabajar con Claude para cambiar tu sistema de diseño.
Consejos para obtener los mejores resultados
Incluye ejemplos reales, no solo especificaciones. Una página de inicio o sitio de marketing terminado le dice a Claude más sobre la sensación de tu marca que una paleta de colores sola.
Itera. Si la primera extracción no captura bien tu marca, intenta cargar activos adicionales o diferentes.