Writing Great Prompts

The better you describe what you want, the better the result. Here’s how to get the most out of your conversations with Claude.

The golden rule

Be specific and mention your Webflow class names.

Claude can’t see your design — it works with the elements in your Webflow site by their class names. The more specific you are about what you want and where you want it, the better.

Good vs. vague requests

Instead of…	Try…
”Add some animations"	"Add staggered fade-in animations to all the `.portfolio_item` elements when they scroll into view"
"Make the form better"	"Show a red border and error message if someone leaves the `.contact-form_email` field empty"
"Show some data"	"Fetch the 5 most recent items from my RSS feed and display them in `.news_feed` with title and date"
"Fix the navigation"	"Make the `.nav_menu` sticky after scrolling past the hero section, and add a subtle shadow"
"Personalize the page"	"If the URL has `?ref=producthunt`, show a welcome banner in `.promo_banner` with a Product Hunt message”

How to find your Webflow class names

This is the most important thing to include in your requests:

Open your project in the Webflow Designer
Click on the element you want Claude to work with
Look at the Selector panel on the right side — that’s the class name
Tell Claude the class name with a dot: .hero-section_home

Webflow typically names things like section-name_element-name. Just use whatever you see in the Selector panel.

A formula that works

Great requests have three parts:

What — the behavior or functionality you want
Where — which elements (use class names)
Details — timing, colors, conditions, anything specific

Example

“When someone scrolls to the stats section, I want the numbers in .stat_number to count up from 0 to their final value over about 2 seconds. It should only happen once — not every time they scroll past.”

This tells Claude:

What: animated counting numbers
Where: .stat_number elements in the stats section
Details: 2-second duration, only once

Tips that help

Describe the feeling, not the code

You don’t need to know technical terms. Describe what you’d want to see:

“When the page loads, I want the heading to slide up smoothly from below, then the subtext should do the same thing a moment later”

Mention things you want to keep

If something already works and you don’t want it broken:

“Add a hover effect to the team cards — but don’t mess with the existing click behavior”

Describe what’s wrong, not how to fix it

If a previous result isn’t quite right:

“The animation is too fast — I want it to feel more gentle and gradual”

“The filter works, but it’s jarring when items disappear. Can you make the transition smoother?”

Iterate in small steps

You don’t need to describe everything in one message. Start with the basics, then refine:

First: “Fetch my latest blog posts from the API and show them in the news section”

Then: “Can you also show the publish date under each title?”

Then: “Limit it to the 3 most recent and add a ‘View all’ link”

Each follow-up takes just a few seconds because Claude remembers the context.

Don’t worry about getting it perfect

The beauty of this workflow is that iteration is fast. If the first result isn’t exactly what you pictured, just describe what you’d change. Claude adjusts in seconds. Think of it like giving creative feedback to a developer — except the turnaround is instant.