The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
-
Updated
Jun 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 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+.
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
Figma → React Native
Design to Code Engine
A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
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.
Turn UI screenshots into clickable Codex demos with code UI and real image2 assets.
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
A CLI for generating Flutter themes from Figma files
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.
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."