Comienza con Claude Design

Claude Design te permite crear diseños, prototipos interactivos, one-pagers y otros trabajos visuales conversando con Claude. Es una de las plantillas desde las que puedes iniciar un artefacto, por lo que puedes usarla en cualquier chat, en Claude Code y desde la pestaña Artifacts, con edición en lienzo e incluye tu sistema de diseño. Esta guía te acompaña en la creación de tu primer diseño, iterando sobre él y aprovechándolo al máximo. Obtén más información sobre qué son los artefactos y cómo usarlos.

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.

Crea un artefacto con Claude

Claude Design combina una conversación con un lienzo. Describes lo que quieres y Claude genera un diseño funcional en el lienzo junto a la conversación. A partir de ahí, iteras—refinando a través de la conversación, comentarios en línea y directamente en el lienzo hasta que sea correcto.

El flujo típico es:

Puedes moverte entre trabajar en Claude Design y Claude Code manteniendo tu trabajo sincronizado. Usa /design-sync para traer tu sistema de diseño, para 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.

Desde Claude Code, usa /design para importar un diseño en tu base de código, exporta tu código como un prototipo en vivo, o deja que Claude construya todo de principio a fin.

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.

Trae 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.

En los planes Enterprise, los administradores pueden reservar la publicación, establecer el valor predeterminado y eliminar sistemas de diseño para usuarios específicos. Obtén más información en la guía de administración de Artifacts para planes Team y Enterprise.

Los sistemas de diseño que creaste en la versión independiente en claude.ai/design pueden migrarse, para que Claude pueda usarlos en cualquier chat, incluyendo en Claude Code. Mígralos antes de que la versión independiente se cierre el 14 de diciembre de 2026. Obtén más información en Migrar de Claude Design independiente a Claude.

Cuanto más contexto le des a Claude, mejor será tu resultado. Puedes adjuntar material de referencia en cualquier momento durante un proyecto.

No necesitas ser diseñador para obtener excelentes resultados. Sé específico sobre lo que estás construyendo, para quién es y qué es lo más importante.

Una buena indicación incluye el objetivo (lo que 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:

La primera generación es un punto de partida. El valor real viene de iterar.

El chat es mejor para cambios amplios que afecten el diseño general:

También puedes pedirle a Claude que explique sus decisiones de diseño, sugiera mejoras o revise el diseño para accesibilidad.

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:

Usa controles de diseño enriquecido para cambios visuales y estéticos rápidos, específicamente para arrastrar, redimensionar y alinear elementos 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. Editar directamente para cambios visuales y estéticos rápidos.

Para entrar y salir del panel de artefactos, y para comentar desde el encabezado del panel, consulta Usar artefactos con un teclado o lector de pantalla. Ese artículo también explica qué significa enfoque, qué hacer en una Mac o en Safari, y cómo las tablas muestran las teclas.

Un diseño es un lienzo de mesas de trabajo. Cada mesa de trabajo contiene capas, como texto, formas e imágenes, y una capa puede contener otras capas dentro de ella.

Presiona F6 para moverte al área siguiente y Shift+F6 para moverte a la anterior. Cmd+F6 (Ctrl+F6 en Windows) funciona en lugar de F6, con o sin Shift. Las áreas son la barra superior, el lienzo y el panel de propiedades. Cuando algo está seleccionado y el panel de propiedades está cerrado, F6 también se detiene en la barra de herramientas que flota sobre la selección.

Presiona Tab hasta que llegues al título de una mesa de trabajo. Su nombre incluye su posición, como mesa de trabajo 1 de 7. Desde el título, Space selecciona la mesa de trabajo, y Return entra en ella, a sus capas. Una vez dentro:

Cuando estés editando una capa de texto, presiona Escape o Tab cuando hayas terminado. A medida que te mueves, el editor le dice a los lectores de pantalla qué está seleccionado y su posición, como 1 de 5.

Para mover una mesa de trabajo, selecciónala (Space en su título) y presiona las teclas de flecha. Se mueve un píxel a la vez, o 10 con Shift. Dentro de una mesa de trabajo, las teclas de flecha hacen otra cosa: con o sin Shift, te mueven a la capa siguiente o anterior y nunca mueven la capa en sí. Para mover la capa en la que estás, mantén presionado Option (Alt en Windows) y presiona una tecla de flecha. Una capa colocada libremente se mueve un píxel, o 10 con Shift. Una capa que es parte de una fila, columna o cuadrícula intercambia lugares con su vecino: Arriba o Izquierda la mueve antes, y Abajo o Derecha la mueve después. El editor envía una breve confirmación del movimiento a los lectores de pantalla.

Con una mesa de trabajo o capa seleccionada, presiona Cmd+D (Ctrl+D en Windows) para duplicarla, y Delete o Backspace para eliminarla. Presiona Cmd+Z (Ctrl+Z en Windows) para deshacer. El editor envía una breve confirmación de cada una de estas acciones a los lectores de pantalla.

La barra de herramientas que flota sobre una selección solo está presente mientras el panel de propiedades está cerrado, y F6 la alcanza. En ella, las teclas de flecha se mueven entre sus controles, Home y End se mueven al primero y al último, y Escape vuelve al lienzo con tu selección mantenida. También puedes alcanzar cada control con Tab.

Cmd+\ (Ctrl+\ en Windows) abre el panel de propiedades y mueve el enfoque hacia él. Presionarlo nuevamente cierra el panel, y el enfoque vuelve al botón "Propiedades" en la barra superior. Los elementos emergentes de color, fuente y otros en el panel toman enfoque cuando se abren, y Escape los cierra. Cuando eliges un color de texto, el selector de color te dice si su contraste con el fondo es bueno o deficiente.

En la lista de capas del panel de propiedades: las teclas de flecha Arriba y Abajo se mueven entre filas, la tecla de flecha Derecha expande una fila y luego entra en ella, la tecla de flecha Izquierda la contrae y luego sale, Return o Space selecciona esa capa en el lienzo, y Return nuevamente en una capa de texto la edita.

Si deseas 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 consultar fácilmente iteraciones anteriores en la conversación.

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 para obtener comentarios de partes interesadas, entregar a ingeniería o presentar 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.

Los diseños son privados para ti. Para compartir uno, haz clic en "Compartir" y elige quién puede abrirlo y qué puede hacer. Las personas con las que compartes un diseño pueden verlo, comentar o editarlo. Obtén más información sobre compartir artefactos.

Claude Design cuenta para los mismos límites de uso que el resto de Claude. La actividad de diseño se extrae del mismo grupo que el resto de tu trabajo con Claude, incluido Claude Code, 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.

Algunas cosas a tener en cuenta: