Quick Start Guide

Getting Started
Quick Start

Quick Start Guide

Get started with MagicPath in minutes.

1

Create your first project

Click the "New file" button in the sidebar to create your first project. You'll be taken to the canvas where you can start creating.

Click 'New file' to create your first project
2

Describe what you want

Use natural language to describe what you want to create - from simple components to complete pages. For example: "A sign in card with regular email, google and github" or "A landing page for a SaaS product"

Type what you want to create and watch the AI generate it
3

Refine and iterate

Continue the conversation to refine your design, change styles, add features, or modify behavior. You can edit with AI through chat or manually like you would in a regular Figma file. The AI will understand your requests and update your design accordingly.

Refine your component with AI chat or visual editing tools
4

Export your code

When you're satisfied with your design, export the production-ready React code to use in your projects.

Click the Code tab and download your production-ready React code