Introduction to Make Mode

Learn what Make Mode is and how it transforms designs into code

What is Make Mode?

Make Mode is Azyrom's AI-powered code generation feature. It allows you to transform your visual designs into production-ready code using natural language prompts and Claude AI.

Instead of manually translating designs into code, you can describe what you want in plain English, attach design elements as context, and let AI generate the code for you.

Key Features

Natural Language Prompts - Describe your code requirements in plain English
Multi-Framework Support - Generate code for React, Vue, Svelte, Flutter, or vanilla JS
Design Context - Attach design elements to provide visual context to the AI
Live Preview - See your generated code running in a local development server
Code Iteration - Refine and improve code through conversation
Syntax Highlighting - View code with proper syntax coloring
Export Options - Copy code to clipboard or download files

How It Works

Enter Make Mode - Click the "Make" button in the left sidebar
Start a Project - Create a new project or continue an existing one
Describe Your Code - Type a prompt describing what you want to build
Attach Context - Optionally select design elements to provide visual context
Generate Code - AI generates code based on your prompt and context
Preview & Iterate - View the result and refine through follow-up prompts

Tip

The more specific your prompts, the better the generated code. Include details about styling, behavior, and structure for best results.

Workspace Layout

When you enter Make Mode, the workspace transforms into a two-panel layout:

Chat Panel (Left) - Your conversation with the AI, including prompts and responses
Code Panel (Right) - Generated code with syntax highlighting and copy/export options

The header shows your project name, framework selector, and preview server controls.

Requirements

Make Mode requires an API key for Claude AI to function:

Set the ANTHROPIC_API_KEY environment variable with your API key
The preview server runs on localhost:3000 (ensure this port is available)

Use Cases

Rapid Prototyping - Quickly generate UI components from designs
Learning - See how designs can be implemented in different frameworks
Code Scaffolding - Generate starting code to customize and extend
Cross-Platform Development - Generate the same UI for multiple frameworks