To get the most out of your prompts, add context such as images, external resources, screenshots, specific files within the codebase, and specific elements on the page.
To get the most out of Fusion, you want your prompts to be:
- Specific: your prompts should describing exactly what you wish to change.
- Contextual: provide as much context as you can to your prompt, such as screenshots or PDFs. The more information Fusion has about your specific prompt, the better.
- Well-scoped: while Fusion can handle large tasks, it's better to ask Fusion to make targeted changes.
Take a look at the table below for clear examples of recommend and not recommend prompts.
| ✅ Recommended | ❌ Not recommended |
|---|---|
"Use the card layout from dashboard-template.tsx to create a testimonial component with the author's name, quote, and company logo, after the pricing section, as per the attached screenshot." | "Build this using the attached files." |
"Match the color scheme from the attached Figma design to update the navigation bar background and button states." | "Make this look like the design." |
"The attached PDF provides several testimonials from our customers. Sift through the data and add a testimonial per company to this page, just like the selected element." | "Create company testimonials from the attached document." |
Builder Projects supports different context types for enhanced AI code generation. Providing additional information to your prompts allows the AI to be more efficient and targeted with its changes.
The table below details each option:
| Context type | Supported formats | Use case | How this works |
|---|---|---|---|
Attach |
| Attach local files for code patterns and documentation. | Opens file explorer to select files. |
Codebase search | Any file in the repository | Reference existing files in the connected repository. | Type |
Custom Instructions | Text input | Set persistent project context and coding preferences. | Opens text input for reusable instructions. |
Figma Import | Exported Figma designs | Convert Figma designs directly into code components. | Imports designs using the Builder Figma plugin. |
Web Import | Entire or parts of a web page | Copy and recreate layouts from any website. | Imports layouts copied using the Builder Chrome extension. |
MCP Servers | Built-in Integrations and Custom servers | Integrate with external systems, data sources, and workflows. | Accesses configured MCP server integrations. |
Element selection | Modify specific UI components without affecting others. | Targets selected canvas elements for focused edits. |
To provide your prompt with files as context, drag your file to Fusion's prompt field.
Alternatively, click the + button within the prompt toolbar and choose File. You can also paste your file directly within the prompt field.
You can upload up to 20 files per chat, with a maximum size of 10 MB per file. For PDFs over 100 pages, the AI can only use the text content, not the images.
If you know the specific file that needs to be edited within your Project, use the @ symbol to reference that file within your prompt.
The video below demonstrates using both a codebase reference and a file to provide context to a prompt.
If you find that you need to provide the same set of instructions to Fusion in each prompt, you likely need to create or update your custom instructions.
Custom instructions are a way to provide consistent context for all prompts in a Project. For example, if you always want Fusion to address the user in a certain way, provide custom instructions for that.
Within the Visual Editor, you can create or edit custom instructions by clicking on the cog icon in the prompt toolbar. Enter your instructions within the first panel, titled Project Rules.
The Project Rules panel is connected to a .builderrules file within your Project. If you add new instructions, this creates or edits this file.
There are several other ways to set custom instructions, although they can be a bit more technical. For more details, visit the Configuration files doc.
Fusion accepts Figma designs as context for prompts, just like it accepts screenshots and other documents. This Builder Figma plugin is needed to export your Figma designs.
Provide additional context to Builder including screenshots and text along with your Figma designs. This helps Builder create a design that fits your desired specifications.
In the video below, a Figma design, a PDF, and a screenshot are provided to Builder. Builder then designs a new page based on the designs and context.
Use the Builder Chrome extension to import a section from an existing website as context to your prompt. This could be from your own application's published site or an external site that provides inspiration.
To import from the web, go to your selected website and then:
- Open the Builder Chrome extension.
- Click the Copy Layout button.
- Select the section of the page you wish to copy using the blue outline as a guide. Use the Up arrow to select the wrapping parent container, if needed.
- Click to copy the section's layout to your clipboard.
- Paste the layout into your Fusion prompt.
The video below demonstrates how to create a page from a web layout.
Fusion accepts several MCP server integrations, which can be found on the Integrations page. These integrations can be anything from your application's project-management tool to your organization's Google Drive.
For details on how to connect various services to Fusion, visit the Integrations overview.
After your integrations have been configured, they are available within your Projects workspace. To display all connected integrations in the Projects interface:
- Open one of your Projects on the Projects page.
- On the Generate tab, click on the MCP Servers icon to open the MCP Server dialogue.
Once connected, the AI automatically leverages these services when relevant to your tasks, with MCP servers enhancing Projects capabilities in the background.
For example, when working on a development task, Projects can automatically access related Jira tickets, understand the requirements, and even implement fixes based on the ticket context.
The video below shows where to find the MCP Servers in the Projects interface with an open project:
Sometimes it can be difficult to describe the specific part of the page you want Fusion to focus on. Instead of trying to describe it, select it.
Selecting a specific element or layer within your Project provides Fusion with the specific information it needs to make edits.
To select an element within your Project:
- Go to the Design tab within your Fusion Project.
- Select an element on the page. If you have trouble selecting a specific container, try selecting a layer in the Layers panel.
The element selection is added to your prompt. You can then continue prompting Fusion to edit your Project.