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.
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
Adding custom instructions in a model appends them to any existing instructions. All custom instructions are concatenated in the following order: app-level instructions, code-based instructions, then model-specific instructions.
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-defined 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.
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-svelte";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-vue";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-vue";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-qwik";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/react";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { register } from "@builder.io/sdk-react";
register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
import { Builder } from "@builder.io/angular";
Builder.register("editor.settings", {
// Other settings...
customInstructions: `# Component Usage Guide
## Design System
- **Velocity Blue:** rgb(25, 118, 210) - Primary
...
`
});
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.
