# Getting Started

## Introduction

# Welcome to MagicPath

MagicPath is an AI-powered design platform that lets you create, refine, and iterate on UI components and complex designs like landing pages, dashboards, and full applications through natural language conversations.

### MagicPath intro video

[Intro to MagicPath Functionalities with Pietro Schirano](https://www.youtube.com/watch?v=LPBPGNpve7M)

### What you can do with MagicPath:

- Generate React components, landing pages, dashboards, and complex designs with simple text prompts
- Import your Figma designs directly and turn them into working code
- Edit your designs visually or through conversation
- Share projects with your team for collaboration
- Export production-ready code for any design

## Free to Try

To get started, create an account and prompt what you want to create. You can also upload a screenshot for even better results! After the first prompt, you can iterate in our chat editor.

### When you're done, you can:

- Share the preview link
- Try create variants
- Figma Connect
- Web Capture
- Export the code
- Collaborate with your team

## Key Features

Unlike other AI coding tools, MagicPath focuses on designer workflows and features built for product teams. We fit seamlessly into your product development process with purpose-built features for collaboration and design iteration.

| Feature    | What It Is                                                                 | Example                                      |
|------------|-----------------------------------------------------------------------------|----------------------------------------------|
| Projects   | Individual projects you create in MagicPath, each containing components, pages, or complete applications | A landing page, analytics dashboard, or e-commerce site |
| Themes     | Custom style sets including color palettes, typography, effects, and design rules that guide AI generation | "Brand A" theme with company colors, fonts, and spacing rules |
| Libraries   | Collections of reusable components that can be shared across projects and teams | "Acme Design System" containing all your custom components |
| Components | Reusable UI elements stored in a "library" to use across your projects    | A custom Button, Card, or Navigation component |
| Canvas     | An infinite workspace to organize your designs, from individual components to complete pages, and collaborate in real-time |                                              |

### Why This Matters for Product Teams

Traditional AI coding tools focus on individual developers writing code. MagicPath is built for product teams who need to:

- Collaborate on designs with team members in real-time
- Maintain consistency across components with design systems
- Organize work on a visual canvas like Figma, but with working code
- Reuse components through shared libraries, not copy-paste
- Iterate visually with designers who don't write code

## Learn by Watching

Check out our comprehensive video tutorials on YouTube. Watch step-by-step guides covering everything from basic features to advanced workflows.

### MagicPath video tutorials playlist

[Copy Any Web UI → Pixel-Perfect React Components (Web Capture Demo)](https://www.youtube.com/watch?v=6gxnTIGjCQc)

Watch our complete tutorial series to master MagicPath. New tutorials added regularly! Subscribe to stay updated with the latest tips, feature deep-dives, and workflow guides.