Configurar un sistema de diseño en Claude

Un sistema de diseño le enseña a Claude tu marca. Una vez que está configurado y compartido con tu organización, las presentaciones, diseños y prototipos que tu equipo haga con Claude pueden partir de tus colores, tipografía y componentes.

1. Qué es un sistema de diseño

Un sistema de diseño son las decisiones de diseño de una empresa, escritas una sola vez, en una forma que tanto las personas como el software pueden reutilizar. En Claude, tiene estas partes principales:

2. Qué cambia cuando Claude tiene tu sistema de diseño

Claude puede crear una buena presentación o pantalla a partir de un prompt sin ninguna configuración. Pero no ha visto tu marca, así que usa sus propios valores predeterminados, y el resultado no se parece a tu empresa.

Con tu sistema de diseño, Claude usa tus colores y tipografía, y los componentes reales de tu equipo si el sistema de diseño los incluye.

Claude usa tu sistema de diseño cuando crea presentaciones, diseños y prototipos. Tus colores, estilos de tipografía y fuentes se aplican a todos ellos, y los diseños y prototipos también pueden usar tus componentes reales. Para ver qué componente usó Claude en un diseño, selecciona esa parte del diseño. Su contorno es de un color diferente, y la lista de Capas muestra su nombre.

3. Antes de empezar

• Los sistemas de diseño están en beta en los planes Pro, Max, Team y Enterprise. No están disponibles en el plan Free.
• En los planes Team y Enterprise, los propietarios controlan la plantilla de Sistemas de diseño en Configuración de la organización > Artifacts. En Enterprise, empieza desactivada. Si no ves Sistema de diseño en los lugares descritos a continuación, esa configuración es lo primero que debes revisar.
• Cualquiera con acceso puede crear un sistema de diseño, usarlo y compartirlo con personas específicas. Compartir uno con toda la organización, o convertirlo en el predeterminado, requiere un propietario de tu organización (sección 7).
• Si tu equipo ya tiene un sistema de diseño en Claude Design independiente (claude.ai/design), puedes traerlo en lugar de reconstruirlo. Consulta Migrar desde Claude Design independiente a continuación.

4. Crear un sistema de diseño

Iniciar uno nuevo

Puedes iniciar un sistema de diseño desde el cuadro de mensajes en cualquier conversación, o desde Configuración.

Desde el cuadro de mensajes: abre el menú +, elige Sistema de diseño, luego Nuevo sistema de diseño. Tendrás dos opciones:

• Usando Claude abre un sistema de diseño vacío junto a una nueva conversación, donde puedes subir archivos de marca, extraer de tus herramientas conectadas, o describir la marca.
• Usando Claude Code es para un sistema de diseño que ya existe en un repositorio de código. Claude Code lee los tokens y componentes de tu repositorio.

Desde Configuración: Configuración > Sistemas de diseño enumera los sistemas de diseño que puedes usar y tiene un botón Nuevo sistema de diseño.

Un sistema de diseño es en sí mismo un artifact. Es una página que puedes abrir, editar y compartir, y aparece en la página de Artifacts junto con el resto de tu trabajo.

Elige una forma de completarlo

Un nuevo sistema de diseño se abre como una página vacía con la pregunta ¿No sabes por dónde empezar? y una tarjeta para cada forma de completarlo. Elige una tarjeta, y Claude empieza en la conversación junto a la página. Con Subir archivos de marca, primero agregas tus archivos y luego eliges Crear sistema de diseño.

Sincronizar desde GitHub

Usa esto cuando tus colores, tipografía y componentes ya existen en código. Claude pregunta qué repositorio leer y qué quieres incorporar. Lee el código, completa la página, y está diseñado para dejar tu repositorio sin cambios.

• Se importan colores, estilos de tipografía, espaciado, radios de esquina, fuentes, logotipos y documentación.
• Los componentes son tu elección. Claude enumera los componentes que encontró y pregunta cuáles incluir. Para incorporarlos, Claude tiene que ejecutar el build de tu proyecto, así que te lo pregunta primero.
• Dile a Claude qué carpeta tiene el código de la interfaz, para que tenga menos que leer que todo el repositorio.
• Puedes sincronizar de nuevo más tarde. Los valores cambiados se actualizan, se agregan los nuevos, y tus notas de uso, texto de resumen, fuentes y recursos se mantienen. Si el código ya no define un token, Claude lo enumera y pregunta antes de eliminarlo.

Construir desde conectores

Usa esto cuando tu marca se mantiene en una herramienta de diseño, una unidad compartida o una wiki que has conectado a Claude. Claude revisa cuál de tus conectores tiene trabajo de marca o diseño, te dice cuál encontró, y se ofrece a construir a partir de él.

Si no tienes nada conectado, Claude hace algunas preguntas breves sobre tu marca y redacta un borrador a partir de tus respuestas.

Subir archivos de marca

Usa esto cuando tu marca se mantiene en archivos, como logotipos, fuentes, un PDF de lineamientos, un archivo de tokens, o algunas presentaciones o pantallas terminadas. Claude lee los archivos que agregas y escribe un primer borrador del sistema de diseño a partir de ellos.

• Los archivos que muestran tu marca en uso, como presentaciones terminadas y capturas de pantalla de productos, le dan a Claude más con qué trabajar que solo un PDF de lineamientos.
• El primer borrador es deliberadamente pequeño. Luego Claude pregunta si eso es suficiente o si debe profundizar más.
• Claude está diseñado para preguntar antes de completar un valor que tus archivos no muestran.

Migrar desde Claude Design independiente

Si tu equipo construyó sistemas de diseño en Claude Design independiente (claude.ai/design), puedes traerlos a Claude en lugar de reconstruirlos. Hasta que se migren, llevan una etiqueta Independiente en Configuración > Sistemas de diseño, y Claude no puede usarlos en conversaciones.

