design-to-code

There are 20 repositories under design-to-code topic.

• onlook-dev / onlook

  The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI

  aicursorcursor-aidesigndesign-to-codedrizzleeditorfigmafrontendidelow-codenextjsreactsupabasetailwindcsstypescriptuivibe-codingvibecoding
  Language:TypeScript 23236
• figma-html

  BuilderIO / figma-html

  Convert any website to editable Figma designs

  angularchrome-extensiondesign-systemsdesign-to-codedesign-toolsfigmafigma-pluginfigma-pluginshtmljsx-liteno-codereactstorybooksveltetypescriptvue
  Language:TypeScript 3470

• imgcook / imgcook

  Generate pages from any sketch or images.

  design-to-codefrontendmachine-learning
  1879

• mostafasadeghi97 / design2code

  Convert any web design screenshot to clean HTML/CSS code

  code-generationgpt4visioncoding-assistantopenaiaidesign-to-code
  Language:TypeScript 660
• Flame-Code-VLM

  Flame-Code-VLM / Flame-Code-VLM

  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.

  code-generationdata-synthesisfrontend-developmentvision-language-modelaideep-learningfrontendmultimodalopen-sourcereactvlmdeepseekdesign-to-codefront-endimage-to-codeimage-to-textllmvuescreen-to-code
  Language:Python 547

• uimix-editor / uimix

  A WYSIWYG React component builder 🚧 Very work-in-progress

  cssdesign-to-codehtmljavascriptlow-codeno-codereactui-components
  Language:TypeScript 458
• figma-to-react-native

  kat-tax / figma-to-react-native

  Figma → React Native

  app-designcmsdesign-systemdesign-to-codedesign-toolsfigmafigma-designfigma-exportfigma-pluginfigma-to-codereact-native
  Language:TypeScript 260

• gridaco / code

  Design to Code Engine

  code-generationdesign-to-codefigmafigma-htmlfigma-reactfluttergridaworks-with-flutterworks-with-reactworks-with-svelteworks-with-vue
  Language:TypeScript 247
• vscode

  BuilderIO / vscode

  Builder.io for VSCode - turn designs into code!

  angulardesign-to-codefigmano-codenocodereactsveltevue
  Language:TypeScript 187

• bricks-cloud / bricks

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

  cssdesign-to-codefigma-pluginhtmlvscode-extensionreacttailwindcss
  Language:TypeScript 88

• whynotmake-it / figmage

  A CLI for generating Flutter themes from Figma files

  design-systemdesign-to-codefigmaflutter
  Language:Dart 65

• imgcook / imgcook-cli

  Using Imgcook force in your terminal

  design-to-code
  Language:JavaScript 58

• px2code / Figma-to-HTML

  Figma to HTML/React/Vue and truly responsive

  editorcode-generatorreactreactjsdesign-toolsfigmahtmldesign-to-codefigma-to-htmlfigma-to-codecode-generate
  Language:SCSS 45

• obvious / token-weaver

  Token Weaver is a GitHub Action to transform the Figma Token Studio tokens to platform specific theme files

  androiddesign-systemsdesign-to-codedesign-tokensgithub-actionlintingstylelint
  Language:TypeScript 9

• chara-codes / chara

  Chara Codes is an AI-powered development environment designed to streamline frontend development workflows.

  aicodingcoding-agentdesign-to-codefrontend
  Language:TypeScript 7

• onyx-gen / onyx

  A Figma plugin that helps to transform Figma Design Systems to Vue components with UnoCSS utility classes.

  design-systemdesign-to-codedesign-toolsfigmafigma-exportfigma-pluginfigma-pluginsfigma-to-codeno-codetailwindtailwindcsstypescriptunocssvuepluginutility-classes
  Language:TypeScript 5

• uznam8x / figon

  figma to html structure json

  figmahtmljsonno-codetypescriptdesign-to-codefigma-to-json
  Language:TypeScript 5

• Zapcode-FTC / Zapcode-Figma-MCP

  Figma MCP

  design-to-codefigmafigma-mcpfigma-to-code
  5

• Ritik-Saxena / Design_to_Code-Flutter

  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.

  ui-to-codedesign-to-code
  Language:Dart 4
