Webflow MCP: Build an FAQ accordion with Claude
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: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community
https://webflow.com
https://university.webflow.com/
https://x.com/webflow
https://www.instagram.com/webflow
https://www.tiktok.com/@webflow
https://facebook.com/webflow Receive SMS online on sms24.me
TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.
Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.
Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.
TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.
Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.
@YouTubeReaderBot allows you to subscribe to Youtube channels.
By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.
Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.
Look for new videos or channels and share them with your friends.
You can start using our bot from this video, subscribe now to Webflow MCP: Build an FAQ accordion with Claude
What is YouTube?
YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.
