--- title: "Introduction to flare.design" description: "Understand the core concepts behind flare.design: workspaces, projects, the canvas, assets, Recipes, exports, and agent workflows." locale: "en" section: "Start" updated: "2026-06-28" source: "https://flare.design/docs/introduction" --- # Introduction to flare.design Understand the core concepts behind flare.design: workspaces, projects, the canvas, assets, Recipes, exports, and agent workflows. > Section: Start [HTML](https://flare.design/docs/introduction) | [Markdown](https://flare.design/docs/introduction/index.md) flare.design is an AI-native motion canvas for building visual projects that can move: social videos, product teasers, campaign variants, generated media reviews, and reusable creative workflows. It combines three surfaces: - A canvas where images, video, text, shapes, frames, and motion live together. - A workspace asset library where uploads, generated media, references, and reusable material stay searchable. - Agent access through MCP, so trusted tools such as Codex, Claude Code, or Cursor can inspect the same project context and make controlled edits. ## What you can do Use flare.design when the work is more than a single prompt result. The canvas is built for comparing, arranging, refining, animating, and exporting. Common paths: | Need | Start with | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Make a first publishable scene | [Open your first canvas](/docs/open-your-first-canvas) | | Generate images or video candidates | [Generate, arrange, and remix](/docs/generate-arrange-and-remix) | | Keep reusable media organized | [Asset library and folders](/docs/asset-library-and-folders) | | Add timing and animation | [Timeline and motion](/docs/timeline-and-motion) | | Export a review MP4 | [Preview and export MP4](/docs/preview-and-export-mp4) | | Bring in outside structure | [Paste HTML into the canvas](/docs/paste-html-into-canvas) or [Paste Figma into the canvas](/docs/paste-figma-into-canvas) | | Ask an external agent to help | [Agent workflows](/docs/agent-workflows) | ## The building blocks | Concept | What it means | Example | | --------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | Workspace | The account boundary for people, projects, assets, billing, and shared settings. | A client workspace, an internal brand workspace, or a team production space. | | Project | One saved canvas document and its related creative state. | A launch teaser, product demo scene, or campaign direction. | | Canvas | The working board where frames, references, generated media, and motion are arranged. | A spread of social formats, alternate directions, and reference images. | | Frame | A publishable scene or export region on the canvas. | A 9:16 short video, 1:1 social post, or 16:9 product teaser. | | Layer | An editable object inside a frame or on the canvas. | Text, image, video, shape, path, shader, or grouped content. | | Asset | Reusable media stored in the workspace library. | Uploaded product shots, generated images, audio, video, and references. | | Recipe | A reusable template or AI workflow that other people can run or remix. | A branded ad generator or board template. | | Agent | An external AI client connected through MCP. | Codex reading the canvas, revising an annotated image, or placing generated media beside a selected frame. | | Render | A local or cloud export of the selected frame and timeline. | A review MP4 or final motion deliverable. | | Flares | The workspace balance for usage-sensitive work. | AI generation, cloud render overage, and future API usage. | ## How work usually flows Most projects move through a simple loop: 1. Start with a frame, a reference, or a generated candidate. 2. Arrange the main visual and copy until the frame reads clearly. 3. Keep useful references near the frame, but outside the export area. 4. Add motion only after the still composition works. 5. Export a short review pass and watch it outside the editor. 6. Save reusable media into assets or publish a reusable Recipe if the workflow should be repeated. The important habit is to keep decisions visible. Duplicate a frame before making a strong change, place alternates next to each other, and move references out of the final export frame instead of deleting context too early. ## How agents fit in Agents are best when the canvas already contains useful context. A trusted MCP client can read project metadata, inspect the current canvas, see selected layers, upload generated media, place assets, update text, apply motion, or create controlled canvas patches. Good agent tasks are specific: - "Use the selected frame and make three title options next to it." - "Read the annotated image and place a revised version to the right." - "Create a simple motion plan for this frame, but keep the copy readable." - "Summarize this project and list the assets used in the final frame." Keep generation and rendering permissions separate from read/write canvas permissions. If an agent only needs to inspect or summarize, read scopes are enough. ## Where to go next Start with [Open your first canvas](/docs/open-your-first-canvas) if you want a short hands-on path. Read [Canvas basics](/docs/canvas-basics) when the object model starts to matter. Use [Agent workflows](/docs/agent-workflows) before connecting an external assistant, then [Configure the flare.design MCP server](/docs/configure-flare-design-mcp) for the technical setup.