Uploaded July 2026 | Updated September 2026, 2 weeks ago
Learn how to build a fully custom FAQ section in Webflow using the Webflow MCP and an AI agent (Claude) — no JavaScript required. In this walkthrough, we connect an AI agent to Webflow MCP, have it read our site's existing design system (variables, components, and styles), and prompt it to build a new FAQ section styled to match — including a custom FAQ item component and a CSS-only open/close animation with a rotating icon.
Along the way, we troubleshoot a few common issues that come up when prompting an AI agent to build in Webflow: reusing the wrong component, fixing an icon that isn't displaying correctly, and refining an animation through several rounds of feedback. We also talk through what we'd change in our initial prompt to get there faster next time — including giving more explicit direction up front and using Webflow's Agent Instructions feature.
New to Webflow MCP? Check out our Intro to MCP tutorial first to get your AI agent connected.
00:00 Introduction
00:38 Connect Claude to Webflow MCP
01:10 First prompt — give context and ask agent to review design system
02:47 Prompt to build FAQ accordion
03:45 Re-prompting to set more guardrails and refine
04:11 First look at what Claude built
04:50 Re-prompt to fix remaining issues and refine the animation
06:12 What can we do to make better prompts to get to the final result more quickly?
06:33 Use Agent Instructions to provide more context
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
university.webflow.com
https://x.com/webflow
instagram.com/webflow
tiktok.com/@webflow
facebook.com/webflow
Learn how to build a fully custom FAQ section in Webflow using the Webflow MCP and an AI agent (Claude) — no JavaScript required. In this walkthrough, we connect an AI agent to Webflow MCP, have it read our site's existing design system (variables, components, and styles), and prompt it to build a new FAQ section styled to match — including a custom FAQ item component and a CSS-only open/close animation with a rotating icon.
Along the way, we troubleshoot a few common issues that come up when prompting an AI agent to build in Webflow: reusing the wrong component, fixing an icon that isn't displaying correctly, and refining an animation through several rounds of feedback. We also talk through what we'd change in our initial prompt to get there faster next time — including giving more explicit direction up front and using Webflow's Agent Instructions feature.
New to Webflow MCP? Check out our Intro to MCP tutorial first to get your AI agent connected.
00:00 Introduction
00:38 Connect Claude to Webflow MCP
01:10 First prompt — give context and ask agent to review design system
02:47 Prompt to build FAQ accordion
03:45 Re-prompting to set more guardrails and refine
04:11 First look at what Claude built
04:50 Re-prompt to fix remaining issues and refine the animation
06:12 What can we do to make better prompts to get to the final result more quickly?
06:33 Use Agent Instructions to provide more context
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
university.webflow.com
https://x.com/webflow
instagram.com/webflow
tiktok.com/@webflow
facebook.com/webflow
