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.
Before and after the product: how the operation worked before and what changes when this system is in place.
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.
Modules that define the product and explain why it fits its concrete sector.
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.
The stack is picked before the first line of code. These are the criteria.
Chosen so another team can take over without rewriting the whole system.
Stack designed to scale without the monthly bill growing at the same rate.
Repository and databases in client accounts, with the ability to export any time.
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.
Book 30 minutes and we can go over sector, architecture, ballpark budget and next steps. No cost, no pressure.
Design Frontier · Herramientas para IA · Ingeniería de frontend · Publicado.
