[go: up one dir, main page]

Register: Common mistakes developers make when prompting AI

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

This document differentiates between the two main Builder products—Projects and Publish—and recommends learning paths based on your role in those products.

Builder offers two complementary products to accelerate your team's workflow:

Get started with Projects

Turn prompts into production-ready code

Image of the visual editor and a mouse pointer over a header with copy.

Get started with Publish

Empower teams to iterate in parallel

Projects connects directly to your codebase, so you can visually build features with AI that understands your components and coding conventions.

Use Projects for:

  • Building features or applications within an existing codebase
  • Developing UI with AI assistance
  • Working with designers to convert Figma designs to production code
  • Building prototypes or MVPs with your design system


Publish empowers marketing and content teams to create and manage content independently to reduce dependencies on engineering.

Use Publish for:

  • Launching content quickly, even if you're not a developer
  • Enabling non-technical teams to self-serve web content
  • Managing structured content across multiple channels
  • Running A/B tests and personalization campaigns

Depending on whether you're using Projects or Publish, the workflow follows one of these general outlines.

To get going with Builder Projects:

  1. Connect to GitHub.
  2. Iterate with AI.
  3. Send PRs.

For a guide through the main workflow, see Get started with Projects.

To get going with Builder Publish:

  1. Import your design from Figma or from the web.
  2. Iterate with the Builder Visual Editor AI.
  3. Integrate Page building.
  4. Integrate custom components.

For a guide through the main workflow, see Get started with Publish.

Your specific path will also depend on your role—whether you're building features, managing content, or designing experiences.

Learn your way around Builder based on your role. The Builder documentation has articles that cover the basics to get you started and help you go in-depth. The following categories are based on Builder Roles and permissions, so find your role and dive into the recommended documentation for that role.

If you're just starting out with Builder, read Key Concepts first for context on how Builder works and an intro to common terms.

Because Contributors don't edit layouts, they can focus on content such as copy and images. To get familiar with Builder, get up and running with our recommended learning path:

1

Builder UI with the Builder home page open in it.

Recommended docs:

Image of basic blocks in the Visual Editor.

Recommended docs:

Image of a comment form with a note and an Add Comment button.

To get off to a good start, Designers should get acquainted with importing from Figma, Builder's features made just for Designers, and how to apply the principles of responsive design in the Visual Editor.

1

Image of a Figma design, the Figma logo, and a header that says "Import your designs from Figma".

Recommended docs:

Screenshot of the Builder UI.

If you're an Admin, you might have many varied responsibilities, while still maintaining access and permissions in Builder for your team. If you need to create web experiences, make sure to read the documents under Designer, in the previous section.

1

Image of the edit roles dialogue in Builder.

Recommended docs:

To get started with Publish, visit Publish with Builder, which highlights some of the most frequently used documentation tailor-made for developers.

For Publish Integrate with Builder in moments, with some code and an abstract image representing a component in Builder.

For an outline of the recommended workflow for each product, visit Get started with Publish and Get started with Fusion.

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

Trust Center

Cookie Preferences