Cómo migrar de Claude Design a Claude Code sin perder el contexto (2026)

Claude Design ahora funciona dentro de Claude. El artículo de inicio de Anthropic lo describe como "una de las plantillas desde las que puedes iniciar un artifact, para que puedas usarlo en cualquier chat, en Claude Code y desde la pestaña de Artifacts, con edición en el lienzo y tu sistema de diseño incluido". Está disponible en los planes Free, Pro, Max, Team y Enterprise.

El sitio independiente original en claude.ai/design va a cerrar. La guía de migración de Anthropic dice que "cerrará el 14 de diciembre de 2026, y aún podrás acceder a él hasta esa fecha". Los proyectos allí pueden moverse a Claude como artifacts, un movimiento que se está implementando gradualmente para los planes de pago.

Eso te da tres posibles puntos de partida para un diseño que quieras construir:

• Un diseño hecho en Claude, como un artifact
• Un diseño que aún está en el sitio independiente
• Un diseño borrador dentro de Claude Code con el comando /design

Los tres terminan en el mismo lugar, pero la ruta y lo que viene con ella difieren.

El diseño en sí, a través de la entrega

El artículo de inicio describe la entrega en una frase: "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 empezar de cero desde una captura de pantalla".

En las opciones de exportación, la entrega a Claude Code tiene dos destinos: Send to local coding agent, para Claude Code en tu máquina, y Send to Claude Code Web, para una sesión en la nube. El mismo menú ofrece otros formatos, incluyendo una descarga en .zip, PDF, PPTX, Google Slides e HTML independiente.

Desde el lado de Claude Code, el mismo artículo dice: "Desde Claude Code, usa /design para importar un diseño a tu código base, exportar tu código como un prototipo en vivo o dejar que Claude construya todo de principio a fin".

El sistema de diseño, a través de /design-sync

Un sistema de diseño es la segunda pieza. El artículo sobre el sistema de diseño de Anthropic dice que si tu sistema de diseño "ya existe como componentes de 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".

El artículo de inicio explica el propósito claramente: "Usa /design-sync para importar tu sistema de diseño, de modo que todo lo que construyas en Claude Design comience a partir de tus componentes existentes". Cuando tus componentes viven en el repositorio, el repositorio se convierte en la fuente y los diseños comienzan a partir de lo que realmente envías a producción.

Tokens de diseño, a través de CLAUDE.md

Claude Code también tiene su propio lugar para las reglas visuales. La documentación de artifacts de Claude Code dice que para mantener los artifacts consistentes con tu marca, "regístralos donde Claude pueda encontrarlos, como en el CLAUDE.md del proyecto o en un archivo de tema en tu repositorio". Añade cómo Claude los prioriza: "Claude trata tu sistema de diseño con mayor precedencia que sus propias elecciones, y tu prompt con mayor precedencia que ambos".

Así que una sección corta de sistema de diseño en CLAUDE.md, con colores, tipografía y espaciado, es algo que cada sesión de Claude Code en ese repositorio lee. Nuestra guía sobre el límite de subdirectorios CLAUDE.md de Claude Code explica dónde colocar archivos largos para que las líneas importantes sigan cargándose.

La descripción de Anthropic sobre la entrega se centra en el diseño. No dice que la conversación detrás del diseño se traslade, y para el sitio independiente dice que los chats y comentarios no pueden moverse. Hay tres tipos de contexto que vale la pena traer tú mismo.

La conversación que dio forma al diseño. Las razones por las que elegiste un diseño sobre otro, los casos de borde que acordaste manejar y las restricciones que estableciste viven en el chat. Para el sitio independiente, Anthropic es explícito: "Tus chats y comentarios no pueden moverse a Claude, por lo que permanecen en la versión independiente hasta que cierre". Su lista de lo que no se transfiere menciona "Tus chats con Claude" y "Comentarios en tus proyectos y sistemas de diseño", y aconseja: "Guarda cualquier cosa que necesites de tus chats y comentarios antes de que la versión independiente cierre".

