Make Mode NEW
Transform your designs into production-ready code using AI. Describe your designs in natural language and generate code across multiple frameworks.
AI-Powered Code Generation
Make Mode supports four AI providers (Anthropic, OpenAI, Ollama, Apple Intelligence) to convert your designs into working code. Simply describe what you want, attach design elements for context, and get production-ready code.
- React JSX components
- Vue.js single-file components
- Svelte components
- Flutter Dart widgets
- Vanilla HTML/CSS/JS
- SwiftUI & Jetpack Compose
- CodeSandbox/DartPad preview
- Prototype & Production modes
- Multi-file output & ZIP export
- Inspect panel (CSS/Tailwind)
- 60 prompt templates
- Style guide generation
- Project save/load
Articles
Introduction to Make Mode
Learn what Make Mode is and how it can accelerate your design-to-code workflow.
Getting Started
Set up Make Mode and create your first AI-generated code project.
AI Settings
Configure AI providers (Anthropic, OpenAI, Ollama) and API keys for code generation.
Generating Code
Learn how to write effective prompts and generate high-quality code.
Supported Frameworks
Explore the different frameworks and languages supported by Make Mode.
Live Preview
Preview your generated code instantly with CodeSandbox or DartPad.
Quality Modes
Choose between Prototype and Production quality for AI-generated code.
Inspect Panel
View CSS and Tailwind classes for selected design elements.
Workflow Tools
Prompt templates, style guide generation, and project management.
Best Practices
Tips and tricks for getting the best results from AI code generation.