Hace una semana nuestro sitio web se veía exactamente como lo que era: un proyecto generado con ayuda de IA. Fuente Inter. Gradientes cian. Tarjetas simétricas con sombras genéricas. Tres columnas perfectamente balanceadas. Un puñado de Heroicons.
Funcionaba. Pero era completamente olvidable. El equivalente visual de la música de ascensor.
Hoy tenemos una identidad visual propia: paleta ámbar, tipografía editorial con tres familias, layouts asimétricos numerados, soporte dark/light con tokens semánticos, y una personalidad que no se parece a ningún template.
Lo hicimos en menos de 48 horas. Con 62 archivos modificados y 30 commits. Sin tocar la lógica de negocio. Y lo más interesante: el diseñador fue Claude Code, alimentado con skills de diseño que le enseñaron a tener buen gusto.
Este artículo cuenta exactamente cómo lo hicimos.
El problema: AI Slop con esteroides
Si has usado un agente de código para generar interfaces, conoces la estética: Inter, púrpura o cian, tarjetas redondeadas, sombras box-shadow predeterminadas, tres columnas simétricas. La comunidad de desarrollo le puso nombre: AI Slop.
Nuestro sitio anterior encajaba perfectamente en esa descripción. La paleta usaba #06b6d4 (cyan-500) sobre fondos #0f172a (slate-900). Las secciones eran predecibles: hero centrado, grid de cards, CTA genérico, footer estándar.
La ironía era evidente: una empresa que vende sistemas de inteligencia artificial y automatización no debería verse como si un agente sin restricciones la hubiera diseñado. Nuestro propio producto nos estaba delatando.
Necesitábamos un cambio. Pero no teníamos diseñador.
El catalizador: un artículo sobre skills de diseño
Publicamos Skills de Diseño para Agentes de IA — un análisis de cinco herramientas que le enseñan buen gusto a los agentes de código. La premisa central:
Los LLMs no tienen criterio estético. Cuando generan una interfaz, aplican patrones estadísticamente probables. La solución no es cambiar de modelo ni escribir prompts más largos. Es darle al agente constraints explícitas de diseño.
Mientras escribíamos ese artículo, tomamos una decisión: vamos a aplicarlo a nuestro propio sitio. Si las skills de diseño funcionan en teoría, teníamos que probarlo en carne propia.
El experimento consistía en:
- Definir un sistema de diseño completo en un archivo ejecutable
- Darle ese archivo a Claude Code
- Pedirle que reescribiera cada sección del sitio
- Iterar con comandos de refinamiento
El proceso: 62 archivos, 30 commits, 3 skills
Capa 1 — Fundación: reglas explícitas en CLAUDE.md
El primer paso fue establecer restricciones absolutas. Nada de "hacelo más moderno" o "mejorá el diseño". Reglas concretas:
## Diseño
- Nunca uses Inter, Roboto, ni Open Sans
- Nunca uses gradientes fríos (purple, cyan, blue)
- Nunca uses más de 3 colores por componente
- Nunca uses box-shadow genérico (0 4px 6px -1px)
- No uses tarjetas simétricas con bordes redondeados de 8px
- No uses Heroicons como elemento decorativo principal
- Todo color debe referenciar un token semántico, nunca un valor crudo
Capa 2 — Sistema: DESIGN.md con la identidad completa
El segundo paso fue definir el sistema de diseño en un archivo estructurado de 9 secciones, siguiendo el estándar DESIGN.md:
1. Atmósfera visual: Cálida, editorial, técnica sin ser fría. Como una revista de arquitectura meets terminal de Kubernetes. El ámbar como color de acento evoca el café guayoyo — familiar, venezolano, nada corporativo.
2. Paleta de colores semánticos:
:root {
--color-base: #09090B; /* Fondo principal - negro cálido */
--color-surface: #141210; /* Superficies - marrón casi negro */
--color-overlay: #1C1917; /* Capas superpuestas */
--color-border-subtle: #292524; /* Bordes sutiles */
--color-border: #44403C; /* Bordes activos */
--color-accent: #F59E0B; /* Ámbar - la estrella */
--color-accent-hover: #FBBF24; /* Ámbar claro */
--color-ink-primary: #FAFAF9; /* Texto principal */
--color-ink-secondary: #D6D3D1; /* Texto secundario */
--color-ink-muted: #78716C; /* Texto terciario */
--color-ink-ghost: #57534E; /* Texto fantasma */
}
3. Tipografía — tres familias con roles definidos:
- Manrope para UI, labels, navegación — geométrica, contemporánea
- Source Serif 4 para headings editoriales — evoca imprenta, seriedad
- JetBrains Mono para código, datos, números — técnica, precisa
4. Layout — editorial, no genérico:
- Grid asimétrico:
3fr / 2fren hero,1fr / 2fren servicios - Secciones numeradas (01, 02, 03, 04) en lugar de íconos genéricos
- Sin tarjetas: contenido sobre fondo directo con bordes de sección sutiles
- Espaciado generoso: 96px entre secciones, 120px para breaks mayores
5. Sombras con propósito:
--shadow-ambient: 0 1px 3px 0 rgb(0 0 0 / 0.4); /* Profundidad sutil */
--shadow-structural: 0 10px 15px -3px rgb(0 0 0 / 0.6); /* Elevación media */
--shadow-depth: 0 25px 50px -12px rgb(0 0 0 / 0.8); /* Máxima profundidad */
6. Do's and Don'ts:
- ✅ Flechas ámbar (
→) como bullets en listas de features - ✅ Números gigantes en mono como elementos gráficos
- ✅ Labels mono uppercase con tracking generoso
- ✅ Acordeones numerados sin bordes de tarjeta
- ❌ Nunca íconos de Heroicons como decoración principal
- ❌ Nunca gradientes como fondo de sección
- ❌ Nunca más de 3 jerarquías tipográficas por sección
Capa 3 — Refinamiento: iteración con comandos
Con el sistema definido, el proceso fue quirúrgico. Cada sección siguió el mismo ciclo:
- Solicitar: "Reescribí el Hero con las reglas de DESIGN.md"
- Revisar: Evaluar el output contra las constraints
-
Refinar:
/polishpara detalles, comandos específicos para ajustes - Auditar: Chequeo de accesibilidad, contraste, responsive, tema oscuro/claro
Este ciclo se repitió para cada sección: Hero, Servicios, Showcase, FAQ, Contacto, Blog, Footer, Navbar.
Lo que cambió: antes y después
| Elemento | Antes | Ahora |
|---|---|---|
| Paleta | Cyan #06b6d4 + Slate #0f172a
|
Ámbar #F59E0B + Negro cálido #09090B
|
| Tipografía | Inter (la fuente del AI Slop) | Manrope + Source Serif 4 + JetBrains Mono |
| Hero | Centrado genérico | Split screen: copy left + terminal en vivo |
| CTA | Botón estático | Botón magnético con spring physics |
| Servicios | Cards simétricas con íconos | Layout 1fr/2fr numerado 01-04 con flechas ámbar |
| Showcase | Grid de cards con imágenes | Filas numeradas con métricas prominentes |
| FAQ | Acordeón con bordes de tarjeta | Acordeón editorial numerado sin bordes |
| Blog | Lista cronológica simple | Grid asimétrico 2fr/1fr + sidebar + TOC lateral |
| Tema | Solo modo oscuro | Dark/Light con transiciones suaves |
| Logo | Fijo | Cambia automáticamente con el tema |
| Colores | Valores crudos (#0f172a) |
Tokens semánticos (--color-base) |
Detalles que marcan la diferencia
Terminal en vivo en el Hero:
kubectl apply -k ./overlays/production/
namespace/production unchanged
deployment/gateway created
deployment/ia-worker created
ingress/gateway-lb created
▌ sistema en producción
No es decoración. Es una declaración de capacidades técnicas reales renderizada en JetBrains Mono sobre fondo oscuro.
CTA magnético con spring physics: El botón principal sigue el cursor con física de resorte (stiffness: 150, damping: 12). Una micro-interacción que comunica atención al detalle antes de que el usuario lea una sola palabra.
Números gigantes como elementos gráficos: En Servicios, en lugar de íconos genéricos, usamos 01, 02, 03, 04 en JetBrains Mono a 5rem, con opacidad reducida. Funcionan como anclas visuales y elementos de ritmo editorial.
Prosa del blog con barra de progreso: El layout del artículo cambió de una columna centrada a tres columnas: TOC lateral izquierdo, contenido central, sidebar derecho. Una barra de progreso sutil en el top indica la posición de lectura.
Transiciones de tema: El cambio dark/light no es instantáneo. Usa transition: background-color 250ms ease-out, color 250ms ease-out para un fundido suave que se siente deliberado.
Las skills que usamos
Frontend-Design Skill (Anthropic)
La capa base. Sin este skill, Claude Code revierte a Inter y púrpura en cuestión de minutos. Lo instalamos como requisito absoluto:
claude plugins install frontend-design@claude-code-plugin
DESIGN.md (custom)
Nuestro sistema de diseño completo en un archivo. Las 9 secciones cubriendo atmósfera, paleta, tipografía, layout, sombras, componentes, restricciones, responsive y guía para el agente.
Design Plugin
Para bloquear violaciones del sistema de diseño. Si Claude intenta usar un color crudo o Inter, el plugin lo rechaza automáticamente.
Lecciones aprendidas
1. Las skills son constraints, no sugerencias
Cuando le decís a un agente "hacelo más moderno", produce basura. Cuando le decís "nunca uses más de 3 colores por componente, nunca uses Inter, nunca uses gradientes fríos", produce diseño.
La diferencia entre un sitio con AI Slop y uno con personalidad no está en el modelo. Está en la precisión de las restricciones.
2. El orden de capas importa
Probamos instalar todas las skills juntas. El resultado fue inconsistente: el agente recibía instrucciones contradictorias de múltiples fuentes.
La arquitectura que funcionó: Fundación → Sistema → Refinamiento. Tres capas, en ese orden. Nunca dos skills compitiendo en la misma capa.
3. Los tokens semánticos son la clave
El mayor salto de calidad vino de una decisión simple: prohibir valores de color crudos. #F59E0B no existe en nuestro código. Existe var(--color-accent).
Esto significa que cambiar la paleta completa — por ejemplo, de ámbar a verde esmeralda — requiere editar exactamente 12 líneas en un solo archivo. El agente nunca toca valores crudos, solo referencias semánticas.
4. El diseño editorial vende más que el diseño de SaaS
Las empresas de tecnología convergen visualmente en el mismo lugar: tarjetas, íconos, gradientes, CTAs gigantes. Es el uniforme del SaaS.
Nuestro cambio a un layout editorial — asimétrico, numerado, con jerarquía tipográfica — nos diferencia instantáneamente. En un mar de sitios que se ven iguales, el que se ve diferente gana la atención.
5. Menos de 48 horas es posible
62 archivos modificados. 8,110 líneas agregadas. 1,617 líneas eliminadas. 30 commits. Todo en menos de dos días.
La velocidad no vino de trabajar más rápido. Vino de tener un sistema de diseño ejecutable que Claude Code podía aplicar consistentemente sin supervisión constante.
El resultado
Nuestro sitio ya no se ve como si un agente de IA lo hubiera diseñado. Se ve como si un estudio de diseño con criterio editorial lo hubiera hecho.
Pero fue un agente de IA. Solo que esta vez, le dimos las instrucciones correctas.
¿Querés hacer lo mismo con tu sitio?
El proceso es replicable:
- Leé el artículo original sobre Skills de Diseño para Agentes de IA
- Instalá Frontend-Design Skill como capa base
- Creá tu DESIGN.md con paleta, tipografía, layout y restricciones explícitas
- Dejá que Claude Code reescriba cada sección aplicando tu sistema
-
Iterá con
/polishhasta que cada detalle esté en su lugar
No necesitás un diseñador. Necesitás un archivo de diseño que tu agente pueda leer.
En Guayoyo Tech construimos sistemas de IA que transforman cómo operan las empresas. ¿Querés automatizar procesos, integrar IA en tu stack o reconstruir tu presencia digital? Conversemos sin compromiso.