Import from Lovable

Introduction

Alloy makes it easy to import designs from Lovable projects and transform them into editable prototypes that match your existing product's design system.

Whether you're exploring new features for your existing app or testing variations, Alloy lets you capture Lovable projects and modify them to fit your product's look and feel.

Capture screen from Lovable (recommended)

The Capture Screen method is the fastest way to import your Lovable project into Alloy. It uses the Alloy Browser Extension to replicate your page with precision.

Steps:

1. Download and install the Alloy Browser Extension
2. Open your Lovable project in workspace or public view
3. Click Capture Screen in the Alloy extension
4. Wait while Alloy recreates your Lovable project in the editor
5. Start prototyping using:
   • Chat interface – describe changes in natural language
   • Visual editing – select and modify components directly

Best for:

• Preserving the exact layout from your Lovable project
• Capturing internal tools and B2B app interfaces
• Maintaining component structure from Lovable's generations

Upload your Lovable link

If your Lovable project has public visibility, you can import it directly into Alloy using the Upload Link feature.

Steps:

1. Copy the public URL of your Lovable project
2. Paste it into Alloy's Upload Link field
3. Alloy will recreate your Lovable project
4. Edit the design using prompts or visual editing

Best for:

• Quickly importing public Lovable projects
• Capturing website and consumer app designs
• Simple imports without extension installation

Tips for Lovable imports

• Ensure your Lovable project is fully rendered before capturing
• Lovable's TypeWriter components and ChatInputActionMenu elements import cleanly
• Review imported components and adjust to match your product's design system
• Use Alloy's design tokens to maintain consistency with your existing app