Una skill de generación visual carga un sistema de diseño integrado: tokens de color, escala tipográfica y una biblioteca de componentes. Estos tres pilares se combinan para producir cada bloque de la página. El diagrama muestra cómo las partes del sistema de diseño convergen en el resultado.
El sistema de diseño integrado — ilustrativo. Los efectos y JS (cian) se incorporan durante el montaje.
Contenido detallado
🎨 La paleta como variables CSS
La skill no dice "usa colores bonitos". Incorpora un bloque :root con variables CSS con nombre: fondo, superficies transparentes, bordes y cinco acentos con significado: azul (primario), naranja (regreso/aviso), verde (confirmado), lavanda (conexión) y dorado (evento/VIP). Cada acento tiene un par "glow".
Fragmento real del SKILL.md
:root {
--bg: #06060a; /* deep space black */
--surface: rgba(255,255,255,0.05);
--border: rgba(255,255,255,0.07);
--accent: #5ad1ff; /* sky blue — primary */
--orange: #ff7a59; /* returns / warnings */
--green: #7dffaa; /* confirmations / go */
--purple: #c084fc; /* transit / layovers */
--gold: #fbbf24; /* events / VIP */
--radius: 16px;
}
🎯 Por qué usar tokens y no colores sueltos
- •Identidad: toda salida tiene el mismo aspecto, sin que Claude reinvente la paleta.
- •Significado: el color transmite información (verde = confirmado), no es solo decoración.
- •Tema: cambiar de claro a oscuro solo requiere reescribir las variables.
💡 Consejo práctico
En tu skill, dales nombres a las variables semánticos (--accent, --green), no nombres de colores (--blue1). Un nombre semántico sobrevive a un cambio de paleta; un nombre de color se vuelve mentira en la primera revisión.
🔤 Tipografía y escala
La skill define una escala tipográfica explícita: Inter para texto (pesos 300–900), una fuente mono para horarios y códigos, y tamaños por rol — hero responsivo vía clamp(), encabezados de sección, cuerpo y etiquetas en mayúsculas con letter-spacing.
✓ Buenas elecciones de la skill
- ✓Mono para datos: los horarios y los códigos se alinean y son legibles.
- ✓clamp() en el hero: escala fluida sin media query.
- ✓Etiquetas en mayúsculas + espaciado entre letras: jerarquía clara para las etiquetas.
✗ Qué evita esto
- ✗Tamaños aleatorios en cada generación.
- ✗Horarios desalineados en una fuente proporcional.
- ✗Hero que se desborda en mobile o desaparece en desktop.
La escala, de un vistazo
💡 Consejo práctico
Reserva la fuente mono para datos que se alinean — horas, valores, códigos. Es un truco barato que hace que las tarjetas de vuelo y las tablas de presupuesto parezcan un producto real.
🧱 La Component Library (12 bloques)
Esta es la sección más extensa del sistema de diseño: doce componentes, cada uno descrito con su anatomía — lo que contiene, cómo se comporta al pasar el cursor y cuándo se expande. Hero, banner de evento, tarjetas de vuelos, selector de día + agenda, hotel, cuidado de mascotas, mapa de ruta SVG, stats bar, presupuesto, listas de verificación, pie de navegación y theme toggle.
Tarjetas de vuelo expandibles
Componente n.º 3
Encabezado con logo, número + ruta y una etiqueta de color (Leg 1/2/3, Transit, Return). Al hacer clic, el cuerpo se expande y muestra horarios, terminales, duración, aeronave, clase y código de reserva.
Selector de día + agenda
Componente n.º 4
Botones de día en desplazamiento horizontal; el activo tiene un borde verde. Al hacer clic, carga la cronología de ese día en una tarjeta debajo, con la hora en mono y una descripción.
Listas de verificación interactivas
Componente n.º 10
Agrupadas por categoría (previo al vuelo, mascota, día de regreso). Cada elemento se alterna al hacer clic, con barra de progreso y contador. El estado persiste mediante localStorage.
📊 Por qué describir la anatomía
- Cada componente se convierte en una pieza lista que Claude arma, en lugar de improvisar el diseño desde cero.
- La anatomía define estados (hover, expandido, activo): sin esto, la interactividad desaparece.
- La reutilización garantiza que todas las tarjetas de la página tengan el mismo comportamiento.
💡 Consejo práctico
Describe cada componente como "contiene X, al pasar el cursor hace Y, al hacer clic hace Z". Este formato breve le da a Claude todo lo que necesita para recrear el comportamiento sin que pegues todo el CSS.
🏷️ Sistema de etiquetas por color
La skill incluye una tabla que mapea significado → color. Las etiquetas son píldoras en mayúsculas, con un fondo translúcido del color correspondiente. Es el principio «codificar todo por colores» convertido en una regla concreta: lees el estado de un vuelo solo por el color, sin leer el texto.
El mapa de colores de la skill
La anatomía de una etiqueta
.tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
padding: 3px 8px;
border-radius: 999px; /* pílula */
}
💡 Consejo práctico
Fija el significado de los colores en el SKILL.md, no en tu cabeza. Cuando el mapa está escrito, todas las ejecuciones usan los mismos colores y la página se puede recorrer de un vistazo.
✨ Visual Effects y el ejemplo de salida
Los efectos visuales son lo que saca a la página de la zona de "documento": orbes (desenfoques radiales fijos en el fondo), glassmorphism (backdrop-filter blur + borde interior), brillo en los banners, hover-lift en las tarjetas y el contrail animado del avión. Abajo, una maqueta del resultado: recreación ilustrativa, no una captura de pantalla real.
Tokio 2026 ✈️
Recreación ilustrativa del resultado — no es una captura de pantalla real. Observa las etiquetas por color y el glassmorphism.
📊 Lo que ofrece cada efecto
- Orbs: profundidad y atmósfera de fondo, sin competir con el contenido.
- Glassmorphism: las tarjetas parecen flotar: el estilo de una app moderna.
- Elevación al pasar el cursor: feedback táctil; sientes que la página responde.
- Contrail: el detalle lúdico que le da personalidad a la marca.
💡 Consejo práctico
Los efectos son un condimento, no el plato principal. La skill describe unos pocos, bien definidos. Enumera solo los efectos que refuerzan la marca: una página llena de animaciones cansa y parece poco profesional.
⚙️ JavaScript y persistencia del estado
La última pieza del sistema de diseño son los patrones de JavaScript. Hacen que la página pase de estática a dinámica: cambio de día por fecha mediante data-attribute, acordeón de vuelos con transición de max-height, listas de verificación que se guardan en localStorage, selector de tema persistente y barras de progreso calculadas automáticamente.
El patrón de persistencia (esencia)
// item da checklist salva estado por viagem
function toggle(item, tripKey) {
item.classList.toggle('done');
const done = [...document.querySelectorAll('.done')]
.map(el => el.dataset.id);
localStorage.setItem(tripKey, JSON.stringify(done));
updateProgress(); // recalcula a barra
}
// ao abrir: restaura o que estava marcado
const saved = JSON.parse(localStorage.getItem(tripKey) || '[]');
✓ Patrones que valen oro
- ✓localStorage con una clave por viaje: varias páginas no se pisan entre sí.
- ✓Acordeón por max-height: transición fluida sin JS pesado.
- ✓Progreso automático: contado según los elementos marcados, no fijo.
✗ Trampas
- ✗Clave genérica de localStorage que genera conflictos entre viajes.
- ✗Olvidar restaurar el estado al abrir la página.
- ✗Depender de un framework para algo que vanilla resuelve.
💡 Consejo práctico
Persistir el estado es lo que hace que el usuario volver a la página. Una checklist que olvida lo que se marcó es inútil. Siempre que tu skill genere algo interactivo, describe cómo se guarda y restaura el estado.
Ejercicios prácticos
1. Extrae el sistema de diseño
Toma la paleta de una skill (o de una app que te guste) y escribe el bloque :root con nombres semánticos. Enumera 5 acentos y qué significa cada uno.
2. Documenta un componente
Elige un componente de tu futura skill y descríbelo en el formato "contiene X · al pasar el cursor Y · al hacer clic Z". Incluye los estados (activo, expandido, marcado).
3. Crea un SKILL.md ejecutable con sistema de diseño
Guarda como ~/.claude/skills/expense-report/SKILL.md, reinicia Claude Code y escribe /expense. La skill guía la configuración y genera un HTML con un sistema de diseño integrado y el estado persistido.
---
name: expense-report
description: Generates a self-contained HTML expense
report with a built-in design system and saved
state. Trigger on "/expense", "expense report",
"log my expenses", "trip costs". Asks for the
period, currency and categories BEFORE generating.
---
# Expense Report
## What This Skill Does
Generates a single self-contained HTML expense
report: a stats bar (total, count, avg), category
cards, an itemised table with mono-aligned values,
and a checklist of receipts that saves state. Looks
like an app, not a document.
## Setup Flow — CRITICAL
1. What period and currency?
2. Which categories? (travel, food, lodging, other)
3. Offer to read receipts from email/drive.
4. Confirm a summary, THEN generate.
## Design System
:root tokens — --bg, --surface, --accent (blue),
--green (paid), --orange (pending), --gold (flagged).
Inter for text, mono for amounts. Tags are uppercase
pills, colour-coded by status.
## Output Format
One HTML file. CSS in <style>, JS in <script>.
localStorage for the receipt checklist, keyed per
report. No external deps except Google Fonts.
Save as expense-{period}.html.
## Key Principles
1. Colour-code by payment status.
2. Mono-align all amounts.
3. Interactive > static (save receipt state).
4. One file, zero dependencies.
🎨 Resumen del módulo
¡Completaste la Ruta 2! Siguiente paso:
Ruta 3 — Skills de Frontend & Generación: correcciones en vivo en el navegador y un embudo completo en un prompt.