Genable

Hand off the design busywork. Detailed prompt in. Fully editable Figma layers out — components typed, variables bound, variants generated, pages laid out.

Why Genable

Most AI design tools ship a flat image or a templated mock. Genable is agentic — it plans, executes against Figma's scene graph through typed tools, and verifies its work. The output is real, editable Figma layers, not screenshots.

• Real layers — Frames with Auto Layout, real Text, real Components — not flattened images.

• Variables, not pasted hex — Color, typography, and spacing bound to variables with light and dark modes.

• Variants together — Light, dark, and brand-color themes generated in one pass, switchable in a click.

• Whole pages — Hero, pricing, features, FAQ laid out as proper sections — not a slab of nodes.

• Detailed prompts welcome — We don't sell prompt brevity. The more specific you are, the better the result.

What you can hand off

Three steps

Two surfaces, one engine

Use Genable as a Figma plugin (designers) or as the genable-mcp MCP server (Claude Code, Cursor, Cline, Continue, Zed, or any MCP-compatible agent). Same engine, same 41 tools.

Install the plugin

Install from Figma Community →

1. Open Figma.

2. Run Plugins → Genable.

3. Paste an API key in Settings (any of the protocols below).

4. Type a detailed prompt. Hit generate.

Install the MCP server

For agent-driven workflows. Pair with the official Figma MCP for full read + write.

{
  "mcpServers": {
    "genable": { "command": "npx", "args": ["-y", "genable-mcp"] }
  }
}

41 tools — JSX tree creation, variables, components, cross-page navigation, visual verification. Full docs on npm →

Bring your own model

Genable speaks three protocols natively. Pick whichever you have keys for — keys stay on your device.

Switch models any time from the Settings panel.

Examples

Detail helps. Try prompts like:

• "SaaS pricing page — 3 tiers, monthly/annual toggle, featured Pro plan, dark mode, brand color bound to variables."

• "Analytics dashboard — sidebar, KPI grid with sparklines, a hot-state table row, dark + light variants, bound to brand tokens."

• "Mobile onboarding — 3 screens with progress dots, illustrations, brand color blue (#4F90EE)."

• "Landing page hero — headline + subline + dual CTA + code preview card, Inter typography, 8pt spacing scale."

Genable returns a real, editable Figma frame you can drop straight into a design system.

Sponsor

Genable is built and maintained by one developer, in the open. If it saves you time or replaces a paid tool, please consider sponsoring:

💖 Sponsor on Patreon

Sponsorship pays for development time, model API quotas during testing, and ongoing improvements.

License

MIT — free for personal and commercial use.