Hecho, no generado: curso acelerado de diseño web

15 conceptos · Tu primera creación real

El sitio de la derecha pertenece a una diseñadora de interiores y solo sirve para mostrar el contraste. Más adelante construiremos para otra persona: Ayesha Rehman, una contadora de Lahore.

Pide a una IA que construya un sitio web. Lo hará. La página cargará, podrás desplazarte por ella y se parecerá a cualquier otro sitio creado por IA.

Ya has visto este sitio muchas veces: una imagen grande arriba, una frase enorme en el centro, tres recuadros pequeños en fila, un botón de color y un titular como «Revoluciona tu flujo de trabajo».

La mayoría de los sitios creados por IA tienen este aspecto. No están rotos; tienen un problema peor: todos son iguales.

Hay una palabra para esta diferencia, y da nombre al curso. Algunos sitios están hechos. La mayoría solo están generados. Un sitio generado es lo que entrega el equipo cuando nadie lo guía. En un sitio hecho, alguien tomó decisiones reales.

Este curso te enseña a construir los primeros.

No necesitas ser profesional del diseño ni escribir código a mano. Necesitas las herramientas del curso acelerado de programación agéntica y las ideas de esta página. Al terminar, habrás construido un sitio real: con una historia, fotografías auténticas, una versión que funciona en teléfonos y una dirección web que cualquier persona puede abrir.

Una sola idea facilita la comprensión del resto del curso. Antes, el buen diseño vivía en herramientas costosas o en la experiencia de personas con talento. Ya no. Las reglas que separan lo «hecho» de lo «generado» pueden escribirse en un archivo. Cualquier IA puede leerlo y seguirlas.

En una frase, el curso trata de esto:

El criterio visual ahora es un archivo.

El criterio visual consiste en saber qué se ve bien. Un archivo es solo un documento en tu equipo. Al unir ambos conceptos surge la idea completa: el conocimiento sobre lo que se ve bien puede guardarse en un documento para que la IA lo lea antes de construir.

Lee esto primero

Claude Code y OpenCode: curso acelerado. Aquel curso te enseñó las herramientas. Este las usa para construir algo real. Si términos como habilidad, modo de planificación o archivo de reglas son nuevos para ti, lee primero aquel curso. Después, este será mucho más sencillo.

El libro tiene una estructura y conviene saber dónde encaja este curso. Los anteriores enseñaron las herramientas; los posteriores enseñan las disciplinas de ingeniería que vuelven fiable el trabajo a escala. Este ocupa el centro: aquí dejas de estudiar la máquina y la diriges hacia algo real.

El orden es deliberado. Las especificaciones, los bucles y los verificadores se entienden mucho mejor después de publicar un sitio y comprobar dónde falla el trabajo en realidad.

Palabras que encontrarás en esta página

No necesitas formación tecnológica. Sin embargo, algunas palabras aparecen una y otra vez, así que aquí están explicadas en lenguaje sencillo. Puedes volver a este recuadro cuando lo necesites.

Palabra	Qué significa aquí
Modelo	La propia IA: lo que escribe las palabras y el código. Claude y Kimi K3 son modelos.
Herramienta (también llamada harness)	El programa que permite a la IA trabajar en tu equipo: abrir y modificar archivos, ejecutar comandos. Claude Code y OpenCode son las dos herramientas del curso.
Habilidad	Un archivo de instrucciones que guardas una vez. La IA lo lee y lo sigue, como una receta o un manual del personal.
Indicación (prompt)	Lo que escribes a la IA.
Contexto	Todo lo que la IA puede ver ahora: tus mensajes y los archivos que abrió. Tiene un límite, como una mesa con espacio limitado.
Diseño genérico de IA	Un diseño que parece generado, no hecho. El aspecto simple y promedio en el que cae cualquier IA.
Código	Las instrucciones con las que se escribe un sitio. No las escribirás: la IA lo hará y tú comprobarás el resultado.
Desplegar	Publicar el sitio en internet para que otras personas puedan abrirlo.
CLI	Un programa que se ejecuta escribiendo un comando en lugar de hacer clic en botones.
API	Una forma de que un programa se comunique automáticamente con otro.
Verificación (o hook)	Un pequeño programa que responde sí o no sobre el trabajo y lo detiene si la respuesta es no.
Dominio	Una dirección web que pertenece a alguien, como ayesharehman.pk.
DNS	El sistema que conecta una dirección web con el lugar donde vive el sitio.
Tarjeta para compartir (imagen OG)	La imagen y el título que aparecen al pegar el enlace en WhatsApp o en una aplicación social.
:::

Tres ideas que debes aceptar antes de diseñar

Estas tres ideas sostienen todo lo demás. Si las comprendes, el resto tendrá sentido.

1. Toda IA tiene un aspecto favorito.

Una IA aprendió de millones de sitios web. Cuando dices «haz que se vea bien», entrega la respuesta más común que ha visto: los colores, la composición y la tipografía más frecuentes.

La IA no es perezosa: produce el promedio porque eso es lo que aprendió. La comunidad llama al resultado diseño genérico de IA.

Esta es la prueba. Anthropic publica un plugin frontend-design oficial para Claude Code. El archivo enumera los tres aspectos en los que cae Claude sin restricciones y le ordena evitarlos. La empresa que creó la IA escribió un archivo para contradecir los hábitos de su propia IA. Si tuvo que hacerlo, esos hábitos son reales.

(Es un plugin: se instala una vez mediante el sistema de plugins de Claude Code. Después, Claude lo usa automáticamente en los trabajos de diseño.)

2. El diseño se comprueba mirándolo.

El curso acelerado de programación agéntica enseñó la regla más importante del libro: confía en la IA solo hasta donde puedas comprobar su trabajo.

El código es fácil de comprobar porque una prueba se aprueba o falla. El diseño parece más difícil. «¿Se ve bien?» no es una pregunta que un equipo pueda responder.

Por eso, el curso convierte la observación en verificación. Tomamos una captura de la página para que la IA la vea, la contrastamos con una lista de malos hábitos conocidos y pedimos a otra IA que la revise. Cuando «¿se ve bien?» se vuelve comprobable, la IA puede corregir su propio trabajo igual que corrige el código.

3. El criterio visual pasa de una IA a otra mediante un archivo.

La IA ya sabe construir una página web. Lo que desconoce es tu criterio: qué composiciones son aburridas, qué tipografías combinan y cuándo está terminada la página.

Guarda ese criterio en un archivo y cualquier IA podrá leerlo. El mismo archivo funciona hoy con Claude y Kimi K3, y funcionará con la IA que aparezca el próximo año. La IA cambia; tu archivo permanece.

Por eso, el curso seguirá siendo útil mucho después de que cambien los nombres de las herramientas.

Las tres herramientas que usarás

Ya conoces dos. La tercera es nueva:

	Claude Code	OpenCode	Kimi K3
Qué es	Una herramienta de Anthropic que permite a la IA trabajar en tu equipo	El mismo tipo de herramienta, pero de código abierto y compatible con cualquier IA	Un modelo de IA de una empresa llamada Moonshot AI
Su función aquí	Ejecutar el trabajo	Ejecutar el trabajo, con más opciones de modelos	La IA especialmente buena para el diseño
Por qué la usamos	Funciona mejor con Claude	La forma más barata de usar otros modelos de IA	Actualmente es la mejor para diseñar páginas web y no es costosa

Piensa en Claude Code y OpenCode como talleres. Kimi K3 es una persona que puedes llevar a cualquiera de ellos. El taller permanece; quien trabaja puede cambiar.

¿Por qué Kimi K3 para diseñar? Varias personas probaron muchos modelos de IA mostrando páginas web a desarrolladores reales sin revelar qué IA había creado cada una. Las páginas de Kimi K3 fueron las más elegidas por dos razones:

• Puede ver. Después de construir una página, observa una captura y corrige lo que parece incorrecto. La mayoría de los modelos nunca ven su propio trabajo; solo lo deducen a partir del código. Ver es una gran ventaja.
• Es asequible. Cuesta una fracción de los principales modelos estadounidenses, por lo que puedes probar diez versiones sin preocuparte por la factura.

Una advertencia antes de enamorarte del modelo. La «mejor» IA cambia cada pocos meses y pronto otro modelo superará a Kimi K3. No memorices el nombre; conserva el hábito: comprueba qué IA es la mejor para diseñar en ese momento y úsala para ese trabajo. Hoy es Kimi K3, así que el curso la utiliza.

note

Información vigente en julio de 2026. Los modelos, los precios y las clasificaciones cambian con frecuencia. Consulta LMArena y las páginas de precios actuales de los proveedores antes de elaborar un presupuesto.

Todos los comandos de esta página se ejecutaron antes de publicarla

Los comandos de instalación, los indicadores de CLI, las rutas de archivos y las estructuras de carpetas aquí descritos se ejecutaron en un equipo limpio; no se copiaron de la documentación. Cuando las herramientas reales contradicen sus propias páginas comerciales, el curso sigue a las herramientas. Dos elementos seguirán cambiando: las versiones y los precios. Si un comando se comporta de forma distinta, confía en la terminal y consulta la documentación vigente.

Elige tu herramienta y la página te seguirá

Como en el curso acelerado de programación agéntica, las secciones que difieren entre Claude Code y OpenCode incluyen un selector. Elige una opción y todos los selectores de la página la seguirán.

Qué cubre este curso

Parte	Tema	Qué aprenderás
1	Fundamentos	Por qué los sitios de IA se parecen, la pila de cuatro piezas y cómo elegir y conectar el modelo de diseño
2	El criterio visual como habilidad	La habilidad Hallmark, aprender de sitios que admiras y respetar la marca del cliente
3	La construcción	Una historia y un desplazamiento, el pipeline de medios (de gratuito a pagado), prioridad del teléfono, sitios de varias páginas y enrutamiento
4	Verificación del diseño	Cómo comprobar que un diseño es bueno y obtener una segunda opinión
5	Entrega	Publicar el sitio, trabajar con clientes y mantener bajos los costos
6	Ejemplo práctico completo	El sitio del despacho de Ayesha, desde el inicio hasta una URL pública, con ambas herramientas

¿Prefieres aprender haciendo? Salta primero a la parte 6 y vuelve después.

---

📚 Material didáctico

Abrir la presentación completa

Ver la presentación completa: curso acelerado de diseño web

---

Parte 1: fundamentos

1. Por qué todos los sitios de IA se parecen

Escribe «construye una página de destino» en cualquier IA y observa el resultado: una imagen grande arriba, un titular enorme en el centro con alguna palabra de color llamativo, tres recuadros en fila con iconos pequeños, una cita de un cliente satisfecho, un pie de página y algún detalle morado o verde azulado.

No es feo, y eso resulta confuso. Es simplemente el promedio de todas las páginas web que la IA ha visto. Los promedios no tienen personalidad.

¿Por qué ocurre? Una IA no elige: predice. Ante una petición abierta como «crea un sitio bonito», responde con lo más probable, es decir, lo más común entre todo lo aprendido. Lo hace cada vez y para cada persona. Por eso tantos sitios de IA se parecen: millones de personas reciben el mismo promedio.

Ya viste este comportamiento en el curso de programación. Si pides cinco veces «limpia esta transcripción», obtendrás cinco métodos ligeramente distintos, por lo que guardas una habilidad para fijar el método. El diseño funciona igual. La única diferencia es que todo el mundo puede ver el problema.

