Awesome GitHub RepositoriesDesign-to-Code Workflows

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

Feather is an open-source collection of minimal vector graphics designed on a standardized 24x24 grid for use in web and design projects. It provides a set of lightweight SVG assets intended to maintain visual consistency across digital user interfaces. The library supports visual parity between design software and production code through a dedicated design tool component library. This ensures that icons used in mockups remain consistent with the final implementation. Integration capabilities include embedding icons via inline markup, image tags, or CSS backgrounds. The project also provides

This project is a high-performance, lightweight C graphics library designed for creating interactive user interfaces on resource-constrained embedded hardware. It functions as a comprehensive framework that provides a widget toolkit, a rendering engine, and hardware-agnostic drivers to support the development of graphical displays on microcontrollers and embedded systems. The framework distinguishes itself through a flexible, object-oriented widget hierarchy and a declarative layout engine that supports responsive design patterns like flexbox and grid systems. It enables developers to synchro

Screenshot-to-code is an AI visual frontend generator that translates images, design mockups, and screenshots into structured HTML, CSS, and Tailwind markup. It functions as a design-to-code converter that uses large language models and neural networks to transform visual elements into functional web page layouts. The tool automates the frontend design process by converting static mockups into website code, facilitating rapid UI prototyping and the generation of static website structures. It bridges the gap between visual design assets and frontend development by translating image-based layou

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

This is a Figma MCP server that exposes document manipulation capabilities to AI assistants through the Model Context Protocol. It functions as a bridge between AI tools and Figma, enabling programmatic creation, reading, updating, and deletion of design elements including frames, text nodes, components, and connectors. The server provides AI-powered design generation that translates natural language prompts into complete UI screens and design elements within Figma. It includes a design annotation system for adding, updating, and retrieving markdown-supported annotations on nodes, along with

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

Superdesign is an AI-powered design platform that generates UI mockups, wireframes, and multi-page user flows from natural language prompts within a collaborative canvas environment. It functions as a design-to-code exporter, producing production-ready HTML, ZIP archives, or Shopify Liquid templates for direct implementation, and includes an OpenAPI specification importer that automatically generates API documentation and client code from schema definitions. The platform distinguishes itself through a branch-based design exploration system that creates independent design variations from a sin

This project is a design-to-development handoff guide and UI design audit framework. It provides a structured collection of requirements and checklists to verify that visual assets, component architectures, and technical specifications are ready for implementation. The framework focuses on standardizing web asset management through naming conventions and format verification for images, icons, and fonts. It includes specifications for responsive web design, ensuring that mobile and tablet layouts and fluid grid systems are defined for cross-device consistency. The guide covers quality assuran

Brick Design ist ein Low-Code-Page-Builder-Framework, das verwendet wird, um Drag-and-Drop-Visual-Editoren zu erstellen, die produktionsreife Layout- und Styling-Codes für Benutzeroberflächen generieren. Es fungiert als visuelle Layout-Engine und UI-Komponenten-Orchestrator und bietet die notwendigen Tools zur Verwaltung von Komponenten-Constraints, Nesting-Regeln und visuellen Eigenschaftskonfigurationen. Das Framework enthält einen dynamischen Template-Generator, der Logik-Rendering und Ausdrucksvariablen nutzt, um wiederverwendbare, datengesteuerte Seitentemplates zu erstellen. Es arbeitet zudem als Multi-Device-Designtool und bietet Viewport-Switching und adaptive Styles, um konsistente Darstellungen auf Desktop- und Mobilbildschirmen sicherzustellen. Das System deckt ein breites Spektrum an Funktionen ab, einschließlich Design-to-Code-Workflows, responsivem Layout-Design und visuellem Echtzeit-Rendering. Es verwaltet komplexe UI-Hierarchien durch koordinatenbasiertes Snap-Alignment, zustandsgesteuertes Property-Mapping und die Integration externer Komponentenbibliotheken.

React Email Editor is a drag-and-drop visual builder for creating responsive email templates, built as a React embeddable component. It also serves as an AI-powered email designer, a collaborative email design tool, and a React component library for composing emails programmatically with JSX. The editor represents designs as structured JSON and supports multi-format rendering for email clients, web pages, and PDF. What distinguishes this editor is its deep AI integration: users can generate full email templates from natural language, rewrite text with chosen intent, produce multiple text vari

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.

