design-tokens

Una colección de análisis de archivos DESIGN.md de sistemas de diseño de marcas populares. Coloca uno en tu proyecto y permite que los agentes de programación generen una interfaz de usuario coincidente.

🐼 Framework CSS-in-JS universal y seguro contra tipos para sistemas de diseño ⚡️

Construye aplicaciones de React coherentes y personalizables basadas en principios de diseño restrictivos

Un sistema de compilación para crear estilos multiplataforma.

Extrae el sistema de diseño completo de cualquier sitio web con un solo comando. Tokens DTCG, semántico+primitivo+compuesto, servidor MCP para Claude Code/Cursor/Windsurf, emisores multiplataforma (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, variables de Figma, shadcn/ui, auditoría de salud CSS, corrección WCAG, extensión de Chrome. MIT, Playwright, Node 20+.

Extrae el sistema de diseño de cualquier sitio web en tokens en segundos: logotipo, colores, tipografía, bordes y más. Un solo comando.

180 degradados gratuitos de CSS3, Figma, Sketch y PSD, además de un conjunto de datos JSON para herramientas de diseño, generadores y agentes de IA.

Este es el repositorio oficial de DTCG para el sitio y la especificación de design tokens.

Convierte interfaces de usuario de referencia (imágenes, capturas de pantalla, URL) en ADN de diseño cuantificado en formato JSON (tokens, estilo cualitativo, efectos visuales) y luego genera la interfaz de usuario correspondiente a partir de su contenido.

Repositorio oficial del plugin 'Tokens Studio for Figma' (Figma Tokens)

Una lista de recursos sobre todo lo relacionado con Design Tokens

🎨 Plugin de Figma para exportar tokens de diseño a JSON en un formato compatible con Amazon Style Dictionary.

Motor de método de diseño de código abierto para Claude Code, Codex y Cursor. Juicio de diseño fijo, gramáticas múltiples, compilación de referencias, paletas semánticas y flujos de trabajo de Studio para UI verificada, interacción, trabajos de imagen/video, carruseles, presentaciones y documentos. 22 habilidades · MIT.

Convierte a Claude en un arquitecto de diseño senior: tokens de diseño DTCG, 42 componentes, accesibilidad WCAG 2.2, código para cualquier framework, 138 sistemas de diseño y habilidades ejecutables.

Una lista curada de marcadores, recursos y artículos sobre sistemas de diseño enfocados en desarrolladores.

Figmagic es la pieza faltante entre DevOps y el diseño: genera tokens de diseño, exporta gráficos y extrae componentes de React basados en tokens de diseño desde tus documentos de Figma.

Un conjunto de componentes de React para el proyecto PatternFly.

Haz que tus <script> sean más ligeros y tus <style> más inteligentes.

Muestra la documentación de tokens de diseño generada a partir de tus hojas de estilo y archivos de iconos. Previsualiza los cambios en los tokens de diseño en el navegador. Añade tus tokens de diseño a tus páginas de Storybook Docs usando bloques de documentación personalizados.

Compila tu sistema de diseño en un plugin de agente. Extrae una identidad de cualquier referencia, emite SKILL.md + tokens.css y analiza lo que omite tus tokens.

Entorno de desarrollo visual para CSS.

Especificación para definir objetos de tema y tokens de diseño para su uso con componentes de interfaz de usuario.

Sistema de diseño integrado para Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): tokens, soporte para materiales de sombreado fx, 42 componentes, 120 iconos, adaptable a móviles y con tema oscuro. Una sola hoja de estilos, sin dependencias. Probado en un juego multiplataforma comercial.

200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.

Sistema de diseño Helios.