Genable

Quality-first AI UI generator for Figma. Prompt to dashboard, landing page, or mobile app. Bring your own model: Gemini · Claude · OpenAI-compatible.

Why Genable

Most AI design plugins ship flat mockups or images. Genable is built around quality — every output is a real, editable Figma layer tree with proper Auto Layout, components, variables, and typography.

• Editable, not flattened — real Frames, Auto Layout, and Text nodes. Not images, not screenshots.

• Quality-first — fights the generic AI-slop look. Hierarchy, spacing, and contrast that match production design systems.

• Multi-protocol, BYOK — pick your model. The plugin speaks three API protocols natively.

• Context aware — select an existing layer, and Genable matches its width, fonts, and colors.

• Free — no subscription. Your API key, your usage, your bill.

Bring your own model

Genable supports three API protocols. Pick whichever you have keys for:

Switch models any time from the Settings panel. Keys are stored locally on your device.

Screenshots

Install

Install from Figma Community →

1. Open Figma.

2. Run Genable from Plugins → Genable.

3. Open Settings, paste an API key for any of the supported protocols.

4. Type a prompt. Hit generate.

Examples

Try prompts like:

• "A modern pricing card with 3 tiers and a featured plan"

• "Dark-mode analytics dashboard with sidebar, KPI grid, and a line chart"

• "Mobile onboarding flow — 3 screens with illustrations and progress dots"

• "Landing page hero for a dev tool — headline, subline, CTA, and a code preview"

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

For developers — MCP server

Want to drive Genable from Claude Code, Cursor, or Cline instead of the Figma UI? Use genable-mcp — the same engine, exposed as a write-side MCP server. Pairs with Figma's official read-only MCP for full read+write.

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

41 tools for building and editing Figma designs from any MCP client — JSX tree creation, variables/tokens, components, cross-page navigation, visual verification. Full docs on npm →

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.