UI & Design to Code

Collaborative design platform

Figma is the industry-standard collaborative design platform for UI/UX work, prototyping, and design systems. Runs in the browser with real-time multiplayer editing, components, auto-layout, variants, dev mode, plugins, and FigJam whiteboards. Integrates with AI design-to-code tools like Lovable, v0, Builder.io, and Anima to turn frames into production React, Vue, or iOS/Android code.

Build and share ML web apps in Python with a few lines of code

Gradio is a 42K+ star Apache-2.0 Python library for building interactive web interfaces around machine-learning functions and apps. It supports 40+ components for text, images, audio, video, 3D, chat, plots, JSON, and dataframes. Apps can be hosted free on Hugging Face Spaces, shared through public links, or extended with server-side rendering, streaming, API clients, and MCP server support.

Design-system-aware AI prototyping for code-ready product interfaces

Magic Patterns turns product ideas, prompts, screenshots, and existing UI into editable, code-ready interfaces. Its design-system-aware editor supports collaborative iteration, two-way GitHub sync, and an MCP workflow for moving designs between the canvas and coding agents—positioning it between prompt-to-app builders and design-handoff tools rather than as a single-screen generator.

Vercel's AI UI generator

Vercel's AI-powered UI generation tool that creates production-ready React and Next.js components from text or image prompts. Outputs clean code using shadcn/ui and Tailwind CSS, deployable to Vercel or copyable into existing projects. Supports iterative refinement through conversation, live browser preview, and generates accessible, responsive code. Ideal for rapidly prototyping landing pages, dashboards, forms, and UI components without manual setup.

Zero-runtime CSS-in-JS framework with type-safe style authoring

Panda CSS is a zero-runtime CSS-in-JS framework that generates atomic CSS at build time from type-safe style definitions. It provides the developer experience of CSS-in-JS with runtime performance of static CSS extraction. Supports design tokens, responsive styles, conditional variants, and recipes for component style APIs. 335K+ weekly npm downloads for @pandacss/dev with RSC compatibility.

Open-source visual editor for React — self-hostable core, optional Puck Cloud

Puck is an open-source visual page builder for React that gives teams a drag-and-drop editor backed by their own components. The MIT-licensed core remains self-hostable and persists plain JSON, while Puck Cloud and Puck AI now add optional hosted and agentic editing layers. With 12.8K+ stars, it is the dev-first visual editor to watch.

Full-stack app builder in the browser

AI-powered browser-based full-stack app builder from StackBlitz that turns natural language prompts into working web applications with zero local setup. Runs on WebContainers — a full Node.js runtime in the browser — giving AI control over filesystem, packages, terminal, and dev server. Supports React, Next.js, Vue, Astro, Svelte with live preview and one-click deploy to Netlify or Vercel. V2 adds built-in databases, auth, storage, and hosting via Bolt Cloud. 5M+ users.

MCP server that gives coding agents structured Figma context for design-to-code work

Figma Context MCP is an MCP server for giving coding agents structured access to Figma design context during implementation. Instead of copying screenshots or hand-written design specs into prompts, teams can expose layout, component, and context information to agents such as Cursor, Claude Code, and other MCP-compatible coding workflows. It is a strong design-to-code bridge for teams trying to reduce hallucinated UI details and tighten handoff between designers and AI-assisted developers.

Editable UI flows from prompts, screenshots and sketches

AI-assisted product-design platform that turns prompts, screenshots and hand-drawn sketches into editable UI flows for non-designers and early product ideation, complementing rather than duplicating developer-first code generators.

Official remote MCP server for design-to-code and write-to-canvas Figma workflows.

Figma MCP Server is Figma’s official remote Model Context Protocol surface for design-to-code agents. It gives supported clients structured design context, variables, components, selected-frame code context, Code Connect mappings, and beta write-to-canvas tools for creating or updating native Figma frames from an MCP client while keeping the workflow tied to Figma files.

AI full-stack app builder

Build production-ready applications from text and image prompts. Full-stack with Supabase backend, authentication, and one-click deployment. Formerly GPT Engineer, backed by top investors. Targets non-technical founders and product teams who want to go from idea to deployed app in minutes, with AI handling both frontend UI and backend infrastructure setup.

Build software with AI

