# Design system con IA — Ejemplo educativo + plantilla lista para usar

**Por Julio Talledo · juliotalledo.ai · Actualizado: julio 2026**

Este archivo acompaña al artículo "Qué es un design system con IA y cómo crear el tuyo con Claude" (juliotalledo.ai/blog/design-system-con-inteligencia-artificial). Contiene tres cosas:

1. Un **ejemplo educativo** de cómo queda un design system tokenizado (estructura inspirada en el caso Iberdrola que uso en mis clases; los valores son ilustrativos, no los oficiales de la marca).
2. La **plantilla vacía** para armar el de tu marca.
3. Los **tres prompts** que uso para crearlo, convertirlo en skill y mantenerlo.

Ojo: no necesitas llenar esto a mano. La IA lo genera por ti. Este archivo es para que sepas cómo se ve un buen resultado y puedas exigirlo.

---

## PARTE 1 — Ejemplo educativo (estructura del caso de clase)

### 1.1 Identidad y estrategia

```yaml
marca: "[Empresa de energía]"        # caso educativo inspirado en Iberdrola
proposito: "Liderar la transición energética con energía limpia"
valores: ["sostenibilidad", "innovación", "cercanía"]
pilares_de_voz: ["fácil", "inteligente", "flexible", "optimista"]
mercados: "presencia multinacional (10 países)"
```

### 1.2 Tokens visuales (JSON)

```json
{
  "color": {
    "primario":   { "value": "#5C9E31", "uso": "identidad, CTAs — ilustrativo" },
    "secundario": { "value": "#0A3A5C", "uso": "titulares, fondos — ilustrativo" },
    "acento":     { "value": "#F2A900", "uso": "detalles, energía — ilustrativo" },
    "neutro-claro": { "value": "#F5F5F2", "uso": "fondos de documento" },
    "neutro-oscuro": { "value": "#1A1A1A", "uso": "texto" }
  },
  "tipografia": {
    "display": { "familia": "[Tipografía corporativa]", "pesos": [600, 700], "uso": "titulares", "alternativa_libre": "[definir: la corporativa es de pago]" },
    "texto":   { "familia": "[Tipografía de texto]", "pesos": [400, 500], "uso": "párrafos, tablas" }
  },
  "logotipo": {
    "principal": "logos/logo-principal.svg",
    "blanco_y_negro": "logos/logo-bn.svg",
    "isotipo": "logos/isotipo.svg",
    "regla_critica": "El isotipo NO puede ir separado del nombre de la marca"
  },
  "espaciado": { "base": "8px", "escala": [8, 16, 24, 40, 64] },
  "componentes": {
    "boton_primario": { "fondo": "color.primario", "texto": "#FFFFFF", "radio": "6px" },
    "card": { "fondo": "#FFFFFF", "borde": "1px solid #E5E5E0", "radio": "12px" }
  },
  "fotografia": {
    "banco": "05-fotografias/",
    "estilo": "fotografía real de instalaciones (paneles solares, eólica marina)",
    "regla": "no usar imágenes generadas por IA para representar instalaciones reales"
  },
  "accesibilidad": { "contraste_minimo": "AA", "texto_sobre_primario": "#FFFFFF" }
}
```

### 1.3 Ejemplos de voz

```yaml
si_habla_asi:
  - "Energía limpia para las próximas generaciones."
  - "Datos claros, decisiones simples."
no_habla_asi:
  - "Somos líderes disruptivos del ecosistema energético."   # relleno corporativo
  - "¡¡Aprovecha YA esta MEGA oferta!!"                      # tono de remate
gobernanza:
  aprueba_piezas: "Dirección de Marca"
  actualizacion: "trimestral"
```

---

## PARTE 2 — Plantilla para TU marca (borra el ejemplo y llena esto)

```yaml
# ── 1. ESTRATEGIA (opcional, da contexto) ─────────────
marca: ""
proposito: ""
valores: []

# ── 2. VERBAL ─────────────────────────────────────────
tono_de_voz: ""            # ej. "directo, cálido, sin tecnicismos"
claims: []                 # frases oficiales de la marca
como_se_escribe_el_nombre: ""   # ej. "InverPro (así, con P mayúscula)"

# ── 3. VISUAL (el corazón) ────────────────────────────
colores:                   # si no tienes los hex, la IA los extrae de tus piezas
  primario: ""
  secundario: ""
  acento: ""
tipografias:
  display: ""              # ¿instalada en tu computadora? ¿es de pago?
  texto: ""
logotipos: []              # rutas a SVG/PNG en todas sus versiones

# ── 4. ASSETS ─────────────────────────────────────────
carpeta_fotografia: ""     # fotos REALES de tu negocio
iconografia: ""

# ── 5. EJEMPLOS ───────────────────────────────────────
piezas_aprobadas: []       # 5-10 diseños ya publicados que te gustan
si_habla_asi: []
no_habla_asi: []

# ── 6. GOBERNANZA (opcional) ──────────────────────────
quien_aprueba: ""
frecuencia_actualizacion: "trimestral"
```

---

## PARTE 3 — Los tres prompts

**Prompt 1 — Tokenizar tu marca (Claude Code, con acceso a tu carpeta):**

```
Actúa como director de marca y arquitecto de sistemas de diseño con amplia
experiencia. Convierte la documentación de [tu marca] en un design system
estructurado. Entrégame: un resumen, el archivo JSON del sistema, una tabla
de tokens, y una lista de pendientes y preguntas. No des nada por supuesto:
hazme todas las preguntas que necesites para orientarte.
```

**Prompt 2 — Convertirlo en skill de marca:**

```
Actúa como ingeniero de IA experto en crear skills. Con el design system
como única fuente de verdad, crea la skill de la marca [X] para que toda
pieza (posts, reportes, presentaciones, landings) salga 100% alineada a la
identidad. Sé riguroso, usa cadena de pensamiento y haz un control de
calidad de tu propio trabajo antes de entregármelo.
```

**Prompt 3 — Actualizarlo (cada vez que aprendas una regla nueva):**

```
Actualiza la skill de [marca] y agrega la siguiente condición: [nueva regla,
ej. "el isotipo no puede ir separado del nombre"]. No reemplaces las reglas
anteriores: súmale esta.
```

---

*¿Quieres que armemos el design system de tu organización en vivo, con tu equipo? Escríbeme: juliotalledo.ai/conferencias*

*Julio Talledo — Especialista en inteligencia artificial, marketing y GEO · Lima, Perú*