See how Frete cut frontend build time by 70%

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

See how Frete cut frontend build time by 70%

Announcing Visual Copilot - Figma to production in half the time

for developers

Builder's 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 will make 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.

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.

Implementing design system intelligence requires access to your repository and a command line application. For more details on how to index your application, visit Design system indexing.

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

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Trust Center

Cookie Preferences