Browser-based IDE and cloud platform with a built-in AI agent that builds full-stack applications from natural language prompts. Supports 50+ languages with instant hosting, multiplayer collaboration, built-in databases (PostgreSQL, key-value), secrets management, and one-click deployment. Used by 30M+ developers for prototyping, learning, and shipping apps. Features Ghostwriter AI for code completion. Popular for hackathons, education, and rapid MVP development.

Read/write MCP bridge between AI coding agents and Figma

Talk to Figma MCP is an MIT-licensed bridge from Grab that connects Cursor, Claude Code, and other MCP-capable agents to Figma through a local MCP server, WebSocket bridge, and Figma plugin. Unlike read-only context servers, it can inspect selections, create or modify nodes, update text in bulk, and automate design operations, so teams should review permissions before enabling write access.

Design and publish production websites

Visual website builder combining intuitive design tools with one-click publishing. Create responsive, animated sites without writing code, with React-based output under the hood. Includes built-in CMS, forms, and analytics. Popular among designers and startups who want pixel-perfect websites with interactions and animations that rival custom-coded sites.

npm for design engineers — shadcn/ui component marketplace

21st.dev is the largest open-source marketplace of shadcn/ui-based React Tailwind components, blocks, and hooks. Used by 1.4M developers with 200K monthly active users. Functions as an MCP server enabling AI coding agents to discover and compose UI components via API. Features a Magic AI feature that generates components from natural language prompts. All components installable with npx shadcn.

Turn Figma designs into React code

Anima is a design-to-code platform that transforms Figma, Sketch, and Adobe XD designs into production-ready frontend code, bridging the gap between design and development teams. Automatically converts visual designs into clean HTML, CSS, React, and Vue. Designers can add interactions, responsive breakpoints, and real data, turning static mockups into functional prototypes developers can ship.

Interactive architecture diagram and visual delta engine for AI agents

Archify is an open-source AI agent skill with 37,000+ GitHub stars that compiles typed JSON intermediate representations into interactive, animated system architecture diagrams with motion and visual delta diffs for Claude Code and Cursor.

Headless UI component library for React, Vue, Solid, and Svelte

Ark UI is a headless component library providing unstyled, accessible UI primitives for React, Vue, Solid, and Svelte. Built by the Chakra UI team using state machines for predictable behavior across frameworks. Includes complex components like date pickers, color pickers, comboboxes, and tree views that are notoriously difficult to build from scratch while maintaining accessibility.

Connect Blender to AI through Model Context Protocol

BlenderMCP bridges Blender and AI assistants like Claude through the Model Context Protocol, enabling natural language control over 3D modeling workflows. Artists and developers can create, modify, and manipulate 3D scenes, objects, materials, and animations by describing what they want instead of navigating complex menus. The tool exposes Blender's Python API through MCP, supporting operations from mesh creation to shader editing and physics simulations.

Visual CMS and headless page builder

Builder.io is a visual development platform that lets teams create and optimize web and mobile content using a drag-and-drop editor that integrates directly with existing codebases and tech stacks (React, Next.js, Qwik, etc.). Empowers non-technical team members to publish and update digital experiences without waiting on developers. Includes headless CMS, A/B testing, and AI-powered Visual Copilot design-to-code.

High-performance 2D UI layout library in C

Clay is a high-performance 2D UI layout library written as a single C header file that implements a flexbox-like layout model with microsecond-level performance. It uses static arena-based memory allocation with no malloc or free calls, keeping total memory usage under 4MB for thousands of elements. Clay is renderer-agnostic, outputting sorted rendering primitives that work with any 3D engine, SDL, or can compile to HTML via WebAssembly.

Full-stack framework for building AI copilots with generative UI

CopilotKit is an open-source full-stack framework for building AI-native applications with generative user interfaces. It provides React and Angular SDKs that enable agents to dynamically generate and render UI components, synchronize state between frontend and backend in real time, and implement human-in-the-loop workflows. Supports integration with LangChain, LangGraph, CrewAI and protocols including AG-UI, MCP, and A2A for standardized agent interaction.

AI-powered app builder from text prompts

Generate full-stack web applications from natural language prompts. Create.xyz produces interactive prototypes and production-ready apps with databases, authentication, and API integrations. Designed for non-technical founders and product teams who want to build and iterate on ideas rapidly without writing code from scratch.

Local open-source AI app builder running entirely on your machine

