How to use Framer AI Workshop on Framer

beginner 8 min read Updated 2026-03-18

Quick Answer

Framer AI Workshop is an AI-powered design assistant that helps you create websites and prototypes through natural language prompts. Simply access the AI Workshop from your Framer dashboard, describe what you want to build, and let the AI generate layouts, components, and content for you.

Try Framer Full Framer Review

Prerequisites

Active Framer account
Basic understanding of web design concepts
Internet connection
Modern web browser

Step-by-Step Instructions

Access Framer AI Workshop

Log into your Framer account and navigate to your dashboard. Click on the Create New button and select Start with AI from the dropdown menu. Alternatively, you can click the AI Workshop icon in the left sidebar if you're already in a project.

Make sure you have a stable internet connection as AI Workshop requires real-time communication with Framer's servers.

Describe Your Project

In the AI Workshop interface, you'll see a text input field with a prompt like What would you like to create? Type a detailed description of your desired website or component. Be specific about:

The type of website (portfolio, business, blog, etc.)
Target audience and purpose
Preferred style or aesthetic
Key sections or features needed

The more detailed your prompt, the better the AI can understand and create what you're looking for.

Review and Select Generated Options

After submitting your prompt, AI Workshop will generate multiple design options, typically 2-4 different layouts. Each option will show a preview thumbnail with different styles and arrangements. Click on each preview to see more details, then select your preferred option by clicking Use This Design or the checkmark icon.

Don't worry if none of the options are perfect - you can always refine and customize them in the next steps.

Customize Content and Style

Once you've selected a design, AI Workshop will open the customization panel. Here you can:

Edit text content by clicking on text elements
Change colors using the Color Palette section
Modify fonts from the Typography options
Upload your own images or select from AI-generated ones

Use the Refine with AI button to make additional changes through natural language.

You can ask the AI to make specific changes like 'make the header more modern' or 'change the color scheme to blue and white'.

Add and Modify Sections

To add new sections or modify existing ones, use the Add Section button in the AI Workshop panel. Describe what type of section you need (testimonials, pricing, contact form, etc.) and the AI will generate appropriate content and layout. You can also select existing sections and click Redesign Section to get alternative layouts.

Common section types that work well with AI Workshop include hero sections, feature grids, testimonials, and contact forms.

Generate and Replace Content

Use the AI Content Generator to create relevant text, images, and other assets. Click on any text element and select Generate with AI to create new copy that matches your project's tone and purpose. For images, click the Replace Image button and describe what type of image you need, or upload your own.

Be specific when requesting images - instead of 'office photo', try 'modern co-working space with natural lighting and people collaborating'.

Preview and Publish

Click the Preview button in the top toolbar to see how your site looks and functions. Test different screen sizes using the device selector. When satisfied, click Publish in the top-right corner. Choose your publishing options: you can publish to a free Framer subdomain or connect your custom domain if you have a paid plan.

Always test your site on different screen sizes before publishing to ensure it looks good on all devices.

Common Issues & Troubleshooting

AI Workshop is not loading or responding

Check your internet connection and refresh the page. If the issue persists, try clearing your browser cache or switching to an incognito/private browsing window. Make sure you're using a supported browser like Chrome, Firefox, or Safari.

Generated designs don't match my description

Try being more specific in your prompts and include details about industry, style preferences, and target audience. Use the Refine with AI feature to make adjustments, or start over with a more detailed initial prompt.

Can't upload custom images or they appear distorted

Ensure your images are in supported formats (JPG, PNG, WebP) and under 10MB. For best results, use high-resolution images (at least 1200px wide). If images appear distorted, try using the Fit or Fill options in the image settings.

AI-generated content is not relevant to my business

Provide more context about your business, industry, and target audience in your prompts. You can also manually edit any generated content by clicking on text elements and typing your own content, or use the Generate Alternative option to get different suggestions.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing