El tuit que finalmente me atrapó fue una simple captura de pantalla. Alguien había escrito cinco palabras en Claude Code — "build me a site like Stripe" — y presionado enter. Cuarenta segundos después, una landing page. Tipografía limpia. Un hero con el tipo exacto de degradado sutil que Stripe realmente utiliza. Tarjetas de características con la jerarquía correcta. No era una sopa de degradados morados y blobs. No era "diseño IA". Parecía algo que un diseñador real lanzaría un martes por la tarde.
Este año había visto un centenar de esas demostraciones. La mayoría las había ignorado. Pero esta tenía algo que las demás no — la salida no venía de un prompt. Provenía de un archivo DESIGN.md del repositorio awesome-design-md, añadido al proyecto como un simple documento markdown. La skill codificaba los principios de diseño de Stripe — la escala tipográfica, el ritmo de los espacios, la disciplina cromática, las retículas de layout — y Claude Code simplemente los usaba.
Eso es lo que está ocurriendo silenciosamente en abril de 2026 mientras todos discuten sobre Figma Make versus Canva Magic Studio. Claude Code dejó de ser una herramienta de programación. Se está convirtiendo en una plataforma de diseño. No un reemplazo de Figma en el sentido de "dibujar cajas en un lienzo". Algo más extraño y potente: un sistema donde los principios de marca se codifican en skills, y luego se replican en cualquier formato que desees — landing pages, pitch decks, informes de marca, sistemas de identidad, visualización de datos.
El fin de semana pasado reconstruí mi stack de diseño en torno a esto. Esto es lo que aprendí: qué funciona, qué sigue fallando y el proceso exacto de cinco pasos que ahora utilizo para entregar trabajos de diseño que no parecen generados por un modelo.
La crítica de que “el diseño de IA se ve genérico” — y por qué está a punto de desaparecer
Seamos claros: la crítica era válida. Hasta hace poco, casi siempre era cierta.
Ya conoces las señales. La típica sección principal con un titular centrado, un botón con degradado y tres tarjetas de características debajo. Degradado de púrpura a rosa. Ilustración de mancha abstracta. Un carrusel de testimonios con tres citas genéricas. Cada sitio generado por IA parecía diseñado por el mismo becario ligeramente confundido que solo había visto una captura de Dribbble.
La razón es aburrida. Los modelos promedian. Si le pides a un modelo “diseña una landing page de SaaS”, emite la media estadística de todas las landing pages de SaaS de sus datos de entrenamiento. Que resulta ser un degradado púrpura. No es culpa de nadie. Es solo matemáticas.
Esto es lo que cambió. Los agentes de codificación se volvieron lo suficientemente buenos en front-end como para que el cuello de botella se desplazara aguas arriba — a las instrucciones. Y alguien descubrió que, si le das al agente una especificación lo bastante rica de cómo debe lucir el diseño en el lenguaje de marca particular, el problema del promedio desaparece. La salida deja de ser “la media de todos los diseños” y pasa a ser “una aplicación competente de tu sistema específico”.
Eso es lo que son los archivos DESIGN.md. Documentos Markdown que capturan un sistema de diseño — tema visual, paleta de colores con nombres semánticos, jerarquía tipográfica, estados de componentes, principios de layout, reglas de elevación, escalas de espaciado. El repositorio de VoltAgent se lanzó el 31 de marzo de 2026. Alcanzó aproximadamente 50,000 estrellas en GitHub en dos semanas. Más de cincuenta y cinco sistemas de marca incluidos — Claude, Stripe, GitHub, Notion, Vercel, Apple, Figma, Spotify y suficientes otros como para que casi siempre encuentres algo cercano a lo que estás construyendo.
Coloca el DESIGN.md en tu proyecto. Haz referencia a él en una skill. Claude Code ahora cuenta con un vocabulario de diseño coherente y con criterio propio desde el cual trabajar. El problema de la estética genérica de la IA — en su mayoría — desaparece.
Y no, no puedo verificar la estadística de que “los sitios de calidad convierten un 91% mejor” que circula en los pitches sobre esto — lo busqué y la fuente no se sostiene. Lo que sí puedo verificar: la investigación de Baymard sobre 200,000 horas de estudios de UX, y un hallazgo ampliamente citado de que los usuarios forman una opinión visual de un sitio en unos 50 milisegundos. El diseño ya no es cosmético — es la base sobre la que se construye la conversión. No necesitas un porcentaje inventado para saberlo.
Por qué el “diseño code-first” es una idea más grande de lo que parece
Acompáñame en esto, porque me llevó un tiempo ver toda su dimensión.
La industria del diseño ha pasado quince años dentro de un paradigma de lienzo visual. Abres Figma. Dibujas rectángulos. Los ajustas en su sitio. Aplicas estilos. El archivo es el artefacto, y el código es algo que los ingenieros extraen después — normalmente mal, con mucho retrabajo.
El diseño code-first invierte este proceso. El sistema de diseño es código (tokens, componentes, patrones — ya estructurados). El agente lee ese código, lee tus reglas de marca en DESIGN.md, y genera un nuevo artefacto en el mismo lenguaje. Cuando necesitas un mockup en Figma, exportas. Cuando necesitas una landing page, publicas. Cuando necesitas una presentación, generas diapositivas en HTML. Cuando necesitas un informe PDF con branding, mismo origen de la verdad. El artefacto se convierte en una proyección del sistema, no al revés.
Esa es la premisa, al menos. Lo que me convenció de que era más que un argumento de venta fue el rango de formatos. Esto es lo que he visto producir a Claude Code, de forma limpia, a partir de la misma habilidad de marca codificada:
- Landing pages completas en el lenguaje visual de Spotify, Stripe o Nike — un solo prompt, servidor local corriendo en minutos
- Presentaciones HTML con tipografía consistente, grillas de layout y colores de marca en veinte diapositivas
- Informes y propuestas con branding que parecen plantillas hechas por una agencia de diseño
- Visualizaciones de datos que heredan automáticamente el sistema de color de la marca — sin paletas de gráficos fuera de lugar
- Sistemas de identidad parciales — isotipos, tokens de color, escalas tipográficas, espaciados — empaquetados en una carpeta de entrega
Te mostraré una ejecución completa de esto en la sección de implementación. Pero primero, el proceso — porque esta es la parte que la mayoría del contenido sobre “diseño con IA” omite.
El proceso de 5 pasos que uso ahora (y por qué cada paso importa)
Durante los primeros días, seguía cometiendo errores. Saltaba directamente a “genera una landing page” y luego pasaba una hora intentando arreglar lo que estaba mal. El proceso que sigue no es sofisticado. Es simplemente lo que ocurre cuando dejas de saltarte pasos.
Paso 1 — Elige primero el formato de salida
No “diseña algo para mí”. No “un sitio”. Específicamente: landing page, pitch deck, informe de una página, kit de identidad, dashboard de datos, plantilla de email. El formato determina las restricciones, y las restricciones determinan lo que importa. Un pitch deck necesita una tipografía legible a dos metros; una landing page se centra en la jerarquía de conversión; un kit de identidad en la adaptabilidad del logo.
Escribir el formato primero también fija el modelo mental. Dejas de diseñar “una cosa” y empiezas a diseñar ese tipo específico de cosa.
Paso 2 — Integra los conectores que realmente vas a usar
Aquí es donde Claude Code supera a cualquier herramienta visual, porque las integraciones son simplemente servidores MCP y plugins que añades al proyecto. Los que uso en casi todos los trabajos de diseño ahora:
- Firecrawl para scraping de marca. Su formato
brandingextrae los colores, tipografía, espaciado, logo y componentes UI del sitio objetivo en datos estructurados que puedes consultar. Tarda unos tres segundos. Sustituye lo que antes era una hora de “copiar los hex codes del sitio de un competidor a mano”. - NanoBanana 2 vía Kie API para generación de imágenes. El precio real es $0.045 por 0.5K, $0.067 por 1K, $0.101 por 2K y $0.151 por 4K — aproximadamente la mitad de la tarifa directa de Google. Había oído “$0.06 por imagen” en Twitter; es aproximadamente correcto para resolución 1K, pero pagas por nivel de resolución, no un precio fijo. Conviene saberlo antes de generar cien assets.
- Conectores de Gmail y Google Calendar — puede sonar extraño para flujos de trabajo de diseño, pero así envío pruebas, agendo llamadas de revisión desde la misma sesión y extraigo notas de marca de PDFs enviados por email.
- Figma MCP — sigue siendo útil para extraer contexto de archivos existentes cuando el cliente ya tiene un sistema Figma que debo respetar.
Conéctalos una vez en tu proyecto. Estarán disponibles en todas las sesiones futuras.
Paso 3 — Material de referencia como input de primera clase
Aquí es donde la mayoría se queda corto. El “material de referencia” no es un mood board de inspiración. Es input estructurado:
- El archivo DESIGN.md para la estética de marca hacia la que apuntas
- Archivos de fuentes específicos o URLs de Google Fonts (Claude los cargará en el HTML generado)
- Assets de logo o marcas existentes que el trabajo debe respetar
- Dos o tres referencias visuales — un board de MidJourney, una plantilla de Canva que te gustó, un sitio de la competencia que quieres evocar sin copiar
Coloca todo esto en una carpeta /design-input/ dentro del proyecto. Indica a Claude que lo lea antes de generar. Este solo hábito mejoró la calidad de mis resultados más que cualquier truco de prompt.
Paso 4 — Genera el diseño inicial
Ahora, y solo ahora, pide el artefacto. Un párrafo, específico:
“Crea una landing page para una fintech de Serie A llamada Folio. Usa el DESIGN.md en /brand/stripe.md como lenguaje visual. Incluye un hero, una cuadrícula de tres columnas para features, una sección de precios con tres niveles, social proof con cuatro placeholders de logos y un footer con CTA. Usa el logo en /design-input/logo.svg. Genera imágenes de apoyo con NanoBanana 2 — sin URLs de bancos de imágenes.”
Obtendrás un primer borrador que está genuinamente al 70–80%. No es perfecto. Nunca es perfecto en la primera ronda. Pero lo suficientemente bueno como para que tu siguiente paso sea refinar, no rescatar.
Paso 5 — Codifica el resultado como una skill reutilizable
Este es el paso que se multiplica. Una vez que has iterado hasta algo que te convence — la tipografía es la adecuada, el espaciado es el tuyo, los patrones de componentes encajan con la personalidad de tu marca — no tiras ese trabajo cuando termina la sesión.
Lo guardas como una skill. Una carpeta con el DESIGN.md, tus ajustes, tus patrones de prompt, los conectores que usaste y los ejemplos de outputs que aprobaste. La próxima vez que necesites algo en ese tono de marca — deck, página, informe, extensión de identidad — solo tienes que consultar la skill y la base de calidad ya está ahí.
Esto es lo que Figma no puede copiar. No porque Figma sea malo. Sino porque Figma almacena archivos, y Claude Code almacena sistemas. Diferente sustrato, diferente efecto compuesto.
Consejo profesional: usa subagentes para verificar los textos generados en cualquier diseño que contenga afirmaciones reales. La semana pasada detecté tres estadísticas inventadas en un pitch deck ejecutando un subagente de investigación sobre el HTML final antes de exportar. Toma treinta segundos. Salva una relación con el cliente.
Lo que realmente probé — Tres ejecuciones, resultados honestos
El proceso abstracto es barato. Esto es lo que sucedió cuando ejecuté trabajos reales el fin de semana pasado.
Ejecución 1: Landing page de un solo intento con la estética Lovable
Objetivo: una landing page para un producto de IA ficticio en el lenguaje visual de Lovable (degradados suaves, espacios generosos, sans-serif amigable). Añadí design-md/lovable.md al proyecto, describí el producto en un párrafo, pedí un sitio de marketing de una sola página con hero, tres bloques de beneficios, una fila de testimonios y una sección de precios.
Lo que obtuve: una página Next.js funcional en unos cuatro minutos. Tipografía: perfecta. Ritmo de espaciado: correcto, sin secciones apretadas. El degradado se usó una sola vez, en el hero, lo cual es la disciplina correcta de Lovable — no “degradado en todo” como suelen hacer las herramientas de IA por defecto. Los avatares de los testimonios volvieron como retratos generados por NanoBanana que parecían humanos reales, en lugar de los renders inquietantes que solía obtener hace seis meses.
Qué falló: las tarjetas de precios inicialmente tenían una sombra que no estaba en el sistema Lovable. Señalé la sección de elevación en DESIGN.md y dije “usa el tratamiento de tarjeta de la librería de componentes, no una sombra”. Solucionado en una sola pasada.
Ejecución 2: Página de misión al estilo SpaceX
Una prueba más difícil — la estética de SpaceX es específica e implacable. Tipografía fina y condensada, disciplina estricta de dark mode, colores de acento contenidos, imágenes de alto contraste. La mayoría del “diseño IA” fracasa al intentar imitar esto porque diluye la contención que hace que SpaceX se vea como SpaceX.
Usando el DESIGN.md correspondiente: el resultado fue limpio. No tan bueno como el del equipo de diseño real de SpaceX (no voy a insultarlos afirmando lo contrario), pero realmente aceptable. La escala tipográfica se mantuvo. Los fondos negros siguieron siendo negros, en lugar de virar a un gris oscuro por defecto. Las imágenes llegaron a través de NanoBanana 2 en resolución 2K y tenían el toque cinematográfico adecuado. Tiempo total desde el prompt hasta el primer borrador listo para enviar: unos siete minutos, incluyendo la generación de imágenes.
Ejecución 3: Landing page de documentación para desarrolladores al estilo Llama
Esta fue la sorpresa. Asumí que las landing pages de documentación eran el caso fácil para las herramientas de diseño IA — son cuadradas, predecibles, funcionales. Resulta que el caso fácil no es realmente “fácil”, sino “implacable con los detalles”. El margen para una tipografía descuidada se reduce cuando hay tan poco adorno visual detrás del cual esconderse.
El enfoque DESIGN.md fue clave aquí. Como el sistema de marca de Meta/Llama está codificado — bloques de código monoespaciados, azul de acento específico, jerarquía de encabezados disciplinada — el resultado respetó esas reglas automáticamente. Nada de púrpura fuera de lugar. Nada de “docs diseñadas por IA”. Simplemente... documentación. Del tipo aburrido que, en realidad, es el bueno.
Donde Todo Aún Se Rompe
Quiero ser honesto aquí porque cada hilo de “el diseño con IA está resuelto” minimiza las grietas.
La memoria y el contexto siguen siendo una limitación. La ventana de contexto de Claude Code, incluso con la opción de 1M en Opus 4.6, se agota si tu proyecto de diseño tiene veinte pantallas, seis conectores y un DESIGN.md extenso. Empezarás a ver decisiones inconsistentes entre pantallas generadas en diferentes partes de la sesión. La solución es dividir las sesiones por artefacto e incluir solo el contexto que ese artefacto específico necesita. No es elegante. Solo práctico.
Los sistemas de identidad verdaderos necesitan a un humano. El diseño de logotipos —el logotipo real, no una variación tipográfica— sigue siendo algo que no lanzaría sin la mano de un diseñador de verdad. Claude Code generará algo. Se verá “bien”. No se verá como el trabajo de alguien que ha pasado quince años pensando en marcas. Si tu marca depende de su logomarca, contrata a un humano para esa parte. Todo lo que rodea al logotipo (sistema tipográfico, tokens de color, espaciados, reglas de uso, extensiones de marca) es donde este flujo de trabajo realmente brilla.
La calidad del material de referencia lo es todo. Si le das referencias mediocres, obtendrás resultados mediocres. Esto no sorprende a nadie, y aun así la gente sigue intentando crear diseños de un solo intento partiendo de un prompt en blanco. El cuello de botella ahora eres tú: lo que recopilas, lo que codificas en el DESIGN.md, las restricciones que das al agente.
El formato de branding de Firecrawl es bueno pero no mágico. Extrae colores y tipografía de forma fiable. A veces interpreta mal los sistemas de espaciado (confundiendo el ritmo de márgenes con padding arbitrario) y no siempre captura los estados de interacción. Trátalo como un punto de partida, no como una auditoría de marca terminada.
La generación de imágenes aún toma decisiones extrañas. NanoBanana 2 en 4K es realmente impresionante, pero ocasionalmente producirá una imagen principal que ignora una instrucción de estilo y recurre a su estética preferida. Reserva una segunda pasada para control de calidad de imágenes en cualquier proyecto comercial.
Dónde deja esto a Figma y Canva
Pregunta incómoda. Permíteme responderla con honestidad en vez de andarme con rodeos.
Canva cuenta con 260 millones de usuarios activos mensuales y una valoración de 42.000 millones de dólares según la venta de acciones para empleados de agosto de 2025. No van a desaparecer. El uso de Magic Studio va en aumento: solo los usuarios universitarios experimentaron un crecimiento interanual del 42%. El foso defensivo de Canva es la distribución y la amplitud de plantillas, no el propio fundamento del diseño. Seguirá dominando el mercado de “personas no diseñadoras que necesitan una publicación social en cuatro minutos”.
Figma es más difícil de predecir. Para equipos profesionales de producto que trabajan en interfaces vivas con traspaso a desarrollo, el modelo de componentes y el modo de desarrollo de Figma siguen siendo la mejor herramienta disponible. Pero para buena parte del trabajo que antes hacía en Figma —exploraciones de marca, primeros bocetos de layouts, páginas de marketing, presentaciones, informes puntuales— ahora recurro primero a Claude Code. No porque sea mejor dibujando rectángulos (no lo es). Sino porque es mejor generando el artefacto final directamente en el mismo lenguaje que necesito.
Una encuesta reciente de la industria reveló que el 53% de los profesionales ya reconoce el impacto significativo de la IA en los resultados de diseño. No es una estadística a futuro. Es ahora mismo. Las herramientas de diseño que se adoptarán en los próximos dieciocho meses serán aquellas que se sitúen más cerca del flujo de trabajo basado en sistemas codificados, ya sea Claude Code con skills, Figma integrando agentes más avanzados, o algo que aún no tiene nombre.
Mi predicción para este año: Figma seguirá dominando el diseño de producto a escala de equipo. Canva seguirá dominando la velocidad para quienes no son diseñadores. Pero se abre una nueva vía —el “diseño code-first”— y Claude Code es actualmente la herramienta más fuerte en ese espacio.
Qué Cambió Realmente de Mi Lado
Concretamente, después de tres semanas de esto:
- Páginas de marketing que antes me tomaban cuatro horas en Figma más otras cuatro en código, ahora me llevan unos noventa minutos de principio a fin, y soy yo quien entrega el código, no un mockup.
- Presentaciones para clientes pasaron de medio día peleando con plantillas a una generación de cuarenta minutos más una pasada de pulido.
- Rondas de exploración de marca —el típico “dame tres direcciones para una nueva identidad”— son genuinamente un ejercicio de una hora en vez de un sprint de dos días, porque cada dirección es una variación de habilidad, no un archivo desde cero.
- El trabajo que hace mi diseñadora junior cambió. Ya no produce los primeros bocetos; ahora selecciona material de referencia, ajusta archivos DESIGN.md y revisa los resultados generados. Más impacto, mejor aprovechamiento de su criterio.
No pretendo dar un número universal de productividad porque el mío es mío y el tuyo será el tuyo. Pero el patrón —menos horas en una herramienta de diseño, más horas en prompts y revisión— va a ser casi universal para quienes hacen este tipo de trabajo.
El Verdadero Cambio
Esto es lo que señalan la demo de Jack Roberts, el repositorio DESIGN.md y las integraciones de NanoBanana, aunque nadie lo diga en voz alta.
El diseño está dejando de ser sobre herramientas y está empezando a ser sobre gusto más alfabetización en sistemas. Si puedes articular cómo se ve lo bueno en una forma estructurada —colores, tipografías, espaciados, reglas de componentes, ejemplos de uso— la máquina puede proyectar eso en cualquier formato que necesites. Lo que la máquina no puede hacer es tener el gusto en primer lugar. No puede decirte que la contención de Lovable es toda su personalidad, o que el negro de SpaceX no es un "modo oscuro" sino un argumento visual, o que la tipografía de Claude se siente más cálida que la de Stripe aunque las diferencias sean microscópicas.
Esa es la habilidad por la que se pagará a los diseñadores en la próxima década. No por mover píxeles. Por codificar criterio. Todo lo demás —el renderizado, la replicación, la traducción de formatos— ahora es un problema resuelto que puede manejar un CLI de $20 al mes.
Así que esta noche, o este fin de semana, haz una sola cosa: elige una marca que admires. Escribe su DESIGN.md tú mismo, desde cero, en un archivo markdown sencillo. No descargues la versión de VoltAgent. Piensa realmente en la jerarquía tipográfica, la semántica del color, el ritmo del espaciado, la disciplina de los componentes. Escríbelo en palabras.
Cuando termines, sabrás algo que la mayoría de los diseñadores aún no sabe: lo que se siente ver cómo tu propio gusto se convierte en software.
Preguntas Frecuentes
¿Qué es un archivo DESIGN.md y cómo funciona con Claude Code?
Un archivo DESIGN.md es una especificación en markdown plano de un sistema de diseño de marca — tokens de color, escala tipográfica, reglas de espaciado, estados de componentes y principios de layout — escrita en un formato que los LLM interpretan de forma nativa. Lo colocas en un proyecto y Claude Code lo lee al generar la interfaz, manteniendo la salida alineada con ese lenguaje visual específico de la marca en lugar de promediar hacia una estética genérica de IA. El repositorio awesome-design-md tiene más de 55 ejemplos listos para usar.
¿Puede Claude Code realmente reemplazar Figma para trabajos de diseño?
Para un segmento específico — páginas de marketing, pitch decks, exploración de marca, reportes, primeras versiones de UI — sí, especialmente si te sientes cómodo trabajando en código. Para diseño de producto en equipo con traspaso a desarrollo y librerías de componentes vivas, Figma sigue siendo la herramienta adecuada. La respuesta realista es: "Claude Code reemplaza quizá el 40% de lo que usaba Figma", y ese porcentaje crece mes a mes.
¿Cuánto cuesta realmente NanoBanana 2 a través de la API de Kie por imagen?
El precio real es escalonado según la resolución: $0.045 para 0.5K, $0.067 para 1K, $0.101 para 2K y $0.151 para 4K, con un descuento del 50% en la API por lotes. Es aproximadamente la mitad de la tarifa directa de Gemini 3.1 Flash Image de Google. El número de "$0.06 por imagen" que circula en Twitter es aproximadamente correcto solo para la salida de 1K — consulta la página de precios de Kie para el desglose actualizado.
¿Cómo extrae Firecrawl el formato de branding de una identidad de marca?
El formato branding de Firecrawl rastrea una URL objetivo y devuelve datos estructurados de marca: paleta de colores, stack tipográfico, observaciones de espaciado, activos de logotipo y patrones recurrentes de componentes UI. Lo llamas como firecrawl_scrape con formats: ["branding"] y obtienes una respuesta JSON que tu agente puede usar como material de referencia. Es rápido y bastante preciso en colores y tipografía — menos fiable en sistemas de espaciado y estados de interacción.
¿Claude Code es adecuado para un diseñador que no es desarrollador?
Honestamente, todavía no. El flujo de trabajo asume comodidad con la terminal, carpetas y la lectura de código generado lo suficientemente bien como para detectar problemas. Un diseñador sin experiencia en código encontrará fricción. Un diseñador que haya pasado un año experimentando con HTML/CSS lo asimilará en un fin de semana. Canva y Figma AI siguen siendo mejores puntos de entrada para quienes no programan. Para una visión más profunda del lado estructurado de esto, consulta mi recorrido por el workflow de sistemas de diseño con IA sobre el mismo tema.
Trabajemos Juntos
¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.
- Fiverr (desarrollos e integraciones a medida): fiverr.com/s/EgxYmWD
- Portafolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