Una migración cubre toda tu organización, así que una persona la hace por todos, y esa persona no necesita ser propietaria. Comienza desde la página de Artifacts. Los originales no cambian.

Cada sistema de diseño migrado tiene un paso pendiente. El propietario del sistema de diseño lo abre, selecciona Finalizar la migración y envía la solicitud a Claude. Si un mensaje dice que la solicitud fue copiada, pégala en una conversación con Claude y envíala. Claude entonces reorganiza los archivos para que puedas previsualizar cada sección y editarla en la página. Hasta entonces, aún puedes pedirle a Claude que haga cambios.

La versión independiente está cerrando. Para la fecha, qué se comparte, y qué hacer cuando un sistema de diseño no se puede migrar, consulta el artículo del Centro de ayuda sobre la migración.

5. Revisa la página y deja notas para Claude

La página del sistema de diseño es donde tu equipo lo revisa y edita, y donde dejas notas de uso que le indican a Claude cómo usarlo.

La página

Puedes editar el texto de resumen, los valores de tokens, las notas, las fuentes y los recursos directamente en la página. Para agregar un tema o cambiar el código de un componente, pídeselo a Claude en la conversación junto a la página.

Notas de uso

Mientras revisas tu sistema de diseño, puedes dejar notas de uso para Claude. Una nota le indica a Claude cómo usar un color, un estilo de tipografía o un componente, y cuándo no hacerlo. Claude lee la nota de un componente antes de construir con ese componente.

6. Cómo lo usa Claude cuando construye

Para cada solicitud, Claude lee primero el resumen, y luego solo las partes de tu sistema de diseño que la tarea necesita.

Si tu organización tiene un sistema de diseño predeterminado, Claude lo usa sin preguntar. Si tiene sistemas de diseño pero ninguno predeterminado, Claude pregunta cuál usar.

7. Compártelo con tu organización

Al principio, solo tú puedes usar un nuevo sistema de diseño. Puedes compartirlo con personas específicas, y un propietario de tu organización puede compartirlo con todos y convertirlo en el predeterminado.

Paso a paso

1. Pruébalo tú mismo primero: tu sistema de diseño está en tu menú + > Sistema de diseño tan pronto como tiene contenido guardado en él. Pide una presentación ordinaria, y no digas nada sobre la marca. Si la presentación se parece a tu empresa, el sistema de diseño está funcionando.
2. Compártelo con las personas que deberían revisarlo: selecciona Compartir en la parte superior de la página del sistema de diseño e invítalas. Aparece en su menú + > Sistema de diseño bajo Compartido contigo. Da acceso de edición a cualquiera que deba poder cambiarlo.
3. Haz que un propietario de tu organización lo comparta con todos: primero invítalo desde Compartir y dale acceso de Propietario. En Compartir, luego establece la audiencia en Cualquiera en [tu organización] y confirma. Después de eso, el sistema de diseño está en el menú de cada compañero de equipo.
4. Conviértelo en el predeterminado, si quieres uno: una vez que se comparte con todos, un propietario de tu organización activa Sistema de diseño predeterminado en Compartir, o elige Establecer como predeterminado junto a él en Configuración > Sistemas de diseño. Hay un predeterminado por organización, y establecer uno nuevo reemplaza al anterior.

Ver todos tus sistemas de diseño en un solo lugar

Configuración > Sistemas de diseño enumera tus propios sistemas de diseño, los compartidos contigo y los compartidos con tu organización. Administrar sistemas de diseño, al pie del menú + > Sistema de diseño, abre la misma página.

• La columna Usable por indica quién puede usar cada uno, y el predeterminado lleva una insignia Predeterminado.
• Los sistemas de diseño que aún están en Claude Design independiente llevan una etiqueta Independiente.
• Puedes abrir, compartir, renombrar o eliminar los tuyos desde el menú de la fila.

Los propietarios de organizaciones Team y Enterprise también ven cada sistema de diseño compartido con la organización bajo Configuración de la organización > Artifacts, y pueden establecer o quitar el predeterminado allí.

8. Úsalo día a día

Lo que ven tus compañeros de equipo

Una vez que un sistema de diseño se comparte con todos, está en el menú + > Sistema de diseño de cada compañero de equipo. Una vez que es el predeterminado, ya está seleccionado cuando empiezan una presentación o un diseño.

El predeterminado no reemplaza un sistema de diseño que ya hayas elegido en el mismo dispositivo. Para no usar ninguno en una conversación, desmarca todas las casillas, y la etiqueta bajo el cuadro de mensajes dice Sin sistema de diseño.

Mantenerlo actualizado

Puedes actualizar tu sistema de diseño de varias formas:

• Cambios pequeños: edita la página. Los valores, el texto de resumen y las notas se guardan a medida que avanzas.
• Cambios más grandes: pídeselo a Claude en la conversación junto a la página. Así es como agregas un tema o cambias un componente.
• Un sistema de diseño que vino del código: cambia el código, luego sincroniza desde GitHub de nuevo. Tus notas y ediciones de página se conservan.
• Presentaciones y diseños que ya has hecho: cada uno mantiene su propia copia del sistema de diseño de cuando se hizo. Pídele a Claude que lo actualice.

Solución de problemas

Más recursos

• Crear presentaciones con Claude y Usar Claude para prototipos y UX muestran el sistema de diseño en uso.
• Colabora con tu equipo en los artifacts de Claude para compartir y editar presentaciones y diseños.
• Visita el Centro de ayuda para más información sobre sistemas de diseño en Claude Design y migrar desde Claude Design independiente. Los propietarios pueden encontrar la configuración de su organización en la guía de administración de Artifacts.