@apiux-ds/design-system

v2.0.0

Published

2 months ago

Sistema de diseño Apiux con Web Components - 8 componentes optimizados para agentes de IA

0High
0Medium
0Low

dkangme2

design-system web-components apiux ui-components ai-friendly custom-elements shadow-dom typescript-ready

Apiux Design System

Web Components optimizados para agentes de IA

Sistema de diseño basado en el Brandbook Apiux 2024. Componentes encapsulados con Shadow DOM, sin dependencias externas.

🚀 Instalación

npm install @apiux/design-system

📦 Uso Básico

Opción 1: Importar todo

import '@apiux/design-system';

Opción 2: Importar componentes específicos

import '@apiux/design-system/button';

HTML básico

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@apiux/design-system/tokens/tokens.css">
  <script type="module" src="node_modules/@apiux/design-system/src/index.js"></script>
</head>
<body>
  <apiux-button variant="primary">Click me</apiux-button>
</body>
</html>

🎨 Design Tokens

Colores Principales

| Token | Valor | Uso | |-------|-------|-----| | --apiux-color-yellow | #FFCE00 | Acción principal, marca | | --apiux-color-black | #111111 | Texto, acción secundaria | | --apiux-color-white | #FFFFFF | Fondos, contraste | | --apiux-color-purple | #4728BD | Acento, gradientes |

Tipografía

--apiux-font-family: 'Montserrat', sans-serif;
--apiux-font-weight-regular: 400;
--apiux-font-weight-semibold: 600;
--apiux-font-weight-bold: 700;

Espaciado

--apiux-space-2: 0.5rem;   /* 8px */
--apiux-space-4: 1rem;     /* 16px */
--apiux-space-6: 1.5rem;   /* 24px */
--apiux-space-8: 2rem;     /* 32px */

🧩 Componentes

apiux-button

Botón con 4 variantes y 3 tamaños.

Atributos

| Atributo | Tipo | Default | Opciones | |----------|------|---------|----------| | variant | string | "primary" | "primary" | "secondary" | "outline" | "ghost" | | size | string | "md" | "sm" | "md" | "lg" | | disabled | boolean | false | - | | full-width | boolean | false | - |

Ejemplos

<!-- Primary button (amarillo #FFCE00) -->
<apiux-button variant="primary">
  Acción Principal
</apiux-button>

<!-- Secondary button (negro #111111) -->
<apiux-button variant="secondary" size="lg">
  Acción Secundaria
</apiux-button>

<!-- Outline button -->
<apiux-button variant="outline" size="sm">
  Cancelar
</apiux-button>

<!-- Ghost button -->
<apiux-button variant="ghost">
  Volver
</apiux-button>

<!-- Disabled -->
<apiux-button disabled>
  No disponible
</apiux-button>

<!-- Full width -->
<apiux-button full-width>
  Enviar Formulario
</apiux-button>

🤖 Guía para Agentes de IA

Selección de Variantes

SITUACIÓN → VARIANTE
─────────────────────────────────────
Acción principal/CTA → variant="primary"
Acción secundaria → variant="secondary"  
Cancelar/Volver → variant="outline"
Navegación sutil → variant="ghost"
No disponible → disabled

Patrones Comunes

Formulario

<form>
  <apiux-button variant="primary" full-width>
    Guardar
  </apiux-button>
  <apiux-button variant="outline" full-width>
    Cancelar
  </apiux-button>
</form>

Grupo de acciones

<div style="display: flex; gap: var(--apiux-space-4);">
  <apiux-button variant="primary">Confirmar</apiux-button>
  <apiux-button variant="secondary">Editar</apiux-button>
  <apiux-button variant="outline">Cancelar</apiux-button>
</div>

Hero section

<section>
  <h1>Título Principal</h1>
  <apiux-button variant="primary" size="lg">
    Comenzar Ahora
  </apiux-button>
</section>

Reglas de Composición

Un solo primary por sección: Máximo un botón variant="primary" visible simultáneamente
Jerarquía visual: Primary > Secondary > Outline > Ghost
Tamaños consistentes: En un grupo, usa el mismo size
Full-width en mobile: Usa full-width en viewports < 768px

Accesibilidad

✅ Focus visible automático (outline amarillo)
✅ Estados hover/active
✅ Atributo disabled nativo
✅ Slot content se usa como label accesible

📚 Documentación Completa

La documentación completa en formato JSON está en:

import metadata from '@apiux/design-system/docs';
console.log(metadata.components['apiux-button']);

🎯 Brandbook

Basado en Brandbook Apiux 2024:

Propósito: "Impact the future with talent and technology"
Valores: We Care, We Create, We are Owners
Personalidad: Inteligentes, Cercanos, Líderes, Apasionados

🔧 Desarrollo

# Servidor local
npm run dev

# Ver ejemplos
npm run docs

📄 Estructura del Proyecto

@apiux/design-system/
├── src/
│   ├── tokens/
│   │   └── tokens.css          # Design tokens
│   ├── components/
│   │   └── button.js           # Web Component
│   └── index.js                # Entry point
├── docs/
│   └── components.json         # Metadata para AI
├── examples/
│   └── index.html              # Demo interactivo
└── package.json

🤝 Contribuir

Fork el repositorio
Crea una rama: git checkout -b feature/nuevo-componente
Commit: git commit -m 'Add: nuevo componente'
Push: git push origin feature/nuevo-componente
Pull Request

📝 Licencia

MIT © Apiux

🆘 Soporte

Email: [email protected]
Issues: GitHub Issues
Docs: Ver ejemplos

Para Agentes de IA: Este paquete está diseñado para ser consumido por LLMs. La estructura JSON en /docs/components.json contiene toda la metadata necesaria para generar código correcto.