La prueba: las empresas de IA lo admiten. Anthropic publica un plugin oficial de diseño para Claude Code. El archivo enumera los tres aspectos en los que cae el diseño de IA cuando nadie lo limita, incluso con el tono crema exacto (#F4F1EA):

1. Un fondo crema suave, un gran titular serif decorativo y un botón marrón anaranjado
2. Un fondo casi negro con un acento verde ácido o rojo brillante
3. Un aspecto de periódico: líneas finas, esquinas cuadradas y columnas de texto densas

La habilidad los llama «opciones predeterminadas, no elecciones» y ordena al modelo no usarlos salvo que el encargo pida ese aspecto.

Léelo de nuevo. La empresa que construyó la IA escribió un archivo para contradecirla. Ese archivo es el punto de partida de todo el curso.

Observa las palabras exactas. No dice que Claude cae en tres aspectos, sino que el diseño generado por IA actual cae en ellos. Los hábitos no son una peculiaridad de una empresa; pertenecen a todo el sector, que aprendió de la misma web.

De esto se desprenden dos consecuencias que determinan todo lo siguiente:

• Los hábitos viajan entre modelos, por lo que una segunda opinión no implica automáticamente otros ojos. El archivo de Anthropic describe los tres aspectos como destinos del diseño de IA en general, no solo de su modelo. Las empresas entrenan con una web parecida y tienden al mismo promedio. Esto importará después: al pedir a otra IA que revise el trabajo de la primera (concepto 12), esperas que no comparta el punto ciego. Cuanto más distintas sean, mejor. Solo un archivo de reglas rompe la cadena de forma fiable.
• La solución nunca es «insistir más en la indicación». «Hazlo único» también es una petición muy común, así que recibe una respuesta común. La solución es estructural: un archivo de criterio visual que prohíbe patrones concretos, fuerza variedad estructural y contrasta el resultado con controles antes de devolverlo. Esa es la parte 2.

2. La pila de cuatro piezas

Cada sitio del curso se construye con cuatro piezas. Apréndelas y tendrás un lugar para todo lo demás:

Pieza	Qué hace	Qué usamos
El modelo	Escribe el código que crea la página	Kimi K3 para diseñar, Claude para revisar
El criterio visual	Evita que la IA use su aspecto predeterminado y aburrido	La habilidad Hallmark y el plugin frontend-design de Anthropic
Los medios	Fotografías y video reales, porque los recuadros y el texto no forman una marca	Cuatro rutas, desde fotos gratuitas hasta video pagado (concepto 9)
El alojamiento	Publica la página en una dirección web real	Vercel, que la IA puede controlar directamente

Observa lo que no aparece: ningún creador de sitios, tienda de plantillas ni editor de arrastrar y soltar. La herramienta que ya conoces lo hace todo.

Imagina un pequeño taller. El modelo es quien trabaja. El archivo de criterio visual es el manual que le entregas. Los medios son el armario de suministros. El alojamiento es la puerta por la que sale el trabajo terminado.

Estos cuatro recuadros también sirven para fijar el precio. Al trabajar para un cliente, prepara el presupuesto recorriéndolos uno a uno. ¿Qué IA necesita el proyecto? ¿Cuánto estudio de diseño requiere la marca? ¿Qué presupuesto desean para fotografías o video? ¿Dónde se alojará el sitio?

Cuatro recuadros, cuatro líneas en la factura.

3. Cómo elegir el modelo de diseño

El curso de programación dio una regla sencilla: usa una IA potente para decidir qué hacer y una económica para ejecutarlo. El diseño añade una tercera fila a la tabla.

El trabajo	Qué elegir
Planificación, arquitectura y depuración de algo confuso	El modelo más capaz disponible
Seguir un plan aprobado: ediciones rutinarias, formato y pruebas	Un modelo más barato o gratuito
Diseño visual y acabado del frontend	El líder del ámbito del diseño este trimestre

¿Por qué necesita el diseño su propia fila? Porque diseñar bien no depende de la inteligencia general, sino de otros dos factores:

• Práctica. Algunas empresas entrenan sus modelos con más trabajos de diseño web que otras.
• Capacidad de ver. Una IA que observa una captura de su página trabaja como una persona que diseña: construye, mira y corrige. Una IA que solo lee su código diseña a ciegas. Kimi K3 puede ver, y esa es la principal razón por la que sus páginas suelen gustar más.

Tres hábitos evitarán que sigas la moda sin criterio:

• Confía en las pruebas a ciegas, no en los anuncios. En sitios como LMArena, personas reales comparan páginas creadas por distintos modelos sin saber cuál hizo cada una y luego votan. Es una prueba mucho mejor que los elogios de una empresa a su producto. En julio de 2026, Kimi K3 ocupaba el primer lugar en diseño web, pero estaba por debajo de Claude y GPT en la clasificación general. Esa diferencia contiene la lección: ser el mejor en diseño y ser el mejor en general son dos competencias distintas.
• Deja que una IA construya y otra juzgue. Kimi K3 crea la página y Claude la revisa. El concepto 12 explica cómo hacerlo.
• Espera que cambie el líder y observa lo poco que cuesta adaptarse. Entrega el mismo archivo de criterio visual al modelo potente que lidere el próximo trimestre y obtendrás un trabajo similar, porque la mayor parte de la diferencia entre una página hecha y una generada reside ahora en el archivo, no en el modelo. Este es el argumento completo del curso y también tu seguro. El nombre en lo alto de la clasificación es el elemento al que menos debes apegarte.

Dos desventajas reales de Kimi K3. Razona mucho de forma predeterminada, por lo que es más lento y extenso de lo esperado. Esto resulta aceptable al diseñar, pero molesto en tareas pequeñas. Además, su bajo precio depende de un descuento que solo se aplica cuando la conversación se mantiene ordenada, como explica el concepto 15.

4. Cualquier modelo dentro de tu herramienta

El curso de programación explicó cómo ejecutar otra IA dentro de tu herramienta. Kimi K3 se configura de la misma forma. Este es uno de los pocos puntos donde Claude Code y OpenCode difieren de verdad, así que elige tu pestaña.

Antes de configurarlo, conviene entender la acción. La herramienta suele enviar sus preguntas a la IA de una empresa. Cambiarás la dirección de destino para enviarlas a Kimi K3. Nada más cambia.

Claude Code se comunica con Claude de forma predeterminada. Sin embargo, Moonshot acepta mensajes en el mismo formato, por lo que Claude Code puede comunicarse con Kimi K3 sin software adicional.

Necesitas una clave de platform.kimi.ai. Funciona como una contraseña que permite a tu equipo usar la IA y está vinculada a tu cuenta. Antes de comenzar, considera dos aspectos:

• Añade primero una pequeña cantidad de dinero. La clave no funciona si la cuenta está vacía
• El nivel de pago más bajo permite muy pocos mensajes por minuto, así que la IA parece averiada en lugar de lenta. Añade lo suficiente para superar el primer nivel antes de evaluarla

Pega lo siguiente en .claude/settings.json, dentro de la carpeta del proyecto donde usarás Kimi K3. (Mantén esta configuración separada de tu trabajo habitual para que los demás proyectos sigan usando Claude.)

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.moonshot.ai/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_MOONSHOT_API_KEY",
    "ANTHROPIC_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_FABLE_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1048576",
    "ENABLE_TOOL_SEARCH": "false"
  }
}

El bloque parece extenso, pero solo indica tres cosas: dónde enviar los mensajes, qué contraseña usar y qué IA elegir. Estas cinco advertencias proceden de errores reales:

• Configura todas las líneas de modelos, no solo la primera. Claude Code usa distintos modelos para pequeñas tareas en segundo plano. Si solo cambias el principal, esas tareas seguirán solicitando modelos Claude que Moonshot no ofrece y fallarán de formas confusas. Por eso aparecen todas las líneas ANTHROPIC_DEFAULT_*, incluida la de Fable que suele olvidarse.
• Si ya usaste Claude Code, elimina ANTHROPIC_API_KEY. Una clave antigua entra en conflicto con ANTHROPIC_AUTH_TOKEN, pero el mensaje de error no lo explicará. Esta es la causa más común de fallo cuando el equipo no está limpio.
• Comprueba la configuración con /status, no con /model. El menú /model solo muestra modelos propios de Claude. Kimi nunca aparecerá y es normal, no un error. Escribe /status; debe mostrar kimi-k3 y la dirección de Moonshot.
• La clave está ahora en texto sin formato dentro de un archivo. Nunca subas ese archivo a un lugar público. Añade .claude/settings.json a .gitignore para impedir que se comparta por accidente.
• La obtención de contenido web deja de funcionar por esta ruta. El endpoint de Moonshot todavía no la ofrece. Todo lo demás funciona.

Conviene comprender la última opción, CLAUDE_CODE_AUTO_COMPACT_WINDOW, en vez de copiarla sin más. Claude Code ordena automáticamente la conversación al acercarse al límite, pero necesita saber cuánto significa «lleno». 1048576 representa completa la ventana de un millón de tokens de Kimi K3. Si se omite, la compactación ocurre demasiado pronto o no ocurre.

Una aclaración honesta: Moonshot admite esta configuración; Anthropic no. Anthropic ha indicado que no verifica ni respalda el envío de mensajes de Claude Code a modelos de otras empresas. Si una actualización rompe la configuración, nadie ha prometido corregirla. Cambias el soporte oficial por la libertad de elegir la IA. Es un intercambio razonable si eres consciente de él.

OpenCode se diseñó para funcionar con cualquier IA, así que esta es la ruta sencilla. También es donde OpenRouter resulta más útil.

OpenRouter es un único servicio que conecta con casi todos los modelos: Kimi K3, GPT, Gemini y muchos gratuitos. En lugar de crear una cuenta en cada empresa, usas una sola cuenta y pagas una sola factura. Es una llave que abre muchas puertas.

La configuración tarda cerca de un minuto:

1. Crea una clave en openrouter.ai/keys y añade un pequeño saldo prepagado
2. Ejecuta opencode, escribe /connect, elige openrouter y pega la clave
3. Escribe /models y elige moonshotai/kimi-k3 (usa el ID exacto del selector; los identificadores cambian, así que confía en el menú)

Eso es todo. Lo que ya conoces sigue funcionando y Kimi K3 es una opción más de la lista.

Una buena configuración para el curso combina Kimi K3 para construir el diseño, un modelo económico para tareas pequeñas y Claude o GPT para obtener una segunda opinión durante la revisión del concepto 12.

Vigila dos aspectos. OpenRouter cobra un poco más que Moonshot directamente porque gestiona la conexión; es aceptable mientras aprendes. Además, Kimi K3 escribe respuestas largas. Observa el indicador de uso de la herramienta: las respuestas extensas cuestan más.

La regla de la corona alquilada

Elijas la ruta que elijas, crea hábitos alrededor de tu herramienta y tus archivos, nunca de un modelo concreto. La IA líder lleva una corona alquilada que pronto recibirá otra. Tus archivos permanecen.

---

Parte 2: el criterio visual como habilidad

5. Hallmark: un archivo de criterio visual con fuerza

La parte 1 describió el problema. Un archivo gratuito resuelve la mayor parte.

Hallmark es una habilidad de diseño de Hassan El Mghari, publicada bajo la marca Together AI. Es gratuita, cualquiera puede usarla y se convirtió en uno de los archivos de habilidades más populares de 2026. Describe su tarea en una frase: hacer que las páginas creadas por una IA parezcan hechas, no generadas.

También es el ejemplo más claro del libro sobre el poder de una habilidad. Recuerda la promesa del curso de programación: la IA aporta conocimientos generales y la habilidad aporta tu criterio específico. Hallmark materializa esa promesa, creada por especialistas y entregada gratis.

Instálala de la forma moderna en cualquiera de las herramientas:

npx skills add Nutlope/hallmark

Se abrirá un selector interactivo: busca la habilidad, enumera los agentes instalados y pregunta dónde instalarla. Claude Code, OpenCode y Codex suelen estar seleccionados, así que la mayoría puede pulsar Enter. Si no deseas ninguna pregunta, conoce dos indicadores: -g instala globalmente (a nivel de usuario, disponible en todos los proyectos) y -y omite las confirmaciones. Por tanto, npx skills add Nutlope/hallmark -g -a claude-code -y es la versión de una sola línea. Vuelve a ejecutarla para actualizar y usa npx skills list para ver lo instalado.

Los archivos llegan a ~/.claude/skills/hallmark/. OpenCode lee la misma carpeta, así que una instalación sirve para ambas herramientas.

Abre la carpeta una vez. Su organización ya es una lección. Contiene un archivo principal breve, SKILL.md, y una carpeta references con todo lo demás: 58 verificaciones, archivos sobre tipografías, color y espaciado, 21 formas de página y los temas.

¿Por qué dividirlo así? Porque la IA solo lee los archivos adicionales cuando los necesita. El principal se mantiene pequeño y casi no cuesta conservarlo cargado. Es exactamente la lección del curso de programación, ya construida por otra persona para que la adoptes.

La instalación enseña otra lección: la herramienta recuerda que las habilidades se ejecutan con todos los permisos del agente y deben revisarse antes de usarlas. Tómalo al pie de la letra: una habilidad contiene instrucciones que seguirá el agente. Lee el SKILL.md de todo lo que instales, venga de este curso o de otro lugar.

