Generating Code

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

Using Prompt Templates

Make Mode includes 60 built-in prompt templates across 8 categories to help you get started quickly:

Click "Browse Templates" in the chat panel
Choose a category: Components, Forms, Pages, From Design, E-Commerce, Data Display, Feedback & Overlay, or Mobile
Click a template to insert it into the chat input
Customize the template and press Enter to generate

Templates cover common patterns like navigation bars, login forms, dashboards, and design system extraction. See Workflow Tools for the full list.

Writing Effective Prompts

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

Be Specific - Include details about structure, styling, and behavior
Mention Technologies - Specify CSS frameworks, libraries, or patterns you want
Describe Interactions - Explain hover states, animations, and user interactions
Set Constraints - Mention responsive requirements, accessibility needs, etc.

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:

"Add dark mode support" - Extend with new features
"Make it more responsive" - Improve existing functionality
"Use flexbox instead of grid" - Change implementation details
"Add loading state" - Add new states or variations

Using Design Context

Attach design elements for more accurate code generation:

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

Attaching Images

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

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

This is useful for:

Recreating designs from screenshots or mockups
Matching existing brand assets or UI patterns
Providing visual examples of the desired output

Exporting Generated Code

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

Copy to Clipboard - Click the copy button to copy the code
Export as File - Download the code as a file with the appropriate extension (.jsx, .vue, .svelte, .dart, .html, .swift, or .kt)
Download ZIP - Export a complete project as a ZIP archive with all necessary files, folder structure, and configuration
Open in CodeSandbox - Launch your code directly in CodeSandbox to test and share it online (web frameworks only)
Open in DartPad - Launch Flutter code in DartPad for live preview and testing

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:

Project Structure - Proper folder hierarchy (src/, public/, etc.)
Package Configuration - package.json (npm) or pubspec.yaml (Flutter) with dependencies
README - Instructions for running the project
Build Configuration - Vite/Webpack/Flutter config files as needed
CSS Files - Separated and optimized stylesheets

After downloading, extract the ZIP and run:

React/Vue/Svelte: npm install && npm run dev
Flutter: flutter pub get && flutter run
Vanilla JS: Open index.html in browser
SwiftUI: Open the .swift file in Xcode
Compose: Open the .kt file in Android Studio

Multi-File Output

When using Production mode, the AI generates multiple files with proper project structure:

Each file appears as a separate tab in the code panel
Click tabs to switch between component files, stylesheets, types, etc.
Use Download ZIP to export all files as a complete project
In Prototype mode, code is generated as a single file by default

Common Patterns

Make Mode handles these patterns well:

Navigation bars and headers
Card components and grids
Form inputs and validation
Modal dialogs and overlays
Tables and data displays
Landing page sections