Integración con IA
Descarga del skill unach-design-system e instrucciones para instalarlo en Claude Code y OpenCode.
Para que cualquier equipo —interno o externo— pueda aplicar el UNACH Design System en su flujo de desarrollo con IA, estos lineamientos se distribuyen además como un skill reutilizable.
El skill unach-design-system empaqueta los tokens de color y tipografía, las fuentes, los assets de marca, un UI kit de referencia y las reglas de diseño descritas en estos lineamientos. Una vez instalado, el asistente de IA puede invocarlo para generar interfaces y código alineados con la identidad institucional.
Descargar el skill
El ZIP contiene la carpeta unach-design-system/ con:
SKILL.md— definición e instrucciones del skill.README.md— fundamentos de marca, voz, color, tipografía y estados.colors_and_type.css— todos los design tokens (paleta, escalas, variables semánticas light/dark, tipografía, espaciado de 4 px, radios, sombras).fonts/— tipografías locales.assets/— logos institucionales.ui_kits/— UI kit de referencia (dashboard administrativo).preview/— fichas de especímenes visuales del sistema.
El paquete se regenera en cada build del sitio, por lo que la descarga siempre refleja la versión vigente del skill.
Tokens CSS expuestos
Las variables están disponibles en colors_and_type.css. Importá el archivo y usá siempre las variables semánticas — nunca códigos hex directos en los componentes.
Color
| Token | Significado |
|---|---|
--color-primary / -hover / -press | Azul institucional y sus estados |
--color-on-primary | Texto sobre primary |
--color-secondary | Azul medio |
--color-accent | Turquesa auxiliar |
--color-surface / --color-surface-2 | Tarjetas y paneles |
--color-background | Fondo de página |
--color-on-surface / -strong / -muted | Cuerpo, titulares y texto secundario |
--color-border / --color-divider | Bordes y líneas separadoras |
--color-error / -success / -warning / -info | Estados semánticos |
--color-focus-ring | Anillo de foco |
--color-overlay | Backdrop de modal |
--brand-adventist-blue / -azul-claro / -azul-marino | Azules del manual impreso (papelería, no UI) |
Las mismas variables semánticas se redefinen para dark mode, por lo que los componentes que las usan soportan modo oscuro sin cambios.
Tipografía, espaciado y geometría
| Token | Valores |
|---|---|
--font-display / --font-body / --font-mono | Prompt · Prompt → Inter → Roboto · NovaMono |
--fs-h1 … --fs-b5 | 40 · 34 · 28 · 24 · 20 · 16 · 14 · 12 · 10 · 8 |
--fw-light … --fw-bold | 300 · 400 · 500 · 600 · 700 |
--lh-tight … --lh-relaxed | 1.2 · 1.35 · 1.5 · 1.65 |
--measure-max | 75 ch |
--space-xs … --space-4xl | 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 |
--radius-xs … --radius-pill | 2 · 4 · 8 · 12 · 16 · ∞ |
--shadow-sm … --shadow-xl | 4 niveles + focus + inset |
--ease-standard | cubic-bezier(0.2, 0, 0, 1) |
--duration-fast/base/slow | 120 · 200 · 320 ms |
--container-max | 1440 px |
Instalar en Claude Code
Claude Code carga skills desde ~/.claude/skills/ (alcance de usuario) o desde .claude/skills/ dentro del proyecto (alcance del proyecto).
- Descargar y descomprimir el ZIP. Quedará una carpeta
unach-design-system/. - Copiarla a la ubicación deseada:
- Para todos tus proyectos:
~/.claude/skills/unach-design-system/ - Solo para un proyecto:
<proyecto>/.claude/skills/unach-design-system/
- Para todos tus proyectos:
- Verificar que existe
unach-design-system/SKILL.mden esa ruta. - En una sesión de Claude Code, invocar el skill con
/unach-design-system, o simplemente pedir trabajo de diseño/UI: el skill se activa por su descripción.
Instalar en OpenCode
OpenCode carga skills de proyecto desde .opencode/skills/<nombre>/SKILL.md.
- Descargar y descomprimir el ZIP.
- Copiar la carpeta a
<proyecto>/.opencode/skills/unach-design-system/. - Verificar que existe
.opencode/skills/unach-design-system/SKILL.md. - Iniciar OpenCode en el proyecto e invocar el skill, o solicitar trabajo de diseño para que se active automáticamente.
Cómo usarlo
Una vez instalado, pedir al asistente que genere interfaces o componentes aplicando el skill. Ejemplos:
- “Crea un formulario de login siguiendo el UNACH Design System.”
- “Genera una tarjeta de proyecto usando los tokens institucionales.”
- “Revisa esta pantalla y corrige lo que no cumpla los lineamientos de diseño UNACH.”
El asistente leerá SKILL.md y README.md, aplicará los tokens de colors_and_type.css y respetará las reglas de color, tipografía, espaciado, iconografía y estados descritas en estos lineamientos.
El skill aplica los lineamientos; no los reemplaza. Ante cualquier discrepancia, prevalece este documento y el Manual de Uso institucional UNACH 2020.