Qué contiene el archivo. Hallmark no es una colección de imágenes bonitas, sino un conjunto de piezas funcionales:

• Elige primero la forma de la página. Antes de decidir colores, selecciona una estructura entre 21 formas. Esto vuelve especial a Hallmark. La mayoría de las peticiones para «hacerlo diferente» solo cambian colores; Hallmark cambia el esqueleto. Dos páginas para clientes distintos no deberían compartir el orden de sus secciones. Pintar el mismo esqueleto de otro color es precisamente el problema que resuelve.
• Veinte temas con nombre, además de Custom. Cada tema forma una identidad coherente: paleta, combinación tipográfica y carácter del espaciado (Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Riso, Sport, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen y Hum). No elige libremente: una regla de rotación evita que todos tus proyectos usen el mismo tema dentro del género del encargo. Si ningún tema expresa la intención creativa, cambia a Custom y crea desde cero una paleta y una combinación tipográfica a medida, con los mismos controles pero sin plantilla. En encargos normales, esta bifurcación permanece invisible.
• Una larga lista antes de devolver el trabajo. La habilidad contrasta la página terminada con malos hábitos conocidos y critica su trabajo una vez más antes de mostrarlo. (Un detalle útil: la portada del proyecto anuncia 57 verificaciones, mientras que el archivo instalado indica 58. Los números de la documentación se desactualizan. Si una página contradice a una herramienta, cree en la herramienta.) Es la lección del curso de programación con otra apariencia: una lista exigente guardada una vez supera una petición perezosa escrita con cansancio.
• Una regla de seguridad. Si la diriges a un sitio existente, Hallmark no eliminará archivos ni secciones sin avisar y obtener tu aprobación. Una habilidad de diseño no concede permiso para destruir el sitio de alguien.

Los cuatro modos. Hallmark realiza cuatro trabajos. El primero es el comportamiento predeterminado al solicitar una página nueva; los otros tres se nombran de forma explícita. Gran parte del aprendizaje consiste en elegir el momento adecuado:

Comando	Qué hace	Cuándo usarlo
default	Crea una página: elige una forma, aplica las reglas y ejecuta las 58 verificaciones	Al comenzar algo nuevo
audit	Examina una página existente y enumera los problemas sin cambiar nada	Cuando deseas una revisión honesta (concepto 11)
redesign	Descarta la forma anterior, conserva el texto y la marca, y reconstruye de otro modo	Cuando la página funciona, pero parece generada
study	Examina un sitio que admiras y escribe por qué funciona	Cuando deseas aprender de un buen sitio (concepto 6)

El linaje: la habilidad frontend-design de Anthropic

Hallmark no apareció de la nada. Su archivo explica de dónde proceden las ideas, y una de las fuentes es el plugin frontend-design de Anthropic para Claude Code.

Conviene comparar los archivos porque resuelven el mismo problema de formas distintas.

La habilidad de Anthropic enseña criterio: trabaja como en un pequeño estudio; haz que la parte superior diga algo real; deja que las tipografías transmitan personalidad; sé audaz en un lugar y discreto en el resto; mira una captura de tu trabajo antes de declararlo terminado.

Hallmark aporta maquinaria: listas de formas, temas con nombre, verificaciones numeradas y una autoevaluación obligatoria.

Ambos son útiles y trabajan juntos. Instala el plugin de Anthropic para recibir ayuda automática en el trabajo cotidiano. Nombra Hallmark cuando quieras el tratamiento completo. Una advertencia: los modelos ajenos a Claude, como Kimi K3, no siempre activan habilidades por sí solos. Escribe Hallmark cada vez en lugar de confiar en que ocurra.

¿La habilidad hace que la IA produzca siempre la misma página? No. Una IA conserva cierta aleatoriedad; una habilidad reduce sus opciones, pero no la elimina. Hallmark evita la misma forma desgastada, no vuelve idénticos dos intentos. Para lo que debe cumplirse siempre, necesitas una regla que la IA no pueda ignorar. El concepto 11 enseña a crearla.

6. Estudia, no clones

La forma más rápida de mejorar un diseño es señalar uno que te guste y decir «haz que se sienta como ese».

La forma más rápida de arruinar tu reputación es copiarlo exactamente.

El comando study de Hallmark resuelve bien la tensión y enseña mucho sobre diseño.

Muestra a study un sitio que admires, o incluso una captura. Escribirá qué lo hace funcionar: la forma de la página, las tipografías que combinan, el color principal y el espacio vacío. Guardará todo en design.md.

Lo que no hará es copiarlo. Toma las ideas, no los píxeles. Dos sitios pueden compartir ideas como dos estudiantes comparten docente: se nota la relación, pero no son la misma persona.

Copiar es incorrecto y puede causar problemas legales. Hay tres razones prácticas igual de importantes:

• El archivo viaja. design.md contiene tu criterio visual por escrito. Entrégalo a otra IA, otra herramienta, un integrante del equipo o el cliente para su aprobación, y la dirección del diseño sobrevivirá al traspaso.
• Entrena tu mirada. Lee tres archivos de tres sitios que te gusten y comenzarás a observar estructuras y tipografías en todas partes. La habilidad te enseña mientras trabaja.
• Resuelve el problema más difícil para principiantes. Muchas personas no pueden describir el aspecto deseado, pero cualquiera puede señalar un sitio que le gusta. study convierte ese gesto en instrucciones.

Una regla útil: estudia dos o tres sitios por proyecto, nunca uno solo.

Un ejemplo te empuja a copiar. Tres obligan a combinar: la forma de uno, las tipografías de otro y la moderación del tercero. La combinación produce trabajos que se sienten originales.

7. Extracción de marca: el ADN del cliente ya está en línea

El concepto 6 trataba de sitios que admiras. El trabajo para clientes es lo contrario. El diseño que debes respetar ya existe: la marca, el logotipo, los colores, las tipografías y la voz. Si te equivocas en ellos, nada más importará al cliente.

La idea principal es pedir elementos concretos, no todo.

Si diriges una IA a una página completa, le entregas una mezcla de código, scripts y ventanas emergentes de cookies. Enterrada en ese desorden, inventará con seguridad un color inexistente. Los modelos hacen esto: ante la duda, generan una conjetura convincente. Tu tarea es impedir las conjeturas.

Ruta 1: pregunta a la IA con precisión (gratis). Pídele que abra el sitio del cliente y solicite elementos exactos con pruebas:

En esta página, enumera los códigos exactos de los tres colores de marca más usados, los nombres de las tipografías y la dirección del archivo del logotipo. Para cada elemento, cita la línea de código donde lo encontraste.

La última frase es la importante. Un código de color aislado es una conjetura. Un código con la línea de origen se puede comprobar. Pide siempre el comprobante.

Ruta 2: usa una herramienta especializada (pagada, más limpia). Servicios como Firecrawl convierten páginas desordenadas en información limpia y organizada para IA. Algunos devuelven directamente logotipo, colores y tipografías. Para un cliente basta la ruta 1. Si lo haces cada semana, una herramienta pagada elimina una categoría completa de errores y amortiza su costo. (Conviene saber que los videos en los que se basa este curso recibieron pagos por promocionar herramientas similares. La idea es válida; elige la marca con los precios actuales delante.)

Ruta 3: pregunta al cliente. Nunca la omitas. Las empresas reales tienen archivos reales: el logotipo correcto, los colores oficiales y, a veces, un documento de marca. Todo lo anterior sirve para el primer borrador. Antes de publicar, solicita los archivos auténticos. Con el tiempo se notará un logotipo reconstruido a ojo, y será incómodo.

Obtengas como obtengas las respuestas, guárdalas en design.md y márcalas como reglas, no sugerencias.

La diferencia es real. Los sitios admirados en el concepto 6 aportan dirección: ideas que tomar prestadas. Los colores de la marca son reglas: no puedes cambiarlos por haber encontrado otros más bonitos. La habilidad de criterio visual diseña dentro de esas reglas.

---

Parte 3: la construcción

8. Una historia, un desplazamiento

Abre los mejores sitios web que conozcas y observa algo que comparten. La página no es una pila de secciones. Es una historia narrada en el orden en que te desplazas.

Una idea por pantalla. Cada pantalla despierta el deseo de ver la siguiente. El desplazamiento hace avanzar la historia.

Esta es la idea más poderosa del curso para que una página parezca intencional, y es fácil de planificar:

• Escribe la historia antes de comenzar a construir. Entre cinco y ocho pasos, una línea por cada uno. Los llamamos momentos, como los momentos de una película. Para una empresa de miel: un panal silvestre, luego cae una gota, después se llena el frasco, se muestra lo que contiene, quién lo elabora y, por último, la compra. Para la contadora cuyo sitio construiremos más adelante: una caja de zapatos llena de recibos, la clasificación, las cuentas que se cuadran solas, una imagen mensual clara, la persona que hay detrás y la reserva de una reunión. Escribe los momentos, debátelos, acuerda cuáles serán y guárdalos en un archivo antes de construir nada.
• Una idea por pantalla. Si una pantalla intenta comunicar dos cosas, no comunica ninguna. Divídela en dos.
• La parte superior de la página debe mostrar algo real, no un eslogan como «Soluciones innovadoras para empresas modernas». El sitio de la miel comienza con miel cayendo. El de la contadora comienza con la caja de recibos que cualquier persona dueña de una pequeña empresa reconoce al instante.
• Elige un momento atrevido y mantén tranquilo todo lo demás. Algo que una persona visitante pueda describir después a una amistad: una animación, algo que reacciona al desplazamiento o un uso llamativo de la tipografía. Ser audaz en un solo lugar transmite seguridad. Serlo en todas partes crea caos.

La estructura narrativa también es tu contrato de adaptación a distintas pantallas y tu lista de tomas multimedia. Consérvala: el concepto 9 genera imágenes para cada momento y el concepto 10 vuelve a filmar la misma estructura para otra forma de pantalla. Un recurso cumple tres funciones, justo por eso se escribe en lugar de conservarse solo en la mente.

El último momento debe hacer algo de verdad. Toda historia termina con una acción: reservar, comprar, enviar un mensaje o suscribirse.

Esta es la trampa que afecta a casi todos los primeros sitios web. Un sitio sencillo solo consta de archivos. No tiene detrás un sistema capaz de recibir mensajes. Por tanto, el hermoso botón al final de la historia no hace absolutamente nada si no decides cómo funcionará. Hay tres opciones honestas, de la más barata a la más costosa:

Opción 1: un enlace de WhatsApp. No necesita nada adicional y suele ser la mejor respuesta para una pequeña empresa. Un enlace como este:

https://wa.me/923001234567?text=Hello,%20I%20would%20like%20to%20book%20a%20consultation

abre WhatsApp con el mensaje ya escrito. No hay que construir ningún sistema ni formulario, y tampoco hay nada que revisar. Lo mejor es que el mensaje llega al lugar donde la persona propietaria ya responde a sus clientes durante todo el día. La mayoría de las plantillas de sitios web incluyen un formulario de contacto que nadie consulta. Un botón de WhatsApp lo supera con facilidad.

Opción 2: un servicio de formularios. Empresas como Formspree permiten colocar un formulario normal en la página y envían por correo electrónico todo lo que las personas escriben. Sus planes gratuitos bastan para una pequeña empresa. Usa esta opción cuando el cliente quiera realmente un formulario.

Opción 3: un pequeño programa en el servidor. Vercel (concepto 13) puede ejecutar pequeños programas junto al sitio web, de modo que tu IA construya un sistema adecuado cuando el proyecto sea lo bastante grande como para necesitarlo. Es el destino al que pueden crecer las dos primeras opciones, no el punto de partida.

Elijas lo que elijas, inclúyelo en la historia durante la planificación. «Momento 6: reservar una consulta, enlace de WhatsApp al +92 300...» es una línea que puedes incorporar al plan y comprobar después. Y la comprobarás: el concepto 11 muestra cómo asegurarte de que la página terminada y publicada contenga de verdad un enlace funcional.

Una historia que termina en un botón que no hace nada no es un sitio web. Es un cartel.

Una observación sobre el orden: aprende primero con una sola página. Todo el curso resulta más fácil de aprender así. Sin embargo, el trabajo real para clientes crece más allá de una página, por lo que el curso también cubre ese caso: la sección sobre varias páginas al final de la parte 3 muestra qué cambia cuando el sitio necesita más habitaciones.

