Estándar y CLI para que los frontends que construyen los agentes de IA no reinventen tokens en cada pantalla
CLI en npm que inspecciona el repositorio, resuelve un contrato de diseño por capas (marca, navegación, tablas, formularios, marketing) y genera tokens, adaptadores para agentes y validación determinista.
Orquestación de diseño para frontends generados por agentes IA
Design Frontier resuelve un problema silencioso de los productos construidos con agentes IA: cada pantalla nueva inventa su propio espaciado, densidad, componentes y navegación, y la deuda visual se acumula sin que nadie la vea hasta que es tarde. La CLI inspecciona el repo, cataloga tokens y componentes existentes, resuelve un arquetipo de interfaz y referencias por capa, y genera un modelo de diseño canónico en `.design-frontier/` con tokens.css, tokens.ts, tailwind.preset.mjs y adaptadores para Claude, Codex, Gemini, Cursor y Copilot. También valida el frontend contra el modelo (lint de colores raw, diff de artefactos editados fuera). Publicada en npm como `design-frontier` (alias `df`), Node.js 20+. Licencia PolyForm Noncommercial 1.0.0.
La CLI catálogo v1.0 incluye 20 referencias revisadas y 12 arquetipos de interfaz. Cada referencia tiene puntuación de idoneidad, capas soportadas, contextos no apropiados y evidencia primaria fechada.
Antes y después del producto: cómo se hacía la operativa hasta ahora y qué cambia cuando entra este sistema.
Cuando los agentes escriben frontend, cada nueva ruta inventa su propio espaciado, densidad, tokens de color y patrones de navegación. La inconsistencia acumulada es invisible en el commit individual y evidente cuando ya hay 40 pantallas incoherentes que rehacer.
Un contrato de diseño versionado en `.design-frontier/project.yml` que combina inspección del repo, referencias por capa (application_shell, navigation, tables, forms, marketing_site, etc.), marca, accesibilidad y decisiones abiertas. De ese modelo se generan tokens, documentos DESIGN.md legibles, adaptadores por agente y reglas de validación.
Módulos que definen el producto y explican por qué encaja en su sector concreto.
inspect (detecta framework, tokens CSS, componentes), plan (resuelve arquetipo y referencias sin escribir), init/generate (crea el modelo y artefactos), validate (checa el modelo completo), lint (colores y dimensiones fuera del token set).
Cada referencia solo influye en la capa donde se selecciona. Combinaciones tipo Metronic para shell operativo, Linear para navegación, Airtable para tablas, GOV.UK para formularios, Apple para marketing sin transferir spacing de landing a la app.
Genera instrucciones específicas para Claude Code, Codex, Gemini, Cursor y Copilot desde el mismo modelo canónico. Cada agente recibe el contrato de diseño en el formato que entiende.
Salida en tokens.css (variables CSS), tokens.ts (constantes TypeScript) y tailwind.preset.mjs. Un único origen para el sistema de diseño con hashes SHA-256 en el manifest para detectar edición manual.
El stack se elige antes de escribir la primera línea de código. Estos son los criterios.
Elegido para que otro equipo pueda tomar el testigo sin reescribir el sistema entero.
Stack diseñado para escalar sin que la factura mensual crezca en la misma proporción.
Repositorio y bases de datos en cuentas del cliente, con capacidad de exportar cuando se quiera.
PolyForm Noncommercial 1.0.0. Gratis para uso no comercial (proyectos personales, investigación, docencia). El uso comercial requiere una licencia separada; los términos están en COMMERCIAL-LICENSE.md del repositorio.
No. El comando `inspect` corre en local y no envía nada. Los adaptadores por agente generan ficheros en el propio repo para que el agente los lea en su contexto habitual.
Sí. La inspección detecta tokens CSS y componentes existentes y los incorpora al modelo. Design Frontier no reemplaza el sistema de diseño, formaliza el contrato para que los agentes no lo violen al generar código nuevo.
Sí. Cada uno de estos productos empezó como una consultoría a medida y evolucionó a SaaS. Si tu empresa tiene un problema parecido en tu sector, se puede diseñar una solución específica reutilizando arquitectura y patrones. Reserva 30 minutos para hablarlo.
En proyectos a medida, sí: el repositorio, la base de datos y las cuentas quedan siempre a nombre del cliente. En las versiones SaaS multitenant se firma DPA conforme al RGPD, cada tenant tiene sus datos aislados y se puede exportar en cualquier momento.
Repositorio abierto que documenta cómo formular instrucciones a un LLM para que el encargo sea verificable, organizado por dominio con buscador integrado.
Estándar TypeScript que restringe alcance, herramientas permitidas y presupuesto por tarea mediante código en vez de sugerirlo en prompts.
Extensión Chrome Manifest V3 que transforma Gmail en gestor de tareas en equipo: conversión email-tarea, sincronización y almacenamiento nativo en Gmail.
Reserva 30 minutos y hablamos del sector, arquitectura, presupuesto orientativo y siguientes pasos. Sin coste, sin presión.
Design Frontier · Herramientas para IA · Ingeniería de frontend · Publicado.
