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

Convert any web design screenshot to clean HTML/CSS code

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.

Builder.io for VSCode - turn designs into code!

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

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

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

OpenKombai: A free, privacy-first alternative to Kombai. Instantly convert screenshots and designs into production-ready React + Tailwind code using local LLMs (Llama 3.2 Vision & Qwen 2.5). No API keys, zero cloud costs.

VS Code extension — annotate Figma designs alongside code, export structured prompts for AI-assisted implementation. Works with cursor-talk-to-figma MCP.

Token Weaver is a GitHub Action to transform the Figma Token Studio tokens to platform specific theme files

把蓝湖设计稿整理成让 AI 生成代码还原页面的上下文

Bidirectional sync between Pencil.dev designs and frontend code via Claude Code

The missing piece of the AI + Figma loop. Create and edit designs directly on the Figma canvas from Claude, Cursor, VS Code, or any MCP app. One command. No API key. No plugin. Just npx tellfigma.

A Figma plugin that helps to transform Figma Design Systems to Vue components with UnoCSS utility classes.

figma to html structure json