Awesome GitHub RepositoriesDesign-to-Code Tools

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

Aider is a terminal-based AI coding assistant and pair programmer that uses large language models to write, edit, and refactor source code across multiple files and programming languages. It functions as a command line interface for automating programming tasks and managing codebase modifications. The tool distinguishes itself by creating structural maps of entire codebases to provide language models with the necessary context for navigating and modifying large repositories. It further expands input capabilities through a speech-to-text pipeline for voice-driven development and multi-modal in

React-admin is a framework for building data-driven administrative interfaces that connect to REST or GraphQL backends. It provides a comprehensive suite of tools for managing the full lifecycle of administrative applications, including resource-oriented routing, declarative form scaffolding, and context-driven state management. By utilizing a modular adapter-based architecture, the framework abstracts backend communication, allowing developers to build consistent CRUD interfaces that handle data fetching, authentication, and synchronization automatically. The project distinguishes itself thr

Onlook is an integrated development environment designed for building user interfaces through a combination of visual manipulation and direct code synchronization. It provides a unified workspace where developers can modify application components, layouts, and styles within a graphical interface, with all changes automatically reflected in the underlying source code. By maintaining a live, bidirectional link between the rendered interface and the codebase, the platform ensures that visual edits are accurately translated into production-ready syntax. The platform distinguishes itself through i

LiveKit is a comprehensive framework for building and orchestrating real-time, multimodal AI agents that interact with users through voice, video, and text. It provides a centralized, event-driven architecture to manage the entire lifecycle of automated participants, from initialization and session state management to graceful shutdown. By utilizing a selective forwarding unit, the platform efficiently routes media streams between participants and agents, ensuring low-latency communication and secure, token-based authentication for all connections. The platform distinguishes itself through it

Wasp is a declarative full-stack web framework that enables developers to build and deploy applications by defining their architecture in a centralized configuration. By using a high-level specification, the framework automates the orchestration of frontend, backend, and database components, ensuring that infrastructure concerns like routing, authentication, and data modeling are handled consistently across the entire stack. The framework distinguishes itself through its compiler-driven approach, which translates declarative configurations into cohesive, production-ready codebases. It provide

Vercel is a cloud platform for building, deploying, and scaling web applications. It provides a unified infrastructure that automates the build process by detecting project frameworks and distributing static and dynamic content through a global content delivery network. The platform executes application logic using serverless functions that scale automatically based on real-time traffic demand. The platform distinguishes itself through a centralized AI gateway that proxies requests to multiple model providers, enabling standardized authentication, observability, and cost tracking. It supports

Figma-Context-MCP is a design-to-code automation tool that functions as a server for the Model Context Protocol. It acts as a bridge between visual design platforms and development environments, enabling large language models to access design file metadata and component properties directly. The project distinguishes itself by providing a standard-compliant interface that translates design specifications into structured data. By extracting layout and styling information, it facilitates the programmatic conversion of design tokens and component requirements into actionable code structures. Thi

Firefox is a cross-platform web browser engine designed to render web content, execute JavaScript, and manage secure browsing sessions. It utilizes a multi-process isolation architecture that distributes browser tasks across independent operating system processes to ensure stability and prevent site-specific failures from impacting the entire application. The engine incorporates a sandboxed execution environment to restrict web content and untrusted scripts to isolated memory compartments, enforcing security policies that prevent unauthorized access to system resources. The project distinguis

Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr

Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface. The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase. The plat

This project is a software development kit and framework for building AI agent orchestration, session management, and tool integration systems. It provides a backend infrastructure for hosting remote AI sessions and coordinating multi-agent workflows using large language models. The SDK enables the definition of specialized agents and the orchestration of complex tasks through parallel workstreams. It distinguishes itself by offering a multi-tenant backend capable of horizontal scaling and a headless server runtime that separates session execution from the client interface. The system covers

sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an HTML design spec generator and asset export manager, creating technical handoff documentation and measurement annotations directly from design files. The tool generates interactive web viewers and standalone offline HTML pages that allow for the inspection of dimensions, styles, and design details. It includes capabilities for managing color palettes via XML export and capturing influence rectangles to ensure exported image dimensions account for shadows and borders. The system

This repository contains the comprehensive documentation for a code editor focused on AI-assisted software development and remote development workflows. It covers the implementation of AI agents and language models used for autonomous code generation, large-scale refactoring, and task iteration. The project is distinguished by its deep integration of autonomous AI agents capable of web navigation, application logic validation, and orchestrating multi-step development processes. It provides specialized frameworks for tailoring AI behavior through custom instructions, model context protocols, a

Weblate is an open-source web-based translation management system that provides a collaborative platform for teams to review, suggest, and approve translations in real time. It functions as a continuous localization platform, automatically synchronizing translations with source code changes in version control repositories, and can be deployed either as a self-hosted server or through a managed cloud hosting service. The system integrates directly with Git hosting platforms like GitHub, GitLab, and Bitbucket, storing all translations in version control with individual translator attribution re

