Contenido detallado
🧩 El diseño se convirtió en código: el cambio de superficie
Durante más de 20 años, el diseño vivía en otra app: dibujabas en un editor y un equipo reconstruía eso en código, en otro lugar. Hoy, la superficie de diseño es el propio código. Lo describes, el agente genera la interfaz directamente en HTML/CSS y tú iteras ahí mismo.
El reconocimiento de que ahora la interfaz nace en el código y que el agente es quien la diseña según lo que describes.
Quien entiende esto deja de tratar el diseño como una «etapa separada» y empieza a iterar lo visual y el código en el mismo lugar — mucho más rápido.
Superficie de diseño = código · iteración en el mismo entorno · diseño como sistema, no como acto aislado.
🔁 Dónde vive el diseño — antes y ahora
- •Antes: diseño en la app de prototipos → ingeniería lo reconstruye en código → dos fuentes de verdad.
- •Ahora: describes en Claude Code → genera HTML/CSS → lo ajustas al instante, en el mismo lugar.
- •El ciclo "diseñar → entregar → reconstruir" se convirtió en un único ciclo de conversación.
⚠️ El talón de Aquiles
La IA, por defecto, es deficiente en diseño. No "siente" qué es bonito ni sabe por qué una buena pantalla es buena. Si solo pides «hazlo bonito», recibes el visual genérico de siempre. El resto del módulo resuelve exactamente eso.
🎯 Codificar el «buen diseño» — la idea que lo desbloquea todo
El giro del módulo cabe en una frase: si codificamos qué es un buen diseño, la IA lo reproduce de forma confiable. El buen diseño tiene reglas: proporción, espaciado, contraste, jerarquía. Cuando se convierten en un archivo que el agente lee y sigue, la calidad deja de ser cuestión de suerte y pasa a ser un sistema.
Escribir, en un archivo que el agente lee, las reglas objetivas que hacen que una pantalla sea buena.
Es lo que diferencia una «página genérica de IA» de «esto parece un producto de verdad».
Carga cognitiva (se lee en ~3 s) · espacio en blanco · proporción entre textos · espacios iguales · nada pegado a los bordes.
✓ Las reglas que hacen que «parezca profesional»
- ✓Se puede captar de un vistazo en ~3 s (sistema 1, no sistema 2).
- ✓Mucho espacio en blanco y espacios iguales entre los elementos.
- ✓Proporción consistente entre tamaños de texto (jerarquía).
- ✓Espacio para respirar: nada pegado a los bordes.
✗ Lo que «delata» la falta de profesionalismo
- ✗Demasiado texto: desaparece la lectura de 3 s.
- ✗Elementos pegados al borde de la pantalla.
- ✗Espacios desiguales y tamaños de fuente aleatorios.
- ✗"Hazlo bonito" sin ninguna regla cargada.
📐 La proporción áurea como atajo
Los sitios de "nivel Apple" no son bonitos por casualidad: la proporción entre tamaños de texto, los espacios uniformes y el margen de respiración siguen una proporción (~1,618). Y la IA es un pasante con un CI de 500: es capaz, pero sin la guía adecuada «se come los crayones». Dale la guía y entregará un trabajo de nivel sénior.
🖼️ Skills de diseño — open-design y power-design
Un buen diseñador tiene muchos colores en el pincel. Aquí tus "colores" son las skills. Dos forman los cimientos: open-design (un estudio local para crear sistemas de marca) y power-design (reglas universales que el agente carga antes de crear diapositivas y pantallas).
open-design = UI local de código abierto con ejemplos listos y soporte para varios modelos. power-design = repositorio de reglas (carga cognitiva, espacio en blanco, proporción, jerarquía).
open-design aporta versatilidad y coherencia de marca; power-design ofrece presentaciones y pantallas de «nivel Apple» sin que seas diseñador.
UI local · sistemas de diseño · elección del agente de código · ~3 s para entender · ~10 palabras por pantalla como límite.
🪜 Paso a paso — open-design (estudio local)
- En Claude Code, pide que clonar el repositorio del open-design y abrir el proyecto.
- Pide que instalar dependencias y ejecutar la aplicación (abre su propia interfaz).
- En la UI, elige tu agente de código (p. ej., Claude Code) y completa la configuración.
- Usa un ejemplo de la galería (dashboard, kanban) como base y crea tu sistema de diseño.
Cargar power-design antes de construir
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 s), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
🔍 Extraer la identidad visual — design-language-skill
El corazón del módulo: extraer, no copiar. Señalas una referencia que admiras y la design-language-skill genera un blueprint — paleta, fuentes, escala, espaciado, scaffold de layout: para volver a aplicarlos en tu proyecto, con identidad propia.
Una skill que, a partir de un sitio/captura de pantalla, genera un blueprint de diseño (colores, fuentes, escala, espaciado, diseño).
Es el atajo para que tu proyecto tenga «la vibra» de excelentes referencias. Extracción ≠ copia: capturas el por qué, no el código ajeno.
Extracción de marca · blueprint/tokens de diseño · scaffold de layout · múltiples ejes (color, tipografía, espaciado, ritmo).
Indica la referencia
Instala la skill y dile al agente cuál es el sitio de referencia y a qué se dedica tu negocio.
Recibe el blueprint
Colores, fuentes, espaciado y escala, junto con una captura de referencia.
Construye e itera
Pide la pantalla aplicando el blueprint y refínala con comentarios breves: "más espacio aquí", "logo en la esquina inferior izquierda".
🚫 La línea roja
Intentar reproducir el código de la referencia genera desorden y problemas de derechos de autor. Extrae la lenguaje de diseño (color, fuente, espaciado, ritmo) — no el código. Identidad propia, vibra inspirada.
🎬 Imágenes con IA, animación y 3D — el acabado
Con la base lista, lo visual lo eleva todo: imágenes con IA (incluso con texto en la imagen) para héroes y recursos de marca, además de loops sutiles y elementos 3D que aportan refinamiento. Atención: esto es acabado, no cimientos — viene al final.
Generación y edición de imágenes con IA para ilustrar pantallas, y animaciones de fondo + recursos 3D que añaden profundidad.
La imagen adecuada eleva cualquier interfaz, y generar 20 variaciones con el mismo estilo ahorra horas.
Referencia de estilo · edición guiada para «encajar» en el fondo · lote consistente · fotograma inicial = fotograma final · preferir 4K · 3D como refinamiento.
🖌️ Flujo práctico de lo visual
- •Imagen: genera la base describiendo el estilo; si no contrasta con el fondo, pídele al agente que escribir un prompt de edición (posición, contraste, encuadre) y ajusta.
- •Lote: usa una imagen como referencia y genera 20 variaciones coherentes (misma paleta, iluminación y lenguaje).
- •Ciclo: garantiza el mismo cuadro inicial y final; genera varias veces hasta que la unión quede limpia.
- •3D: los assets (p. ej., vía Spline) se incorporan como detalle de acabado, validados en alta resolución.
Generar una imagen principal al estilo de la marca
Genera una imagen principal al estilo de esta marca: [paleta y descripción]. Si no contrasta con el fondo, escribe un prompt de edición para ajustar el contraste y la posición, de modo que la imagen encaje perfectamente con el fondo del sitio.
🧱 Tu sistema de diseño reutilizable
Todo converge aquí. Piensa en piezas de Lego universales: el espaciado, las fuentes, las proporciones y los colores son bloques estandarizados. Consolídalos en un sistema de diseño tu — tokens, marca, componentes, que el agente reutiliza en cada proyecto.
Consolidar la paleta, la tipografía, el espaciado, los componentes y las reglas en un sistema de diseño reutilizable.
La consistencia se vuelve la norma. Dejas de volver a decidir los colores y las fuentes en cada pantalla.
Design tokens · biblioteca de componentes · brand kit · reutilización entre proyectos · paleta por significado (azul = confianza/datos).
🪜 Paso a paso — consolidar el sistema
- Define paleta (usa una plataforma de paletas como referencia) y tipografía.
- Registra tokens y reglas en un archivo que el agente pueda leer en cualquier proyecto.
- Con cada nueva pantalla, haz referencia a este design system para mantener la coherencia.
Profundiza (opcional): por qué elegir el color según su significado
El color no es solo estética: es mensaje. El azul transmite confianza y densidad de datos; por eso muchos dashboards y productos SaaS son azules. Elegir la paleta según el significado de tu negocio (y no según el gusto del día) es lo que hace que el sistema perdure entre proyectos.
Autoevaluación (opcional): ¿por qué codificar reglas de diseño mejora el resultado de la IA?
🛠️ Ejemplo práctico guiado
Objetivo: crear una landing de 1 sección (hero) que parezca profesional desde la primera generación, con una identidad extraída de una referencia y un recurso visual coherente.
- Prepara el terreno. Abre Claude Code en una carpeta de proyecto vacía.
- Carga las reglas. "Clona power-design, instálalo y estudia todas las reglas antes de construir."
- Extrae la identidad. Con la design-language-skill, indica la referencia y tu tema; recibe el blueprint.
- Construye el hero. "Crea una landing de 1 sección aplicando el blueprint y las reglas de power-design. Propuesta de valor en una frase, mucho espacio en blanco, nada pegado a los bordes."
- Agrega el diseño visual. Genera la imagen principal al estilo de la marca; si no contrasta, pide un prompt de edición.
- Refina con comentarios breves. "Iguala los espacios; proporción entre el título y el subtítulo; logo en la esquina inferior izquierda."
- Valida los 3 segundos. Mira la pantalla durante 3 s: ¿entiendes de qué se trata? Si es así, pasó la prueba.
Criterio de calidad: jerarquía clara, espacio en los bordes, propuesta de valor en una frase y coherencia entre texto, color e imagen.
✏️ Ejercicios
1. Plano de marca (fácil)
Elige un sitio que admires y extrae el blueprint con la design-language-skill. Éxito: archivo con color, tipografía, espaciado y una observación sobre jerarquía.
2. Diapositiva fácil de leer de un vistazo (fácil)
Con power-design, genera una diapositiva sobre un tema tuyo. Éxito: se entiende en ~3 s, máx. ~10 palabras, márgenes con espacio visible.
3. Hero con una imagen coherente (medio)
Construye un hero de 1 sección y agrega una imagen generada por IA con el estilo de la marca. Éxito: la imagen contrasta bien y la propuesta de valor está en una frase.
4. Bucle sutil (medio)
Genera una animación de fondo en bucle (start frame = end frame). Éxito: sin un "salto" visible en la unión y en alta resolución.
5. Sistema de diseño mínimo (medio)
Consolida la paleta + la tipografía + 2 componentes en un archivo y genera una segunda pantalla que lo use como referencia. Éxito: las dos pantallas parecen de la misma marca sin redefinir colores ni fuentes.
⌨️ Prompts listos
Úsalos como punto de partida. Cuando el canónico esté en inglés (para pegarlo en la referencia original), se incluye el original. La base de datos completa está en Biblioteca → Prompts.
Cargar y estudiar reglas de diseño (power-design)
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 segundos), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
Extraer la identidad visual (design-language-skill) — canónico
Usa la design-language-skill con esta referencia: [URL ou captura de pantalla] Mi negocio es: [descripción en 1 frase]. Genera un blueprint de diseño con paleta, tipografía, escala de tamaños, espaciado y un scaffold de layout. No copies el código de la referencia: extrae el porqué del diseño.
Original (EN):
Extract this website's design identity (palette, typography, scale, spacing, layout scaffold) into a reusable blueprint. Do not copy the code — capture why the design works, then rebuild a new hero section applying universal design rules (cognitive load, white space, proportion).
Construir el hero aplicando el blueprint
Crie uma landing de 1 seção (hero) aplicando o blueprint extraído e as regras do power-design. Proposta de valor em uma frase. Pouco texto. Muito respiro. Hierarquia clara entre título e subtítulo.
Consolidar el sistema de diseño reutilizable
Consolida un sistema de diseño reutilizable: paleta, tipografía, espaciado, tokens y componentes base. Guárdalo en un archivo que puedas leer en cualquier proyecto futuro para mantener la consistencia.
⚠️ Errores comunes
- ✗Pedir «hazlo bonito» sin reglas. Sin un sistema de diseño cargado, la IA entrega un aspecto genérico. Siempre referencia las reglas (power-design) y/o un blueprint.
- ✗Copiar en vez de extraer. Reproducir el código de referencia genera desorden. Extrae la lenguaje de diseño, no el código.
- ✗Demasiado texto en pantalla. Las pantallas profesionales se pueden recorrer de un vistazo. Si las llenas de texto, se rompe la lectura de 3 s. Recorta palabras.
- ✗Ignorar los espacios en blanco y los bordes. Los elementos pegados al borde y los espacios desiguales denotan falta de profesionalismo. Deja suficiente espacio y mantén los espacios iguales.
- ✗Tratar el 3D/la animación como base. El mayor retorno está en el sistema de diseño (color, tipografía, proporción). El 3D y los loops son el acabado: déjalos para el final.
✅ Resumen del módulo
Lista de verificación de finalización
- ☐ Entendí que el diseño se convirtió en código y por qué codificar reglas mejora la IA.
- ☐ Cargué un conjunto de reglas de diseño (power-design) antes de empezar a construir.
- ☐ Extraje un blueprint de una referencia con la design-language-skill (sin copiar código).
- ☐ Construí una pantalla que se entiende de un vistazo en ~3 segundos, con espacio en blanco y bordes respetados.
- ☐ Añadí una imagen coherente con la marca (contraste y estilo adecuados).
- ☐ Consolidé un sistema de diseño reutilizable (tokens, paleta, tipografía, componentes).
- ☐ Generé una segunda pantalla reutilizando el design system y manteniendo la coherencia.
Siguiente ruta:
Ruta 3 — Operar y Ganar dinero: 3.1 — Agente personal siempre activo. Terminas la Ruta 2 sabiendo construir con calidad; ahora es momento de operar y monetizar.