--- title: What If Your AI Coding Agent Could See and Edit Your Design? description: Brilliant.design is a design tool combining an editable canvas with AI, Figma import, MCP support, and developer export workflows. It now ships with a built-in... canonical: https://daily.dev/posts/what-if-your-ai-coding-agent-could-see-and-edit-your-design--4phac1zfx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What If Your AI Coding Agent Could See and Edit Your Design? | daily.dev og:description: Brilliant.design is a design tool combining an editable canvas with AI, Figma import, MCP support, and developer export workflows. It now ships with a built-in... og:url: https://daily.dev/posts/what-if-your-ai-coding-agent-could-see-and-edit-your-design--4phac1zfx og:image: https://api.daily.dev/og/posts/4phac1zfx.png og:image:alt: What If Your AI Coding Agent Could See and Edit Your Design? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What If Your AI Coding Agent Could See and Edit Your Design? **[Dev World](https://daily.dev/sources/dev_world)** · [@hadilbenabdallah](https://daily.dev/hadilbenabdallah) · 7 min read · 4 upvotes · 0 comments ## Summary Brilliant.design is a design tool combining an editable canvas with AI, Figma import, MCP support, and developer export workflows. It now ships with a built-in hosted AI (Brilliant AI) using Gemini 3.8 Flash for chat and Nano Banana 2 for image generation, requiring no API key setup. Users can still connect external AI providers or coding agents like Codex and Claude Code, and a local MCP server lets tools such as Cursor, Antigravity, and Windsurf read and edit the design canvas directly. Designs are stored in a text-based format called Blueprint and can be exported to React JSX, HTML, CSS, and other formats, letting coding agents use the canvas as context while building into an existing codebase. ## Content AI design tools can generate a polished screen in seconds, but generating the screen is only the beginning. You still need to edit it, keep the design consistent, work with existing files, and eventually turn the design into something your team can actually use. That is where Brilliant comes in. It combines an editable design canvas with AI, Figma import, external AI agents, and developer workflows, giving you more ways to move from an idea to a finished design. --- ## What Is Brilliant.design? [Brilliant.design](https://brilliant.design/) is a design tool built around a real editable canvas, AI agents, design systems, and developer-oriented workflows. You can work with frames, vectors, text, components, auto layout, effects, design tokens, and other native design elements directly on the canvas. The official product page also highlights Figma import, multi-canvas work, MCP, React export, HTML/CSS export, image generation, and version-control-oriented design files. And with Brilliant AI now built into the app, you can start using that workflow without configuring an external AI provider first. --- ## Brilliant AI Is Now Built In Brilliant AI is the default AI option in Brilliant. There is no API key or provider setup required before sending your first prompt. The AI is also connected to the canvas itself. It can create elements, edit existing ones, run layout commands, search across canvases, and export selected content. The important part is that the output remains **native**, **editable design elements**, not a flattened image. --- ## Gemini 3.8 Flash and Nano Banana 2 Are Part of the New Hosted AI The current Brilliant AI setup uses **Gemini 3.8 Flash** for chat and a Gemini image model for image generation. Brilliant's launch announcement also identifies the image model as **Nano Banana 2**, with additional models planned.  You don't need to think about model configuration before using the built-in assistant. For image generation, Brilliant AI can create raster images and apply them directly to elements on the canvas. Generated images are also saved to the project's Assets folder. --- ## You Can Still Bring Your Own AI Hosted AI doesn't remove the other options. Brilliant also supports external AI providers and coding agents, including **Codex** and **Claude Code**, along with providers such as OpenAI, Anthropic, Google, and OpenRouter.  - **Brilliant AI:** built in, no setup. - **Your own AI:** connect your provider, model, or coding agent. The choice depends on how much control you want over the AI side of the workflow. --- ## Start With Figma, Not Just a Blank Canvas Brilliant also works with existing designs. You can import Figma files through the web, desktop app, or [Brilliant's Figma plugin](https://www.figma.com/community/plugin/1611333431302009837/brilliant). Depending on the method, you can bring in an entire file, specific pages, or selected content. The import carries over many important design properties, including auto layout, spacing, sizing, vectors, fills, strokes, effects, text styling, and components. That means an existing Figma design can become the starting point for further editing inside Brilliant, including AI-assisted work. I published a hands-on review using a real Figma developer portfolio, including Figma import, manual editing, Codex through MCP, and AI-assisted changes. If you want to see the actual workflow and results, [read the full hands-on review](https://dev.to/hadil/i-tested-brilliantdesign-building-a-real-portfolio-from-figma-to-ai-powered-design-and-code-5b2a). _Figma designs can be imported into Brilliant as editable canvas elements, creating a starting point for further design work._ The interesting part is what comes after the import: the same canvas can be edited manually, worked on with Brilliant AI, or connected to external AI agents. That's where Brilliant starts connecting **AI design, Figma, MCP, and development** in the same workflow. --- ## AI Agents Can Work Directly With the Canvas Brilliant also supports **MCP**, so external AI agents can read and modify the design itself. The local MCP server works with tools including **Codex**, **Claude Code**, **Cursor**, **Antigravity**, and **Windsurf**. An agent can inspect the canvas, search across designs, create elements, edit them, and run Brilliant's canvas commands.  That makes the workflow more than: ``` Prompt → generated design ``` It can be: ``` Design ↔ AI agent ↔ codebase ``` The agent can work with the actual design instead of relying on screenshots or manually copied measurements. --- ## Hosted AI vs. AI Provider vs. MCP: Different Workflows These approaches are easy to confuse, but they solve different problems.  You don't have to choose one forever. You can use Brilliant AI for quick design work and still use an external agent through MCP when a project calls for a deeper development workflow. --- ## Blueprint: The Design Format AI Agents Use Under the hood, Brilliant uses **Blueprint**, a compact text-based language for describing design elements. Frames, text, vectors, icons, layout properties, fills, strokes, and other properties can be represented as structured text. Agents use Blueprint to create and modify native canvas elements. You don't need to write Blueprint yourself. It mainly gives AI agents a compact, structured way to work with the canvas. It also makes Brilliant projects more developer-friendly because `.bl` files are plain text and can be tracked and compared like other source files. --- ## From Design to React Brilliant supports exporting designs as: - React JSX - HTML - PNG - JPEG - WebP - SVG - PDF - CSS properties - Blueprint - MP4 - MOV There is also a more connected option: let your coding agent read the Brilliant canvas through MCP and build the design into your existing project. That matters because exported React is only a starting point. It doesn't contain your application's routing, state, data layer, or existing architecture. The agent can use the design as context while working with the actual codebase. So Brilliant isn't trying to make the canvas itself become your entire React application. It gives AI agents access to the design and lets your development environment handle the application code. --- ## The Result: One Canvas, Several AI Workflows That gives Brilliant a simple workflow: ``` Figma → Brilliant → Brilliant AI → MCP → React ``` You can stop at any stage, continue editing manually, or bring your own AI provider. And that's the part of Brilliant that goes beyond simply adding an AI chat box to a design tool. The AI can work with the actual canvas, while the same design can continue into an agent-assisted development workflow. --- ## What Makes Brilliant Different? Brilliant is not only an AI generator. It is a full design canvas where AI can create and edit native elements, work with existing designs, search the canvas, run design commands, generate images, and export the result. You can also move between different workflows without leaving the same project. That makes Brilliant useful for people who want AI inside the actual design workflow, not a separate chatbot that produces design suggestions. --- ## Who Is Brilliant.design For? Brilliant can make sense for several different types of users. **Designers** can use it as a visual workspace with AI assistance while keeping the ability to manually refine the result. **Developers** can use the canvas as a source of structured design information and connect it to coding agents through MCP. **Product teams** can use it to move between ideas, visual design, AI-assisted iteration, and implementation without treating each stage as a separate workflow. **AI-focused builders** can also explore a more agent-driven approach, where AI does more than generate suggestions and can actually operate on the design. You don't need to use every feature to benefit from the product. Someone might only care about Figma import and manual editing. Another person might mainly use Brilliant AI. A developer may care much more about Blueprint, MCP, and React export. --- ## Final Thoughts AI design is becoming more useful when it can work with the actual design instead of stopping at a generated image. That's the idea behind Brilliant: an editable canvas that can be connected to built-in AI, external agents, Figma, MCP, and development workflows. Hosted AI makes that easier to try, while tools like Blueprint and MCP give developers more control over what happens after the design is created. ## Similar posts on daily.dev - [Agents, meet the Figma canvas](https://daily.dev/posts/agents-meet-the-figma-canvas-idi0mkika) · Figma · 0 upvotes · 0 comments --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#mcp](https://daily.dev/tags/mcp), [#claude-code](https://daily.dev/tags/claude-code), [#figma](https://daily.dev/tags/figma) [View this post on daily.dev](https://daily.dev/posts/what-if-your-ai-coding-agent-could-see-and-edit-your-design--4phac1zfx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/what-if-your-ai-coding-agent-could-see-and-edit-your-design--4phac1zfx","headline":"What If Your AI Coding Agent Could See and Edit Your Design?","text":"Brilliant.design is a design tool combining an editable canvas with AI, Figma import, MCP support, and developer export workflows. It now ships with a built-in hosted AI (Brilliant AI) using Gemini 3.8 Flash for chat and Nano Banana 2 for image generation, requiring no API key setup. Users can still connect external AI providers or coding agents like Codex and Claude Code, and a local MCP server lets tools such as Cursor, Antigravity, and Windsurf read and edit the design canvas directly. Designs are stored in a text-based format called Blueprint and can be exported to React JSX, HTML, CSS, and other formats, letting coding agents use the canvas as context while building into an existing codebase.","url":"https://daily.dev/posts/what-if-your-ai-coding-agent-could-see-and-edit-your-design--4phac1zfx","datePublished":"2026-09-21T09:37:31.725Z","dateModified":"2026-09-21T09:38:17.566Z","author":{"@type":"Person","name":"Hadil Ben Abdallah","url":"https://daily.dev/hadilbenabdallah","image":"https://media.daily.dev/image/upload/s--npVXQBAk--/f_auto/v1726134205/avatars/avatar_9pqnrpoJdg1CfgqIBuMCl","description":"An Amazing Software Engineer \u0026 Technical Writer","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":39230}},"image":"https://media.daily.dev/image/upload/s--bUaZ9b7m--/f_auto/v1789983463/posts/4phac1zfx?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/dev_world","name":"Dev World"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev World","item":"https://daily.dev/squads/dev_world"},{"@type":"ListItem","position":3,"name":"What If Your AI Coding Agent Could See and Edit Your Design?"}]} ```