FigmaToCode is a design-to-code converter and frontend code generator that transforms Figma design files into responsive source code. It functions as a multi-platform UI compiler, mapping visual design elements to structural constraints for web and mobile environments. The system supports multi-target syntax emission to produce code for HTML, Tailwind CSS, Flutter, and SwiftUI. It automates frontend styling by converting design system variables and visual effects into theme-consistent code across these different frameworks. The tool handles responsive UI implementation by translating design

Dieses Projekt ist ein Enterprise-Designsystem und ein Web-Interface-Framework, das eine React-Komponentenbibliothek für den Aufbau konsistenter Benutzererlebnisse bereitstellt. Es dient als Brücke für den Design-zu-Code-Workflow und synchronisiert Produktdesign-Tools mit der Frontend-Implementierung, um die Entwicklungsgeschwindigkeit zu beschleunigen. Das Framework konzentriert sich auf die Design-zu-Code-Synchronisation und den Aufbau von Enterprise-Designsystemen. Es ermöglicht die Standardisierung visueller Komponenten und die Komposition komplexer Web- und Mobilbildschirme unter Verwendung einheitlicher Schnittstellenelemente und Layoutmuster. Die Bibliothek implementiert ein Design-Token-System und plattformübergreifende Stilzuordnung, um die visuelle Wiedergabetreue zwischen Design-Mocks und Produktionscode aufrechtzuerhalten. Sie nutzt einen konfigurationsgesteuerten Ansatz und atomare Designprinzipien, um unabhängige Elemente in größeren Layouts zu organisieren.

Dies ist ein Backend-as-a-Service-SDK für React Native, das eine Bibliothek zur Integration mobiler Anwendungen mit Backend-Diensten bereitstellt. Es dient als Client für die Verwaltung von Benutzerauthentifizierung, Cloud-Datenbanken und Remote-Dateispeicherung innerhalb einer mobilen Umgebung. Das SDK ermöglicht mobilen Entwicklern die Implementierung sicherer Login-Flows mittels OAuth, E-Mail- und Telefonverifizierung. Es enthält einen Datenbank-Client für die Durchführung von CRUD-Operationen auf strukturierten Daten und einen Speicher-Client für das Hochladen und Abrufen binärer Assets aus Remote-Cloud-Buckets. Zusätzlich bietet es eine WebSocket-basierte Schnittstelle, um sofortige serverseitige Updates zu Datenbank- und Speicheränderungen zu erhalten. Das Projekt deckt breite Funktionsbereiche ab, einschließlich Identitäts- und Zugriffsmanagement, strukturierter Dokumentenspeicherung und Echtzeit-Datensynchronisierung. Es bietet zudem Dienstprogramme für die Verwaltung von Teammitgliedschaften und geteilten Einstellungen.

Tolgee ist eine Plattform für Lokalisierungsmanagement und ein KI-gestütztes Übersetzungstool, das darauf ausgelegt ist, die Verwaltung, Übersetzung und Bereitstellung von App-Strings über mehrere Sprachen hinweg zu zentralisieren. Es dient als zentrales System zur Organisation lokalisierbarer Inhalte und bietet Tools für den Export und Import in verschiedenen Formaten, einschließlich Industriestandards wie CSV und XLIFF. Die Plattform zeichnet sich durch ihren In-Context-Übersetzungseditor aus, der es Benutzern ermöglicht, App-Strings direkt innerhalb der laufenden Benutzeroberfläche zu bearbeiten, um sofortigen visuellen Kontext zu erhalten. Zudem nutzt sie KI-Automatisierung durch einen Model-Context-Protocol-Server und maschinelle Übersetzung, um String-Updates zu automatisieren und Übersetzungsvorschläge zu generieren. Das System deckt ein breites Spektrum an Funktionen ab, darunter die Zusammenarbeit an Lokalisierungsprojekten mit Versionsprüfung und Aufgabenkoordination, Qualitätssicherung durch Glossare und Translation-Memory-Systeme sowie die Bereitstellung von Inhalten an Cloud-Speicher oder CDNs. Der Zugriff wird über rollenbasierte Kontrollen und OIDC-Identitätsintegration für Single Sign-On verwaltet.

TDesign ist ein Enterprise-Design-System und eine plattformübergreifende UI-Komponentenbibliothek. Sie bietet eine umfassende Sammlung von Design-Richtlinien und wiederverwendbaren Interface-Elementen, die für den Aufbau konsistenter, professioneller Geschäftsanwendungen über verschiedene Betriebssysteme und Browser hinweg gedacht sind. Das Projekt nutzt ein Design-Token-System zur Zentralisierung visueller Variablen für Farben und Typografie, was eine Anpassung an das Corporate Branding ermöglicht. Es stellt durch geteilte UI-Spezifikationen und einen zentralen Satz visueller Variablen ein einheitliches Look-and-Feel sicher. Das System enthält ein Starter-Kit für UI-Frameworks mit CLI-Tools und Vorlagen für das Bootstrapping von Frontend-Projekten. Zudem unterstützt es den Entwicklungsprozess durch eine Design-to-Code-Pipeline und modulare Komponentenpaketierung.