Comentarios y notas de revisión. Los comentarios dejados en un diseño forman parte de esa misma lista para el sitio independiente.

Las reglas que se aplican más allá de un diseño. Qué componente usar para un formulario, qué deben decir los estados vacíos, cómo se redactan los errores. Si estos se resolvieron en la conversación, no están en el archivo de diseño.

Nada de esto es un fallo en la entrega. Un archivo de diseño contiene el diseño. Las decisiones detrás de él son algo separado, y Claude Code las lee de los archivos en el repositorio.

Enviar una captura de pantalla. Funciona para un comienzo aproximado, pero la propia descripción de Anthropic de la entrega la contrasta con empezar de cero desde una captura de pantalla. Una captura de pantalla no transmite la estructura ni los componentes.

Pegar todo el chat de diseño en Claude Code. Trae el razonamiento junto con mucho ruido y llena el contexto de la sesión con discusiones que no necesitan estar ahí.

Confiar en que Claude Code infiera el sistema de diseño. Sin tokens en CLAUDE.md o componentes que pueda leer, toma sus propias decisiones visuales.

Dejar los proyectos independientes hasta diciembre. Los chats y comentarios allí no se mueven, y los enlaces públicos a proyectos independientes dejarán de funcionar después de que cierre.

Paso 1: Reunir el diseño, el sistema y las decisiones

Antes de entregar nada, recopila tres cosas.

• El diseño. Asegúrate de que la versión que quieres construir sea la actual. Si todavía está en el sitio independiente, mueve el proyecto a Claude cuando esa opción esté disponible para ti, o descarga el proyecto como un .zip. Anthropic señala que al mover un proyecto se muestra una revisión que "enumera lo que se mueve, cualquier cosa que funcionará de manera diferente y lo que se queda atrás".
• El sistema de diseño. Si tu sistema vive en código, anota qué repositorio y qué componentes. Si se construyó en Claude a partir de activos de marca, verifica que se haya trasladado y que sea el que usan tus diseños.
• Las decisiones. Vuelve a revisar el chat de diseño y anota qué se decidió y por qué: las elecciones de diseño, los estados que necesita cada pantalla, las reglas de redacción, los requisitos de accesibilidad y cualquier cosa que hayas descartado. Una línea por decisión. Para un proyecto independiente, haz esto antes del 14 de diciembre, porque el chat no se moverá.

Paso 2: Traer cada pieza a Claude Code

En el repositorio donde vivirá la funcionalidad:

1. Importa el sistema de diseño. Si tus componentes están en el repositorio, ejecuta /design-sync para que Claude Design y Claude Code trabajen desde los mismos componentes.
2. Añade las reglas visuales a CLAUDE.md. Escribe una sección corta de sistema de diseño con colores, tipografía y espaciado, o apunta al archivo de tema que los contiene.
3. Añade las decisiones donde Claude Code las lea. Coloca las reglas que se aplican a toda la funcionalidad en CLAUDE.md o en un archivo corto de notas de diseño al que CLAUDE.md haga referencia. Deja los detalles puntuales para la sesión en sí.
4. Entrega el diseño. Desde el diseño, elige Send to local coding agent para una sesión local o Send to Claude Code Web para una sesión en la nube. O, desde Claude Code, usa /design para importarlo.
5. Inicia la construcción con el contexto a la vista. En el primer mensaje, dile a Claude Code qué diseño es este, qué decisiones seguir y cómo se ve el trabajo terminado. Luego pídale que resuma lo que va a construir antes de que escriba código.

Si realizas la entrega a una sesión en la nube, la configuración solo local en tu máquina no se sigue automáticamente. Nuestra guía sobre lo que permanece en tu portátil en las sesiones en la nube de Claude Code cubre lo que carga un entorno en la nube.

