Your First Request
You’ve pasted the snippets in Webflow and published your staging site. Now let’s walk through your first real conversation with Claude.
A real example
Let’s start with something visual — say you have a portfolio page with a grid of project thumbnails, and you want them to fade in one by one as the visitor scrolls down.
Here’s how that conversation goes:
You: I want the portfolio items on my homepage to fade in one by one when the visitor scrolls to that section. The items have the class .portfolio_item and they’re inside .portfolio_grid.
Claude: I’ll create a staggered fade-in animation for you.
Let me write that and push it to your staging site…
Done! Here’s what I added:
- Each
.portfolio_itemfades in from slightly below - They appear one after another with a short gap between each
- The animation starts when the grid scrolls into view
- It only plays once (doesn’t replay if you scroll back up)
Check your staging site to see the result.
You: Nice! But it feels a bit fast. Can you slow it down?
Claude: Updated — the animation is now slower and smoother. Refresh your staging site.
You: Perfect. Can you also add a slight scale-up, so they grow in as they fade?
Claude: Done. Each item now fades in, slides up, and scales from 95% to 100%. Take a look!
That’s it. You describe, Claude builds, you review, you iterate. Each round takes just a few seconds.
Tips for better results
Mention your Webflow class names
Claude needs to know which elements to work with. In Webflow, every element has a class name — you can find it in the Selector panel on the right side of the Designer.
“Fade in the elements with class
.team_cardinside.team-section_home”
Be specific about what you want
The more detail you give, the better the result on the first try:
| Instead of… | Try… |
|---|---|
| ”Add some animations" | "Add a fade-in from below when each .feature_card scrolls into view" |
| "Make the form better" | "Show a red border and error message if someone leaves the email field empty" |
| "Show some data" | "Fetch the latest 3 posts from my WordPress API and display them in .news_list" |
| "Add a cool effect" | "Make .hero_bg-image scroll slower than the page for a parallax feel” |
Iterate naturally
You don’t need to nail it in one go. Just have a back-and-forth:
“Make it faster” · “Move it to the left” · “Only trigger once” · “Add a short delay”
Claude remembers what you’ve been building, so each follow-up builds on the last.
What if something looks wrong?
Just tell Claude what you’re seeing:
“The fade-in isn’t working — the items just appear instantly without animation”
Claude checks what happened, fixes it, and pushes a new version. Usually one round is all it takes.
What’s next?
- How Loops Works — understand what happens behind the scenes
- Writing Great Prompts — get even better results from your conversations
- Examples — see more real conversations and their results