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

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

Connect straight from claude.ai or ChatGPT - zero install. AI reads & builds in Figma.

no codebootstrapcssno code tooldesign to codehtmltailwindlow codehtml5angular

Plugin Preview

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

About this plugin

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

Plugin Details

Version20
CreatedDecember 28, 2024
Last UpdatedJuly 23, 2026
CategorySoftware development
CreatorZapCode
Stats96 installs, 19 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:./ui.html
  • main:./code.js
  • Document Access:dynamic-page
  • Network Access:

    ZapCode requires network access to connect to the hosted Zapcode MCP bridge for MCP client integrations, Supabase for authentication and Database, and Stripe for payment processing. Your data is safe and only transits Zapcode's servers as a transient relay to Figma.

  • Editor Types:
    figma
  • Allowed Domains:
    • https://bupvbzpykwtudyqjdpsg.supabase.co
    • https://zapcode-mcp.onrender.com
    • wss://bupvbzpykwtudyqjdpsg.supabase.co
    • wss://zapcode-mcp.onrender.com