La migración manual funciona, pero muestra dónde estaban las decisiones: en un chat de diseño que no viaja. Las copias en CLAUDE.md para este repositorio, y el siguiente diseño para un producto diferente comienza de la misma manera. Cuando revisas la construcción en ChatGPT, o planeas la siguiente funcionalidad en otro asistente, esas decisiones tampoco están allí.

MemoryLake es una capa de memoria para mantener las decisiones de diseño y las convenciones con las que trabajas en una lista que tú mantienes, disponible para Claude Code y los otros asistentes que conectes, como ChatGPT y Codex.

Escribes las entradas tú mismo, con tus propias palabras. No se lee nada de, ni se escribe en, ni se elimina de Claude Design, tus artifacts, tus sistemas de diseño, tus chats de Claude o el almacén de cualquier proveedor. Para contenido de trabajo, sigue la política de tu organización sobre lo que guardas fuera de sus herramientas.

Paso 1: Crear una clave API

Inicia sesión y genera una clave desde el panel de control. La clave pertenece a tu espacio de trabajo de MemoryLake y es independiente de tu cuenta de Claude.

Paso 2: Sube tus primeras memorias

Comienza con las decisiones que anotaste en el Paso 1 de la migración manual: elecciones de diseño, estados, reglas de redacción y lo que descartaste. Una decisión por entrada, fechada y etiquetada con el producto o funcionalidad al que pertenece.

Paso 3: Conecta tu IA y agentes

Conecta Claude Code y los otros asistentes que utilices. La próxima entrega de diseño, revisión o funcionalidad de seguimiento comenzará con las decisiones ya a tu alcance.

La primera diferencia es que la construcción coincide con el diseño por las razones correctas. Claude Code tiene el diseño, los componentes y las decisiones detrás de ellos, por lo que no tiene que adivinar por qué el segundo paso es opcional.

La segunda es que el sistema de diseño se mantiene en un solo lugar. Con /design-sync leyendo componentes del repositorio y tokens en CLAUDE.md, los nuevos diseños y el nuevo código parten de la misma fuente.

La tercera es que las decisiones sobreviven a las herramientas. El cierre del chat independiente en diciembre, o un chat de diseño que nunca vuelves a abrir, no se lleva el razonamiento consigo. Si también diseñas en ChatGPT, nuestra guía sobre por qué ChatGPT olvida tu sistema de diseño cubre ese lado.

Entrega el diseño, no una captura de pantalla. La entrega mantiene la estructura que Claude Code necesita.

Haz que el repositorio sea la fuente de los componentes. Usa /design-sync cuando tu sistema de diseño exista como código.

Coloca las reglas visuales en CLAUDE.md. Cada sesión en el repositorio las lee.

Anota las decisiones antes de salir del chat de diseño. Una línea cada una, con el motivo.

Guarda los chats y comentarios independientes antes del 14 de diciembre. No se mueven a Claude.

Pide a Claude Code que repita el plan antes de construir. Es la comprobación más rápida de que las decisiones llegaron.

Mantén las reglas de toda la funcionalidad separadas de los detalles puntuales. Las reglas van en archivos; los detalles van en la sesión.

Si Claude Code todavía se desvía de lo acordado, nuestra guía sobre por qué Claude Code olvida el contexto del proyecto cubre las causas habituales.

Claude Design ahora vive dentro de Claude y Claude Code. Un diseño terminado puede entregarse a Claude Code con Send to local coding agent o Send to Claude Code Web, o importarse con /design. Un sistema de diseño en código puede importarse con /design-sync, y las reglas visuales pueden residir en CLAUDE.md.

Anthropic no describe que la conversación detrás de un diseño viaje con la entrega. Anota las decisiones antes de salir del chat de diseño, coloca las que afectan a toda la funcionalidad en el repositorio y guárdalas en algún lugar donde sobrevivan al archivo de diseño. Entonces, la construcción seguirá al diseño por las mismas razones por las que se creó el diseño.