9/18 | Validate feature ideas earlier with AI-driven prototypes

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

9/18 | Validate feature ideas earlier with AI-driven prototypes

Announcing Visual Copilot - Figma to production in half the time

Learn how to create a starter template that pulls from your own proprietary design system when generating code.

Follow this tutorial to create a starter template that leverages your own code structures, design systems, and settings. Then, create projects from prompts with Fusion that leverage these repositories.

Fusion main screen displaying a custom starter called "My Custom Starter" currently selected.

To create a starter template, you need a Fusion Project.

To create a project to serve as your template:

  1. Click the dropdown in the bottom-right corner of the Fusion Project prompt field.
  2. Click Edit Starter Templates.
  3. Click + New Starter Template.
  4. Enter a name for your template.
  5. Select the dropdown and then click away from it.
  6. Click the Connect Repository button that appears.
  7. Choose a repository. The list of repositories displayed are what Builder has access to.
  8. Select a Framework Preset.
  9. Adjust project settings, such as the server port or the setup script.
  10. Click Next.

Note: If you already have a project to serve as your starter template, select that project from the existing list. You should not need to set up your project once again.

Once you have completed this part of the process, move on to Step 2.

To connect your design system, first click the Yes button when asked if you use a custom design system.

Next, choose either Yes or No as to whether or not your design system is in a Separate Repository or within This Repository.

If you choose Separate Repository:

  1. Click Add Repository.
  2. Choose your repository from the list of available repositories.
  3. Optionally choose additional repositories.
  4. Click Continue.

At the end of the above process, or if you choose This Repository, you are given the option to provide instructions to Builder's AI. These instructions help the AI determine how to use the additional repository you've included.

After adding instructions, click Create Project. You are then brought to a Fusion Project that uses your connected repositories.

The video below demonstrates how to create a Project using the process described above.

Now that your project exists, you can create your starter template:

  1. Click the dropdown in the bottom-right corner of the Fusion Project prompt field.
  2. Click Edit Starter Templates.
  3. Click + New Starter Template.
  4. Enter a name for your template.
  5. Select the Project created from your previous steps.
  6. Click Save.

You can now select your starter template just like you would any other template.

The following video demonstrates the steps within this guide.

For more details on this process, visit Starter Templates. To learn more about connecting Builder to your version control account, visit Connect Git Providers.

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

Compliance

Cookie Preferences

Gartner Cool Vendor 2024