Visual Editor AI supports custom instructions through two different implementation methods, allowing teams to provide contextual guidance for more consistent and on-brand results when generating visual content.
- Provide detailed custom instructions to Visual Editor AI, which are used during code generation to create code according to your specifications.
- Add instructions inline or include instructions as part of your project configuration.
Custom instructions allow organizations to maintain a consistent visual identity when leveraging AI-generated content. By codifying design systems, brand guidelines, and component usage patterns, teams ensure that every generated result aligns with their established brand standards.
With proper custom instructions, the system can generate:
- More comprehensive landing pages
- On-brand visual elements
- Proper utilization of custom components
- Consistent design patterns across all generated content
Add custom instructions directly through the Visual Editor AI interface.
- Go to the Generate panel and click Instructions
- Enter custom instructions in the provided field
- Add style URLs as needed
Your instructions are applied to the individual user's session working with Visual Editor AI. This method is ideal for individual users or when different team members need flexibility in their instruction sets.
In the video below, instructions are added to an existing project that includes design specifications and context for how to develop code.
Alternatively, integrate custom instructions directly into the codebase alongside design tokens and custom components. This method offers several advantages:
- Consistency. All results generated through Visual Editor AI follow the same design instructions
- User-friendly. End users don't need to know how to write custom instructions
- Controlled environment. Development teams maintain full control over the integration
- Improved Results. Provides better, more consistent outputs compared to previous versions
To implement code-based custom instructions:
- Within your codebase, find where you include custom settings. This could be within a component file or within a Builder registry file.
- Add a new key within your editor settings called
customInstructions. - Provide a string value containing any desired instructions.
Custom instructions can include design system specifications, brand guidelines, example references, component usage patterns, style preferences, and more.
These elements provide the language model with additional context needed to generate higher-quality, brand-consistent results.
Read more about Fusion and MCP servers, or learn about other ways to Add context to projects.