Diseño de marca con Claude Design · Del Design System al sitio web en vivo [Encuentro 25].

La mayoría de las herramientas de diseño con IA generan un resultado bonito y, cuando pides otro, sale con un estilo completamente diferente. Colores distintos, fuente diferente, otra sensación. Para una marca esto es un desastre, porque una marca vive de la consistencia. En el Encuentro 25 de AI Master Club revisamos Claude Design, la nueva herramienta de diseño de Anthropic (la misma empresa detrás de Claude Code). Lo que la distingue es precisamente este punto: se crea un Design System una sola vez (logo, colores, tipografía, botones, tono de voz), y todo lo que se genera después · una presentación, una página de aterrizaje, un carrusel para Instagram, un mockup de aplicación · sale con marca y uniforme, como si el mismo diseñador hubiera hecho todo. En el encuentro lo vimos en acción: duplicamos la identidad visual de una gran marca con precisión milimétrica, construimos una página de aterrizaje para una panadería desde cero, trajimos decenas de imágenes de un sitio real con Firecrawl, y al final tomamos un mockup y lo convertimos en un sitio web en vivo. Todo en lenguaje natural, sin escribir una sola línea de código. Esta guía reúne todo lo que vimos, paso a paso.

Qué tendrás al final de la guía

• Qué es Claude Design, dónde se accede y en qué se diferencia de cualquier otra herramienta de diseño
• Cómo construir un Design System · el corazón de todo el proceso · en 3 métodos según tu nivel de experiencia
• Cómo generar una presentación, una página de aterrizaje y un carrusel para Instagram manteniendo la misma identidad visual
• La demostración en vivo: construcción de una página de aterrizaje para una panadería desde cero, incluyendo las preguntas de precisión que hace Claude
• Extracción de imágenes reales de cualquier sitio con Firecrawl y su integración automática en el diseño
• Cómo convertir un mockup en un sitio web en vivo · Claude Code, Vercel y Supabase
• El consejo más importante del encuentro: cómo no agotar el límite de tokens en media hora

Qué es Claude Design y dónde se accede

Presta atención a tres puntos antes de empezar: Claude Design requiere una suscripción de pago de Claude (no hay acceso gratuito), por ahora solo funciona en el navegador y tiene un contador de tokens independiente y limitado en comparación con el uso normal de Claude. Este contador se reinicia cada 5 horas. Se puede verificar en el círculo superior, en Settings y luego en Usage. Toda la guía gira en torno a este punto: cómo sacarle el máximo provecho a la herramienta sin desperdiciar tokens.

Design System · El corazón de todo el proceso

3 formas de construir un Design System

• A través de Claude Code (recomendado, ahorra la mayor cantidad de tokens): pides a Claude Code que construya el Design System a partir de tu sitio web, imágenes, logo y fuentes. Al terminar, ejecutas el comando de barra inclinada escribiendo /Design y seleccionando Design Sync, lo cual extrae todos los archivos y los transfiere automáticamente a Claude Design. Allí aparecerá un nuevo sistema debajo de la caja de chat y se le asigna un nombre.
• Directamente dentro de Claude Design: vas a Projects, Design Systems, Create Design System y luego Create Here. Ingresas un sitio web (si lo tienes), subes un archivo de Figma (para diseñadores), haces clic en Browse y arrastras todo tu material de diseño · logo, imágenes, publicaciones de redes sociales. En el campo Any other notes das una instrucción verbal (por ejemplo, me gusta el azul, quiero que todo esté en tonos azules). Asignas un nombre y haces clic en Generate. El procesamiento toma unos 5 minutos.
• La versión económica, con cualquier modelo de lenguaje: le das a ChatGPT un sitio web o referencia, pides que redacte un Design System como archivo PDF y lo cargas en Claude Design. Es menos preciso que los dos anteriores, pero funciona cuando no tienes un codebase.

Prompt para construir un Design System en Claude Code

Quiero que construyas un Design System completo para mi marca. Las fuentes: [pega aquí el enlace a tu sitio web, o arrastra el logo, fuentes, capturas de pantalla y publicaciones de redes sociales]. Extrae y define: paleta de colores con códigos exactos, tipografía (fuentes, tamaños, grosor, jerarquía), forma y tamaño de los botones, tono y estilo de comunicación (incluyendo el uso de otros idiomas si aplica), llamadas a la acción y pautas de emojis. Cuando termines, ejecuta /Design y selecciona Design Sync para transferir todo a Claude Design.