9. El proceso de recursos multimedia

Este es el secreto honesto detrás de todos los sitios web que te hicieron detenerte a mirar: las imágenes hacen la mitad del trabajo.

Una buena tipografía y una buena estructura te sitúan por encima del promedio. Sin embargo, una página formada solo por recuadros de colores y texto sigue pareciendo un documento, no un lugar. Las fotografías y los videos reales hacen que una página se sienta como un sitio al que has llegado.

Por eso las imágenes son una parte obligatoria de este curso y no un adorno que se añade al final.

Esta también es la única parte donde el dinero cambia realmente lo que puedes hacer. Por eso la enseñamos mediante cuatro rutas, desde la gratuita hasta la costosa. Todas pueden producir un sitio web real y bueno. Elige una ruta para cada proyecto y conoce con exactitud lo que ofrece.

Ruta 1: fotografías reales (gratis, para siempre). Unsplash y Pexels contienen enormes bibliotecas de fotografías profesionales que puedes usar gratis, incluso para clientes que pagan. Lee su página de normas: puedes usar las fotografías, pero no revenderlas por sí solas.

Dos hábitos evitan que las fotografías gratuitas parezcan gratuitas:

• Haz coincidir la luz. Elige fotografías que compartan el mismo tipo de luz y el mismo ambiente en toda la página. La mezcla de iluminaciones hace que una página parezca ensamblada con imágenes de personas desconocidas.
• Recorta con intención. No aceptes la fotografía tal como la encontraste. Córtala para mostrar lo que deseas.

No olvides la opción que casi nadie usa: para un negocio local, una cámara de teléfono con buena luz de tarde siempre supera a las fotografías genéricas de archivo. Una fotografía real de la oficina real del cliente es algo que ninguna IA puede producir.

Ruta 2: imágenes creadas con IA, gratis (con una condición). A veces la imagen que necesitas no existe: quizá buscas un estilo de ilustración inusual o un producto que aún no se ha fotografiado. La IA puede crearla.

Sin embargo, esta es la condición que define toda la ruta: cuando no pagas, puedes obtener calidad o comodidad, pero no ambas.

La mejor IA para crear imágenes solo es gratuita si tú mismo haces clic. Las que tu IA puede usar automáticamente son más débiles o menos fiables. Elige según el proyecto:

2a. De forma manual, con la mejor IA: el plan gratuito de ChatGPT. La IA de imágenes de OpenAI es actualmente una de las opciones más potentes y accesibles. Sigue las indicaciones con precisión, puede introducir texto legible dentro de una imagen (la mayoría no puede) y conserva un estilo coherente en un conjunto de imágenes, para que todas las de una página parezcan pertenecer al mismo sitio.

Es gratuita en chatgpt.com, con un número limitado de imágenes al día. OpenAI no publica una cifra fija y esta cambia, así que comprueba lo que muestra tu propia cuenta. No hay una versión automática gratuita; por eso esta ruta se realiza manualmente.

Este es el flujo de trabajo que convierte el proceso manual en una ventaja y no en una tarea tediosa: tu IA escribe las indicaciones y tú pulsas el botón.

Tu guion gráfico ya tiene una descripción para cada momento. Pide a tu IA que refine esas descripciones, pega cada una en chatgpt.com, guarda los resultados en la carpeta assets/ con nombres como 01-shoebox.png y deja que tu IA los coloque en la página. Diez minutos copiando y pegando te ofrecen la mejor calidad de imagen disponible sin costo alguno.

El límite diario incluso te ayuda. Unas pocas imágenes al día equivalen aproximadamente al ritmo de una construcción planificada e impiden caer en el mal hábito de generar cuarenta imágenes con la esperanza de que alguna funcione.

2b. Automática, pero más débil: servicios gratuitos que tu IA puede usar por sí misma. Cuando necesites que el trabajo avance sin ti, por ejemplo, para borradores, imágenes provisionales o proyectos de clase, existen tres opciones. Pollinations.ai es lo más parecido a generar imágenes automáticamente y de forma realmente gratuita, sin necesidad de una cuenta. Cloudflare Workers AI incluye una cantidad gratuita real cada día. El plan gratuito de Google ha ofrecido imágenes sin costo en distintos momentos.

La última opción encierra una lección. Solo en 2026, Google cambió más de una vez si su IA de imágenes actual era gratuita. Por eso el consejo que debes recordar no es el nombre de una empresa, sino este: los planes gratuitos son como el clima. Consulta la página vigente el día que construyas y nunca prometas a un cliente algo que dependa de una cuota gratuita capaz de desaparecer el mes siguiente.

Una buena forma de combinar ambas opciones consiste en crear borradores con 2b para decidir dónde irá cada elemento y después rehacer bien las imágenes aprobadas con 2a. Crea borradores baratos y termina con calidad.

Ruta 3: paga unos centavos por imagen. En cuanto un proyecto dispone incluso de un presupuesto mínimo, desaparece la condición de la ruta 2.

La misma excelente IA de imágenes de 2a también puede usarse automáticamente pagando por cada imagen: cerca de medio centavo para calidad baja, unos pocos centavos para media y alrededor de veinte centavos para alta. Los precios cambian, así que compruébalos.

A esos precios obtienes calidad y comodidad. Tu IA crea por sí sola, con la máxima calidad, todas las imágenes del guion gráfico, y las de un sitio completo cuestan menos de un dólar. Aquí se realiza la mayor parte del trabajo real para clientes.

Servicios como fal.ai y Replicate hacen lo mismo con las IA de imágenes de muchas empresas mediante una sola cuenta, como OpenRouter hizo con el texto en el concepto 4.

El hábito que mantiene bajo el costo ya lo conoces: crea los borradores con calidad baja y paga por la alta solo cuando todas las personas hayan aprobado la imagen.

Ruta 4: video pagado con créditos (el momento espectacular). La gota de miel que cae por la pantalla mientras te desplazas procede de esta ruta. Cuesta dinero real y, bien utilizada, lo vale.

Higgsfield es un servicio que ofrece acceso con una sola cuenta a más de 30 modelos de IA diferentes para imágenes, video y sonido (Gemini Omni Flash, Seedance, Veo, Kling y otros). Hay tres aspectos que nos importan:

• Tu IA puede usarlo directamente. Lo instalas una vez con npm install -g @higgsfield/cli e inicias sesión una vez con higgsfield auth login. A partir de entonces, crear un video se convierte en una tarea que tu IA realiza dentro de la sesión habitual, igual que editar un archivo. Envía el trabajo, espera y devuelve el resultado.

• No tienes que elegir el modelo. Describe la toma que deseas, por ejemplo, «primer plano, miel goteando sobre vidrio, luz cálida desde atrás, formato vertical para teléfonos, cuatro segundos», y el servicio elige cuál de sus más de 30 modelos la realiza mejor. Es una cosa menos que aprender.

• Puedes comprobar el precio antes de gastar. El comando higgsfield generate cost indica cuánto costaría un video sin crearlo. Describes la toma igual que si fueras a generarla, por lo que un ejemplo real tiene este aspecto:

  higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p

  Este es el comando más útil de toda la sección multimedia, porque convierte «planifica antes de gastar» en algo que realmente puedes hacer: calcula el precio de cada toma del guion gráfico, suma los importes, decide y solo entonces crea. Enseña a tu IA a presupuestar antes de filmar.

Higgsfield es una empresa entre varias: fal.ai, Replicate y las propias empresas de IA ofrecen funciones similares. Mostramos esta porque actualmente se conecta con mayor facilidad a tus herramientas y, con la misma honestidad de antes, paga muchos de los videos que popularizaron este flujo de trabajo. Aprende la idea: crear videos como un paso normal dentro de tu sesión de IA. La empresa puede sustituirse.

¿Qué IA de video debes solicitar? El servicio puede elegir por ti, pero para sitios web dos modelos cubren casi todo y realizan trabajos distintos:

• Gemini Omni Flash, de Google (actualmente un modelo en versión preliminar, lo que significa que puede cambiar o trasladarse sin previo aviso), encuentra la toma. Puedes hablarle como a una persona: «misma escena, vertido más lento, luz más cálida» mejora el video anterior en lugar de comenzar desde cero, y conserva la iluminación y la escena mientras lo perfeccionas. Úsalo cuando todavía estés decidiendo cómo debe ser la toma.
• Seedance 2.0, de ByteDance (lo verás con el nombre seedance_2_0), fija la toma. Puedes proporcionarle hasta nueve imágenes de referencia, como imágenes de marca, fotografías aprobadas y el logotipo, y es el que mejor mantiene un movimiento fluido y estable. La estabilidad importa: un video vinculado al desplazamiento no debe parpadear ni temblar cuando se repite. Úsalo para la versión final.

Un hábito sirve para ambos: encuentra la toma con el primero y fíjala con el segundo. Observa también que el nivel de calidad no forma parte del nombre del modelo. Es un ajuste --resolution independiente que proporcionas, igual que en el comando de precios anterior. Ese es tu control del presupuesto y funciona igual en ambos lugares: calcula el precio de la toma a 720p, muestra al cliente el borrador a 720p y paga la calidad completa solo cuando dé su aprobación.

Una advertencia permanente: la IA de video cambia más rápido que cualquier otro elemento del curso. Estos son los mejores modelos de julio de 2026. Comprueba cuáles son los mejores el día que construyas.

Una regla para todas las rutas: crea las imágenes a partir de la historia, una por momento, y guárdalas en una carpeta assets/ con nombres claros antes de construir el diseño final.

Las imágenes añadidas al final para llenar espacios vacíos siempre parecen imágenes añadidas al final para llenar espacios vacíos.

Un consejo práctico: cuando tengas que buscar entre muchas fotografías, envía una IA auxiliar para que lo haga en otra conversación y pida que devuelva solo las mejores. Cargar cuarenta fotografías en la conversación principal la saturará, tal como advirtió el curso intensivo de programación.

Una breve nota sobre los permisos, porque trabajar para un cliente implica uso comercial.

Los sitios de fotografías gratuitas tienen normas y ya sabes que debes leerlas. Las imágenes creadas con IA también las tienen. Actualmente, la mayoría de las empresas permite usar comercialmente lo que creas, pero las normas difieren entre empresas, entre planes gratuitos y pagados, y cambian con el tiempo. Algunos planes gratuitos no permiten ningún uso comercial, una razón más para tratarlos como herramientas de borrador.

Ciertas cosas están prohibidas en casi todas partes: los rostros de personas reales, los logotipos de otras empresas y la copia del estilo de un artista vivo identificado por su nombre.

Cuatro hábitos sencillos te protegen:

1. Lee las normas vigentes del servicio que uses para las imágenes finales.
2. Conserva un registro de lo que creaste: la descripción utilizada, el servicio y la fecha. Tu guion gráfico ya contiene casi todo.
3. Nunca incluyas una persona real reconocible ni el logotipo de otra empresa en el trabajo de un cliente.
4. Indica al cliente qué imágenes se crearon con IA. Una frase en la nota de entrega evita cualquier conversación incómoda posterior.

Esto no es asesoramiento jurídico. Para un cliente de un sector regulado existen abogados de verdad. Estos cuatro hábitos, no obstante, son la norma habitual del trabajo profesional.

10. El móvil es el dispositivo principal

Todas las demostraciones de sitios web creados con IA que has visto se grabaron en una pantalla ancha de computadora. La mayoría de las personas que visiten tu sitio sostendrán un teléfono con una mano.

Para casi todas las personas a quienes se dirige este libro, el teléfono no es la segunda pantalla. Es la pantalla. Un sitio que solo se ve bien en una computadora portátil solo impresiona a quien lo construyó.

Una idea simplifica el diseño para ambas pantallas:

La misma historia, filmada de nuevo para otra forma.

Un director de cine que prepara una versión para teléfonos no escribe otra historia. Las escenas permanecen; cambia la manera de encuadrarlas. En la práctica, esto significa lo siguiente:

