Zapcode - AI Figma to Code Generator, Design & Wireframe Builder | Claude in Figma

Design with AI. Build in Figma. Ship production code. No install required.

Zapcode is the only Figma plugin that gives AI full two-way access to your designs - and now you can connect straight from the browser. No npx, no local server, no port config. Add Zapcode as a connector in claude.ai or ChatGPT and start designing and generating code in minutes.

Website, docs & setup guides: https://zapcode.pages.dev/NEW IN V19: CONNECT FROM ANYWHEREZero-install remote MCP connector —-works with browser-based AI chat, not just desktop apps.✦ Add Zapcode as a connector directly in claude.ai or ChatGPT — no local install✦ One-click connection key issuance from inside the plugin — no port hunting, no config files✦ Manage, label, and revoke keys anytime from the account page✦ Still works with Claude Desktop, Cursor, Cline, Windsurf, and every MCP-compatible toolHOW IT WORKS1. Open Zapcode in Figma Desktop or Figma Web2. Generate a connection key from the plugin — one click, no setup3. Add Zapcode as a connector in claude.ai, ChatGPT, or your MCP tool of choice4. Ask AI: "Design a login screen" or "Generate code from this frame"5. AI designs in Figma and/or generates your code — instantlyTWO-WAY AI DESIGN WORKFLOWFigma → AI: Share any frame as full design context (structure, styles, assets)AI → Figma: Let AI create and edit designs directly on your canvasNo other Figma MCP plugin does both - and now none require a local server either.WHY ZAPCODE MCP?

⚡ NO API RATE LIMITS - Unlimited usage via Plugin API (not REST)🌐 ZERO INSTALL - Connect from claude.ai or ChatGPT in the browser, no local setup🎯 WORKS ON ANY PLAN - No Figma paid plan requiredSUPPORTED AI TOOLSclaude.ai (browser) | ChatGPT (browser) | Claude Desktop | Claude Code | Cursor | Cline | Windsurf | Zed | Continue | GitHub CopilotTECH STACK FLEXIBILITYChoose your output format:• HTML/CSS (Tailwind or Bootstrap)• React• Angular• Vue• FlutterPRIVACY & SECURITY✓ Connection secured by a personal key you generate and can revoke anytime✓ Keys are shown once at creation - never stored in plaintext✓ Data flows only between Figma, Zapcode, and your chosen AI toolFREE DAILY CREDITSGet 10 Zapcoins daily on the Free plan. Need more power or advanced Pro commands? Upgrade to Pro directly in-plugin.REQUIREMENTS✓ Figma Desktop or Figma Web✓ An MCP-compatible AI tool - including claude.ai and ChatGPT in the browser, no install neededQUICK STARTStep 1: Open Zapcode in Figma → generate a connection keyStep 2: Add Zapcode as a connector in claude.ai, ChatGPT, or your AI toolStep 3: Ask AI to design or generate codeEverything you need: https://zapcode.pages.dev/Learn more about MCP: https://modelcontextprotocol.io