← Volver al trabajo

Developer Portal — design system + DS dark-first, entregado como skill consumible por agentes

Dos design systems entrelazados para una plataforma de developers gov-facing: /te-skin, skill slash-command de 17 componentes que los agentes invocan para devolver HTML + CSS + tokens W3C listos; y TE Black, DS enterprise dark-first donde cada color semantic carga su auditoría WCAG inline. Empaquetado, versionado, listo para agentes.

• /te-skin — 17 componentes, versionado 2.0.0, metadata HTML + CSS + JSON por componente
• TE Black — DS dark-first con ratio WCAG guardado inline en cada token; los valores rechazados quedan como audit trail
• CSS en 3 capas (tokens / components / patterns), shadcn alias para drop-in en React, backgrounds Houdini + canvas mesh-gradient
• Design DNA codificado: hard constraints, soft guidelines, anti-patterns con nombre, testing checklist

Contexto

Booz Allen Hamilton · Developer Portal — plataforma government-facing donde dos design systems corren en paralelo: /te-skin (la librería de componentes) y TE Black (la paleta dark-first). La revisión de diseño era un cuello de botella de dos semanas y los componentes existentes se lavaban bajo iluminación de misión de 12 horas.

Problema

Los diseñadores revisaban los mismos desajustes WCAG + tokens en cada PR. El DS existía en Figma — los agentes no lo alcanzaban. Y dark era tratado como un tema, pese a que los operadores de la plataforma vivían ahí.

Aproximación

Empaqueté el DS como slash-command skill para Claude Code (/te-skin). Tokens + árboles de decisión + 17 reglas recursivas invocables inline. En paralelo, autoré TE Black: paleta dark-primaria con auditoría WCAG por token escrita en la definición, no en un lint downstream.

Ship

Shippeado en cuatro semanas. Workflow de dos agentes: uno propone UI, otro corre revisión recursiva. Cinco rondas subieron el score 78.4 → 95.6. Los tokens exponen ratios wcag.normal y wcag.large para cada par ink-on-surface; librería migrada en la misma PR que los tokens.

Resultado

Los ciclos de revisión cayeron de 2 semanas → 36 horas. Cada par de contraste probadamente ≥ 4.5:1, y los operadores dejaron de reportar texto apagado en los retros semanales. Jennifer Sheppard, Product Lead, lo llamó \"work I wanted to keep reusing.\"

Lo cambiaría

Shippearía primero un scaffold público del skill y publicaría la trazabilidad como gate de CI. Los tokens específicos del cliente debieron ser una capa, no la base; y una ratio WCAG fallada debería romper el build, no confiar en la convención.

Craft floor

Trazabilidad WCAG guardada por token. Dark-mode primario. Tokens en CSS + JSON + librería Figma sincronizados. Skill idempotente bajo re-invocación. Luminancia APCA-adjacent verificada. Sin edits manuales en el output generado.

Siguiente caso · Life Update Mobile — API Gemini en runtime →