Skip to main content
A design system gives Bolt a set of visual rules to follow when creating prototypes or user interfaces for your projects. These rules can include guidelines like colors, typography, spacing, and component styles. When you use a design system, Bolt generates UI code that’s ready to use because it’s built from your actual components, not stand-in code you’d have to replace later. This helps keep UIs consistent and on-brand without extra manual effort. Bolt compiles your design system from your own sources, like your component library and design system website. Your design system is defined by those sources. When they change, you can sync Bolt to reflect the latest version. To learn more about the types of documentation you can upload when you add a design system, see Add your design sources.

​
Preview a design system

Bolt includes pre-loaded design systems you can explore before adding your own. When you preview one, you can get a sense of the output quality when Bolt builds from real components instead of generic ones.
This video is sped up. Build times vary based on your prompt. To preview an example design system:
  1. On the Bolt homepage, scroll down to the design system section.
  2. Select a design system, then click Try example to open a preview project and run a sample prompt.
When you select a design system, Bolt automatically creates a project using the sample prompt. From there, you can continue with your own prompts.

​
Build with a pre-loaded design system

If a pre-loaded design system matches the look and feel you want, you can use it to start a real project. All Bolt users can build with pre-loaded design systems using the Design System option in the prompt toolbar or the Build now button on any pre-loaded design system card in the design system section. You can build with pre-loaded design systems but can’t update or change them.
This video is sped up. Build times vary based on your prompt. To build with a pre-loaded design system:
  1. On the Bolt homepage, scroll down to the design system section.
  2. Select a design system, enter your prompt, then click Build now.

​
Add your own design system

To add your own design system and use it across your team’s projects, you need a paid Team plan. See Add your design system to get started, or upgrade to a Team plan first. Before you add your design system, we strongly recommend reading Design system best practices. The sources you choose and instructions you provide during design system creation have a significant impact on the quality of your results.