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 uses Claude AI 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
- CodeSandbox/DartPad preview
- Code iteration history
- Syntax highlighting
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.
Best Practices
Tips and tricks for getting the best results from AI code generation.