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.
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.