Introduction to Make Mode
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 AI.
Make Mode supports four AI providers: Anthropic (Claude), OpenAI (GPT), Ollama (local), and Apple Intelligence (on-device, macOS 26+). Choose cloud providers for maximum quality or local providers for privacy and zero cost.
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, Vanilla JS, SwiftUI, or Compose
- Quality Modes - Choose Prototype for quick iteration or Production for shipping-ready code
- Multi-File Output - Production mode generates multiple files with proper project structure
- Design Context - Attach design elements to provide visual context to the AI
- Inspect Panel - View CSS and Tailwind classes for any selected element
- Prompt Templates - 60 built-in templates across 8 categories for components, forms, pages, e-commerce, and more
- Style Guide Generation - Generate a complete design system from your design elements
- Live Preview - See your generated code running in CodeSandbox or DartPad
- Project Management - Save, load, and manage Make projects locally
- Code Iteration - Refine and improve code through conversation
- Export Options - Copy, download files, or export as ZIP
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 at least one AI provider configured:
- Anthropic - API key from console.anthropic.com
- OpenAI - API key from platform.openai.com
- Ollama - Free, install from ollama.ai and run locally
- Apple Intelligence - Free, auto-detected on macOS 26+ with Apple Silicon
See AI Settings for detailed setup instructions.
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