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 es un framework de constructor de páginas low-code utilizado para crear editores visuales de arrastrar y soltar que generan código de diseño y estilo listo para producción para interfaces de usuario. Funciona como un motor de diseño visual y orquestador de componentes de UI, proporcionando las herramientas necesarias para gestionar restricciones de componentes, reglas de anidamiento y configuraciones de propiedades visuales. El framework incluye un generador de plantillas dinámicas que utiliza renderizado de lógica y variables de expresión para crear plantillas de página reutilizables y basadas en datos. También opera como una herramienta de diseño multidispositivo, ofreciendo cambio de viewport y estilos adaptativos para asegurar pantallas consistentes en escritorios y pantallas móviles. El sistema cubre una amplia gama de capacidades, incluyendo flujos de trabajo de diseño a código, diseño de maquetación responsiva y renderizado visual en tiempo real. Gestiona jerarquías de UI complejas mediante alineación de ajuste basada en coordenadas, mapeo de propiedades basado en estado y la integración de librerías de componentes externas.

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

Este proyecto es un sistema de diseño empresarial y framework de interfaz web que proporciona una biblioteca de componentes React para construir experiencias de usuario consistentes. Sirve como puente de flujo de trabajo de diseño a código, sincronizando herramientas de diseño de productos con la implementación frontend para acelerar la velocidad de desarrollo. El framework se centra en la sincronización de diseño a código y la construcción de sistemas de diseño empresarial. Permite la estandarización de componentes visuales y la composición de pantallas web y móviles complejas utilizando elementos de interfaz y patrones de diseño unificados. La biblioteca implementa un sistema de tokens de diseño y mapeo de estilos multiplataforma para mantener la fidelidad visual entre las maquetas de diseño y el código de producción. Utiliza un enfoque basado en configuración y principios de diseño atómico para organizar elementos independientes en diseños más grandes.

Iconoir es una librería de iconos SVG de código abierto que consta de más de 1600 gráficos vectoriales. Sirve como un conjunto de iconos multiplataforma diseñado para su uso en aplicaciones web y móviles, así como un paquete de iconos de herramientas de diseño para Figma y Framer. El proyecto facilita un flujo de trabajo de diseño a código al proporcionar un conjunto unificado de activos que mantienen la armonía visual entre los prototipos y los entornos en vivo. Admite una amplia gama de objetivos, incluyendo React, Vue, Flutter y desarrollo móvil nativo.

Este proyecto es un framework de diseño CSS de ancho fijo diseñado para organizar el contenido web en una cuadrícula estandarizada de columnas y canalones (gutters). Proporciona un conjunto de reglas y dimensiones CSS que garantizan una alineación y espaciado de página consistentes en una cuadrícula de diseño frontend. El sistema sincroniza maquetas de diseño visual con implementaciones técnicas utilizando un ancho de 960 píxeles. Incluye hojas de estilo especializadas que reflejan la alineación de la cuadrícula para admitir direcciones de idioma de derecha a izquierda. El framework cubre la gestión de la cuadrícula mediante la implementación de columnas y el control del espaciado del diseño. Además, proporciona integración de diseño para la sincronización de maquetas y herramientas de posicionamiento de elementos que desacoplan la ubicación visual del orden de origen para admitir la accesibilidad y la optimización de motores de búsqueda.

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

Este proyecto es un gestor de tokens de diseño diseñado para cerrar la brecha entre las herramientas de diseño creativo y los entornos de desarrollo. Funciona como una utilidad de automatización que extrae estilos de diseño, variables y componentes del software de diseño y los convierte en estructuras de datos estandarizadas y legibles por máquina. La herramienta se distingue por proporcionar un framework para transformar datos de diseño para cumplir con requisitos de plataforma específicos, como configuraciones de modo oscuro o sistemas de variables móviles nativos. Admite middleware de transformación personalizado, permitiendo a los usuarios aplicar lógica específica a las salidas de tokens durante el proceso de exportación para garantizar la compatibilidad con diversos sistemas de estilo. Más allá de la extracción y transformación central, el proyecto facilita la sincronización multiplataforma distribuyendo activos de diseño a endpoints remotos y pipelines de integración continua. Mantiene la compatibilidad con formatos de tokens de diseño estándar de la industria, asegurando que las propiedades visuales permanezcan consistentes en múltiples proyectos de software y flujos de trabajo de desarrollo.