• La historia no cambia. La caja de zapatos, la clasificación, el balance, la claridad, la persona y la reserva de una reunión: los seis momentos aparecen en todos los dispositivos. Esta es una prueba útil: si un momento puede eliminarse en el teléfono, era decoración y no historia. Elimínalo también de la versión para computadora.
• Las imágenes vuelven a tomarse. Un video ancho se convierte en un video vertical del mismo tema, no en el video ancho comprimido. En las rutas pagadas hay que producir ambos formatos y pagar por los dos, así que inclúyelos en el presupuesto. En las rutas gratuitas hay que elegir ambos desde el principio.
• Decide intencionalmente dónde cambia el diseño. Dile con claridad a tu IA: «en pantallas de menos de 768 píxeles de ancho, usa el video vertical, haz que cada sección ocupe todo el ancho y agranda mucho la animación del balance, porque en un teléfono es el centro de atención». Después, pruébalo: arrastra la ventana del navegador para estrecharla y ensancharla, y observa el momento del cambio. Puedes ver si es fluido o desagradable, por lo que corresponde al concepto 11.
• Los pulgares no son punteros de ratón. Los botones deben ser lo bastante grandes para pulsarlos con un pulgar. Nada importante debe depender de pasar el puntero por encima, porque esa acción no existe en un teléfono. El texto debe leerse sin pellizcar la pantalla para ampliarlo. Incumplir cualquiera de estas condiciones no es un problema de estilo, sino un sitio averiado para la mayoría de las visitas.

Una observación práctica sobre cuándo crear la versión para teléfono: hazlo en la misma sesión de trabajo que la versión para computadora, justo después, mientras la IA todavía recuerda cada decisión. No lo dejes para otro día ni para después de una semana de trabajo distinto. Dos sesiones separadas producen dos sitios ligeramente diferentes, y no lo notarás hasta que el cliente lo haga.

¿Dónde se sitúa dentro de la construcción completa? Justo después de cerrar el diseño y antes de comenzar las comprobaciones:

computer version → phone version → screenshots at both widths → audit → second opinion → publish

La razón de ese orden es sencilla: los pasos de comprobación deben revisar ambas versiones. Si dejas la versión para teléfono para después de la revisión, habrás revisado solo la mitad del sitio.

De una página a muchas: sitios de varias páginas y enrutamiento

Hasta ahora todo se ha enseñado intencionalmente en una sola página. Es el lugar donde resulta más fácil aprender estos hábitos.

Sin embargo, el trabajo real para clientes crece. Con el tiempo, Ayesha querrá una página de servicios, una sección de artículos y quizá una página para cada una de sus especialidades.

La buena noticia es que nada de lo aprendido cambia. Un sitio de varias páginas no es un tipo de objeto nuevo. Es el mismo trabajo realizado una vez por página, más tres reglas nuevas.

Regla 1: cada página necesita su propia razón de existir y su propia historia.

La forma equivocada de añadir páginas consiste en dividir una historia en fragmentos, hasta terminar con una página «Acerca de» que contiene dos párrafos solitarios que pertenecían al desplazamiento principal.

La forma correcta aplica la misma prueba de «una idea por pantalla» en un nivel superior. Una página nueva existe cuando la persona visitante tiene una tarea diferente que realizar. Comparar los servicios en detalle, leer sus artículos y encontrar la oficina son tres tareas distintas; por tanto, pueden ocupar tres páginas.

Cada página que supera la prueba recibe su propia historia, escrita y acordada exactamente como en el concepto 8, y termina con su propia acción.

Escribe primero todo esto en un único plan: cada página, su función y sus momentos. Aprueba el plan antes de construir la segunda página.

El menú nace directamente de ese plan en vez de inventarse como decoración. Mantenlo breve, nombra los elementos según lo que las personas desean hacer y consérvalo idéntico en todas las páginas.

Otro pequeño detalle distingue el trabajo cuidadoso del descuidado: diseña también la pantalla de «página no encontrada». Es una página, así que merece el mismo cuidado.

Regla 2: una misma apariencia en todo el sitio.

Aquí la idea principal de Hallmark se invierte, algo que confunde a muchas personas, así que léelo despacio.

Entre clientes diferentes, la habilidad combate la uniformidad. Los sitios de dos clientes no deben compartir el mismo esqueleto.

Dentro del sitio de un solo cliente, la uniformidad es exactamente lo que buscas. Cinco páginas deben parecer cinco habitaciones del mismo edificio: los mismos colores, las mismas tipografías y el mismo espaciado, todo gobernado por un único design.md.

El momento atrevido conserva su carácter especial y vive en la página de inicio. Si lo repites con la misma intensidad en cada página, deja de ser especial y se convierte en papel tapiz.

En la práctica, construye primero la página de inicio para fijar la apariencia. Después solicita cada página adicional del mismo modo: «mismo archivo de diseño, misma apariencia, nueva historia».

Cuando una segunda IA revise el sitio (concepto 12), pregúntale específicamente si las páginas se perciben coherentes. Las pequeñas diferencias entre ellas son precisamente lo que quien construye no puede notar desde dentro del trabajo.

Regla 3: las direcciones web son solo archivos, hasta que copiar se convierte en un problema.

Esto parece complicado, pero no lo es. En un sitio web sencillo, el archivo es la dirección:

• index.html es la página de inicio
• services.html se encuentra en /services.html
• articles/index.html se encuentra en /articles

Los enlaces las conectan y el servicio de alojamiento publica la carpeta exactamente como está. No hay ningún sistema que aprender. Comienza siempre aquí.

Conviene conocer un pequeño ajuste de orden: si prefieres /services a /services.html, añade junto a tus páginas un archivo llamado vercel.json que contenga { "cleanUrls": true }. Vercel elimina entonces .html de las direcciones. La opción está desactivada de forma predeterminada, por lo que nada se rompe si nunca la utilizas.

La verdadera dificultad de tener muchas páginas no son las direcciones, sino las copias. El menú y el pie de página existen ahora como copias dentro de cada archivo. Cinco copias de un menú son cinco oportunidades para que terminen siendo ligeramente diferentes, y algún día una página conservará un enlace antiguo que nadie habrá notado.

Ya conoces esta sensación por el curso intensivo de programación: cuando explicas lo mismo por tercera vez, el conocimiento pide vivir en un solo lugar.

Hay dos respuestas, de la más ligera a la más pesada:

• La respuesta ligera: conserva los archivos sencillos y añade una comprobación automática que impida guardar el trabajo si los menús no son idénticos en todas las páginas. Así, la divergencia pasa de ser poco probable a ser imposible.
• La respuesta más pesada: cuando el sitio tenga más de unas pocas páginas o reciba artículos nuevos con frecuencia, adopta un sistema que escriba el menú una vez y lo reutilice. Astro es adecuado para este tipo de sitio, y tu IA puede configurarlo y trasladar las páginas existentes con una sola indicación.

El criterio es el mismo que enseñó el curso intensivo de programación sobre las herramientas en general: adopta el sistema más pesado cuando un problema real lo haya merecido, no antes.

Todo lo demás simplemente se repite una vez por página: capturas en ambos anchos, la auditoría, la versión para teléfono, la entrada del mapa del sitio, el límite de peso y una línea en la estimación de costos. Más páginas significan más superficie que cubrir, no más ideas que aprender; precisamente por eso comenzamos con una sola.

---

Parte 4: verificación del diseño

11. El ciclo de verificación visual

El patrón más importante de todo el libro es un ciclo: intenta, comprueba, corrige y repite. La IA realiza el trabajo, algo lo comprueba y, si la comprobación falla, ese mensaje de error se convierte en la siguiente indicación para la IA. La IA continúa hasta que la comprobación pasa, sin nadie en medio.

En el curso intensivo de programación, el comprobador era una prueba. Siempre ha parecido imposible comprobar el diseño de esta manera, porque «se ve bien» no es algo que una computadora pueda aprobar o rechazar.

Este concepto lo resuelve con tres comprobadores, del más flexible al más estricto:

Comprobador 1: la captura de pantalla. Dale ojos a la IA.

Este es el hábito individual más valioso del curso y es sencillo. Después de cada ronda de construcción, la IA toma una imagen de la página terminada y la observa, en vez de mirar el código.

¿Por qué importa tanto? Una IA que lee su propio código no puede saber que dos fragmentos de texto se superponen. Tampoco puede saber que un video no se cargó, que un botón tiene el mismo color que el fondo o que el diseño se desarma en una pantalla estrecha.

Una sola mirada a la imagen detecta los cuatro problemas al instante.

Esta es precisamente la razón por la que Kimi K3 gana comparaciones de diseño. La propia habilidad de diseño de Anthropic lo resume en una frase que vale la pena adoptar: «una imagen vale 1000 tokens». Los tokens son lo que la IA paga para leer algo. Por tanto, la frase no es un refrán, sino la afirmación de que mirar es más barato que leer el código y también mejor.

Automatízalo incluyéndolo en tu archivo de reglas:

Después de cada cambio importante, toma una imagen de la página con 1440 píxeles de ancho y otra con 390 píxeles, y observa ambas antes de decir que has terminado.

Ambas herramientas pueden hacerlo. Pide a la tuya que configure un programa llamado Playwright. Todo el proceso ocupa cerca de una docena de líneas de código que escribe una vez: abrir un navegador, cargar la página en cada ancho, guardar la imagen y cerrar.

Dos detalles hacen que las imágenes sean realmente útiles. Captura toda la página, no solo la parte visible al principio, porque una historia con desplazamiento continúa más abajo. Cuando el sitio esté en línea (concepto 13), toma además las imágenes de la página publicada, no de la copia en tu computadora.

Comprobador 2: la auditoría. Convierte el criterio visual en una lista.

El comando audit de Hallmark lee la página y devuelve una lista de problemas concretos. No cambia nada; solo informa.

Una lista es exactamente lo que necesita el ciclo, porque cada elemento se convierte en la siguiente indicación. Construye, audita, corrige la lista y vuelve a auditar hasta que quede vacía.

Observa lo que acaba de suceder. «Hazlo menos genérico» es una indicación que nunca puede fallar, por lo que no puede impulsar ningún proceso. «Corrige estos siete problemas concretos» se puede terminar y comprobar. El truco completo consiste en convertir la primera clase de frase en la segunda.

Comprobador 3: la regla automática. Garantiza lo que siempre debe cumplirse.

Algunas cosas no pueden dejarse en absoluto al criterio de la IA. Deben cumplirse en todas las ocasiones. El curso intensivo de programación enseñó a reconocerlas y aplicarlas automáticamente, de modo que la IA no pueda omitirlas aunque quiera.

En un sitio web, las clásicas son:

• Cada imagen tiene una descripción textual para que quienes usan lectores de pantalla sepan lo que muestra
• Ningún archivo supera el límite de tamaño
• El sitio se construye sin errores antes de guardar nada

Repetimos una advertencia del curso intensivo de programación: escribe estas comprobaciones tú mismo en lugar de pedir a la IA que lo haga. Cuando se solicita a una IA que construya una prueba contra sus propios hábitos, esta facilita amablemente que la prueba pase.

Aquí es donde muchas personas se engañan, así que lee con atención. Escribir «cada imagen debe tener una descripción» en el archivo de reglas es una instrucción que la IA suele seguir. No equivale a una regla que no puede incumplir. La diferencia solo aparece el día que la olvida.

Una comprobación real es un pequeño programa que responde sí o no. Guárdalo como check-site.mjs en tu proyecto. Está escrito en Node.js, que ya tienes porque npx y Vercel lo necesitan, así que funciona igual en Windows, macOS y Linux:

import { readdirSync, statSync, readFileSync } from "fs";
import { join, extname } from "path";

const MAX = 500 * 1024; // 500KB
const MEDIA = [
  ".png",
  ".jpg",
  ".jpeg",
  ".webp",
  ".avif",
  ".svg",
  ".gif",
  ".mp4",
  ".webm",
];
const problems = [];

function walk(dir) {
  // look in every folder, not just this one
  let out = [];
  for (const name of readdirSync(dir)) {
    if (name === "node_modules" || name.startsWith(".")) continue;
    const full = join(dir, name);
    out = statSync(full).isDirectory()
      ? out.concat(walk(full))
      : out.concat(full);
  }
  return out;
}
const files = ["site", "assets"].flatMap(walk); // only what actually publishes

for (const f of files.filter((f) => extname(f) === ".html")) {
  const html = readFileSync(f, "utf8");
  for (const tag of html.match(/<img\b[\s\S]*?>/gi) || []) {
    // even across line breaks
    if (!/\balt\s*=/i.test(tag)) problems.push(`MISSING DESCRIPTION  ${f}`);
  }
}
for (const f of files.filter((f) => MEDIA.includes(extname(f).toLowerCase()))) {
  if (statSync(f).size > MAX)
    problems.push(`TOO BIG  ${f}  ${Math.round(statSync(f).size / 1024)}KB`);
}

