The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
-
Updated
Jul 9, 2026 - TypeScript
The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
Open-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.
Convert any website to editable Figma designs
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
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
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
Figma Plugin & MCP server to bypass API limits
Figma → React Native
Design to Code Engine
A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
Turn UI screenshots into clickable Codex demos with code UI and real image2 assets.
Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.
200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
A CLI for generating Flutter themes from Figma files
Local Figma MCP server with no REST rate limits, no metered tool-call quotas, and a verification loop. Drop-in alternative to Figma's Dev Mode MCP and Framelink for Claude Code, Cursor, Windsurf — works on every plan including Free.
Add a description, image, and links to the design-to-code topic page so that developers can more easily learn about it.
To associate your repository with the design-to-code topic, visit your repo's landing page and select "manage topics."