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 keeps 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, and you can update your design system in Bolt as your team’s components and guidelines evolve.

​
Try a pre-loaded design system

Bolt includes pre-loaded design systems you can explore before adding your own, including open-source design systems like Chakra, Material UI, and Shadcn. Trying a pre-loaded design system can help you get a sense of the output quality when Bolt builds from real components instead of generic ones. If a pre-loaded design system matches the look and feel you want, you can use it to start a real project. To try a pre-loaded design system:
  1. Sign in to Bolt.
  2. On the Bolt homepage, in the chatbox, click the Design system (palette) icon, then select the design system you want to use.
  3. Enter your prompt, then submit it to start building.
You can build with pre-loaded design systems but can’t update or change them like you can with a design system you add.

​
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 recommend reading Design system best practices. Most importantly, the sources you choose and instructions you provide during design system creation have a significant impact on the quality of your results. To learn about the types of sources you can upload, see Add your design sources.

​
View and use your design system

Once your design system is ready, you can browse its components before you start prompting.

​
Keep your design system up to date

As your design system sources change over time, you can sync your design system in Bolt to pull in the latest version with new components and other updates. Syncing also creates a version history for your design system, so you can switch a project back to a previous revision if needed.