⚡️ Crea tu branding con una foto!
El workflow completo que reemplaza a una agencia entera.
Ayer publicamos el resultado de un prompt en ChatGPT. Una foto de una hamburguesa, tres líneas de prompt, y salió el brand book completo de un restaurante ficticio llamado La Brava. +340 mil views después, el mensaje quedó claro: lo que antes costaba 8 mil dólares y 3 semanas ahora sale en 40 segundos.
Pero ese brand book es apenas el punto de partida.
Hace una semana, Anthropic lanzó Claude Design, una herramienta en research preview que convierte esa imagen del brand book en un design system funcional, y después usa ese sistema para generar landings, decks, carruseles y apps reales dentro de un canvas visual. El flujo que antes requería tres herramientas y muchas iteraciones ahora vive en una sola.
Hoy lo vamos a recorrer entero. Todo replicable. Todo con prompts listos para copiar. La hamburguesa es el ejemplo, pero el workflow funciona con cualquier producto.
Vamos.
Paso 1. La foto y el brand book
Este paso es el que viste ayer. Una foto de producto subida a ChatGPT, y el prompt:
Crea el brand guideline visual completo para un restaurante de hamburguesas llamado La Brava. Basado en la foto adjunta. Incluye paleta de colores, tipografía primaria y secundaria, variantes de logo, iconografía, y aplicaciones de marca (tarjetas, servilletas, merch). Estilo: colorido, foodie, tradicional con twist moderno.
El output es una imagen tipo brand guideline con paleta, tipografías, logos, patrones e iconografía. Descárgala.
El brand book general te da la visión completa de la marca, pero el siguiente paso en Claude Design va a pedir assets más limpios para afinar el sistema. Aprovecha el mismo chat de ChatGPT y lanza un segundo prompt similar a este para obtener una hoja de assets aislados:
Genera # de slides de assets individuales para la marca La Brava, basada exactamente en el brand guideline anterior. Incluye el logo principal, logo secundario, monograma LB, sello circular, íconos de hamburguesa, papas, fuego, chile, vaso, servilleta y sticker “Antojo serio”. Cada asset debe estar aislado, centrado y separado en su propio recuadro, sin nada alrededor, fondo transparente, alta resolución, sin mockups ni aplicaciones. Mantén exactamente el mismo estilo, colores, tipografía y sistema visual del brand guideline anterior. Fondo blanco limpio. Composición tipo asset sheet para poder recortar cada elemento fácilmente.
Descarga la imagen y, si tienes herramientas para separarlos (un editor de imagen, remove.bg, o transformarlos a svg), quédate con los assets sueltos. Te van a servir en el Paso 3 para refinar el sistema.
Paso 2. Abrir Claude Design
El design system se guarda a nivel de cuenta; una vez configurado, todo proyecto que crees va a heredarlo automáticamente. Puedes tener varios design systems activos al mismo tiempo si manejas varias marcas.
Para este ejemplo creamos uno llamado “La Brava Design System”. El flujo es: primero Design systems y luego crear.
Paso 3. Subir el brand book y generar el design system
En el setup del design system, Claude te pide assets de marca. Acepta varios formatos y lo ideal es que subas todo lo que tengas en esta primera pasada, no uno por uno. Mientras más material le des, más fiel queda la extracción.
Sube en conjunto: la imagen del brand book general que generaste en el Paso 1, la hoja de assets individuales con los logos aislados y la iconografía, y los archivos de tipografía (.otf, .woff, .woff2, .ttf) si los tienes. Si alguna tipografía es gratuita en Google Fonts basta con mencionar el nombre, pero si es de pago o custom y tienes la licencia, sube el archivo. También puedes sumar referencias extra que refuercen el tono: mockups, fotos de producto, un deck que refleje la personalidad o cualquier pieza ya diseñada que represente la marca.
Una vez cargado todo, dale unos minutos. Claude lee los assets, identifica la paleta, carga las tipografías, reconoce el logo en sus variantes, detecta iconografía y patrones, y construye un design system completo. Lo presenta como un UI kit editable dividido en módulos: Type (Body, Display, Scale), Color (Paleta, Semantic tokens), Spacing (8-based scale, Corner radii, Shadows), Components (Buttons, Form inputs, Badges, Menu cards) y Brand (Graphic resources, Icon set).
Si el output mantiene los colores, la tipografía y el espíritu visual del brand book, el sistema quedó bien extraído.
Sin embargo, el primer borrador del sistema nunca sale perfecto. Entra a cada módulo, revísalo y ajusta lo que no te convenza directamente en el chat de edición del sistema. Todo se hace conversando; no hay formularios raros.
Cuando estés conforme, activa el toggle “Published”. Desde ese momento, todo proyecto nuevo en esa organización tiene ese sistema de diseño disponible.
Paso 4. La landing page
Con el design system publicado, ahora creamos el primer proyecto real. Desde el home de Claude Design, botón de nuevo proyecto y el prompt.
Crea una landing page para La Brava, un nuevo restaurante de hamburguesas con personalidad retro-foodie. Estructura: hero con el nombre de la marca y el claim “Hamburguesas con actitud”, más una foto grande del producto; sección de menú con 4 hamburguesas insignia, cada una con nombre, descripción de una línea y precio; sección breve “Nuestra historia” con dos párrafos que transmitan personalidad; sección de ubicación y horarios; footer con links a redes sociales. Mobile-first, estados hover, se permiten fotos placeholder.
Claude genera la landing en el canvas donde la puedes revisar y empezar a iterar.
Paso 5. El carrusel de Instagram
Nuevo proyecto dentro de la misma organización. El design system ya está aplicado, así que el prompt es mucho más corto.
Crea un carrusel de Instagram de 5 slides anunciando la apertura de La Brava. Cada slide debe estar en formato 1080x1350 (vertical 4:5). Slide 1: portada con el nombre de la marca y una fecha de apertura grande. Slide 2: la hamburguesa insignia, con placeholder de foto de producto y nombre. Slide 3: la historia de la marca en máximo 50 palabras, con tipografía grande. Slide 4: destacados del menú, 4 productos con precios. Slide 5: dirección y fecha de apertura como CTA final. Los 5 slides deben sentirse como una sola pieza cohesiva.
Claude genera los 5 slides en el canvas. Cada uno se puede iterar por separado. El export permite sacarlos como imágenes listas para subir a Instagram, o enviarlos a Canva si prefieres terminarlos ahí con tipografías propias y ajustes finos.
Paso 6. La app móvil
El proyecto más impresionante de todos. Un prototipo funcional con pantallas navegables.
Prototipa una app móvil funcional de pedidos para La Brava. Pantallas navegables entre sí con transiciones animadas: 1) Home con chips de categorías, productos destacados en carrusel horizontal con scroll suave, y animación sutil de entrada al cargar la pantalla. 2) Menú completo con filtros por tipo, donde al seleccionar un filtro las cards se reordenan con animación fluida (fade + slide). 3) Detalle de producto con hero image que hace parallax al hacer scroll, opciones de personalización (queso extra, tocino, papas grandes) con toggles animados, y selector de cantidad con micro-animación al tocar + y -. 4) Carrito con resumen editable, swipe horizontal para eliminar items con transición suave, y total que se actualiza con animación de número al cambiar cantidades. 5) Checkout con formulario de datos de entrega, campos con estados focus animados, validación en tiempo real con feedback visual, y botón de confirmar con estado de loading. 6) Confirmación con animación de éxito (check animado, número de pedido apareciendo con stagger), tiempo estimado con contador dinámico, y un pequeño detalle de personalidad de la marca al final. Transiciones entre pantallas con page slide horizontal. Estados hover, active y pressed bien marcados en todos los elementos interactivos. Spring animations en los toggles y botones para sensación táctil. Todo debe sentirse como una app real en producción, con ritmo y respiración propios, no como un mockup estático.
El canvas te muestra el prototipo interactivo. Clicas los botones y realmente navegas entre pantallas. Esto sirve para testear con usuarios, presentar a inversionistas, o validar el flujo antes de gastar un centavo en desarrollo real.
Tip: Pide una versión dark mode como alternativa. “Show me the same prototype in dark mode as a variant.” A veces la marca funciona mejor en oscuro y no te das cuenta hasta que lo ves.
Paso 7. Handoff a Claude Code. El salto a producción.
Aquí es donde Claude Design gana de verdad frente a cualquier otra herramienta de diseño con IA. Dentro de cada proyecto, en la esquina superior derecha, está el botón “Export”. Entre las opciones aparece “Handoff to Claude Code” con dos destinos: Send to local coding agent o Send to Claude Code Web.
Lo que pasa detrás no es un export de archivos. Claude Design empaqueta el diseño con su intención de diseño (design intent) y se lo pasa a Claude Code como contexto nativo. Claude Code entiende no solo qué tiene que construir, sino con qué componentes, qué spacing, qué tokens, y cómo debería comportarse la interactividad.
Si eliges “Send to local coding agent”, Claude Code se abre en tu terminal local y empieza a construir el proyecto real. Para la app de La Brava, un prompt de continuación razonable sería:
Build this as a Next.js 15 project with TypeScript, Tailwind, and App Router. Replicate the design system tokens as CSS variables in globals.css. Create the landing as home page. Wire up the ordering app with state management. Connect Supabase for orders persistence with a table “orders” (id, items, total, delivery_address, status). Prepare Vercel deploy with documented env vars.
Claude Code abre archivos, instala dependencias, escribe cada componente, configura Supabase y te muestra cada paso con diff para aprobar. Lo que toma un developer una semana, sale en una tarde con supervisión.
Si eliges “Send to Claude Code Web”, todo pasa en la nube sin instalar nada. Útil para prototipos rápidos que no necesitas tener en local, o si estás trabajando desde un equipo donde no puedes instalar el CLI.
Para instalar Claude Code en local, por si aún no lo tienes:
npm install -g @anthropic-ai/claude-code
Tip: Antes del handoff, revisa bien el prototipo en Claude Design. Cualquier fricción que haya en el diseño se va a traducir en más iteraciones en el código. Es más barato iterar en Claude Design con inline comments que en Claude Code línea por línea.
3 herramientas en el papel
Un solo flujo en la práctica. Dos horas de trabajo activo.
Lo importante del flujo no es que cada paso sea posible. Cada paso por separado ya existía hace tiempo. Lo importante es que los artefactos se pasan de herramienta a herramienta sin perder identidad. El brand book de ChatGPT alimenta el design system de Claude Design, que alimenta cada proyecto que crees, que luego hace handoff a Claude Code con design intent incluido. La marca se mantiene consistente porque está escrita en código desde el paso 3, y porque Anthropic diseñó el handoff para que esa información viaje con el diseño.
Y si el producto no existe todavía, el workflow también funciona. Puedes tomar una foto de un empaque que solo imaginas, describirlo en el prompt, y salir al otro lado con un ecosistema de marca completo para validar con clientes antes de producir nada físico.
⚡️ Así hacemos las cosas en Weplash
Probamos las herramientas antes de hablar de ellas. Las rompemos un poco, filtramos lo que sirve, armamos workflows reales y luego lo convertimos en cursos, retos y guías prácticas dentro de la Academia.
Este ejemplo de La Brava es una muestra perfecta: una foto, ChatGPT Images 2.0, Claude Design y un flujo completo para pasar de una idea visual a una marca que ya puede vivir en landing, carrusel, app y producto. Pero hay más que puedes hacer con estas herramientas.
Y justo por eso se viene un nuevo reto en la Academia: Crea tu Branding con IA.
Durante 2 semanas vas a aprender a crear una marca completa desde cero usando ChatGPT Images 2.0 y Claude Design: logo, paleta, tipografía, manual de marca, design system y aplicaciones como tarjetas, packaging, merch, menús, carruseles y más.
No necesitas saber diseño ni dominar Photoshop, Figma o Canva. La idea es que aprendas a dirigir la herramienta con criterio, para que el resultado tenga intención visual y no parezca otro logo genérico perdido en internet.
Los 5 brandings más votados por la comunidad ganarán $300 USD cada uno.
Además, por lanzamiento, tienes $30 OFF en el primer ciclo usando el código BRANDING.
La IA ya puede ayudarte a construir una marca entera. En el reto vas a aprender a hacer que se vea como una marca de verdad.
¡Nos vemos adentro!
