Projects in Awesome Lists tagged with design-to-code

https://github.com/builderio/figma-html

Convert any website to editable Figma designs

angular chrome-extension design-systems design-to-code design-tools figma figma-plugin figma-plugins html jsx-lite no-code react storybook svelte typescript vue

Last synced: 14 May 2025

https://github.com/BuilderIO/figma-html

Builder.io for Figma: AI generation, export to code, import from web

angular chrome-extension design-systems design-to-code design-tools figma figma-plugin figma-plugins html jsx-lite no-code react storybook svelte typescript vue

Last synced: 14 Mar 2025

https://github.com/dembrandt/dembrandt

Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.

brand-audits css design-engineering design-md design-ops design-systems design-to-code design-tokens developer-experience dx frontend mcp nodejs open-source playwright productivity reverse-engineering tailwind-css ui-audit

Last synced: 28 May 2026

https://github.com/imgcook/imgcook

Generate pages from any sketch or images.

design-to-code frontend machine-learning

Last synced: 24 Jul 2025

https://github.com/manavarya09/design-extract

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

accessibility agent-skill ai chrome-extension claude-code-plugin cli css cursor design-system design-to-code design-tokens dtcg figma mcp-server npx playwright shadcn-ui skills-sh tailwind web-scraping

Last synced: 24 Apr 2026

https://github.com/mostafasadeghi97/design2code

Convert any web design screenshot to clean HTML/CSS code

ai code-generation coding-assistant design-to-code gpt4 openai vision

Last synced: 03 Apr 2025

https://github.com/uimix-editor/uimix

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

css design-to-code html javascript low-code no-code react ui-components

Last synced: 06 Apr 2025

https://github.com/gridaco/code

Design to Code Engine

code-generation design-to-code figma figma-html figma-react flutter works-with-flutter works-with-react works-with-svelte works-with-vue

Last synced: 07 Oct 2025

https://github.com/kat-tax/figma-to-react-native

Figma → React Native

app-design cms design-system design-to-code design-tools figma figma-design figma-export figma-plugin figma-to-code react-native

Last synced: 04 Apr 2025

https://github.com/BuilderIO/vscode

Builder.io for VSCode - turn designs into code!

angular design-to-code figma no-code nocode react svelte vue

Last synced: 24 Mar 2025

https://github.com/builderio/vscode

Builder.io for VSCode - turn designs into code!

angular design-to-code figma no-code nocode react svelte vue

Last synced: 21 Aug 2025

https://github.com/bricks-cloud/bricks

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

css design-to-code figma-plugin html react tailwindcss vscode-extension

Last synced: 16 Jan 2026

https://github.com/imgcook/imgcook-cli

Using Imgcook force in your terminal

design-to-code

Last synced: 10 Apr 2025

https://github.com/buoy-design/buoy

Design system guardian for code. Anchors to design system, catches drift in React/Vue/Tailwind, reviews PRs automatically. Free for open source.

code-review design-drift design-system design-to-code design-tokens

Last synced: 21 Jan 2026

https://github.com/chara-codes/chara

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

ai coding coding-agent design-to-code frontend

Last synced: 03 Sep 2025

https://github.com/rudraptpsingh/figbridge

Figma → Code (HTML/CSS/Tailwind/tokens), read by any AI agent via MCP. Free, local, no Dev seat, no account.

ai-agents anthropic claude cursor design-to-code design-tokens figma figma-plugin figma-to-code mcp model-context-protocol tailwindcss

Last synced: 31 May 2026

https://github.com/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.

design-to-code ui-to-code

Last synced: 30 Mar 2025

https://github.com/ar27111994/penpot-mcp

AI-agent skill for creating & maintaining production-grade Penpot design systems via the official Penpot MCP Server

accessibility agent-skill ai-agent claude-code design-system design-to-code design-tokens mcp penpot ui-design

Last synced: 01 Jun 2026

https://github.com/iarthstar/presto-dom-code

Generates Presto-Dom code from Sketch Layers

design-to-code generate-code sketch-plugin ui

Last synced: 22 Oct 2025

https://github.com/runkids/figma-to-prompt

🎨 Figma plugin — extract design frames into structured JSON & AI-ready prompts for code generation

ai design-to-code developer-tools figma figma-plugin json llm prompt

Last synced: 26 Apr 2026

https://github.com/pchaparro/bookmark-landing-page

Frontend mentor challenge.

css-modules design-to-code design-to-html figma-to-html frontend-mentor nextjs psd-to-html

Last synced: 04 May 2026

https://github.com/sharipovikromjon/figma-to-html-css-50plus-landing-pages

A collection of 50+ landing pages created from Figma designs, converted into HTML and CSS.

css design-to-code figma front-end html landing-page web-development

Last synced: 18 May 2026

https://github.com/pchaparro/countries-landing-page

REST Countries API with color theme switcher challenge from #frontendmentor.

design-to-code figma-to-html frontend-mentor frontendmentor-challenge nextjs psd-to-html tailwindcss

Last synced: 10 May 2026

https://github.com/slimrealm/samstagram

A static HTML clone of Instagram layout (web version of IG, circa Feb. 2022). Responsive & mobile-friendly.

design-to-code html5 mobile-friendly responsive-design scss

Last synced: 27 May 2026

https://github.com/rahulpeacock/design-to-code

A curated collection of design inspirations sourced from Twitter. Each design is coded and implemented, showcasing different approaches and techniques in web development.

design design-to-code framer-motion javascript reactjs tailwindcss typescript