Cómo Reconstruimos la Identidad Visual de Guayoyo Tech Usando Skills de Diseño para Agentes de IA

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:

1. Definir un sistema de diseño completo en un archivo ejecutable
2. Darle ese archivo a Claude Code
3. Pedirle que reescribiera cada sección del sitio
4. 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 "hazlo más moderno" o "mejora 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 / 2fr en hero, 1fr / 2fr en 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:

1. Solicitar: "Reescribe el Hero con las reglas de DESIGN.md"
2. Revisar: Evaluar el output contra las constraints
3. Refinar: /polish para detalles, comandos específicos para ajustes
4. 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

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 dices a un agente "hazlo más moderno", produce basura. Cuando le dices "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.

¿Quieres hacer lo mismo con tu sitio?

El proceso es replicable:

1. Lee el artículo original sobre Skills de Diseño para Agentes de IA
2. Instala Frontend-Design Skill como capa base
3. Crea tu DESIGN.md con paleta, tipografía, layout y restricciones explícitas
4. Deja que Claude Code reescriba cada sección aplicando tu sistema
5. Itera con /polish hasta que cada detalle esté en su lugar

No necesitas un diseñador. Necesitas 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.