Skip to main content
When you select a design system for a project, Bolt builds with your real components from the start. Every prototype and UI it generates follows your brand guidelines and uses your actual component library rather than generic placeholder code.
You can only select a design system when starting a new project. You can’t add or change a design system on an existing project.

​
Start a project with a design system

  1. On the Bolt homepage, in the chat toolbar, click Design System.
  2. From the list, select a design system.
    Your own design systems appear here if your team has added any. Otherwise, you’ll see pre-loaded design systems.
  3. Enter your prompt and click Build now.
Bolt uses your design system as a reference for every UI decision it makes in the project. The components, spacing, typography, and color all follow your standards.

​
Prompt effectively with a design system

To get the best results when building with your design system:
  • If you’re familiar with your design system components, reference them by name directly in your prompts. For example, “Add a PrimaryButton in the header” gives Bolt more to work with than “Add a button in the header.” See View your design system in Bolt to learn how to browse your components.
  • Be specific about what to update and what to leave alone. For example, “Add a navigation bar to the header using the NavBar component, but don’t change the existing layout or button styles” is more reliable than “Add a navigation bar.”
For more detailed guidance on prompting with a design system, see our best practices.

​
Duplicate a project with a design system

If you have a design system connected to your project, and you duplicate that project, the duplicated project uses the same design system. You can use duplication as a starting point for new work without losing your design system connection, but you can’t use it to try a different design system on the same project.

​
Build from your Figma designs

When you import a Figma frame while building with a design system, Bolt’s design system agent processes the frame and recreates it using your real design system components. For instructions, see Build from a Figma frame using your design system.