How To Use Framer’s Workshop AI

Framer's new AI Workshop feature is huge. I've been playing with it non-stop since it was announced, and can honestly say it's one of my favorite Framer updates in a long while. It's completely shifted how I work.

This post aims to be an in-depth look into Workshop AI, and should get you on the right track to using it effectively. I've even included a few different prompts to get you started.

What Is Framer Workshop?

Workshop is Framer's built-in component generator that sits inside your projects. You don’t need any extra plugins, or to spend hours in React, you just describe what you need and Workshop builds it.

The key difference to most AI website tools here is that you're getting functional components, as opposed to static designs. 

Why Framer’s AI Is Useful

I've tested most AI design tools over the past year, and honestly, most are underwhelming.

They’re great if you want a generic layout, or some half-baked copy, but Workshop seems to go above and beyond by creating components that would typically need quite a bit of technical expertise.

Everything that Workshop designs comes with property controls built in, so customization here is working exactly like any other Framer element in the property panel. 

Components will also automatically inherit your project's fonts and colors, so they feel native from the start.

How To Use Framer Workshop AI

The process is super easy. 

Hit ⌘K, type "Workshop," and you’ll find a chat box. Describe what you want, Workshop will make it, and you can refine through follow-up messages if you need to as well.

The whole thing takes under a minute for simple stuff. More complex builds might need a couple iterations, but even then you're only really looking at 2-3 minutes total.

What I found quite different is how naturally conversational it feels – it’s actually a bit like talking to your own (super lightning fast) designer.

How to Write Prompts For Framer Workshop

I reckon this sounds like the easy part, but this is where most people mess up. Luckily, it’s the only thing you could possibly do wrong and be responsible for. 

So, let’s get your prompting right.

The Golden Rule

Be specific about what you want, but don't over-explain. Clear and concise, like giving directions to a smart friend.

My Prompt Template

I use this structure for almost every component:

1. What it does: "Create a [type] component that [main function]"

2. User interactions: "Users can [specific actions]"

3. Visual details: "Include [styling/layout requirements]"

4. Controls needed: "Add controls for [customizable elements]"

Bad prompt: "Make a pricing component"

Good prompt: "Create a pricing calculator for web design services. Include dropdown for project type (landing page, e-commerce, custom), slider for number of pages, checkboxes for add-ons like SEO and analytics. Show live price calculation and include a 'Get Quote' button."

Customizing Workshop AI Components

Like I mentioned earlier, all of your generated components will come with customization controls. You won't need to ask the AI to change basic styling elements.

When to Iterate vs. When to Rebuild

• Small changes: Use the chat to refine functionality

• Major changes: Sometimes it's faster to start over with a new prompt

• My rule: More than 3 back-and-forth messages = new prompt

I’ve written a whole post on components and customization in Framer – you’ll find it here. All of the customization methods mentioned in that post still apply to components made with Workshop.

Common Mistakes

Mistake #1: Over-Prompting

You don't need to describe every pixel. Let the AI interpret your vision first, then refine. Workshop is surprisingly good at filling in reasonable defaults.

Mistake #2: Not Testing on Mobile

Always check how your component looks on different screen sizes. Some complex components might need mobile-specific adjustments.

Mistake #3: Ignoring the Chat History

Workshop remembers your conversation, so you can reference earlier versions or ask it to combine features from different iterations.

Mistake #4: Not Saving Winners

When you create something great, write the prompt down. Build your own collection of successful prompts for future projects.

When Framer Workshop Isn't the Answer

If I’m being honest – Workshop isn’t perfect for everything:

Skip Workshop for:

• Super simple static elements. Just use regular Framer components.

• Highly custom branded interactions

• Performance-critical animations where you need precise control

Use Workshop for:

• Interactive data displays

• Complex user interactions

• Anything involving calculations or logic

• Components that would normally require technical expertise

Key Takeaways

• Functional components, not static designs: Unlike most AI design tools, Workshop creates interactive components with real functionality that would normally require technical expertise

• Built-in customization controls: Every component comes with property controls that work like they’re native

• Conversational refinement: Workshop remembers your chat history, so you can iterate and refine components through natural follow-up messages

• Smart prompting matters: Be specific about functionality and interactions, but let Workshop fill in reasonable defaults rather than over-explaining every detail

• Know when to use it: Perfect for complex animations, but skip it for simple static elements

Not sure where to start with Framer? Take the free 60 second quiz, get matched to a website template that’s perfect for your business, and get 30% off.

Bookmark These!

I’ve covered everything I can think of here, but Framer themselves also have some pretty comprehensive guides on Workshop, how to use it, and troubleshooting.

• Framer Workshop Documentation: The official guide for getting started

• Framer Academy: Free tutorial covering the basics

• Framer Community: Where designers share successful prompts and components

Have you tried Workshop yet? I'd love to hear about the components you've built and how it's changed your design workflow.