Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Design system intelligence

Builder design system intelligence is Builder’s AI-powered approach to automatically discover, analyze, and map design system components, icons, and tokens.

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.

Abstract image showing several screens of a web application, including an overlay that shows brand colors for the app.

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.

Implement design system intelligence

When creating a new design system, you have two options:

  1. Connect Builder Projects, public repositories, and accessible NPM packages through Builder's UI. Or, upload Figma designs and explanatory markdown files. For more details, visit Design System Intelligence with Builder's UI.
  2. Index your local repository with the Builder CLI index-repo command. For more details, visit Design system indexing.
Two option cards, "Builder's UI" and "Command line," sit side by side above an "or" divider — the UI card holds glyphs for repos, packages, and design files, while the CLI card holds a terminal icon and an "npx index-repo" chip. Cyan lines from both merge into a single bright cyan card labeled "Your design system," carrying four color-token swatches and a green approval badge.

Use your design system

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:

  1. Go to your Projects page.
  2. Within the prompt at the top of the page, select the Design System dropdown.
  3. Choose your design system.
  4. 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:

  1. Go to your Projects page.
  2. Click the three-dot menu in the top-right corner of the Project you want to add a design system to.
  3. Choose Project Settings.
  4. Select the Agent tab.
  5. Scroll down to where it says Design Systems.
  6. Choose your design system from the dropdown menu.
  7. 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.
  8. Click Save.

Tag your design elements within prompts

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 the colors to use by typing @, then filtering for the correct component and color.

Additional design system options

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.

Additional context

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.

Add code context

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.

Manage design system indexes

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:

  1. On the Design system intelligence page, click on one of the rows.
  2. Scroll through the components on the left, or use the search bar to find a component.
  3. 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.

What's next

Was this article helpful?