• SPA-Front

  Id-Yuu / SPA-Front

  This repo contains the results of slicing UI from Figma Project

  learn-to-codepersonal-projectreactjsresponsivefigma-to-codejavascriptlanding-pagesassdesign-to-codetailwindcssopen-sourcecontributions-welcomereact
  3

• px2code / Sketch-to-HTML

  Sketch to HTML: A online UI/Code editing tool for Smart Responsive Design

  reactsketch-to-htmlsketch-to-codereact-nativehtmldesign-to-codecss
  3

• Mordekai66 / design2apps

  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.

  code-generationdesign-to-codedeveloper-toolsfigma-apifigma-to-codefigma-to-tkintergui-automationui-generatordesign-to-appdesign-to-kivydesign-to-pyqt5design-to-tkdesign-to-tkinterfigma-pyqt5figma-to-kivyfigma-to-tk
  Language:Python 2

• codia-d2c / resume-template

  This repository are all kinds of excellent resume templates

  design-to-codefigma-to-codecomputer-programmer-resumesoftware-engineer-resumegoogle-resumefrontend-developer-resumefull-stack-resumeit-support-resumeui-designer-resume
  Language:CSS 1
• clipboard-landing

  denisdindar / clipboard-landing

  Clipboard Landin Page Challange

  landing-pagecsshtmlimage-to-htmldesign-to-codesass
  Language:HTML 1

• fedorivanenko / ivpay-website

  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

  cryptonextjsanimationcustom-uidesign-to-codeframer-motionlanding-pagemarketing-sitemodern-webmotion-designnextjs-app-routerreactshadcn-uitailwindcsstypescriptweb-animation
  Language:TypeScript 1

• iarthstar / presto-dom-code

  Generates Presto-Dom code from Sketch Layers

  sketch-plugingenerate-codeuidesign-to-code
  1

• moyunzero / Blueprint-AI

  🤖 AI-powered tool that transforms UI designs into structured development blueprints

  aicode-generationdesign-to-codedesign-toolsdeveloper-toolsfrontend-toolsimage-analysisopenaiui-to-codevue3vue3-demo
  Language:Vue 1

• paulasilvatech / Design-to-Code-Dev

  Automate front-end development: a hands-on workshop using Figma, GitHub Copilot, and Azure AI to turn designs into code quickly and consistently.

  agentic-aiai-foundryautomationazure-aidesign-to-codedesign-to-code-conversionfigmafrontendgithub-copilothands-on-labmcptypescriptworkshop
  Language:TypeScript 1

• UjjwalSaini07 / VoidToForm

  A curated fusion of design, development, and digital creativity — transforming ideas from concept to creation into impactful, user-focused experiences. ✨

  aesthetic-uicreative-codingcreative-experimentsdesign-to-codedesigner-portfoliominimal-designperformance-optimizationportfolioportfolio-websiteresponsive-designweb-developmenttrendingtrending-repositories
  Language:TypeScript 1

• VangmanawKairung / frontend-mentor-blog-preview-card

  Solution for the Blog Preview Card challenge on Frontend Mentor, built with HTML and CSS

  cssdesign-to-codefigmaflexboxfrontend-mentorfrontendmentor-challengehtmlresponsive-designweb-development
  Language:HTML 1

• vijita-u / EasyBank_Landing_Page

  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.

  cssdesign-to-codefrontendmentor-challengehtmljavascriptresponsive-web-designsass
  Language:HTML 1

• vijita-u / Portfolio_Vijita_Uday_ReactJs

  This is my online portfolio website created using ReactJS and Framer Motion for animated elements.

  design-to-codefigmaframer-motionjsxreactjssass
  Language:JavaScript 1

• abdigunasetiawan / dressly

  -

  cssdesign-to-codehtmljavascripttailwindcssslicing-design-to-code
  Language:HTML

• GeorgiosDrivas / shutter-shop

  React website to showcase design-to-code skills

  design-to-codewebdevelopment
  Language:TypeScript

• ouardaoui / igma-to-next-sync

  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.

  automationdesign-to-codedevtoolsfigmanextjspythonreacttypescript
  Language:Python

• UfukCemDELICE / EpiX

  Your browser-native frontend framework with JSX syntax and built-in AI copilot.

  design-to-codeepixfrontend-frameworkjsxnano-jsxnative-jsreact-alternativeshadow-domsignalsvitewebcomponentsai-agent
  Language:JavaScript