Dyad is a local-first, open-source AI app builder with 20,000+ GitHub stars that provides a Lovable and Bolt.new alternative running entirely on your machine. It supports React and Next.js frameworks, integrates with Ollama for fully offline AI generation, and works cross-platform on macOS, Windows, and Linux with both cloud and local LLM providers.

Ultra-fast desktop apps with TypeScript, Bun, and Zig

Electrobun is an open-source cross-platform desktop app framework that combines TypeScript with Bun runtime and Zig for native performance. It produces 12MB base installs versus hundreds of MB for Electron, while maintaining full web technology compatibility. Electrobun uses the system's native webview instead of bundling Chromium, delivers sub-second cold starts, and provides native OS integrations through a Zig bridge layer.

Python web framework with HTMX, no JavaScript needed

FastHTML is an open-source Python web framework by Answer.AI that renders HTML directly from Python functions using HTMX. It eliminates the JavaScript build step entirely, letting developers create interactive web apps with pure Python. FastHTML is designed for AI demo apps, admin tools, and internal tooling where full-stack simplicity matters more than SPA complexity. Built by Jeremy Howard's team.

Turn a Figma design system into a programmable API for AI assistants

Figma Console MCP is open-source design-system infrastructure that exposes Figma to AI assistants through MCP. It supports structured extraction, design creation and editing, debugging, accessibility audits, and bidirectional design-token workflows across local, remote read-only, and paired cloud modes; it is not a generic one-click Figma-to-code exporter.

Design-to-code handoff and CSS generation

Figma Dev Mode is a dedicated workspace within Figma designed specifically for developers to inspect designs, extract code snippets, and access implementation details without navigating the full design environment. It solves the design-to-development handoff problem by providing a focused, code-oriented view with measurements, component properties, design tokens, and ready-to-use code in CSS, iOS, and Android formats.

Builder.io visual canvas with Figma-to-code and code-to-Figma sync

Fusion by Builder.io is a visual development canvas that provides bidirectional sync between Figma designs and production code. Designers edit in Figma while developers work in code, and changes propagate in both directions. Supports React, Vue, Svelte, Angular, and Qwik output with a visual editor for non-developers to make content and layout changes without touching code.

Completely unstyled, accessible UI components for React and Vue by Tailwind Labs.

Headless UI is an open-source collection of completely unstyled, accessible UI components for React and Vue, created by the Tailwind CSS team. Provides WAI-ARIA compliant components like Menu, Listbox, Switch, Dialog, Popover, Tabs, and more. Designed to pair perfectly with Tailwind CSS.

AI-powered design to frontend code

Locofy is a design-to-code platform that converts Figma and Adobe XD designs into production-ready frontend code with high fidelity. Uses AI to automatically generate clean, responsive HTML/CSS/React/Next.js/React Native code from design files — eliminating labor-intensive manual translation. Includes Locofy Lightning for one-click conversion and Builder mode for custom components.

MCP server for AI-powered UI component generation

Magic MCP is an MCP server from 21st.dev that enables AI agents to generate polished UI components inspired by modern design engineering patterns. It gives coding agents access to a library of high-quality component templates and design patterns, accelerating frontend development through intelligent component scaffolding.

Collection of 150+ animated React components for landing pages

Magic UI provides over 150 animated React components designed for creating visually impressive landing pages and marketing sites. Components include animated text effects, particle backgrounds, scroll-triggered animations, 3D cards, and interactive elements built on Tailwind CSS and Framer Motion. Copy-paste installation model following the shadcn/ui pattern.

Write components once and compile them into native code for multiple frameworks

Mitosis is Builder.io-backed open-source infrastructure for writing a component once and compiling it into native framework components for React, Vue, Angular, Svelte, Qwik, Solid, React Native, and other targets. It supports cross-framework design systems and Figma-to-code synchronization, but is distinct from the Builder.io visual builder product.

Production-ready React animation library, evolved from Framer Motion

Motion (formerly Framer Motion) is the most popular React animation library, providing a declarative API for complex animations, gestures, layout transitions, and scroll-triggered effects. Supports spring physics, keyframes, shared layout animations, and exit animations. Powers animations across thousands of production React applications with an API designed for developer ergonomics.

Animated number transition component for React and frameworks

NumberFlow is a lightweight component that animates number transitions with smooth morphing effects. Numbers roll, slide, and transform between values rather than snapping instantly, adding polish to dashboards, pricing displays, counters, and financial interfaces. Available for React, Vue, Svelte, and vanilla JS with over 6,300 GitHub stars and minimal bundle impact.