if (problems.length) {
  console.error(problems.join("\n"));
  process.exit(1);
}
console.log("All checks passed.");

Ejecútalo con node check-site.mjs. Si algo está mal, muestra el nombre del archivo y se detiene con un error. Si todo está bien, lo confirma.

Pruébalo de ambas maneras, porque el objetivo es verlo fallar. Ejecútalo en una página correcta y dirá All checks passed. Ahora elimina un atributo alt="..." y vuelve a ejecutarlo:

MISSING DESCRIPTION  site/index.html

Ese error hace funcionar el ciclo. Tu IA ejecuta el script, lee MISSING DESCRIPTION: services.html, corrige ese archivo exacto y vuelve a ejecutarlo. Nadie tuvo que notarlo ni recordarlo.

No necesitas comprender cada línea del script. Debes entender la diferencia que demuestra: el archivo de reglas pide; el script decide.

Añade más reglas a medida que descubras los errores habituales de tu trabajo. Una regla para que el menú sea idéntico en todas las páginas. Otra para comprobar que la página contenga de verdad un enlace de contacto funcional. Otra para que el título ya no sea «Home». La versión del paquete descargable contiene seis reglas, y cada una existe porque algo salió mal una vez.

Conoce también lo que esto no puede detectar. En el proyecto terminado de Ayesha, el libro contable del momento 3 sumaba PKR 217.950, mientras que el momento 4 mostraba PKR 217.930. Esto ocurrió en el sitio web de una contadora. La auditoría, la IA revisora y las capturas no lo detectaron, porque todas comprobaban si la página se veía bien, y así era. Una persona que sumó tres números encontró el error.

Por tanto, automatiza todo lo comprobable y dedica la atención ahorrada a lo que nunca podría comprobarse de ese modo. No es un premio de consolación. Es el trabajo.

Dos grupos de reglas que conviene tener desde la primera construcción.

Grupo uno: todo el mundo puede usar el sitio. El texto debe contrastar lo suficiente con el fondo para poder leerse. Quienes navegan con un teclado en vez de un ratón deben ver dónde se encuentran. Las animaciones deben detenerse para las visitas que hayan configurado su dispositivo para reducir el movimiento, porque este marea a algunas personas. La habilidad de diseño de Anthropic lo describe como un mínimo que se construye discretamente, sin presumir de ello. Esa es la actitud correcta: es el requisito básico, no una función especial.

Grupo dos: la página es lo bastante ligera para cargarse. En la mayor parte del mundo, y desde luego en Pakistán, muchas visitas usan teléfonos de gama media y pagan los datos por megabyte. Un hermoso video de 40 megabytes no les impresiona; les da una razón para marcharse.

Establece límites y aplícalos automáticamente:

• La primera pantalla debe cargar con menos de 1 megabyte aproximadamente, antes de que llegue cualquier video
• Cada video tiene detrás una imagen fija para que la página se vea bien antes de que cargue
• Las imágenes situadas más abajo solo cargan cuando la persona se desplaza hasta ellas
• Todo video que se reproduzca por sí solo debe estar silenciado, porque un sonido inesperado hace que las personas cierren la pestaña

Un sitio que luce espectacular con tu conexión rápida y falla en el teléfono de una visita ha decepcionado a la mayor parte de su público. A diferencia del criterio visual, una computadora puede comprobar cada uno de estos puntos.

Tu lugar sigue siendo esencial. El ciclo converge en algo correcto y no genérico. No converge en algo adecuado para este cliente: si la página se siente propia de Ayesha, si el momento atrevido funciona o si los momentos de la historia tienen espacio para respirar. Ese juicio nunca se pudo delegar, y la tercera creencia al principio del curso explicó por qué: la confianza llega exactamente hasta donde llega lo comprobable. El regalo del ciclo es reservar tu criterio para los lugares donde realmente se necesita.

12. Revisión de diseño entre modelos

El curso intensivo de programación ofreció esta regla: la IA que creó algo es la peor para revisarlo.

El diseño refuerza la regla y el concepto 1 explica por qué: una IA no puede ver sus propios hábitos. Desde dentro, su apariencia favorita no parece un hábito, sino «el aspecto que tienen los sitios web». Otra IA, que aprendió de forma distinta, detecta esos hábitos al instante.

Así se configura:

1. Una IA construye. Kimi K3 (o Claude) crea la página.
2. La revisa la IA de otra empresa. No es la misma IA a la que se pregunta dos veces ni un modelo hermano de la misma empresa, sino una realmente diferente. Proporciona a la revisora tres elementos: el encargo original, design.md y las capturas de pantalla. Estas importan porque una revisión de diseño que solo lee código es teatro. Después formula preguntas exigentes, por ejemplo: compara la página con el encargo; identifica tres lugares donde parece hecha con IA y explica por qué; comprueba que la historia siga funcionando en la versión para teléfono; comprueba que los colores y las tipografías coincidan exactamente con design.md; escribe los hallazgos en un archivo y no cambies nada.
3. La IA constructora lee los hallazgos y los corrige. Si los dos modelos discrepan, tú decides.

¿Por qué insistir en otra empresa? Por la prueba mencionada en el concepto 1: las páginas de Kimi K3 mostraron hábitos parecidos a los de otra IA, probablemente aprendidos de ella. Dos modelos pueden compartir el mismo punto ciego sin pertenecer a la misma empresa. Una revisión externa es la forma más barata de detectar lo que ninguno de los constructores puede ver sobre sí mismo.

Hay otra ventaja: como la revisión se guarda en un archivo, puedes mostrársela al cliente. «Una revisión independiente encontró estos cinco problemas y los cinco están corregidos» es una frase excelente que conviene poder pronunciar.

---

Parte 5: publicación

13. Despliegue: de una carpeta a una URL

Un sitio web guardado en una carpeta de tu computadora es un ensayo. La actuación real comienza cuando alguien de otra ciudad puede abrirlo en su teléfono.

Publicar un sitio web solía requerir un curso completo: servidores, direcciones y certificados de seguridad. Hoy tu IA puede hacerlo por ti.

Vercel es el servicio que usa este curso. Su plan gratuito basta para proyectos de aprendizaje y para mostrar trabajo a clientes, y tu IA puede controlarlo directamente. Crea una cuenta una vez y después dile:

Connect to Vercel via the CLI and deploy this project.

Tu IA instala lo necesario, abre una vez el navegador para que inicies sesión y publica el sitio.

Importan dos comandos, y su diferencia es la misma que existe entre un ensayo y una actuación:

• vercel crea una vista previa: una dirección web temporal, perfecta para enviarla al cliente con el mensaje «mira esto».
• vercel --prod coloca el sitio en la dirección real, la que pertenece a la empresa.

Cada vez que haces cambios obtienes una vista previa nueva. Trabajar con un cliente adquiere así un ritmo cómodo: construir, enviar la vista previa, recibir comentarios, volver a construir y enviar otra vista previa. El sitio real permanece intacto hasta que lo aprueben.

Tres hábitos son suficientes:

• Las vistas previas sirven para cambiar cosas. La dirección real es para lo terminado. Nunca muestres trabajo en curso desde la dirección real ni dejes que un cliente observe una vista previa antigua.
• Realiza las comprobaciones finales en la página publicada, no en tu computadora. Las tipografías, los videos y los enlaces encuentran nuevas maneras de fallar cuando un sitio se conecta a internet. Dirige la captura del concepto 11 a la dirección de la vista previa publicada, en ambos anchos, antes de que la vea cualquier persona.
• Otros servicios realizan el mismo trabajo. Netlify, Cloudflare Pages y GitHub Pages funcionan de la misma manera. La habilidad que aprendes consiste en dejar que tu IA publique por ti. La empresa es solo una preferencia.

Tu propia dirección web es la verdadera meta.

Ningún cliente considera terminado un sitio cuya dirección acaba en .vercel.app, y tiene razón. La dirección forma parte de la marca.

Obtenerla es una tarea breve:

1. Compra la dirección a cualquier vendedor. En Pakistán, las direcciones .pk proceden de PKNIC y las .com de cualquier vendedor internacional.
2. Añádela en la configuración del proyecto de Vercel.
3. Vercel muestra dos o tres valores que debes copiar en la página de configuración del vendedor. Cópialos. Tu IA puede guiarte por las pantallas.

Puede tardar entre unos minutos y unas horas en comenzar a funcionar.

Esto exige dos hábitos profesionales. Compra la dirección a nombre del cliente y en una cuenta bajo su control. Un profesional independiente que posee la dirección web de un cliente lo ha convertido accidentalmente en rehén, aunque tenga las mejores intenciones. Además, el candado que protege el sitio es automático en este caso; si el navegador muestra una advertencia de seguridad, la configuración de la dirección está mal, no el sitio.

Asegúrate de que las personas puedan encontrarlo. Un sitio que nadie encuentra fracasa en silencio. Una revisión breve cubre lo básico y ofrece beneficios permanentes:

• Un título de página real. «Ayesha Rehman, contadora pública, Lahore», no «Home». Es lo que aparece en los resultados de búsqueda y las pestañas del navegador.
• Una frase que describa la página, escrita para una persona que recorre una lista de resultados de búsqueda.
• Una imagen para compartir. Es el elemento que la mayoría de los tutoriales omite y el que más importa aquí. Cuando alguien comparte tu enlace en WhatsApp, aparece una tarjeta pequeña con una imagen y un título. Un enlace convertido en una tarjeta atractiva se abre; un enlace gris y desnudo no. Esta imagen es solo otro trabajo para el proceso multimedia: exporta la parte superior de la página a 1200 por 630 píxeles y guárdala como og.png.
• Una lista de tus páginas para los motores de búsqueda, que tu IA genera en segundos, además de registrar el sitio en Google desde la propia cuenta del cliente.

Prueba la tarjeta para compartir de manera honesta: pega el enlace de vista previa en un chat de WhatsApp y observa lo que aparece.

14. El flujo de trabajo con clientes

Hasta ahora construías para ti. En cuanto alguien te paga, el mismo trabajo necesita un conjunto de hábitos profesionales a su alrededor.

Este concepto reúne esos hábitos mediante el proyecto que construimos en la parte 6: Ayesha Rehman, una contadora de Lahore, que lanza un sitio web para su despacho.

Seis pasos:

1. Acuerda todo por escrito antes de construir. Una página basta: para quién es el sitio, la única acción que debe realizar una visita, los momentos acordados de la historia y lo que incluye «terminado»: cuántas páginas, si incluye la versión para teléfono, dónde se publicará y quién proporciona las fotografías. Seis semanas después, cuando alguien recuerde el acuerdo de otro modo, esta página resolverá la discrepancia. La memoria no es un contrato.
2. Encuentra la marca y después confírmala. Usa el concepto 7 y recuerda su regla: lo que encuentras en línea es el borrador; lo que envía el cliente es definitivo. El sitio antiguo de Ayesha proporciona sus colores, pero una llamada revela que está cambiando el logotipo. Esa llamada acaba de evitar que construyas mal toda la primera versión.
3. Vende la historia, no una imagen de la página terminada. Antes de construir, envía los seis momentos, una línea por cada uno. Un cliente que aprueba la historia ofrece comentarios sobre el contenido. Si primero ve un diseño terminado, comenta el tono exacto de azul. El orden en que muestras las cosas es una de tus herramientas más infravaloradas.
4. Pide que lo revisen en su propio teléfono. No uses capturas pegadas en un chat. Envía el enlace de la vista previa y di: «abre esto en tu teléfono». Es el dispositivo que usan sus clientes. También es el momento en que todo tu trabajo para la versión móvil demuestra su valor sin necesidad de explicaciones.
5. Calcula el precio con los cuatro recuadros. Modelo: casi nada, así que absorbe el costo en vez de enumerar centavos en una factura. Criterio visual: es tu tiempo y tu partida principal. Multimedia: aquí corresponde la conversación honesta, «las fotografías de archivo están incluidas y un video personalizado como este ejemplo cuesta X adicional». Como puedes comprobar precios antes de generar, X es una cifra que declaras con confianza en lugar de adivinar. Alojamiento: gratuito por ahora; se traslada a la cuenta y la dirección web del cliente durante la entrega.
6. Realiza una entrega adecuada. Proporciona todo: los archivos, el sitio publicado en una cuenta bajo su control, la dirección web a su nombre, design.md y estadísticas sencillas de visitas si las desea.

