Skip to main content

Documentation Index

Fetch the complete documentation index at: https://support.bolt.new/llms.txt

Use this file to discover all available pages before exploring further.

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.

​
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.

​
Attach or detach a design system from an existing project

To attach, detach, or switch the design system associated with an existing project, modify the Design system setting in your general project settings.
  1. In your project, click the gear icon in the top navigation, then click All project settings.
  2. On the Project General Settings page, find the Design system setting.
  3. To attach a design system, select the design system you want to use, click Attach, then click Confirm.
  4. To detach the design system currently associated with your project, click Detach, then click Confirm.
Attaching a design system doesn’t make immediate changes to your project code. To build with the newly attached design system, prompt Bolt to update the specific components you want to change. Detaching a design system also doesn’t change your existing project code, but Bolt will no longer reference your design system components when building. Any future changes you make will use generic components instead. To restore design system behavior, attach the design system again and prompt Bolt to update your components.

​
Update specific components

Be as specific as possible when prompting Bolt to update components. When you precisely describe what to change, Bolt needs to read through less of your project code. This helps keep token usage lower. For example, instead of using the prompt like “Update my project to use the design system,” try “Update all uses of the PrimaryButton to use the design system component, but leave the layout the same.” To tag a design system component in your prompt, type @ to bring up a list of components, files, and folders. Bolt filters the list as you type, or you can browse and select the component you want.

​
Update your entire project

To update your entire project to use the attached design system, use a detailed prompt that helps Bolt understand the scope of the updates you want. You can use this prompt as a starting point: 
Audit the entire project against the active design system. Review all components, pages, and layouts in the project and:

1. Read the design system to get the latest tokens, components, and guidelines
2. Scan every component and page file for:
   - Hardcoded colors, spacing, font sizes, or other raw values that should use design system tokens
   - Standard HTML elements (for example, <img> or <button>) that should use design system components instead
   - Missing or incorrect utility classes
3. Update all files to align with the design system

Do not skip any files. Be thorough.

​
Pick the right model

For best results, use Opus 4.6 when building with your design system. Opus 4.6 follows complex instructions more consistently and applies your design system standards more precisely than other models. To learn more about how Opus 4.6 compares to other models, see Agents and models.

​
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.