Getting Started with Make Mode

Set up Make Mode and create your first AI-generated code project

Prerequisites

Before using Make Mode, ensure you have:

Entering Make Mode

1

Click the Make Button

In the left sidebar, click the "Make" button (sparkles icon) to enter Make Mode. The workspace will transform into a two-panel layout.

2

Create a New Project

If this is your first time, click "New Project" in the header. Your project will be created and you'll see the project name displayed.

3

Write Your First Prompt

In the chat panel on the left, type a description of what you want to create. For example: "Create a button component with hover effects"

4

Select a Framework

Use the framework dropdown in the header to choose your target: React, Vue, Svelte, Flutter, or Vanilla JS.

5

Generate Code

Press Enter to send your prompt. The AI will generate code and display it in the right panel with syntax highlighting.

Your First Code Generation

Try this simple prompt to get started:

"Create a responsive navigation header with a logo on the left and menu items on the right. Include a hamburger menu for mobile."

The AI will generate a complete component with HTML structure, CSS styling, and any necessary JavaScript.

Tip

Start with simple prompts and iterate. You can always ask the AI to modify, add features, or change styling in follow-up messages.

Attaching Design Context

For better results, you can attach design elements as context:

  1. Before entering Make Mode, select elements on the canvas
  2. Enter Make Mode - selected elements become attached context
  3. The AI can see these elements and generate code that matches your design

Preview Your Code

  1. Click "Start Preview" in the header
  2. A local development server starts on localhost:3000
  3. Your default browser opens to show the rendered code
  4. Make changes and regenerate to see updates

Exporting Code

Next Steps