Builder design system intelligence is Builder’s AI-powered approach to automatically discover, analyze, and map design system components, icons, and tokens.
After indexing your design system with a single command on the command line, Builder makes use of your components when generating code.
Normally, when AI helps you build features, it creates generic code from scratch. But most companies have their own custom components and design systems that should be used to maintain consistency.
Design system intelligence uses a process called design system indexing that creates a catalog of your code's building blocks. The AI scans your codebase once, learns what components exist, how they work, and when to use them.
Implementing design system intelligence requires some technical knowledge. For more details on how to index your application, visit Component indexing.
With Design system indexing, you can tag your components and design tokens right in the Agent chat. For example, to reference a modal in your design system, use the @ symbol and start typing the name of the modal.
In the video below, the user instructs the agent to use the indexed Ion modal and specifies colors to use by typing @ and then filtering for the correct component and color.
There are two ways to add a design system:
- Click the Add Design System button from the Design System page.
- Perform Design system indexing through the command line.
This page covers how to add a design system within Builder directly. For more details on indexing your design system through the command line, visit Design system indexing.
Create a design system directly within Builder for rapid prototyping that doesn't require access to a command-line interface or access to a particular repository.
All that is needed to create a design system within Builder is a name, and one or more Markdown files or Figma files that describe and provide examples of your design system.
To create a design system within Builder:
- Go to the Design System page within your Fusion Space.
- Click the Add Design System button on the page.
- Add a name within the Design System Name field.
- Upload a combination of Markdown and Figma files that represent your design system under Add Design Context.
- Click the Review button at the bottom of the form.
There are several other options within this form, but all are optional. For Builder to develop code that uses components within your repository, a code repository connection is needed.
For more details, visit the Additional design system options section below.
At the end of this process, Builder creates a design system based on your Markdown and Figma files.
Your design system can be used when creating a new Project in Fusion or added to an existing Project.
To use your design system within a new Project:
- Go to your Projects page.
- Within the prompt at the top of the page, select the Design System dropdown.
- Choose your design system.
- Enter a prompt to create a new application and then click Build.
When creating this new Project, Builder uses your created design system to design the page, leveraging your styles and components.
To use your design system within an existing Project:
- Go to your Projects page.
- Click the three-dot menu in the top-right corner of the Project you want to add a design system to.
- Choose Project Settings.
- Select the Agent tab.
- Scroll down to where it says Design Systems.
- Choose your design system from the dropdown menu.
- Optionally determine whether or not you want to only allow design system tokens when editing styles in Design Mode by toggling the Style Strict Mode option.
- Click Save.
When creating a design system, there are several optional fields you can complete to provide additional context to the AI. Providing values to these fields improves the AI's output.
For the highest level of design and code fidelity, a repository connection is required. Without it, Builder is able to generate designs that match your design system, but is unable to leverage your own repository's components.
Include any style notes, naming conventions, or brand guidelines not covered by your uploaded files. This is also a place to add more generalized advice to the AI on how to use your design system.
If possible, connect your code repository directly. Builder's AI uses the code from connected repositories to identify and define styles and components.
For more details on how to connect your version control system to Builder, visit Projects setup overview.
You also have the option to provide a publicly accessible repository. This can be your own design system or an open-source system.
To display component indexes available in your Organization or Space, go to the Design system intelligence page.
To list the tokens and components indexed within a design system:
- On the Design system intelligence page, click on one of the rows.
- Scroll through the components on the left, or use the search bar to find a component.
- Click the component listing to display the indexed tokens and components.
Each indexed token and component contains an AI generated overview of that item.
You can remove indexed tokens and components by clicking on the three-dot menu icon next to a design system. Then, click Remove.