Generating Code

Learn how to write effective prompts for high-quality code generation

Writing Effective Prompts

The quality of generated code depends largely on how you write your prompts. Here are key principles:

Prompt Examples

Basic Prompt

"Create a button component"

Better Prompt

"Create a primary button component with rounded corners, a subtle shadow, and a hover effect that slightly lifts the button. Use a purple gradient background."

Best Prompt

"Create a reusable Button component in React with TypeScript. It should accept variant (primary/secondary/outline), size (sm/md/lg), and disabled props. Use CSS-in-JS with styled-components. Include hover and focus states with smooth transitions. Add proper ARIA attributes for accessibility."

Iterating on Code

After initial generation, you can refine the code through follow-up prompts:

Using Design Context

Attach design elements for more accurate code generation:

  1. Select elements on the canvas before entering Make Mode
  2. The AI analyzes colors, spacing, typography, and layout
  3. Generated code matches your visual design more closely

Attaching Images

You can attach reference images to your prompts for more context:

  1. Click the "Add Image" button in the chat input area
  2. Select one or more images from your computer
  3. The AI will analyze the images and use them as visual reference
  4. Write your prompt describing what you want to create based on the images

This is useful for:

Exporting Generated Code

Once you're happy with the generated code, you can export it in several ways:

Access export options from the export menu (download icon) in the code panel toolbar.

ZIP Export Details

The ZIP export creates a complete, ready-to-run project:

After downloading, extract the ZIP and run:

Common Patterns

Make Mode handles these patterns well: