11 dépôts
Tools for synchronizing visual design properties across multiple design files and projects to ensure consistency.
Distinguishing note: Focuses on the synchronization mechanism for design tokens, distinct from general design system management.
Explore 11 awesome GitHub repositories matching user interface & experience · Design Token Synchronization. Refine with filters or upvote what's useful.
Open Design is an AI design orchestration platform and LLM agent workspace designed for generating prototypes, presentations, and motion graphics. It functions as a local-first environment that integrates various command-line AI agents and coding tools into a unified design workflow, allowing users to migrate design specifications into brand-compliant source code. The project is distinguished by its ability to enforce visual consistency through a design system manager that defines brand contracts and tokens using Markdown. It features a specialized motion graphics generator that converts HTML
Synchronizes active design tokens and specifications directly into system prompts to ensure brand-matched assets.
This project is a browser-based collaborative design platform that provides a comprehensive workspace for interface design, interactive prototyping, and design system management. It functions as a vector graphics editor that enables teams to create, manage, and iterate on designs in real-time, utilizing a component-based inheritance model to ensure consistency across complex projects. The platform distinguishes itself through a deep integration of design and development workflows. It features a specialized developer handoff workspace that allows for the inspection of design properties, precis
The platform enables users to synchronize visual properties like colors and spacing across all designs to maintain a unified look and feel.
AgentMemory is a persistent knowledge store and memory server designed to provide AI coding agents with long-term memory. It functions as a knowledge graph engine and vector database store that saves and recalls project context, architectural decisions, and patterns across different sessions. The system distinguishes itself by using a tiered-memory consolidation pipeline that compresses raw observations into episodic, semantic, and procedural layers to optimize token usage. It employs a hybrid retrieval strategy combining keyword matching, vector embeddings, and graph traversal to surface rel
Automatically populates agent prompts with relevant historical context while respecting token budget constraints.
Mitosis is a cross-framework compiler that transforms a single JSX-based source into native components for multiple frontend libraries simultaneously. It functions as a multi-target UI library builder, allowing developers to maintain a single source of truth for design systems while generating production-ready code for diverse environments including React, Vue, Angular, and Svelte. The system operates by parsing unified component code into an intermediate JSON representation, which serves as the foundation for all downstream framework generators. This architecture utilizes a visitor-based tra
Imports design tokens and structures from external tools to automatically generate consistent, production-ready UI components.
Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys
Imports and exports design tokens using a universal data format to maintain visual consistency across projects.
David AI is a UI development toolkit that combines AI-powered page generation with a library of pre-built, copy-paste-ready components built on Tailwind CSS. At its core, it offers an AI builder that can generate complete landing pages and dashboards from natural language prompts, outputting clean, responsive Tailwind CSS code. The project provides a comprehensive collection of UI components—including buttons, forms, navigation elements, and data displays—that can be assembled into full page sections like hero blocks, pricing tables, and dashboards. The toolkit distinguishes itself through a
Keeps design mockups and code in sync by using a shared Figma library of design tokens, components, and auto-layouts.
Theme-ui est un framework de thème React et un utilitaire CSS-in-JS utilisé pour construire des interfaces utilisateur thématisables. Il fonctionne comme un outil de système de design qui établit des échelles centralisées basées sur des contraintes pour les couleurs, la typographie et l'espacement afin d'assurer une cohérence visuelle entre les applications. Le framework se distingue par un raccourci réactif basé sur des tableaux pour les mises en page mobile-first et un gestionnaire de mode de couleur dédié qui se synchronise avec les préférences du navigateur et conserve les sélections de l'utilisateur. Il dispose également d'un système pour créer des variantes de style nommées afin de contrôler l'apparence des composants via des propriétés et fournit des capacités de synchronisation pour traduire les configurations de thème en styles Figma. Le projet couvre un large ensemble de capacités de stylisation, incluant l'injection CSS globale pour les réinitialisations d'éléments, les surcharges de thème imbriquées via le contexte, et un système de configuration de fusion profonde (deep-merge) pour étendre les préréglages de design. Il inclut également un ensemble de composants de mise en page thématisables, tels que des grilles réactives et des champs de formulaire standardisés. Un plugin dédié est disponible pour intégrer le système de design au sein des sites Gatsby.
Translates theme configurations into Figma Styles to synchronize design tokens between code and design tools.
Iconoir est une bibliothèque d'icônes SVG open-source composée de plus de 1600 graphiques vectoriels. Elle sert de jeu d'icônes multiplateforme conçu pour être utilisé dans les applications web et mobiles, ainsi que de pack d'icônes pour les outils de design comme Figma et Framer. Le projet facilite un workflow design-to-code en fournissant un ensemble unifié d'actifs qui maintiennent une harmonie visuelle entre les prototypes et les environnements en direct. Il prend en charge un large éventail de cibles, notamment React, Vue, Flutter et le développement mobile natif.
Synchronizes source vector files with Figma libraries to maintain visual consistency between design prototypes and code.
Horizon UI Chakra est un modèle de tableau de bord complet et une bibliothèque de composants conçus pour construire des applications web administratives. Il fournit un boilerplate fondamental qui utilise une architecture modulaire basée sur des composants pour faciliter la construction rapide d'interfaces de gestion complexes et de panneaux de visualisation de données. Le projet se distingue par l'intégration d'un système de design centralisé qui propage des jetons visuels dans toute l'application, garantissant une image de marque et un style cohérents sur tous les éléments de l'interface. Il prend en charge les mises en page réactives grâce à des systèmes de grille fluides et offre une personnalisation étendue des thèmes, incluant le support des modes clair et sombre, pour s'aligner sur des exigences spécifiques d'accessibilité et de visuel. La bibliothèque comprend une suite de modèles de pages pré-construits et d'éléments d'interface réutilisables qui rationalisent le développement de fonctionnalités standard telles que l'authentification et l'analyse. Elle fournit également des outils en ligne de commande pour le scaffolding de projet, permettant aux développeurs de générer des structures d'application full-stack et de synchroniser les assets de design avec le code implémenté pour maintenir la cohérence tout au long du cycle de vie du développement.
Connects visual design files with implemented code to ensure consistency throughout the development lifecycle.
Liftkit is a modular code distribution tool and component code importer designed to download UI component source code directly into local repositories. It functions as a frontend component bridge, transferring pre-made UI elements and design patterns from remote repositories into local project directories for full implementation control. The utility acts as a design system synchronizer, aligning visual components and patterns across different design and coding tools. This process ensures consistency between layout and final code by synchronizing UI design patterns throughout the development w
Keeps user interface patterns consistent across different design and coding tools to accelerate the development process.
Ce projet est un gestionnaire de jetons de design (design tokens) conçu pour combler le fossé entre les outils de design créatif et les environnements de développement. Il fonctionne comme un utilitaire d'automatisation qui extrait les styles de design, les variables et les composants des logiciels de design et les convertit en structures de données standardisées et lisibles par machine. L'outil se distingue en fournissant un framework pour transformer les données de design afin de répondre à des exigences de plateforme spécifiques, telles que des configurations de mode sombre ou des systèmes de variables mobiles natifs. Il prend en charge un middleware de transformation personnalisé, permettant aux utilisateurs d'appliquer une logique spécifique aux sorties de jetons pendant le processus d'exportation pour assurer la compatibilité avec divers systèmes de stylisation. Au-delà de l'extraction et de la transformation de base, le projet facilite la synchronisation multiplateforme en distribuant les actifs de design vers des points de terminaison distants et des pipelines d'intégration continue. Il maintient la compatibilité avec les formats de jetons de design standard de l'industrie, garantissant que les propriétés visuelles restent cohérentes à travers plusieurs projets logiciels et flux de travail de développement.
Automates the distribution of design tokens to remote endpoints and CI pipelines to ensure cross-project consistency.