\n\n
![\"Genable\"](\"./assets/logo.svg\")
\n\n# Genable\n\n**Use your model. Keep the design.**\n\nTurn a detailed brief into native, editable Figma structure you can inspect and refine.\n\n[](https://www.figma.com/community/plugin/1583731690321161934)\n[](https://genable.pages.dev)\n[](https://www.npmjs.com/package/genable-mcp)\n[](https://www.patreon.com/c/musec)\n\n
![\"Use](\"./assets/cover.png\")
\n\n
![\"Genable](\"./assets/screenshot-1.png\")
\n\n---\n\n## A visual direction, not a preset shell\n\nGeneric output often begins with a generic brief. Genable's design guidance\npushes the model to treat composition, hierarchy, typography, density, rhythm,\nsurfaces, and data presentation as connected decisions—not as a card grid with\na new accent color.\n\nNo tool can guarantee taste. The model, source material, and judgment still\nmatter. Genable keeps intent explicit and the result inspectable so refinement\nstays inside the workflow.\n\n![\"A](\"./assets/screenshot-3.png\")
\n\n---\n\n## Choose the model that fits the brief\n\nThe Figma plugin supports provider presets and configurable compatible\nendpoints across three protocol families. It validates the provider before the\nfirst run and lets you switch models later without hard-coding this page to a\nspecific model version.\n\n| Protocol | Typical connections |\n|---|---|\n| **OpenAI-compatible** | OpenAI, OpenRouter, Moonshot, DeepSeek, DashScope, compatible endpoints |\n| **Anthropic-compatible** | Anthropic and compatible endpoints |\n| **Gemini** | Google AI Studio |\n\nProvider credentials are stored in Figma client storage. Requests go to the\nendpoint you configure; some presets can use a relay when browser-network\nconstraints require it. Provider billing and limits still apply.\n\n---\n\n## One engine, two ways into Figma\n\n![\"Use](\"./assets/screenshot-2.png\")
\n\n### Inside Figma: the plugin\n\n1. [Install Genable from Figma Community](https://www.figma.com/community/plugin/1583731690321161934).\n2. Add a supported provider or compatible endpoint in Settings.\n3. Describe the design in detail, then inspect and refine the native layers in\n conversation.\n\n### From an MCP client: `genable-mcp`\n\nUse the model already configured in a STDIO MCP client. `genable-mcp` provides\na local, plugin-backed bridge for creating, editing, inspecting, and visually\nverifying Figma designs; it does not require a second model API key inside\nGenable.\n\n```json\n{\n \"mcpServers\": {\n \"genable\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"genable-mcp\"]\n }\n }\n}\n```\n\nKeep the Genable plugin running in Figma desktop, then ask your client to list\nthe pages in the current file. See the [current package docs](https://www.npmjs.com/package/genable-mcp)\nfor client-specific setup and the live tool schema.\n\n---\n\n## Example briefs\n\nDetail gives the model a real direction to work with. Adapt one of these to your\nproduct rather than treating it as a guaranteed output recipe:\n\n- *“SaaS pricing page — three tiers, monthly/annual toggle, featured Pro plan,\n dark mode, and brand color bound to variables.”*\n- *“Analytics dashboard — sidebar, KPI grid with sparklines, compact holdings\n table, dark and light modes, and a calm editorial hierarchy.”*\n- *“Mobile onboarding — three screens with progress, illustration direction,\n named type scale, spacing rhythm, and one clear primary action.”*\n- *“Landing hero — audience and value proposition first, dual CTA, code preview,\n Inter typography, and an 8pt spacing scale.”*\n\n---\n\n## Sponsor\n\nGenable is maintained by one developer. Sponsorship supports development time,\nreal-model evaluation, and ongoing plugin and MCP improvements.\n\n**[Sponsor on Patreon →](https://www.patreon.com/c/musec)**\n\n---\n\n## License\n\nThe material in this public repository and the `genable-mcp` package are\nMIT-licensed. The Figma Community plugin is free; model-provider usage may be\nbilled separately.\n\n---\n\n