Añade algo más: una sola página que explique cómo pedir a una IA pequeños cambios en el sitio.

Ese último elemento es nuevo en esta época, y los clientes lo recuerdan. No solo entregas un sitio web, sino también la capacidad de cuidarlo.

El movimiento que acumula beneficios: después del primer cliente, guarda todo el proceso como archivo de habilidad: la plantilla del acuerdo, cómo encuentras la marca, el formato de la historia, las preguntas de revisión, los pasos de publicación y la lista de entrega. El segundo cliente exigirá la mitad del esfuerzo que el primero y, para el quinto, el archivo realizará la mayor parte del trabajo.

Esta es la idea central de este libro aplicada al tamaño de un profesional independiente: lo duradero nunca es el sitio web, sino el sistema que crea sitios web.

15. Disciplina de costos

El curso intensivo de programación enseñó a mantener baratas las conversaciones con IA. Los sitios web añaden dos costos: las imágenes se cobran por unidad y usar la IA de otra empresa cambia los descuentos disponibles. Tres hábitos lo resuelven.

Calcula el precio de las imágenes antes de crearlas.

Esta es la sorpresa: en una construcción con Kimi K3, todo el código de un sitio web completo cuesta menos que una taza de té. Un solo video personalizado puede costar más que todo lo demás junto. Las imágenes representan el presupuesto, no la IA.

Por suerte, puedes comprobar los precios antes de gastar. El comando higgsfield generate cost indica cuánto costaría un video sin crearlo. Así, tu guion gráfico se convierte en un presupuesto: seis momentos, seis precios y un total, decididos antes de gastar.

Inclúyelo en el archivo de reglas para no olvidarlo:

Antes de crear cualquier imagen o video, calcula el costo de cada toma planificada e indícame el total.

Aplica después la misma disciplina en todas partes: enumera cada momento, su ruta y su formato antes de crear nada, revisa el conjunto completo y solo entonces paga por la calidad final. El error costoso nunca es una sola imagen, sino crear treinta mientras descubres poco a poco lo que querías porque no lo escribiste primero. La versión para teléfono duplica la lista; inclúyelo en el precio que ofreces, no en una sorpresa posterior.

Usar la IA de otra empresa recupera los costos de la conversación. Kimi K3 cobra cerca de diez veces menos por el texto que ya ha visto que por el que lee por primera vez. Ese descuento explica por qué parece barato y solo se aplica mientras el comienzo de la conversación no cambie. Si reinicias la conversación o editas algo cerca del principio, vuelves a pagar el precio completo por todo.

De ahí nacen dos hábitos. Configura CLAUDE_CODE_AUTO_COMPACT_WINDOW como mostró el concepto 4, para que la limpieza automática sepa realmente cuánto abarca la memoria del modelo. Continúa también con lo ya aprendido: observa la cifra de uso, ordena la conversación en puntos de pausa naturales y guarda primero los datos importantes en archivos, porque estos no desaparecen durante la limpieza.

Descubre cuánto te cuesta realmente un proyecto.

Después de tu primer sitio completo, anota las cifras reales: cuánto gastaste en la IA, cuánto en imágenes y cuántas horas trabajaste.

El sitio de Ayesha en la parte 6 cuesta unos pocos dólares de tiempo de IA, más un presupuesto de imágenes que puede ser cero, menos de un dólar o el precio de un video comprobado con antelación.

Esa cifra lo cambia todo. Convierte «¿puedo permitirme practicar esto?» en «sí, todas las semanas». Cuando un cliente pregunte cuánto cuesta un sitio web, responderás con una cifra en lugar de adivinar.

---

Parte 6: un ejemplo práctico completo, dos veces

Ahora reunimos todo. Un sitio web real, desde una carpeta vacía hasta una dirección publicada, construido una vez en Claude Code y otra en OpenCode. Se indican los puntos donde difieren las herramientas.

Descarga el proyecto terminado

Todo lo descrito a continuación existe como archivos reales, no como una descripción de archivos: el sitio funcional y su página 404 diseñada, la tarjeta para compartir, las dos fotografías, la estructura narrativa de seis momentos, design.md con las reglas de marca, el archivo de reglas, la auditoría de Hallmark (siete hallazgos y después ninguno), la revisión independiente de la IA de otra empresa, el registro de costos, el comprobador, el script de capturas y capturas de página completa en ambos anchos tomadas de la página real.

Descarga el proyecto de Ayesha · descomprímelo y ejecuta npm run check. Elimina un atributo alt="..." y vuelve a ejecutarlo para verlo fallar.

Lee primero docs/defect-log.md. Enumera los ocho defectos que tuvo el proyecto en algún momento e identifica qué detectó cada uno. El más grave, un libro contable que no cuadraba en el sitio de una contadora, no fue detectado por ninguna comprobación automática. Lo encontró una persona al hacer la suma. Esa es la proporción que defiende todo el curso.

La construcción

La clienta: Ayesha Rehman, una contadora de Lahore. Está relanzando su despacho con herramientas de IA y su sitio actual es una única página antigua con un logotipo desactualizado.

Quiere que las visitas, personas propietarias de pequeñas empresas de su ciudad, sientan dos cosas mientras se desplazan: esta persona comprende mi desorden y esta persona ya lo ha resuelto.

La estructura narrativa acordada (concepto 8, redactada con Ayesha, seis momentos):

1. La caja de zapatos: recibos, el secreto culpable de todo el mundo, fotografiada con calidez y humanidad
2. La clasificación: el caos se convierte en categorías
3. El libro contable que se cuadra solo: el momento atrevido, una línea animada que se equilibra mientras te desplazas
4. La claridad mensual: un estado limpio, una cifra serena
5. La persona: Ayesha, su oficina, sus credenciales y la luz real de Lahore
6. Reservar una consulta: una acción, un botón

Lo que entregarás:

• Una versión para computadora y otra para teléfono a partir de la misma historia
• Sus colores y tipografías de marca usados con exactitud
• El momento 6 conectado a un enlace real de WhatsApp con el mensaje ya escrito
• Los fundamentos para encontrar el sitio: título, descripción y una tarjeta atractiva cuando comparta el enlace por WhatsApp
• Un enlace de vista previa para su aprobación y, durante la entrega, su propia dirección web .pk

Imágenes: ruta 1 para los momentos 1, 2, 4 y 5, con fotografías reales. Las de los momentos 1, 2 y 4 proceden de una biblioteca gratuita. El momento 5 usa dos fotografías tomadas con un teléfono en su oficina real. La animación del balance del momento 3 se construye con código, no con video. Se presupuesta un video inicial personalizado de la ruta 4 como extra opcional, se comprueba el precio por adelantado y se deja la decisión en sus manos. Es la lección del concepto 14 en acción: el presupuesto de imágenes es una conversación con el cliente, no algo que decides en solitario.

Los ocho pasos

Paso 1: archivo de reglas para un proyecto web

En Claude Code: ejecuta /init y después reduce el archivo generado a lo que el modelo no puede deducir con solo mirar:

# ayesha-practice-site

## Layout

- `site/`: the website source. Single HTML file with embedded CSS/JS until told otherwise.
- `assets/`: all media, named by story beat (e.g. `03-ledger-*`), optimized before use.
- `design.md`: brand constraints and design direction. Read before any design work.
- `docs/plans/story-spine.md`: the approved six-beat spine. The build implements this.

## Critical rules

- Brand constraints in design.md are a spec, not a mood. Never substitute colors or fonts.
- Every image ships with an alt attribute. No asset over 500KB.
- After significant changes, screenshot at 1440px and 390px and review both before reporting done.
- The story spine's beats may not be reordered or dropped without asking.

Por qué importa: la regla de las capturas hace que la IA compruebe siempre su propio trabajo y no solo cuando recuerdas pedirlo. La regla de design.md impide que la IA «mejore» silenciosamente los colores de marca.

En OpenCode: contenido idéntico en AGENTS.md.

Paso 2: instala la capa de criterio visual

De forma idéntica en ambas herramientas:

npx skills add Nutlope/hallmark

En Claude Code, instala también el plugin frontend-design de Anthropic mediante el sistema de plugins. Después ayudará automáticamente en el trabajo de diseño. Nombra Hallmark cuando quieras el tratamiento completo. Ambos funcionan juntos.

Si usas Kimi K3, recuerda la advertencia del concepto 5: los modelos de IA de otras empresas detectan habilidades por sí solos con menos fiabilidad. Nombra Hallmark en cada paso de diseño en vez de confiar en que se active.

Paso 3: extrae la marca y estudia la dirección

Primero aplica el concepto 7: dirige tu IA al sitio antiguo de Ayesha y pide los colores, las tipografías y el logotipo exactos, junto con la línea de código que demuestra cada dato. Devuelve un verde profundo, un dorado y una tipografía con serifas, cada uno con su comprobante.

Haz después la llamada telefónica, que nunca debes omitir. Ayesha explica que está cambiando su marca: conserva el verde, sustituye el dorado por un ámbar más cálido y envía correctamente el nuevo logotipo.

Aplica entonces el concepto 6: ejecuta study de Hallmark en dos sitios web que ella admira. Si cuentas su propia marca, son tres referencias, exactamente la cantidad que te obliga a combinar en lugar de copiar.

Todo se guarda en design.md, con su marca claramente identificada como reglas y no como sugerencias.

Idéntico en ambas herramientas.

Paso 4: modo de planificación, de la estructura narrativa a la estructura visual

Cambia al modo de planificación, donde la IA puede mirar pero no modificar nada (Shift+Tab dos veces en Claude Code y Tab en OpenCode). Describe el trabajo: los seis momentos, design.md, la prioridad de los teléfonos y cuál es el momento atrevido.

La IA devuelve un plan, y aquí detectas gratis el error. Su primer plan es una página normal: una imagen grande arriba y los momentos comprimidos después como secciones corrientes. Es el aburrido esqueleto predeterminado disfrazado con tu historia.

Por eso lo rechazas:

El desplazamiento es la historia. Un momento por pantalla. La animación del balance ocupa una pantalla completa. No incluyas filas de recuadros de funciones en ningún lugar.

La IA actualiza el plan. Ahora lo apruebas y lo guardas en un archivo.

Paso 5: construye con el modelo de diseño

En Claude Code: la configuración de esta carpeta apunta a Kimi K3, como en el concepto 4. Confírmalo con /status, no con /model. Sal del modo de planificación y deja que construya, nombrando Hallmark durante el proceso. Vigila de vez en cuando el uso: K3 escribe mucho y este es el paso más largo de la construcción.

Construye ambas versiones en esta misma sesión. Primero la versión para computadora para fijar el diseño y, justo después, la de teléfono mientras la IA conserva todas las decisiones. Cada momento se reorganiza y la animación del balance ocupa toda la pantalla del teléfono. Estrecha y ensancha el navegador para observar el cambio y grábalo para Ayesha.

En OpenCode: escribe /models, elige Kimi K3 mediante OpenRouter y construye. Nombra Hallmark del mismo modo y vigila igualmente el uso.

Kimi K3 piensa con intensidad, por lo que el proceso es más lento y extenso que una sesión con Claude. El resultado, sin embargo, está claramente por encima del promedio. La línea contable se dibuja sola mientras te desplazas. No aparece ni una fila de recuadros de funciones.

Paso 6: la fase multimedia

Siguiendo el guion gráfico, una IA auxiliar busca fotografías gratuitas para los momentos 1, 2 y 4, y mantiene el mismo tipo de luz y ambiente. La auxiliar trabaja en otra conversación porque cuarenta miniaturas saturarían la principal. Las dos fotografías de la oficina tomadas con un teléfono se guardan en assets/ para el momento 5. Cada archivo recibe el nombre de su momento y se mantiene por debajo del límite de tamaño.

Si un momento hubiera necesitado una imagen inventada, la habrías creado en la ruta 3 por unos centavos o gratis en chatgpt.com.

Si Ayesha hubiera aceptado el video, lo crearías aquí. Encontrarías la toma hablando con Gemini Omni Flash. Fijarías la versión final con Seedance a 720p para que ella la revisara. Tras su aprobación, pagarías la calidad completa en formatos ancho y vertical, por el precio ya presupuestado.

Idéntico en ambas herramientas.

Paso 7: verifica con capturas, auditoría y revisión entre modelos