Iconoir ist eine Open-Source-SVG-Icon-Bibliothek mit über 1600 Vektorgrafiken. Sie dient als plattformübergreifendes Icon-Set für Web- und mobile Anwendungen sowie als Design-Tool-Icon-Pack für Figma und Framer. Das Projekt erleichtert den Design-to-Code-Workflow durch die Bereitstellung eines einheitlichen Satzes an Assets, die visuelle Harmonie zwischen Prototypen und Live-Umgebungen wahren. Es unterstützt eine Vielzahl von Zielen, darunter React, Vue, Flutter und native mobile Entwicklung.

This project is a fixed-width CSS layout framework designed to organize web content into a standardized grid of columns and gutters. It provides a set of CSS rules and dimensions that ensure consistent page alignment and spacing across a frontend design grid. The system synchronizes visual design mockups with technical implementations using a 960 pixel width. It includes specialized style sheets that mirror grid alignment to support right-to-left language directions. The framework covers grid management through column implementation and layout spacing control. It further provides design inte

Agent-OS is an LLM multi-agent orchestration framework and AI software development lifecycle tool designed to coordinate specialized agents through shared workspaces and structured task lists. It functions as an agentic application bootstrapper and technical specification engine, providing the infrastructure to guide the process from product requirements to automated coding and deployment. The system distinguishes itself through spec-driven development, using detailed technical specifications and layered context injection to ensure generated code aligns with project standards. It employs a ma

jscamp is a full-stack web development and education project focused on mastering JavaScript, TypeScript, and AI integration. It provides a structured curriculum and interactive exercises covering language fundamentals, frontend engineering, and backend API development. The project distinguishes itself through the implementation of autonomous AI agents capable of complex task automation, such as modifying files, managing servers, and executing API calls. It includes advanced AI development tools for conversational querying, real-time code suggestions, and automated repository analysis to gene

Alva is a code-based prototyping tool and living prototype framework used to build interactive interfaces. It functions as a component-driven design system where application concepts are realized as functional code components rather than static mockups. The project facilitates a design-to-code workflow, enabling the creation of living component documentation and the validation of frontend concepts. It allows for rapid UI prototyping by composing reusable code building blocks to test design ideas and technical implementations. The environment supports component-based UI composition and declar

Code Connect is a design system integration tool that bridges the gap between codebase component definitions and design software. It functions as a synchronization utility that surfaces production-ready code snippets and implementation details directly within design environments, establishing a single source of truth for interface elements. The tool distinguishes itself by using a schema-based, declarative approach to map code components to design assets. By parsing source code to extract component definitions and property configurations, it ensures that the code snippets displayed to designe

Dieses Projekt ist ein Design-Token-Manager, der die Lücke zwischen kreativen Design-Tools und Entwicklungsumgebungen schließen soll. Es fungiert als Automatisierungs-Tool, das Design-Styles, Variablen und Komponenten aus Design-Software extrahiert und in standardisierte, maschinenlesbare Datenstrukturen umwandelt. Das Tool zeichnet sich durch ein Framework zur Transformation von Designdaten aus, um spezifische Plattformanforderungen zu erfüllen, wie z. B. Dark-Mode-Konfigurationen oder native mobile Variablensysteme. Es unterstützt benutzerdefinierte Transformations-Middleware, die es Benutzern ermöglicht, während des Exportprozesses spezifische Logik auf Token-Ausgaben anzuwenden, um die Kompatibilität mit diversen Styling-Systemen sicherzustellen. Über die Kern-Extraktion und -Transformation hinaus erleichtert das Projekt die plattformübergreifende Synchronisierung durch die Verteilung von Design-Assets an Remote-Endpunkte und CI/CD-Pipelines. Es behält die Kompatibilität mit branchenüblichen Design-Token-Formaten bei und stellt sicher, dass visuelle Eigenschaften über mehrere Softwareprojekte und Entwicklungs-Workflows hinweg konsistent bleiben.