# Brilliant > Brilliant is a professional 2D vector design tool where humans and AI agents > work on the same canvas. It's a full Figma-class editor with direct > manipulation, auto layout, components, design tokens, pen tool, boolean ops, > and shaders, that also runs as an MCP server so LLMs can read and write > designs directly. Integrated AI chat is BYOK (bring-your-own-API-key); > Brilliant does not host or proxy inference. Desktop app for macOS, Windows, and Linux. Everything an agent generates lands as real, hand-editable vector elements, never a flattened image. The links below point at raw markdown (`.mdx`) for one-shot consumption. Drop the `.mdx` extension to view the same content in a browser. A single concatenated copy of every doc and blog post is at [/llms-full.txt](https://brilliant.design/llms-full.txt). ## Getting started - [Download & Install](https://brilliant.design/docs/getting-started/installation.mdx): Get Brilliant running on macOS or Windows. - [Quick Tour](https://brilliant.design/docs/getting-started/first-steps.mdx): The regions of the editor and the shortcuts worth knowing on day one. - [Connect an AI Provider](https://brilliant.design/docs/getting-started/connect-provider.mdx): Hook up a model for the built-in chat with your own key or Claude Code. - [Your First AI Chat](https://brilliant.design/docs/getting-started/first-ai-chat.mdx): Design with the agent built into the canvas. - [Why you should pay for the integrated AI chat](https://brilliant.design/docs/getting-started/why-pay.mdx): What the integrated chat gives you that pasting into a chatbot never will. - [Coming from Figma](https://brilliant.design/docs/getting-started/coming-from-figma.mdx): A concept-by-concept map from Figma to Brilliant, the handful of things that genuinely differ, and the full shortcut translation. ## The editor - [The Editor](https://brilliant.design/docs/editor/overview.mdx): A map of Brilliant's design surface: the four toolbars, the canvas, per-canvas undo, and where every tool and panel lives. - [Tools](https://brilliant.design/docs/editor/tools.mdx): Every drawing and editing tool in Brilliant, its shortcut, its modifiers, and where to find boolean ops, masks, flatten, and outline. - [Selection and editing](https://brilliant.design/docs/editor/selection-and-editing.mdx): How selection works in Brilliant, including the per-frame selection model, plus moving, resizing, rotating, aligning, and measuring. - [Frames and auto layout](https://brilliant.design/docs/editor/frames-and-auto-layout.mdx): Frames versus groups, auto layout direction and spacing, hug/fill/fixed sizing, layout grids, and masks. - [Color and fills](https://brilliant.design/docs/editor/color-and-fills.mdx): A guided tour of Brilliant's color picker, region by region, plus every fill type from solids and gradients to shaders and filters. - [Strokes and effects](https://brilliant.design/docs/editor/strokes-and-effects.mdx): Stroke caps and position, drop shadows, glows, blurs, the effect-versus-fill distinction, blend modes, and opacity. - [Text](https://brilliant.design/docs/editor/text.mdx): Creating text, the four sizing modes, the typography controls, per-range styling, fonts, and outlining text to vectors. - [Vectors](https://brilliant.design/docs/editor/vectors.mdx): Drawing with the pen and pencil, entering vector edit mode, node and handle types, region fills versus edge strokes, and booleans. - [Canvas navigation](https://brilliant.design/docs/editor/canvas-navigation.mdx): Zooming, panning, rulers and guides, the pixel grid, the canvas backdrops, presentation mode, and overlay mode. - [Components](https://brilliant.design/docs/editor/components.mdx): Build reusable masters and instances in Brilliant, keep them in sync with overrides, and organize variants into component sets. - [Shaders and filters](https://brilliant.design/docs/editor/shaders-and-filters.mdx): The six animated shader fills and seven filter fills in Brilliant, what each one does, and the controls you get for each. - [Images and crop](https://brilliant.design/docs/editor/images-and-crop.mdx): Get images onto the canvas, choose how they scale inside an element, and crop them in place with an interactive editor. ## Built-in AI - [Built-in AI](https://brilliant.design/docs/ai/overview.mdx): Brilliant's docked AI chat: bring your own key, design on the canvas, and keep every result fully editable by hand. - [Providers and models](https://brilliant.design/docs/ai/providers-and-models.mdx): Every provider Brilliant's chat supports, how model selection and thinking levels work, and where your keys live. - [Sessions and chat](https://brilliant.design/docs/ai/sessions-and-chat.mdx): Run parallel chats, compose follow-ups with mentions and attachments, use slash commands, and revert a turn. - [What the AI can do](https://brilliant.design/docs/ai/what-the-ai-can-do.mdx): The full range of the built-in agent, from creating and editing designs to running commands, exporting, and generating images and vectors. - [Privacy and consent](https://brilliant.design/docs/ai/privacy-and-consent.mdx): Exactly what the built-in chat sends, when it sends it, what it never sends, and why your keys stay out of transcripts. - [Design tutorials](https://brilliant.design/docs/ai/design-tutorials.mdx): Two hands-on walkthroughs: prompt a landing hero into existence and iterate on it, then build a dashboard card that re-skins when you switch brands. ## Agents and MCP - [Use with AI agents](https://brilliant.design/docs/agents/overview.mdx): Drive Brilliant's canvas from any MCP-speaking agent, from Claude Code to Cursor, or from the chat built into the app. - [Claude Code](https://brilliant.design/docs/agents/claude-code.mdx): Connect the Claude Code CLI to Brilliant so you can design on the canvas without leaving your terminal. - [Claude Desktop](https://brilliant.design/docs/agents/claude-desktop.mdx): Connect Claude Desktop to Brilliant with a small bridge, since its config only speaks local stdio servers. - [Cursor](https://brilliant.design/docs/agents/cursor.mdx): Connect the Cursor editor to Brilliant and design on the canvas from Cursor's agent. - [Codex](https://brilliant.design/docs/agents/codex.mdx): Connect OpenAI's Codex CLI to Brilliant and design on the canvas from your terminal. - [Copilot](https://brilliant.design/docs/agents/copilot.mdx): Connect GitHub Copilot in VS Code to Brilliant and design on the canvas from Copilot's agent mode. - [Windsurf](https://brilliant.design/docs/agents/windsurf.mdx): Connect the Windsurf editor to Brilliant and design on the canvas from Cascade. - [Antigravity](https://brilliant.design/docs/agents/antigravity.mdx): Connect Google's Antigravity to Brilliant and design on the canvas from its agent. - [brilliant-hq/brilliant on GitHub](https://github.com/brilliant-hq/brilliant): Public repo with agent docs, MCP setup, Blueprint object syntax, and skills. - [brilliant-hq/blueprint on GitHub](https://github.com/brilliant-hq/blueprint): The Blueprint design language. Formal spec, grammar, and authoring reference (Brilliant's lossless, versioned text representation of a design). - [MCP setup](https://github.com/brilliant-hq/brilliant/blob/main/mcp.md): Connecting an MCP client to the Brilliant desktop app. - [HTTP transport](https://github.com/brilliant-hq/brilliant/blob/main/http.md): Remote/HTTP MCP transport. - [Hosted setup](https://github.com/brilliant-hq/brilliant/blob/main/hosted.md): Hosted MCP option. - [Blueprint object syntax](https://github.com/brilliant-hq/brilliant/blob/main/objects-syntax.md): Reference for Brilliant's native DSL that agents emit. ## Files and workspace - [Canvases and files](https://brilliant.design/docs/workspace/canvases-and-files.mdx): How Brilliant workspaces, canvases, folders, and assets live as plain files on disk, with autosave and per-canvas undo built in. - [Import and export](https://brilliant.design/docs/workspace/import-and-export.mdx): Every way to get designs out of Brilliant (PNG, SVG, PDF, video, code) and back in (images, SVG, Sketch, Figma, and paste). - [Settings](https://brilliant.design/docs/workspace/settings.mdx): A tour of every Settings pane in Brilliant, plus a platform-support matrix for the macOS-only and Windows-remapped features. - [Keyboard shortcuts](https://brilliant.design/docs/workspace/shortcuts.mdx): The complete keyboard reference for Brilliant, organized by task, with macOS and Windows columns and the Windows remaps called out. - [Overlay mode](https://brilliant.design/docs/workspace/overlay-mode.mdx): Turn Brilliant into a transparent, always-on-top layer over your whole screen for tracing, annotating, and designing on top of live apps. - [Video and replay](https://brilliant.design/docs/workspace/video-and-replay.mdx): Turn a design into a shareable clip: export MP4 or MOV video, or a one-click animated replay of your work, ready for a social post or a handoff. - [Troubleshooting](https://brilliant.design/docs/workspace/troubleshooting.mdx): Fixes for the failures people actually hit in Brilliant, from install warnings to rendering errors and agent connections. - [Security and your data](https://brilliant.design/docs/workspace/security-and-data.mdx): Where your keys live, when your designs stay local, what publishing sends, and exactly what Brilliant does and does not put on the network. ## The platform - [Brilliant on the web](https://brilliant.design/docs/platform/overview.mdx): What brilliant.design is, how you sign in, and what your work looks like in a browser. - [Publish a project](https://brilliant.design/docs/platform/projects.mdx): How publishing works, what public and private mean, and how checkpoints, forks, and version history behave. - [How sync works](https://brilliant.design/docs/platform/sync.mdx): The honest data story: what uploads, when it uploads, and how offline edits and conflicts are handled. - [Collaborate live](https://brilliant.design/docs/platform/collaboration.mdx): Invite people to a project, edit together in real time, and share read-only links. - [Drops](https://brilliant.design/docs/platform/drops.mdx): Share a selection as a standalone mini-design that others can view, star, fork, and import. - [Handles and profiles](https://brilliant.design/docs/platform/handles-and-profiles.mdx): Your word-pair handle, your profile page, following people, notifications, changing your handle, short handles, and the blue badge. - [Teams](https://brilliant.design/docs/platform/teams.mdx): What a team is on brilliant.design: a shared identity that owns work, the two roles, seats and invites, and how team storage and billing pool. - [Plans and billing](https://brilliant.design/docs/platform/plans-and-billing.mdx): What is free, what the paid plans add, how storage and the daily chat cap work, and what happens if you downgrade. - [Settings and your account](https://brilliant.design/docs/platform/settings-and-account.mdx): Your account home on the web at /settings, the switch between your personal settings and a team's, and every section in each. ## Design system - [Overview](https://brilliant.design/docs/design-system/overview.mdx): What design tokens are and why they matter. - [Authoring](https://brilliant.design/docs/design-system/authoring.mdx): The grammar for authoring a Styles file. - [Tokens](https://brilliant.design/docs/design-system/tokens.mdx): Every token type and how it is generated. - [Modes & Brands](https://brilliant.design/docs/design-system/modes-and-brands.mdx): Light and dark, custom axes, and multi-brand overlays. ## Import - [From Figma](https://brilliant.design/docs/import/from-figma.mdx): Bring your existing Figma designs onto the canvas. ## Solutions - [Product designers](https://brilliant.design/docs/solutions/product-designers.mdx): The canvas you already know, with a team of agents working inside the file instead of beside it. - [Design engineers](https://brilliant.design/docs/solutions/design-engineers.mdx): Drive a real vector canvas from Claude Code, Cursor, or any MCP client, and keep the files in Git. - [Product managers](https://brilliant.design/docs/solutions/product-managers.mdx): Describe the outcome and get back a real frame with real elements, not a screenshot pasted into a doc. - [Design system leads](https://brilliant.design/docs/solutions/design-system-leads.mdx): Tokens live in a plain-text file agents read, so an agent's output arrives on the system instead of near it. - [Founders & small teams](https://brilliant.design/docs/solutions/founders.mdx): A full design tool that costs nothing, plus an agent that does the first draft, so shipping something that looks considered doesn't need a hire. - [Build feature UI from a spec](https://brilliant.design/docs/solutions/build-feature-ui.mdx): Point an agent at a spec and get frames built from your components and tokens, as vectors you can keep editing. - [Apply a brand change everywhere](https://brilliant.design/docs/solutions/brand-changes.mdx): Bind properties to tokens once, then re-skin every screen from a single dropdown or a three-line brand file. - [Explore variations fast](https://brilliant.design/docs/solutions/explore-variations.mdx): Run parallel chat sessions on the same canvas, revert the turns that missed, and hand-finish the direction that worked. - [Move off Figma](https://brilliant.design/docs/solutions/move-off-figma.mdx): The migration path in one place: two import routes, what your muscle memory does, and what you should know before you commit. - [Ship it into the codebase](https://brilliant.design/docs/solutions/ship-to-code.mdx): Let the agent you already code with read the canvas directly, or export the selection as HTML, React, SVG, or CSS. ## Comparisons - [Brilliant vs Figma](https://brilliant.design/docs/compare/figma.mdx): Collaborative web-based design, with agents on the canvas. - [Brilliant vs Sketch](https://brilliant.design/docs/compare/sketch.mdx): The Mac-native original, now cross-platform with agents. - [Brilliant vs Paper](https://brilliant.design/docs/compare/paper.mdx): The HTML/CSS canvas, and why Brilliant bets the other way. ## For developers - [The Blueprint DSL](https://brilliant.design/docs/developers/blueprint.mdx): A plain-language look at Blueprint, the compact text language AI agents use to create and edit elements on a Brilliant canvas. - [Quality linter](https://brilliant.design/docs/developers/quality-linter.mdx): The two gates every agent edit passes through: a validator that rejects bad lines before the canvas sees them, and a composition linter that checks the real geometry after. ## Changelog - [Changelog](https://brilliant.design/docs/changelog/changelog.mdx): Every Brilliant release, newest first, with the features and fixes that shipped in each build. ## Company - [Manifesto](https://brilliant.design/manifesto.mdx): Why Brilliant exists. - [Pricing](https://brilliant.design/pricing.mdx): Tiers, features, and what each costs. - [Blog](https://brilliant.design/blog.mdx): Index of posts with excerpts. ## Blog posts - [The math behind Brilliant's renderer: a budget of nanoseconds per pixel](https://brilliant.design/blog/renderer-math.mdx): One frame divided by one viewport leaves a few nanoseconds per pixel for everything. The cost laws, the world-times-zoom equation, the locality result that replaced a cache, and where the arithmetic honestly stops closing. - [Brilliant's rendering contract: seven things a frame never trades](https://brilliant.design/blog/rendering-contract.mdx): Perf work fails by winning benchmarks and trading away what you can feel. We wrote our rendering values down, gated them with tests, and let them delete work we were proud of. All seven, with the moments each one earned its keep. - [One renderer: moving Brilliant's canvas to Rust and wgpu](https://brilliant.design/blog/rust-engine.mdx): Why we deleted the Flutter painter instead of caching around it, how Dart stays in charge of everything but the pixels, and the optimization we were sure we needed until we measured it. - [How Brilliant hunts jank: a profiler that writes the verdict](https://brilliant.design/blog/jank-hunting.mdx): A late frame leaves no stack trace, so we built a recorder that captures a real session and writes down what was slow and why. Plus the measurement culture that would rather say 'I don't know' than lie. - [How Brilliant's canvas stays fast at 13,000 elements (and why selection draws two rectangles)](https://brilliant.design/blog/per-parent-selection.mdx): Brilliant treats the canvas as a hierarchy of coordinate spaces, not a flat pile of shapes. A tour from the spatial index that keeps 13,000 elements fast down to the per-parent selection model that keeps operations correct. - [In Brilliant, a design system is a short program](https://brilliant.design/blog/design-tokens-with-modes.mdx): In Brilliant, tokens come from a compiler: a few seed lines expand into every stop, role, and per-mode variant through OKLCH math. The part we're proudest of is modes as transforms, not duplicated palettes. - [Your key, your traffic: why Brilliant's AI is BYOK](https://brilliant.design/blog/byok.mdx): There is no Brilliant model and no Brilliant server between your prompt and a response. Why bring-your-own-key is a trust decision, how the multi-provider plumbing works, and the consent rules for anything leaving your machine. - [Brilliant's Blueprint: teaching agents to speak design](https://brilliant.design/blog/blueprint.mdx): Human-readable and agent-readable aren't the same thing. How Brilliant built a line-oriented DSL and a teaching compiler that closes the training-data gap one diagnostic at a time.