Los tres comprobadores del concepto 11, en orden.

La regla de las capturas ha trabajado silenciosamente durante todo el proceso. Ejecuta ahora audit de Hallmark. La primera ejecución encuentra siete problemas, incluido un elemento que solo funciona al pasar el ratón por encima y falla por completo en un teléfono. Corrige la lista y vuelve a ejecutarla hasta dejarla vacía.

Aplica después el concepto 12: proporciona a la IA de otra empresa el encargo, design.md y las capturas. En este caso, Claude revisa el trabajo de Kimi K3. Escribe los hallazgos en un archivo y no modifica nada.

La revisión detecta dos cosas que la constructora no podía ver sobre sí misma: la fotografía del momento 4 tiene una luz más fría que las demás y el botón ámbar resulta difícil de leer sobre el fondo verde.

La constructora corrige ambas. Esta vez no tuviste que resolver desacuerdos, pero lo leíste todo porque la decisión final sigue siendo tuya.

En Claude Code: la revisión se ejecuta en un segundo árbol de trabajo, como mostró el curso intensivo de programación. En OpenCode: la revisora es simplemente un segundo proveedor conectado dentro del mismo proyecto.

Paso 8: publica y guarda el proceso

La versión para teléfono se construyó en el paso 5, inmediatamente después de la versión para computadora y en la misma sesión, tal como exige el concepto 10. Por eso las comprobaciones del paso 7 cubrieron ambos anchos.

Solo queda publicar. Ahora se completa el trabajo de visibilidad: título, descripción, lista de páginas y tarjeta para compartir. Prueba la tarjeta honestamente: pega el enlace de vista previa en un chat de WhatsApp y observa lo que aparece.

Ejecuta después vercel para obtener una dirección de vista previa, toma las imágenes finales de la página publicada en ambos anchos y envía a Ayesha el enlace con tres palabras: «abre en teléfono».

Tras su aprobación, ejecuta vercel --prod, conecta su propia dirección .pk desde su cuenta, registra el sitio en Google desde esa cuenta y entrega el paquete del concepto 14.

Por último, aplica el movimiento que acumula beneficios. Guarda todo el proceso como archivo de habilidad: la plantilla de la historia, las preguntas de marca, el orden de auditoría y revisión, y la lista de publicación.

Una prima de Ayesha dirige una empresa de exportación textil. Tu segundo sitio comienza mañana y tardarás la mitad.

Lo que acaba de suceder

Cuenta lo que procedía del curso intensivo de programación: archivo de reglas, modo de planificación, habilidades, modelos de IA auxiliares, comprobaciones automáticas, segunda opinión y trabajo guardado para reutilizarlo.

Cuenta ahora lo nuevo: un archivo de criterio visual, una forma de conseguir imágenes, una captura usada como prueba y una dirección web publicada como producto terminado.

Esa proporción es el objetivo. No te convertiste en diseñador. Dirigiste una máquina de comprobación hacia un nuevo tipo de trabajo, y la máquina, junto con un archivo de buen criterio visual, hizo el resto.

Las diferencias entre las dos herramientas volvieron a ser mínimas: otra configuración para acceder a Kimi K3, otra tecla para entrar en el modo de planificación y otro lugar donde se ejecuta la revisión. El razonamiento fue idéntico.

El razonamiento es la herramienta real. La configuración es decoración.

---

Cómo llegar a dominarlo de verdad

La misma regla que en el curso intensivo de programación: leer esta página aporta muy poco; construir aporta casi todo.

Encontrarás problemas. Es normal y así se produce el aprendizaje. Cada problema remite a un concepto de esta página:

El problema que encuentras	Lo que debes corregir
«Todos los sitios que creo parecen iguales»	No has cargado un archivo de criterio visual o no lo estás nombrando (concepto 5)
«La IA ignoró los colores de marca»	No existe design.md o los colores no están claramente marcados como reglas (concepto 7)
«Se ve genial en mi computadora y está roto en mi teléfono»	Construiste una versión y la comprimiste. Vuelve a filmar la historia (concepto 10)
«La página es bonita, pero nadie sabe qué hacer»	No hay historia o dos ideas compiten en una pantalla (concepto 8)
«Sigo diciendo “hazlo menos genérico” y nada cambia»	Esa indicación nunca puede fallar, así que no cambia nada. Audita y corrige la lista (concepto 11)
«La factura de las imágenes me sorprendió»	Comenzaste a crear imágenes antes de planificarlas (conceptos 9 y 15)
«Mi IA y yo omitimos un error evidente»	Necesitas que lo observe la IA de otra empresa (concepto 12)
«Kimi K3 se confunde y encarece al final del día»	En esa ruta, nadie ordena la conversación salvo tú (conceptos 4 y 15)
«El sitio está publicado, pero el botón no hace nada»	El último momento nunca se conectó a ninguna acción (conceptos 8 y 11)
«Es hermoso en mi computadora y demasiado pesado para las visitas»	Establece un límite, coloca una imagen fija tras los videos y carga tarde las imágenes (concepto 11)
«Mis cinco páginas parecen cinco sitios diferentes»	Un solo design.md debe gobernarlas todas (sección sobre varias páginas)

Un sitio web por semana supera a ocho conceptos al día.

Elige algo real: tu currículum como página, la tienda de una amistad, el negocio familiar o el club escolar. Ejecuta los ocho pasos y anota cuánto te costó.

Para el tercer sitio, los pasos dejan de parecer pasos. Simplemente se convierten en tu forma de trabajar.

Tu posición en la escalera: las ocho etapas para dominarlo (haz clic para abrir)

La habilidad crece por etapas. Saber dónde te encuentras indica lo siguiente que debes practicar.

Etapa	Qué aspecto tiene	Dónde se enseña
0. Mentalidad	Comprendes que la IA tiene hábitos de diseño, que compruebas mirando y que el criterio visual cabe en un archivo.	Las tres ideas al principio del curso
1. Primer sitio en línea	Una página real, imágenes gratuitas y una dirección publicada que otra persona abrió en su teléfono.	Conceptos 2, 9, 10 y 13
2. Criterio visual cargado	Hallmark instalado. Has leído la lista de problemas de tu página y los has corregido todos.	Conceptos 5 y 11
3. La historia primero, siempre	Nunca comienzas a construir antes de escribir y acordar la historia, incluida la acción final.	Concepto 8
4. La comprobación se ejecuta sola	Cada construcción usa los tres comprobadores: capturas, auditoría y reglas automáticas.	Concepto 11
5. Construcción para otras personas	Encuentras y confirmas la marca, obtienes una segunda opinión, revisas en el teléfono del cliente y calculas el precio con los cuatro recuadros.	Conceptos 7, 12 y 14
6. Tu proceso es un archivo	Todo el proceso está guardado como habilidad y el segundo cliente realmente exige la mitad del tiempo.	Concepto 14 y parte 6, paso 8
7. Tu proceso es un negocio	Llegan clientes, calculas precios con los cuatro recuadros, creas sitios de varias páginas con un sistema de diseño y recibes recomendaciones.	Conceptos 2 y 14, más la sección sobre varias páginas

La mayoría se atasca entre las etapas 1 y 2. Publica páginas funcionales y colecciona frases ingeniosas para escribir, en vez de cargar una vez un archivo de criterio visual y dejar que trabaje para siempre.

Si hoy subes una sola etapa desde tu posición actual, el curso habrá compensado su costo.

---

Referencia rápida

Los 15 conceptos en una línea cada uno

1. El diseño genérico de IA es matemática, no pereza. Toda IA tiene una apariencia favorita porque responde con lo más común que aprendió. Incluso Anthropic escribió un archivo para indicar a Claude que evitara sus propios hábitos.
2. Cuatro piezas construyen cualquier sitio. Modelo, criterio visual, multimedia y alojamiento. Cada decisión cabe en un recuadro, y los recuadros también permiten calcular el precio.
3. La mejor IA para diseño no es la mejor IA en general. Son competencias distintas. Consulta un sitio de comparaciones a ciegas y envía el trabajo de diseño a quien las lidere.
4. Cualquier IA puede ejecutarse dentro de tu herramienta. Cambia la dirección en la configuración de Claude Code o elige una opción de la lista de OpenCode. Comprueba con /status, nunca con /model. La mejor IA lleva una corona alquilada; tu herramienta y tus archivos te pertenecen.
5. Hallmark es criterio visual dentro de un archivo. Cuatro comandos (construir, auditar, rediseñar y estudiar), 58 comprobaciones y una forma de página distinta cada vez. Cualquiera puede usarlo gratis.
6. Aprende de los sitios; no los copies. study escribe en design.md lo que hace funcionar un sitio. Usa tres referencias, porque una sola invita a copiarla.
7. Acierta primero con la marca. Pide colores y tipografías exactos con pruebas de su origen, y después confirma los archivos reales con el cliente. Los colores de marca son reglas, no sugerencias.
8. Una historia, un desplazamiento. Escribe la historia antes de construir, presenta una idea por pantalla, muestra algo real arriba y sé audaz en un solo lugar. El último momento debe funcionar de verdad: un enlace de WhatsApp, un formulario o un pequeño programa. Nunca un botón muerto.
9. Cuatro formas de conseguir imágenes. Fotografías reales (gratis), imágenes de IA gratuitas (calidad manual o comodidad automática, nunca ambas), imágenes de IA por centavos (ambas) y video por dinero real. Tu historia es la lista de tomas.
10. El teléfono es la pantalla principal. La misma historia, filmada de nuevo en formato vertical. Decide intencionalmente dónde cambia el diseño.
11. Tres comprobadores permiten probar el diseño. Las capturas dan ojos a la IA, la auditoría convierte el criterio visual en una lista y las reglas automáticas garantizan lo básico: contraste legible, uso con teclado y una página lo bastante ligera para los datos móviles.
12. Obtén una segunda opinión de la IA de otra empresa. Una IA no puede ver sus propios hábitos. Envía el encargo, el archivo de diseño y las capturas. Guarda los hallazgos en un archivo.
13. Publicar requiere dos comandos. vercel crea una vista previa para compartir y vercel --prod la hace real. Después añade la dirección propia del cliente y los fundamentos de visibilidad: título, descripción y tarjeta que aparece al compartir el enlace. Comprueba la página publicada, no tu computadora.
14. Trabajar con clientes tiene seis pasos. Acordar por escrito, encontrar y confirmar la marca, vender la historia antes que las imágenes, revisar en su teléfono, calcular el precio con los cuatro recuadros y entregar la capacidad de mantener el sitio.
15. Conoce los costos. Calcula el precio de las imágenes antes de crearlas, mantén ordenadas las conversaciones y averigua cuánto cuesta un proyecto completo.

Referencia rápida de configuración (haz clic para abrir)

Quieres...	Claude Code	OpenCode
Ejecutar Kimi K3	Bloque de entorno de Moonshot en .claude/settings.json, comprobar con /status	/connect openrouter → /models → K3
Instalar la capa de criterio visual	npx skills add Nutlope/hallmark, más el plugin frontend-design de Anthropic	npx skills add Nutlope/hallmark
Generar multimedia en la sesión	CLI/MCP de Higgsfield, o rutas 1 y 2 mediante obtención y API	Igual
Capturar el resultado	Pedir que configure capturas con Playwright	Igual
Desplegar	«Conéctate a Vercel mediante la CLI y despliega»	Igual
Vigilar el contexto en K3	Configurar CLAUDE_CODE_AUTO_COMPACT_WINDOW como 1048576 y vigilarlo	Lectura de tokens en la TUI

La construcción en un árbol de decisiones

New page or site?
    → Spine first (plan mode) → Hallmark default → media per beat → verify

Page exists but looks generated?
    → Hallmark audit → fix the list → if the skeleton itself is slop, redesign

Client has a brand?
    → Extract with quoted sources → confirm real assets → design.md as constraints

Admire a site?
    → Hallmark study → design.md as direction (never a clone)

Site outgrown one page?
    → A spine per page, one design.md for all → files as routes →
      framework with layouts only when repetition earns it

Before anyone sees it?
    → Screenshot both widths on the deployed URL → cross-family review → then the human

---

Ayuda de estudio con tarjetas

---

Cuestionario: 42 preguntas sobre los 15 conceptos

Pon a prueba lo aprendido. Cada sesión muestra un conjunto nuevo de 15 preguntas.

Checking access...