There are 20 repositories under design-to-code topic.
The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
Convert any website to editable Figma designs
Convert any web design screenshot to clean HTML/CSS code
Flame is an open-source multimodal AI system designed to translate UI design mockups into high-quality React code. It leverages vision-language modeling, automated data synthesis, and structured training workflows to bridge the gap between design and front-end development.
A WYSIWYG React component builder 🚧 Very work-in-progress
Figma → React Native
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
A CLI for generating Flutter themes from Figma files
Figma to HTML/React/Vue and truly responsive
Token Weaver is a GitHub Action to transform the Figma Token Studio tokens to platform specific theme files
Chara Codes is an AI-powered development environment designed to streamline frontend development workflows.
A Figma plugin that helps to transform Figma Design Systems to Vue components with UnoCSS utility classes.
UI design of professional designers converted in flutter code. Check out different folders for source code. For design credits, do check out README.md of a specific project folder.
Sketch to HTML: A online UI/Code editing tool for Smart Responsive Design
This project automates the conversion of Figma designs into Python code, supporting frameworks like Tkinter, Kivy, and PyQt5. It streamlines UI development by transforming design files into fully functional, customizable Python code while preserving the original layout, colors, fonts, and components.
This repository are all kinds of excellent resume templates
Clipboard Landin Page Challange
Modern website for a crypto startup built with next.js, tailwind-css shadcn-ui, and custom animations using framer-motion. Features custom animation queuing. https://ivpay.io
Generates Presto-Dom code from Sketch Layers
🤖 AI-powered tool that transforms UI designs into structured development blueprints
Automate front-end development: a hands-on workshop using Figma, GitHub Copilot, and Azure AI to turn designs into code quickly and consistently.
A curated fusion of design, development, and digital creativity — transforming ideas from concept to creation into impactful, user-focused experiences. ✨
Solution for the Blog Preview Card challenge on Frontend Mentor, built with HTML and CSS
Created a landing page for an intermediate-level Frontend Mentor challenge to enhance HTML, CSS, JS and Sass Skills while mastering the art of converting designs into code and responsive design.
This is my online portfolio website created using ReactJS and Framer Motion for animated elements.
React website to showcase design-to-code skills
Stop breaking your code with Figma exports! Smart Python tools to analyze, clean, and selectively merge Figma-generated code into existing Next.js/TypeScript projects.
Your browser-native frontend framework with JSX syntax and built-in AI copilot.