Introducción

Konfront UI es el sistema de diseño de Konfront sobre shadcn/ui. Una sola base de componentes, y el tema de cada cliente encima, sin tocar el código.

InstalarCrear un tema

Tres capas

Separamos lo que nunca cambia de lo que sí puede cambiar. Así cada proyecto se ve como su cliente, pero se comporta como Konfront.

  1. Capa 01

    Base Konfront

    Componentes, anatomía, escala de espacio y reglas de accesibilidad. Es la misma para todos los proyectos y no cambia por cliente.

  2. Capa 02

    Tema por cliente

    Solo tokens: colores de marca, fuentes, radio, estilo y librería de iconos. El código de los componentes no se toca.

  3. Capa 03

    Exportaciones

    Cada tema sale listo para desarrollo (registro shadcn y CSS), para diseño (variables de Figma) y para IA (Markdown y contexto).

Principios

Código abierto, vía registro
Instalas los componentes en tu proyecto con el CLI de shadcn. El código es tuyo: lo lees, lo entiendes y lo extiendes sin cajas negras.
Curado, no configurable
Cada opción existe porque una decisión de diseño la respalda. Preferimos pocas opciones bien pensadas a un panel con cien perillas.
Accesibilidad AA es obligatoria
Ningún tema se publica si un par de color no alcanza el contraste mínimo. Si un color de marca no cumple para un uso, restringimos el uso, no el color.

Empieza según tu rol

Diseño

Empieza por los fundamentos: color, tipografía, forma y voz. Ahí están los tokens y las reglas que comparten código y Figma.

Desarrollo

Configura el registro en tu proyecto de Next.js, instala los componentes que necesites y aplica el tema de tu cliente.

IA

Conecta tu agente al sistema con llms.txt, páginas en Markdown y el servidor MCP de shadcn, y deja las reglas en AGENTS.md.

Estado del proyecto

Estamos en la versión 0.1. Esto es lo que ya puedes usar y lo que viene.

  • Componentes tematizados66 componentes de shadcn con el lenguaje Konfront
    Disponible
  • Studio para crear temasConstructor de temas por cliente en /crear
    Disponible
  • Patrones KonfrontAppShell, fila de paso, stepper, Gantt de hitos, estatus semanal y vista cliente
    Disponible
  • Registro publicadoUn namespace por cliente en /r, con su estilo e iconos ya aplicados
    Disponible
  • Biblioteca de FigmaComponentes y variables que reflejan el código
    Pendiente