design-to-code

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

Generate pages from any sketch or images.

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

Design to Code Engine

Builder.io for VSCode - turn designs into code!

Bricks is an open source tool for converting Figma designs into high-quality frontend code.

A CLI for generating Flutter themes from Figma files

Using Imgcook force in your terminal

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.

figma to html structure json

Figma MCP

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.

This repo contains the results of slicing UI from Figma Project