Topics / #design-to-code

Design-to-code projects on GitHub

Tools turning design mockups into production front-end code.

As of , the most-starred Design-to-code projects on GitHub are screenshot-to-code (80.4K stars), onlook (26.9K stars) and easy-vibe (19.8K stars). GitHub.Locker tracks 10 Design-to-code repositories with 191.8K stars combined. The fastest-growing on October 17 was screenshot-to-code, with +25 stars in a day.

10Projects
191.8KStars in total
+91Stars in a day
Browse in the catalog →github.com/topics/design-to-code ↗

Hot right now

Most stars gained in a day · Oct 17

+25

screenshot-to-code

abi/screenshot-to-code · ★ 80.4K

Screenshot-to-code converts screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI models like GPT, Claude, and Gemini.

+23

ux-ui-agent-skills

plugin87/ux-ui-agent-skills · ★ 2K

A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

+13

onlook

onlook-dev/onlook · ★ 26.9K

Onlook is an open-source, AI-first visual editor for designing on top of your Next.js + Tailwind codebase. You edit elements directly in the browser DOM like a design tool, and the changes map back to real code in real time.

+10

easy-vibe

datawhalechina/easy-vibe · ★ 19.8K

Easy-Vibe is a beginner-friendly course from Datawhale ('vibe coding 101') that teaches AI-native product building: learning to code by shipping real products, from a first idea to a working app.

The all-time top

10 projects · by stars

  1. #1 · abi/screenshot-to-code

    screenshot-to-code

    Screenshot-to-code converts screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI models like GPT, Claude, and Gemini.

    80.4K
  2. #2 · onlook-dev/onlook

    onlook

    Onlook is an open-source, AI-first visual editor for designing on top of your Next.js + Tailwind codebase. You edit elements directly in the browser DOM like a design tool, and the changes map back to real code in real time.

    26.9K
  3. #3 · datawhalechina/easy-vibe

    easy-vibe

    Easy-Vibe is a beginner-friendly course from Datawhale ('vibe coding 101') that teaches AI-native product building: learning to code by shipping real products, from a first idea to a working app.

    19.8K
  1. 4

    Figma-Context-MCP

    16KGLips/Figma-Context-MCP · TypeScript

    It's the Framelink MCP server: it gives AI coding agents like Cursor direct access to your Figma files, so they can implement designs from real layout and styling data in one shot.

  2. 5

    mitosis

    14.4KBuilderIO/mitosis · TypeScript

    Mitosis is a compiler that lets you write a UI component once and compile it to native code for React, Vue, Angular, Svelte, Solid, Qwik, Alpine, and other frameworks.

  3. 6

    draw-a-ui

    13.6KSawyerHood/draw-a-ui · TypeScript

    An app that lets you draw a UI wireframe on a canvas and uses GPT-4 Vision to generate a working HTML page (with Tailwind) based on the sketch.

  4. 7

    open-codesign

    8.1KOpenCoworkAI/open-codesign · TypeScript

    An open-source, MIT-licensed desktop app that turns prompts into polished prototypes, slide decks, and marketing assets — positioned as an alternative to Claude Design, v0, Lovable, and Figma AI.

  5. 8

    Kun

    6.3KKunAgent/Kun · TypeScript

    Kun is a local-first AI agent workspace that takes AI from answering questions to completing real work — coding, writing, design and automation — planning, editing files, running checks and leaving evidence beside each task.

  6. 9

    design-extract

    4.3KManavarya09/design-extract · HTML

    Designlang (the 'design-extract' CLI) points a headless browser at any live URL and reads the site's complete design system off the DOM in one command, emitting 17+ files including DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, component anatomy, and brand voice.

  7. 10

    ux-ui-agent-skills

    2Kplugin87/ux-ui-agent-skills · JavaScript

    A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

Often tagged together