Extend Your Design Workflow: Introducing Brono MCP

In the fast-paced world of product design and development, the "handoff" has always been a bottleneck. We design in one tool, code in another, and use AI assistants in a third. But what if your AI coding assistant could "see" your designs, audit your UX, and pull production-ready code directly from your canvas?

Today, we’re bridging that gap with Brono MCP.

What is Brono MCP?

Brono MCP leverages the Model Context Protocol (MCP)—an open standard that allows Large Language Models (LLMs) like Claude and Gemini to seamlessly connect with external data and tools. By turning Brono into an MCP server, we’re allowing your favorite AI environments to interact directly with your design projects.

Instead of manual exports and constant context-switching, you can now bring your entire Brono workspace into your development environment.

Powerful Design Methods at Your Fingertips

To give your AI assistant the right context, you'll use unique IDs from your Brono Canvas. This ensures the AI pulls exactly what you're looking at, rather than guessing.

Finding Your IDs:

• For Individual Screens: To use get_design_code, get_audit_report, or get_design_image, you need a Screen ID. Select the screen on your Canvas, look at the Sidebar, click More, and select Copy Screen ID.
• For Groups: To use get_group_designs, select the Group on your Canvas, go to the Sidebar, click More, and select Copy Group ID.
• For Full Projects: To use get_project_designs, simply use the Project URL from your browser's address bar.

Power Prompts: Design-to-Code in Seconds

Once you have your IDs, you can talk to Brono through your AI assistant just like a teammate. Here are a few examples of how you can prompt:

• To get code: "Get from brono this design code [id]"
• To fetch multiple designs: "Can you get these designs? [id]"
• To pull an entire group: "Get the designs from this group [id]"

Available Methods

• get_design_code: Fetches production-ready HTML and Tailwind CSS code directly from specified Brono design generations.
• get_audit_report: Retrieves detailed UX/UI audits and review reports generated by Brono’s analysis engine.
• get_design_image: Obtains a direct image URL rendering for visual reference within your chat.
• get_project_designs: Pulls a comprehensive collection of all interactive designs from an entire project.
• get_group_designs: Retrieves layout screen images specifically from a defined canvas group.

Setup & Availability

Pricing: We are committed to providing the best tools for high-velocity teams. Brono MCP is available exclusively for Pro and Ultra Plan subscribers. Upgrading unlocks this deep integration, allowing you to bypass the manual work of design-to-code translation.

Connection Guide:

• Claude Desktop: Navigate to Settings → Connectors → Add custom connector. Enter the name brono and your unique remote server address found in your dashboard.
• Antigravity: Open Settings → MCP Servers → Add Server. Input the name brono and your unique Server URL.

Why This Matters

The future of design isn’t just about prettier screens; it’s about better decisions, faster. By integrating Brono MCP into your workflow, you’re enabling a "design-aware" AI. Your coding assistant doesn't just guess the padding or the color palette—it queries your actual design system.

Ready to level up? Upgrade to a Pro or Ultra plan today and grab your MCP link from the Brono dashboard.