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 →
- Open Figma.
- Run
Plugins → Genable. - Paste an API key in Settings (any of the protocols below).
- 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.
| Protocol | Examples | Get a key |
|---|---|---|
| Google Gemini | Gemini 2.5 Pro / Flash | aistudio.google.com |
| Anthropic Claude | Claude 4.7 Sonnet / Opus | console.anthropic.com |
| OpenAI-compatible | OpenRouter, DashScope (Qwen), Kimi K2.5, custom endpoints | varies |
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:
Sponsorship pays for development time, model API quotas during testing, and ongoing improvements.
License
MIT — free for personal and commercial use.