La primera demostración · Duplicar la identidad visual de una gran marca

Prompts para crear contenido con marca

Presentación: Crea una presentación sobre [el tema, por ejemplo, la nueva colección de 2026], basada en el Design System que adjunté y las imágenes adjuntas. Página de aterrizaje para un producto: Crea una página de aterrizaje que explique este producto [adjunta imágenes del producto], basada en el Design System. Carrusel para Instagram: Créame un carrusel para Instagram sobre [el tema], basado en el Design System. Una serie de diapositivas con la misma identidad visual.

Un consejo de contenido que vale oro: los carruseles son uno de los formatos más virales hoy en día. Instagram y LinkedIn promocionan publicaciones con más de una imagen mucho más que una sola imagen. Ahora que se puede crear un carrusel con marca en un minuto, no hay razón para no subir uno por semana.

Edición manual · El secreto para ahorrar tokens

La segunda demostración · Página de aterrizaje para una panadería desde cero

Prompt para página de aterrizaje desde cero (con preguntas de precisión)

Crea una página de aterrizaje para [tipo de negocio, por ejemplo, una panadería boutique]. Antes de empezar a diseñar, hazme todas las preguntas que necesites para precisar: nombre del negocio, ambiente y estilo deseado, idioma del texto, productos o servicios, cuál es la acción principal que quiero del visitante y cuántas versiones generar. Después de que responda, construye la página. Si faltan imágenes, indícame dónde, y las añadiré a través de Browse Files.

Extracción de imágenes reales con Firecrawl

AI Master Club te abre las puerta: un encuentro en vivo cada semana, grabaciones y comunidad. 47 ILS al mes, cancelación en cualquier momento.

Prompts de Firecrawl + inserción de imágenes

Descarga de imágenes (en Claude Code): Usa Firecrawl para descargar todas las imágenes de este sitio web: [pega el enlace del sitio]. Guárdalas en una subcarpeta del proyecto. Inserción en el diseño (en Claude Design, después de Browse Files): Coloca las imágenes relevantes en el sitio web, en cada lugar donde falte una imagen. Selecciona para cada ubicación la imagen más adecuada.

Animación, ajustes y efectos

Del mockup al sitio web en vivo · Claude Code, Vercel y Supabase

