{"slug": "claude-code-and-mcp-make-brilliant", "title": "Claude Code and MCP make Brilliant.", "summary": "Brilliant.design, a design tool, now integrates with OpenAI Codex via the Model Context Protocol (MCP), enabling AI agents to read and modify canvas elements directly. In a test, importing a Figma portfolio and using MCP allowed Codex to match the existing design system's border radius, spacing, and typography when generating new sections. The tool's 'Blueprint' language and React export support a design-to-code pipeline, turning design into structured data for AI-assisted development.", "body_md": "# Claude Code and MCP make Brilliant.\n\nI decided to put Brilliant.design through a real-world stress test. Instead of starting with a blank canvas, I imported a developer portfolio I had in Figma to see if the tool could actually handle an existing design system or if it would just hallucinate a new one.\n\n## The [MCP](/en/tags/mcp/) and Codex Integration\n\nThe most interesting part of the setup is the Model Context Protocol (MCP) connection. By connecting OpenAI Codex via MCP, I could essentially treat the visual canvas as a data source for the terminal. This isn't just \"chatting with a bot\"; the agent can actually inspect the canvas elements and modify them.\n\nI tested this by asking Codex to analyze the imported portfolio's styling—specifically the border radius, spacing, and typography—and then requested a new section. Because it was reading the actual design properties through the MCP bridge, the generated elements actually matched the existing design system rather than just \"looking similar.\"\n\n## Testing the Design-to-Code Pipeline\n\nFor those of us who care about the actual implementation, the \"Blueprint\" language is the secret sauce here. It's a compact representation of the canvas elements and their relationships, which means the AI isn't just guessing based on pixels.\n\nIf you're trying to set up a real-world deployment, here is the general workflow I followed:\n\n1. Import the Figma file (this brings over vectors, auto-layout, and fills as editable objects).\n\n2. Use the MCP connection to link an [AI agent](/en/tags/ai%20agent/) (like Codex) to the project.\n\n3. Run a command to inspect the existing design tokens.\n\n4. Generate new canvases (e.g., a \"Projects\" page) based on the homepage's established patterns.\n\n5. Export the final result.\n\nThe export options are decent, covering the basics like HTML/CSS and SVG, but the React export is where the value is. Because the AI agent can read the design via MCP, you can feed those design specs directly into a coding agent to implement the UI in your codebase.\n\n- **Figma Import:** Full support for auto-layout and vectors; not just a static image.\n- **AI Providers:** Supports Codex and several other agents as built-in providers.\n- **Output Formats:** React, HTML, CSS, SVG, and PDF.\n- **State Management:** The \"Playground\" mode allows you to test AI workflows using bundled demos before you even connect your own API keys.\n\nThe real win here is that the design becomes a living part of the AI-assisted workflow. Instead of a hand-off where a designer gives a dev a Figma link and the dev spends three hours trying to find the exact hex code for a shadow, the agent just reads the Blueprint and writes the CSS. It turns the design phase into a structured data problem rather than a visual guessing game.\n\n[Next Can we actually run multiple browser agents in parallel without →](/en/threads/8938/)", "url": "https://wpnews.pro/news/claude-code-and-mcp-make-brilliant", "canonical_source": "https://promptcube3.com/en/threads/8987/", "published_at": "2026-09-07 16:01:01+00:00", "updated_at": "2026-09-07 16:27:48.398138+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "developer-tools"], "entities": ["Brilliant.design", "OpenAI Codex", "Model Context Protocol (MCP)", "Figma"], "alternates": {"html": "https://wpnews.pro/news/claude-code-and-mcp-make-brilliant", "markdown": "https://wpnews.pro/news/claude-code-and-mcp-make-brilliant.md", "text": "https://wpnews.pro/news/claude-code-and-mcp-make-brilliant.txt", "jsonld": "https://wpnews.pro/news/claude-code-and-mcp-make-brilliant.jsonld"}}