AI-native open-source design editor and Figma alternative

OpenPencil is an AI-native, open-source design editor for teams that want a Figma-like canvas with source-visible code and experimental AI design workflows. It is best framed as OpenPencil by the open-pencil project, separate from the same-name ZSeven-W repo, and useful for early UI prototyping, design-to-code exploration, and open-source visual editing pilots.

Open-source UI generation from natural-language prompts

OpenUI is an Apache-2.0 design-to-code tool from W&B that turns natural-language interface prompts into live HTML previews and frontend code. Teams can run it locally or with Docker, connect OpenAI, Groq, LiteLLM-compatible providers, or Ollama, and export generated UI toward React, Svelte, Web Components, and related workflows. It fits rapid UI mockups where developers want editable code instead of screenshots.

Copy-paste React component collection built on Tailwind v4

Origin UI is a curated collection of copy-paste React components built with Tailwind CSS v4 and Radix UI primitives. It provides production-ready UI patterns for dashboards, forms, navigation, data tables, and settings panels. Components are designed to be dropped directly into projects with minimal modification, following modern design conventions with dark mode support.

Open-source design and prototyping

Open-source design and prototyping platform offering a free, web-based alternative to Figma and Sketch with self-hosting and no team-size limits. Penpot uses SVG and CSS as native formats for inherent web compatibility, with real-time multiplayer collaboration, vector editing, interactive prototyping, components with variants, design tokens, flex layouts, and Figma file import.

Visual builder for React with headless CMS

Plasmic is a visual page builder and design tool that integrates directly into existing codebases, letting teams create and manage web pages with a Figma-like canvas while keeping production code under version control. Non-developers can ship marketing pages and CMS content, while engineers expose React components for visual editing. Supports Next.js, Gatsby, Remix, and any React framework.

Unstyled, accessible React component primitives for building design systems.

Radix UI is an open-source library of unstyled, accessible React component primitives. Provides fully functional components (dialog, dropdown, tooltip, tabs, accordion, etc.) without any styling, letting developers apply their own design. The foundation behind shadcn/ui. WAI-ARIA compliant with keyboard navigation built in.

React meta-framework for enterprise CRUD apps

Refine is an open-source React meta-framework for building data-intensive enterprise applications like admin panels, dashboards, and internal tools. Its headless architecture separates business logic from UI, supporting Ant Design, Material UI, Mantine, and Tailwind CSS. Connects to 15+ backends including REST, GraphQL, Supabase, Firebase, Strapi, and Hasura with built-in authentication and role-based access control. Deploys on Next.js, Remix, React Native, and Electron.

AI website wireframe and design generator

Generate complete website sitemaps and wireframes with AI in minutes. Relume outputs Figma and Webflow-ready component libraries, with a built-in library of 1000+ components and style guides. Ideal for designers and agencies who need to rapidly prototype client projects without starting from scratch every time.

Create videos programmatically with React

Remotion is a React framework that enables developers to create videos programmatically using familiar web technologies. Build videos as React components, leveraging CSS, Canvas, SVG, and WebGL for rendering. The framework includes Remotion Studio for browser-based preview with timeline scrubbing and fast refresh. Render locally, on servers, or via AWS Lambda for scalable video production. Ideal for automating social media content, data visualizations, and personalized marketing campaigns.

Component toolkit for live code playgrounds

Sandpack is a component toolkit by CodeSandbox for building live-running code editing experiences directly in the browser. It bundles a full in-browser JavaScript bundler, CodeMirror editor, and preview pane into embeddable React components with npm dependency support, hot module reloading, and error overlays. Sandpack powers the interactive examples on the official React documentation and supports templates for React, Vue, Svelte, and vanilla JavaScript.

Browser-native frontend coding agent for production codebases

Stagewise is an open-source frontend coding agent with 6,500+ GitHub stars that runs directly in the browser on localhost. YC S25 backed, it lets developers and designers point-and-prompt on live web applications with full devtools and console access, bridging the gap between visual editing and production codebase modification.

UI component workshop

Storybook is an open-source workshop for building, documenting, and testing UI components in isolation. Render every visual state of React, Vue, Angular, Svelte, or Web Components, write interaction tests, visual regression tests, and accessibility checks, and publish a living design reference. Trusted by thousands of teams including GitHub, Airbnb, Shopify, and Microsoft as their single source of UI truth.