The argument in one line.
AI tools like Claude Design generate a working UI from one prompt but output raw HTML/CSS in a preview pane, so any real edit means re-prompting and waiting, while Brilliant lets AI agents design directly on an editable vector canvas with real layers, components, and instantly swappable design systems.
Read if. Skip if.
READ IF YOU ARE…
- You use AI design generators like Claude Design or Google Stitch and get stuck once you want to tweak one component without regenerating the whole screen.
- You're a designer who wants an AI agent to draft inside a file you can actually hand off to a Figma-trained teammate.
- You're deciding whether to connect your own Claude Code, OpenAI, or local model key to a design tool instead of paying for a bundled AI subscription.
SKIP IF…
- You're fine shipping raw HTML/CSS straight from a prompt and never touching the output again.
- You need an established plugin ecosystem and years of community templates — this tool is new and still building that out.
The full version, fast.
Claude Design and Google Stitch can build a working UI from a prompt in seconds, but the output is HTML/CSS in a preview pane — hardcoded colors, no real layers, and every edit has to be re-processed through another prompt. Brilliant takes a different approach: AI agents (using your own Claude, OpenAI, or local model key) design directly on a true vector canvas, producing real layers, design-token colors, and reusable component sets, just like Figma. Design systems can be swapped instantly by hovering, without a re-generation prompt, and Brilliant supports running multiple AI agents on separate tasks in parallel. The tradeoff is that Brilliant is newer and less proven than an established tool like Figma.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:53
01 · Intro — the editing wall
States the core problem: Claude Design and Google Stitch generate fast, but the output is HTML/CSS in a preview pane, not a true design file with layers, so iterating is hard.
00:53 – 02:25
02 · Why it matters
Brilliant is introduced as a free, full vector tool where AI agents design on the canvas directly, producing real layers and components. Claude Design's colors are hardcoded values with no design-token feature and no selection-colors panel; Brilliant has both.
02:25 – 04:35
03 · Getting started
Installs Brilliant (Mac/Windows), tours the interface: local files panel, layer tree, inspector panel, and the AI chat toolbar. Connects Claude Code via a personal API key, notes support for OpenAI, other providers, and custom local models like Ollama, GLM, and DeepSeek.
04:35 – 07:13
04 · First prompt
Generates a full customer support dashboard UI (ticket queue, AI suggestions, customer profiles, analytics) in one prompt using Opus, following the Blueprint DSL. Brilliant starts a second screen automatically and begins forming a design system. Prompts the agent to convert all one-off frames into proper components with a master component set.
07:13 – 09:07
05 · Design systems
Shows a component's master with variants (KPI cards). Contrasts Claude Design's slow, prompt-driven design-system refactor with Brilliant's instant, hover-to-switch design system swapping, plus one-click dark mode, spacing, and typography presets.
09:07 – 10:20
06 · Parallel agents
Creates a new serif/green design system via AI chat while, in a second parallel chat, generating a personal portfolio landing page at the same time. Demonstrates instantly re-skinning the in-progress landing page with the new design system before either finishes generating.
10:20 – 11:03
07 · Outro
Recaps that Brilliant combines Claude Design/Stitch-style agentic generation with Figma-style vector editing via the Blueprint DSL, points to a free sign-up link, and closes with a subscribe CTA.
Lines worth screenshotting.
- Claude Design outputs hardcoded color values, not design tokens, which is why swapping a design system means manually refactoring every screen.
- In Brilliant, changing a design system is instant and automatic — no prompt, no wait, just hover and the UI restyles itself.
- Generating a new custom design system takes Brilliant one to two minutes, versus five to ten minutes in Claude Design.
- Brilliant supports parallel AI agents, so a design system and a landing page can be generated at the same time in separate chats.
- Bring-your-own-key access means you use your existing Claude Code, OpenAI, or Anthropic subscription usage instead of paying for a separate bundled AI plan.
- Brilliant also supports custom model providers, including local or self-hosted models like Ollama, GLM, and DeepSeek.
- On its first pass an AI agent will build a UI as one-off frames; you have to explicitly ask it to convert every element into a component instance with a master component.
- Brilliant's files are stored locally on your own computer and are visible directly in the file system, not locked inside a hosted project.
- The Blueprint DSL is Brilliant's attempt to teach an AI agent to evaluate whether a design looks good, not just whether the underlying code compiles.
- Every design system generated in Brilliant ships with light and dark mode out of the box, plus adjustable spacing (comfortable vs. compact) and typography contrast presets.
Generation speed isn't the bottleneck anymore — editability is.
WHAT TO LEARN
AI tools that output code you can't touch push all the real work back onto re-prompting, while tools that generate directly into an editable, token-based file let you change your mind in seconds.
01Intro — the editing wall
- A tool that generates a working UI fast isn't automatically useful past the first draft — check whether the output is real layers or just code in a preview pane.
- Editing AI-generated output through another prompt cycle instead of direct manipulation quietly eats the time you thought you saved by generating in the first place.
02Why it matters
- Hardcoded color values force you to hunt down every instance manually; named design tokens let one change ripple through the whole file.
03Getting started
- Local, file-based storage in a design tool means the design system lives on your machine, not locked behind a hosted project you can lose access to.
- Bring-your-own-key access decouples a tool's usefulness from its pricing — you pay your existing model provider, not a second markup on top.
- A tool built around bring-your-own-key access to third-party models will also let you plug in local or self-hosted models, which matters if cost or data control is a constraint.
04First prompt
- Newly generated AI output is often a pile of one-off elements; explicitly instructing the agent to convert everything into proper components is a separate, necessary step.
- An AI agent that only judges its own code correctness will miss whether the design actually looks good — a visual self-critique loop is a different capability than code generation.
05Design systems
- Switching an entire UI to a different design system instantly (without a regeneration prompt) is only possible when the underlying values are tokens, not hardcoded styles.
06Parallel agents
- Running more than one AI agent in parallel on separate design tasks compounds time savings beyond what a single faster agent can give you.
Terms worth knowing.
- Blueprint DSL
- A design-specific language Brilliant uses to teach AI agents to reason about visual layout and quality, not just generate correct code.
- Design tokens
- Named, reusable color or style values (like "primary.bold") that update everywhere they're used, as opposed to a hardcoded hex value pasted into one element.
- Component set
- A group of related component variants (for example, three sizes of the same card) that share one master definition, so editing the master updates every instance.
- Bring your own key (BYOK)
- A model where you supply your own API key from a provider like Anthropic or OpenAI, so the tool uses your existing subscription usage instead of charging separately for AI access.
- Parallel agents
- Running more than one AI agent chat at the same time on different tasks within the same tool, so multiple designs generate simultaneously instead of one after another.
Things they pointed at.
00:09toolClaude Design
00:09toolGoogle Stitch
02:32toolFigma
03:52toolClaude Code
04:28toolOllama
04:28toolGLM
04:28toolDeepSeek
Lines you could clip.
00:00
“Claw design can build you a working UI in thirty seconds. So can Google Stitch. Both will get you something beautiful and functional. But once you're looking at the output and wanna iterate on it, you'll often find yourself hitting a wall.”
05:56
“Traditionally, AI agents just speak in code. They don't know how to look at what they've created. The blueprint DSL changes all of that and results in much better design taste.”
08:07
“I have a list of my existing design systems over here on the right sidebar. My UI instantly changes to reflect that new design system. I don't have to write a prompt and then wait for brilliant to generate it. It's all automatic.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00Claw design can build you a working UI in thirty seconds. So can Google Stitch. Both will get you something beautiful and functional.
00:07But once you're looking at the output and wanna iterate on it, you'll often find yourself . When you try to do things like swapping one component style without touching the rest, pulling a layer out and reusing it somewhere else, maybe hand it off to another designer on your team who wants to open it up and adjust it properly.
00:22That's where it gets hard because what you're looking at is just HTML and CSS in a preview pane, not a true design file that you get inside something like Figma. Brilliant starts from a different place. It's a full vector tool and AI agents design on the canvas with you.
00:36So what you produce has real layers, real components, and designer friendly editing capabilities, and it's completely free. You may have seen my recent video showing off Brilliant.
00:46And since then, the team has already shipped a handful of new features. So let's dive in and explore what Claw Design is competing against. Before we dive into the demo, let me start off on the brilliant.design landing page and give you a little bit more context.
00:58So it's a professional design tool made for both you and your AI agent. And what sets brilliant apart from something like Claude design is that Claude design generates in HTML and CSS. And that can often make you feel pretty restricted once you generate the first pass and then wanna iterate on it.
01:14For example, in Claude design, when you look at the color of any element on your UI, you only get hard coded color values, not color tokens. You also don't get the selection colors feature which I use a ton inside Figma. In Brilliant, you get both of those features.
01:27You see all the colors inside your selection on the right panel, and each of these colors aren't just hard coded values, they're actual tokens. And if I open it, I get the rest of the color tokens that are inside my current design system. Cloud design just isn't very friendly for editing your design in general.
01:42You do get manual editing options, but all the manual changes that you make ultimately have to be processed through an actual prompt, which can eat up a ton of your time just waiting for those changes to process. Brilliant on the other hand generates your designs in fully editable vectors, just like in Figma, and you can see the interface here is actually very similar to Figma.
01:59You have your layer tree on the left, all your properties of each layer on this right sidebar, but the main difference is the AI chat that you have at the bottom here, and I'm gonna dive more into it once we start this demo. So at Brilliant's core, you generate first, edit second, and then export in several different export formats.
02:15So let's get Brilliant set up. The default install option is for Mac OS, but if you open this drop down, it's also available for Windows. So just select whichever OS you're on and go through the installation process.
02:25Now, once you've made an account and landed inside Brilliant, it now comes with an enhanced onboarding flow. So it walks you through and shows you exactly what Brilliant can do via some demo generations. But since I've already used Brilliant quite a bit, I'm gonna skip past that onboarding and give you a brief overview about the Brilliant interface.
02:41Now, brilliant is a bit different from Figma or Claw Design in that all your files are immediately shown right up here in the top left. And what's also a bit different is all these files are actually stored locally on your own computer. So if I hit right click and then reveal in finder, I'll see that file along with all the other ones that appear on the left side here.
02:58Then in the lower left, you have your layer tree. And then like I said, your inspector panel is on the right side, which I have to say, all these controls feel a lot more intuitive and robust than they do in Claude design where they still feel like they're in beta and don't really work properly yet. And then here's , this bottom toolbar down here.
03:14You have your basic tools like move, drawing shapes, using the pen tool. But the best part is the AI chat. And within the AI chat, there's a few example prompts here.
03:22And I'll just click on this dev tool hero example to show you what happens. What you're seeing here is that I've prompted brilliant to build a dev tool hero for a website and now you can see up here my AI agent is building it out on my canvas in real time. And it doesn't look half bad either.
03:35It actually looks really modern and sleek. And it doesn't just lay out text and buttons. It can also create in-depth graphics like the one you're seeing get built out on the right side of the hero.
03:44Now with that said, you might be wondering what AI agent actually just built this hero section. Well, here it is. If I hover over this check mark down here, you can see that I have Claude code connected.
03:53And if I click on it, you'll see that I've added my API key so that Brilliant can connect to my Claude code plan. So once you're inside Brilliant, go ahead and grab your API key from Anthropic, OpenAI, any of the companies listed here. And the benefit of this is that you don't have to pay for some separate AI agent inside Brilliant.
04:08You're just gonna be using your usage from your existing AI subscription while getting access to some of the most powerful models out there. But what's new in Brilliant is you can also connect a custom provider now. This means if you wanna connect a local model or a hosted model, you have access to all of those too.
04:23Models like ollama, glm, deepseq, all of these can be used inside brilliant. You have a lot of flexibility here in this way. And that's a stark difference between just using claw design where you're restricted to anthropic models.
04:35Now, let's get started with an actual demo of brilliant by creating a new canvas. Now, for this first demo to show you what Brilliant is capable of and why it's rivaling Claude design, I'm gonna generate a full UI in one prompt using my connected Claude code agent. I'm saying design a UI for a customer support dashboard, including ticket queue, AI suggestions, customer profiles, and analytics.
04:56And then a prompt is pretty useless if you only give it this much context. I'm gonna give it some more guidelines. I've pasted in a lot more detail giving a guidelines about visual style, styling principles including subtle borders, soft neutral surfaces, and that it should be built around a cohesive design system.
05:12Part of Brilliant's latest update is it now supports reusable component sets, which I'll touch more on soon. For the model I wanna use, I don't really wanna use Fable five. Even though it is very powerful, it's gonna eat up a ton of tokens.
05:22So for this one, I think Opus 4.8 is a good match. Let's go ahead and hit prompt. Now we can see this UI getting built out in real time right above.
05:30And the great thing about Brilliant is that as this UI is getting built out, Brilliant is following something called the Blueprint DSL, which is essentially how AI agents speak design. This means that it teaches the AI agent to look at what it designed and analyze whether it looks good or not, not just whether the code looks good.
05:46Because traditionally, AI agents just speak in code. They don't know how to look at what they've created. The blueprint DSL changes all of that and results in much better design taste.
05:55And instead of just building one screen, Brilliant has now gotten started on a second screen for this app. And here's the thing about this design being generated. It's already following a design system.
06:04And now, over on the right, it's laying out what this design system looks like. The whole design system feature in Claude design is something that I don't really like yet. I know Claude design is still in beta, but creating, managing, and then iterating on a design system in Cloud Design just does not feel made for a designer yet.
06:20Whereas, Brilliant feels a lot closer to the reliability and flexibility that you get in Figma, but with all this incredible AI functionality built out on top of it. Now, like I said previously, Brilliant now supports components and component sets. Now, on its first pass, Brilliant did not make this entire page out of components.
06:38It started off as just a bunch of one off frames. So what I did in the AI chat is I said none of the layers are currently components. Make sure every element is a component instance with the main component set up on the component library page.
06:49Now if I select this KPI, for example, you'll see it's outlined in purple. And over in the left sidebar, we see that purple diamond icon next to each of them, meaning that they're now instances of a component. If I right click any of them, hover over component, I can go to master.
07:04Now I'm looking at the master component including variants for the three different KPIs that we can have in our UI. So this should all feel very familiar to you if you've used Figma. Now right now, our UI is just using the default brilliant styling.
07:16Now, I'd like to touch on design systems, particularly how they differ between Claude design and brilliant. So Claude design, of course, supports design systems. I have a handful in my library right now.
07:27And if I'm starting a project, I can tell it to design a UI and then select the design system that I wanna use for it. Then I can generate the UI in the exact styling of the design system I attached. But here's a problem you may have run into.
07:38What happens if you wanna make the UI look like a different design system? I can go over to the left sidebar and attach another design system, but then I have to tell Claude Design to refactor my entire UI so far to use that other design system. And that can actually take several minutes, but inside Brilliant, check it out.
07:53I have a list of my existing design systems over here on the right sidebar. My UI instantly changes to reflect that new design system. I don't have to write a prompt and then wait for brilliant to generate it.
08:03It's all automatic. And on top of that, there's a few other options as well. I can instantly switch to dark mode, adjust my spacing preference from comfortable to compact, and change my typography styling whether I want standard, high contrast, or even large text.
08:16So I wanna emphasize that inside Brilliant, you have a lot of flexibility and all that flexibility comes very quickly. You don't have to wait several minutes for your AI agent to do the work for you. Now you're probably wondering at this point, how do I create my own design system inside Brilliant?
08:29Well, just like almost anything else inside Brilliant, you can do it from AI chat down here. I'll say create a new design system that uses a serif typeface and green as the primary color. Prioritize readability and proper color contrast.
08:42Now, it's loading the knowledge it needs to author a design system and then it's gonna build it. And the difference between Brilliant and Claw Design is that inside Brilliant, this only takes one to two minutes, Whereas in Claude design, it usually takes around five to ten minutes. Now, it's not just building out that new dot styles file in code.
08:57It's also building out a real time visual preview of our design system as a showcase. It's using that serif typeface that I asked for. It's prioritizing accessible high contrast colors.
09:07And this is a great time to show you another feature in brilliant which is parallel agents. You can see this other chat running for the design system, but now I'll say, design a landing page for my personal portfolio website as a product designer. Now, check it out.
09:20While that design system is still being built, it's also designing this landing page in parallel. Check it out. We see the landing page getting generated while it's still working on this new design system.
09:29Parallel agents will save you a lot of time in the long run when you delegate multiple tasks to different AI agents at the same time. And now look at this. This landing page isn't even done being generated yet, but I can still select it and change it from this new studio warm design system that it generated for the landing page over to that green design system that I just generated.
09:48That's what I mean when I say Brilliant is super flexible and doesn't really have many guardrails when it comes to what you can and can't do. Besides parallel agents, I think my favorite feature inside Brilliant is just getting to see a design with different design systems applied in real time just by hovering. There's no prompting and waiting several minutes.
10:04It's all basically instant. And inside each of these design systems, get light and dark mode out of the box. As your AI agents finish their respective tasks, you'll get notifications at the top for each one as they finish.
10:15So I can see the first draft of my landing page has been generated and the design system is done too. So that's brilliant. You get the most exciting capability of tools like Claw Design and Stitch, which is a gentic design, but then there's also all the editing functionality that you get from a vector based editing tool like Figma.
10:32And this is why the framing of this video is that Claw Design has competition. It has real gaps, and those gaps can be deal breakers for many of you designers out there. Because you generate a first draft, but then feel stuck because you're working with designs that are already in code.
10:45The way I see it, Brilliant takes some of the best parts of Claw Design and Figma, then combines those with their Blueprint DSL, the language they built specifically for AI agents to design in vectors. If you wanna start designing with Brilliant for free, I'll leave a link down in the description. Thanks for watching, and subscribe to become a better designer.
The Hook
The bait, then the rug-pull.
Claude Design and Google Stitch can spit out a working interface in thirty seconds — but the moment you try to swap one component's style or hand the file to another designer, you hit a wall, because what you're looking at is HTML and CSS in a preview pane, not a real design file.
Named ideas worth stealing.
05:40concept
Blueprint DSL
A design-specific language Brilliant uses so an AI agent can evaluate whether what it built actually looks good, not just whether the generated code is technically correct — addressing the fact that most AI agents 'speak in code' and can't visually judge their own output.
Steal forany AI tool that generates visual output and needs a self-critique loop beyond code correctness
How they asked for the click.
VERBAL ASK
00:42product
“If you wanna start designing with Brilliant for free, I'll leave a link down in the description.”
Sponsored integration (#ad in description) woven through the whole video rather than a single pitch break — the entire runtime doubles as a Brilliant product demo, closing with an explicit affiliate-style link CTA plus a standard subscribe ask.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