Prompt de construcción y despliegue (para Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

Por qué es significativo para el negocio: una página de aterrizaje como la que construimos para la panadería cuesta alrededor de 1,000 shéquels con un diseñador básico, y alrededor de 3,000 shéquels con uno avanzado. Aquí la construiste tú mismo en minutos, con marca y con la opción de publicarla. Esto no reemplaza a un diseñador profesional para cada proyecto, pero para la mayoría de las necesidades rutinarias de un pequeño negocio es más que suficiente.

Todas las herramientas del encuentro

El hogar de Claude Design y Claude Code. Requiere suscripción de pago. El panel Design existe actualmente solo en el navegador

Un agente que rastrea cualquier sitio web y extrae imágenes y textos. Se conecta a Claude como Skill y ahorra tokens. Tiene plan gratuito

Despliegue del sitio web a la red y enlace para compartir. Claude Code se conecta a él con un clic. Plan gratuito generoso

Base de datos para el sitio web · almacenamiento de correos, formularios y reseñas. Se conecta a Claude Code. Plan gratuito generoso

La herramienta de Google para diseñar mockups, con la que comparamos en el encuentro. Resultados más genéricos que Claude Design

La guía completa sobre todas las capacidades de Claude Design, más allá de lo cubierto en este encuentro

Preguntas que surgieron en el encuentro

No. Se requiere una suscripción de pago de Claude. Sus tokens también son independientes y están limitados respecto al uso normal, reiniciándose cada 5 horas. Por otro lado, Vercel y Supabase, necesarios para publicar un sitio en vivo, ofrecen un plan gratuito generoso.

Es similar a un Brand Book pero más completo. Además de colores y fuentes, también incluye componentes y código, lo que permite traducir la marca directamente al mundo digital y a las aplicaciones. Es lo primero que se construye y lo que garantiza que cada resultado sea fiel a la marca y uniforme.

Puedes pedirle a Claude Code que revise un sitio web y construya un Design System a partir de él, pero el resultado será más débil porque no tienes el código original del sitio. Funciona mucho mejor cuando el activo es tuyo, ya que entonces Claude accede al código y a los componentes directamente y no solo a la apariencia visual.

Totalmente. Haces clic en Edit y todo el texto se vuelve editable de forma manual. También se puede exportar a PDF, video, PowerPoint o HTML. La recomendación es editar manualmente dentro de Claude Design en lugar de pedir cada pequeño cambio al agente, ya que la edición manual ahorra una gran cantidad de tokens.

Exportas el diseño como HTML o ZIP, lo llevas a Claude Code o Codex, y este construye el código y lo sube a Vercel, el cual proporciona un enlace en vivo. Si necesitas almacenar información del sitio, conectas Supabase como base de datos. También se puede conectar un dominio propio.

Se puede, hay un conector y un MCP para WordPress. Sin embargo, la preferencia en la sesión fue construir en Claude y desplegar en Vercel, porque trabajar con WordPress es más engorroso en comparación con el flujo fluido de Claude Code y Vercel.

Directamente de Firecrawl. Proporcionan un fragmento de código que se instala una vez en Claude Code, y a partir de ahí el Skill está disponible en cada sesión. También tienen un plan gratuito que cubre la mayoría de las necesidades.

Sí, Claude Design es una herramienta colaborativa. Si cada miembro del equipo tiene una cuenta de Anthropic, todos pueden trabajar en el mismo proyecto. Es posible configurar un Design System predeterminado para la organización y también un Design System separado para cada cliente.

¿Qué hay en la próxima sesión?

La grabación completa de la sesión 25, junto con todos los Skills y prompts que repasamos, está disponible para los miembros del club en la biblioteca de contenidos. ¿Construiste algo con marca en minutos durante la sesión? Compártelo en la comunidad. Este es exactamente el conocimiento que alimenta al club.

Preguntas frecuentes

¿Claude Design es gratuito?

No. Se requiere una suscripción de pago a Claude. Además, sus tokens son independientes y están limitados respecto al uso habitual, y se reinician cada 5 horas. En cambio, Vercel y Supabase, que se necesitan para subir un sitio web en vivo, ofrecen un plan gratuito generoso.

¿Qué es un Design System y es como un Brand Book?

Es similar a un Brand Book pero más completo. Más allá de los colores y las fuentes, también incluye los componentes y el código, lo que permite traducir la marca directamente al mundo digital y a las aplicaciones. Es lo primero que se construye y lo que garantiza que cualquier resultado salga con marca y sea uniforme.

¿Cómo se extrae un Design System de un sitio web que no es mío, como una gran marca?

Se le puede pedir a Claude Code que revise el sitio y construya un Design System a partir de él, pero el resultado será más débil porque no tienen el código original del sitio web. Funciona mucho mejor cuando el activo es de ustedes, ya que entonces Claude accede al código y a los componentes mismos y no solo a la apariencia visual.

¿Se pueden editar la presentación y la página después de haber sido creadas?

Totalmente. Hacen clic en Editar y todo el texto se vuelve interactivo para su edición manual. También se puede exportar a PDF, video, PowerPoint o HTML. La recomendación es editar manualmente dentro de Claude Design en lugar de pedir cada pequeño cambio al agente, ya que la edición manual ahorra una gran cantidad de tokens.

¿Cómo se convierte la maqueta en un sitio web en vivo con dominio y alojamiento?

Se exporta el diseño como HTML o ZIP, se lleva a Claude Code o Codex, y este construye el código y lo sube a Vercel, que proporciona un enlace en vivo. Si es necesario guardar información del sitio, se conecta Supabase como base de datos. También se puede conectar un dominio propio.

¿Se puede subir esto a un sitio de WordPress existente?

Se puede, hay un conector y un MCP para WordPress. Sin embargo, la preferencia en la sesión fue construir en Claude y desplegar en Vercel, porque trabajar con WordPress es más engorroso en comparación con el flujo fluido de Claude Code y Vercel.

¿De dónde se obtiene el Skill de Firecrawl?

Directamente de Firecrawl. Proporcionan un fragmento de código que se instala una vez en Claude Code, y a partir de ahí el Skill está disponible en cada sesión. También tienen un plan gratuito que cubre la mayoría de las necesidades.

¿Se puede trabajar en esto en equipo?

Sí, Claude Design es una herramienta colaborativa. Si cada miembro del equipo tiene una cuenta de Anthropic, todos pueden trabajar en el mismo proyecto. Es posible configurar un Design System predeterminado para la organización y también un Design System separado para cada cliente.