30 Claude Prompts for Webflow

You are a Webflow CMS architect who designs field schemas for editorial teams. <context> I am setting up a new CMS collection in Webflow and want a field schema that covers editorial needs without becoming bloated. </context> <inputs> - Collection purpose: [COLLECTION PURPOSE] - Content team size: [CONTENT TEAM SIZE] - Required filters on the front end: [LIST OF FRONT END FILTERS] - Existing similar collection for reference: [REFERENCE COLLECTION NAME] </inputs> <task> Design a field list for this collection including field name, field type, whether it is required, and whether it should be a reference or option type. </task> <constraints> Keep the schema to fields that a real page layout will use. Flag any field that should be a reference to another collection instead of plain text. Avoid duplicate fields that serve the same purpose. </constraints> <format> Return a table with columns for field name, field type, required, and purpose, followed by a short list of any reference relationships needed. </format>

You are a Webflow CMS architect who maps reference relationships between collections. <context> I have several CMS collections that need to reference each other and I want to map the relationships before building in Webflow, since reference fields are hard to change later. </context> <inputs> - Collections involved: [LIST OF COLLECTIONS] - Relationship needed: [DESCRIPTION OF RELATIONSHIP] - Multi reference needed: [YES OR NO] - Front end display goal: [FRONT END DISPLAY GOAL] </inputs> <task> Map out which collection should hold the reference field, whether it needs to be single or multi reference, and how the relationship will render on the front end. </task> <constraints> Note Webflow's limit of one level of nested reference display. Flag any relationship that would need a workaround like a multi reference field or a separate junction collection. </constraints> <format> Return a short diagram described in text, one collection per line with an arrow notation showing the reference direction, followed by a paragraph explaining the front end rendering plan. </format>

You are a Webflow developer who plans CMS filtering and sorting before implementation. <context> I am building a collection list page in Webflow and need to plan the filters and sort options before adding a CMS filter tool. </context> <inputs> - Collection name: [COLLECTION NAME] - Fields available to filter: [LIST OF FILTERABLE FIELDS] - Expected item count: [EXPECTED ITEM COUNT] - User goal on this page: [USER GOAL] </inputs> <task> Recommend which fields should become filters, which should become sort options, and how many items should show per page before pagination. </task> <constraints> Do not recommend more than four filters, since more clutters the interface on mobile. Note any filter that only makes sense once item count grows past a threshold. </constraints> <format> Return a short list of recommended filters with reasoning, a separate list of sort options, and one line on pagination or load more behavior. </format>

You are a Webflow strategist who advises clients on CMS versus static page decisions. <context> A client keeps asking for new pages and I need a clear brief that decides when something should become a CMS collection item instead of a one off static page. </context> <inputs> - Content type in question: [CONTENT TYPE] - Expected frequency of new items: [EXPECTED FREQUENCY] - Who will add new items: [WHO ADDS CONTENT] - Current page count for this type: [CURRENT PAGE COUNT] </inputs> <task> Decide whether this content type should live in a CMS collection or stay as static pages, and explain the tradeoffs in terms a non technical client will understand. </task> <constraints> Give a clear recommendation, not a list of both options with no answer. Mention the Webflow CMS item limit relevant to the current plan if it could matter. </constraints> <format> Return a short recommendation paragraph followed by a two column list of pros and cons for the option not chosen. </format>

You are a Webflow CMS auditor who cleans up inherited content models. <context> I inherited a Webflow project with a messy CMS setup and I need to audit the field names and structure before building anything new on top of it. </context> <inputs> - Collections to audit: [LIST OF COLLECTIONS] - Known pain point: [KNOWN PAIN POINT] - Team members editing content: [NUMBER OF EDITORS] - Naming convention preferred going forward: [NAMING CONVENTION] </inputs> <task> Review the field names and structure I describe, flag inconsistent naming, unused fields, and fields that should be split or merged. </task> <constraints> Be specific about what to rename and why. Do not suggest a full rebuild unless the structure is genuinely unworkable. </constraints> <format> Return a table with columns for current field name, issue found, and recommended fix, followed by a short summary paragraph. </format>

You are a conversion focused copywriter who writes homepage copy for Webflow sites. <context> I am writing homepage copy for a Webflow site and need a full draft that a designer can drop straight into sections. </context> <inputs> - Company name: [COMPANY NAME] - What the company does: [WHAT COMPANY DOES] - Primary audience: [PRIMARY AUDIENCE] - Main conversion goal: [CONVERSION GOAL] - Tone: [BRAND TONE] </inputs> <task> Write hero headline and subheadline copy, three supporting section headlines with one sentence of body copy each, and a closing call to action section. </task> <constraints> Keep the headline under twelve words. Avoid vague claims that could apply to any company. Write in the second person addressing the visitor directly. No filler sentences. </constraints> <format> Return the copy broken into labeled sections matching a typical homepage layout, hero, then each supporting section, then the closing call to action. </format>

You are a copywriter who specializes in service pages that convert without sounding like filler. <context> I need to write a service page for a Webflow site and want copy that clearly explains what is included without sounding like generic marketing filler. </context> <inputs> - Service name: [SERVICE NAME] - What is included: [LIST OF DELIVERABLES] - Target customer: [TARGET CUSTOMER] - Price or pricing model: [PRICING MODEL] - Objection to address: [COMMON OBJECTION] </inputs> <task> Write a full service page including a headline, an explanation of what the service includes, who it is for, and a section addressing the stated objection. </task> <constraints> Be concrete about deliverables rather than vague benefits. Address the objection directly instead of avoiding it. Keep paragraphs short enough for scanning. </constraints> <format> Return the copy in labeled sections, headline, overview, what is included as a bulleted list, who it is for, objection response, and a closing call to action line. </format>

You are a brand copywriter who writes about pages that read like a real company history. <context> I am writing an about page for a Webflow site and want copy that sounds like a real company history rather than a template about page. </context> <inputs> - Founding story detail: [FOUNDING STORY DETAIL] - Year founded: [YEAR FOUNDED] - Team size: [TEAM SIZE] - Value that sets the company apart: [DIFFERENTIATING VALUE] </inputs> <task> Write about page copy that opens with the founding story detail, explains what the company does today, and closes with the differentiating value in a way a visitor will remember. </task> <constraints> Do not open with a generic mission statement. Use the specific detail I gave you rather than inventing new claims. Keep the whole page under 350 words. </constraints> <format> Return the copy as plain paragraphs under three short headings, our story, what we do now, and what makes us different. </format>

You are a direct response copywriter who writes single purpose campaign landing pages. <context> I am launching a paid campaign that needs a dedicated Webflow landing page and the copy has to match the ad promise exactly. </context> <inputs> - Ad headline being used: [AD HEADLINE] - Offer: [OFFER DETAIL] - Deadline or scarcity element: [DEADLINE DETAIL] - Target audience: [TARGET AUDIENCE] </inputs> <task> Write landing page copy that matches the ad headline, restates the offer clearly, and builds toward a single call to action with no distracting links. </task> <constraints> Do not introduce a different headline than the ad. Keep the page focused on one action only. Mention the deadline or scarcity element once, not repeatedly. </constraints> <format> Return the copy as hero headline, one supporting paragraph, three bullet points on the offer, and one final call to action line. </format>

You are a case study writer who turns rough project notes into credible client facing stories. <context> I have rough notes from a client project and need to turn them into a case study page for the Webflow portfolio section. </context> <inputs> - Client industry: [CLIENT INDUSTRY] - Problem before the project: [PROBLEM DESCRIPTION] - What was built or done: [SOLUTION DESCRIPTION] - Result or outcome: [RESULT OR METRIC] </inputs> <task> Turn these notes into a case study with a clear before and after structure that a prospective client reading it would find credible. </task> <constraints> Do not inflate the result beyond what I gave you. Keep the tone factual rather than promotional. Use specific numbers where I provided them instead of vague claims. </constraints> <format> Return the copy under three headings, the challenge, the approach, and the result, each two to four sentences. </format>

You are a Webflow interactions specialist who writes precise briefs for scroll based animation. <context> I need to brief a Webflow developer on a scroll triggered animation for a section and want the spec detailed enough that there is no back and forth. </context> <inputs> - Section name: [SECTION NAME] - Elements involved: [LIST OF ELEMENTS] - Trigger point on scroll: [TRIGGER POINT] - Desired feeling: [DESIRED FEELING] </inputs> <task> Write an interaction brief describing exactly what happens to each element as the user scrolls into this section, including timing and easing in plain language. </task> <constraints> Describe motion in terms a Webflow developer using native interactions can implement, not vague creative language. Note what should happen on scroll back up. </constraints> <format> Return a numbered sequence of steps, each step naming the element, the motion, the timing, and the trigger condition. </format>

You are a Webflow interactions specialist who specs hover states for repeating components. <context> I am specifying hover states for a set of cards on a Webflow page and want a brief a developer can implement without guessing at details. </context> <inputs> - Card type: [CARD TYPE] - Elements inside the card: [LIST OF CARD ELEMENTS] - Brand motion style: [MOTION STYLE] - Devices to support: [DEVICE LIST] </inputs> <task> Describe the hover state behavior for each element inside the card, including what changes, how fast, and what happens on touch devices where hover does not apply. </task> <constraints> Keep the hover effect subtle enough not to distract from the card content. Specify a fallback for touch devices explicitly, do not leave it unaddressed. </constraints> <format> Return a short table with columns for element, hover behavior, duration, and touch device fallback. </format>

You are a Webflow interactions specialist who plans page transitions. <context> I want a page transition between two Webflow templates and need to brief the interaction clearly before development starts. </context> <inputs> - Page leaving: [PAGE LEAVING] - Page entering: [PAGE ENTERING] - Brand tone: [BRAND TONE] - Load time concern: [LOAD TIME CONCERN] </inputs> <task> Describe the transition animation between these two pages, covering what happens on exit, what happens on entry, and how long the whole transition should take. </task> <constraints> Keep total transition time under 600 milliseconds unless I say otherwise. Do not propose an effect that would hide a slow page load, note if a loading state is needed instead. </constraints> <format> Return the brief as three short sections, exit animation, entry animation, and total timing with a note on the loading state. </format>

You are a Webflow interactions specialist who specs mobile navigation behavior. <context> I am specifying how the mobile navigation menu should open and close on a Webflow site and want the brief precise enough for handoff. </context> <inputs> - Menu trigger icon: [MENU TRIGGER ICON] - Number of menu items: [NUMBER OF MENU ITEMS] - Submenu needed: [YES OR NO] - Brand motion style: [MOTION STYLE] </inputs> <task> Describe exactly how the mobile menu opens, how each item appears, and how it closes, including any staggered animation on the list items. </task> <constraints> Keep the open and close animations fast enough that the menu does not feel sluggish on a real phone. Specify the icon state change from open to close. </constraints> <format> Return the brief as an ordered list of states, closed, opening, open, closing, each with a one sentence description of the motion. </format>

You are a Webflow interactions specialist who specs form and button micro interactions. <context> I need to brief the micro interactions on a form and its submit button for a Webflow site so the states feel considered rather than default. </context> <inputs> - Form purpose: [FORM PURPOSE] - Fields in the form: [LIST OF FORM FIELDS] - Success behavior: [SUCCESS BEHAVIOR] - Error behavior: [ERROR BEHAVIOR] </inputs> <task> Describe the micro interactions for focus state, button hover, button click, successful submission, and validation errors. </task> <constraints> Keep error messaging inline near the field that failed, not only at the top of the form. Make the success state unmistakable without relying on color alone. </constraints> <format> Return the brief as a table with columns for interaction moment, visual change, and any text shown to the user. </format>

You are a technical SEO specialist who designs dynamic metadata patterns for CMS templates. <context> I need a repeatable meta title and description pattern for a CMS collection template in Webflow so every item gets good metadata automatically. </context> <inputs> - Collection name: [COLLECTION NAME] - Fields available for the pattern: [LIST OF AVAILABLE FIELDS] - Brand name to include: [BRAND NAME] - Target keyword pattern: [KEYWORD PATTERN] </inputs> <task> Design a dynamic meta title and description formula using the available fields that stays within character limits for every item in the collection. </task> <constraints> Keep titles under 60 characters and descriptions under 155 characters even for the longest field values. Avoid keyword stuffing. </constraints> <format> Return the title formula and description formula written with field placeholders in curly braces, followed by two example outputs using sample data. </format>

You are a technical SEO specialist who builds redirect maps for platform migrations. <context> I am migrating a site into Webflow and need a redirect map so no existing search rankings get lost. </context> <inputs> - Old URLs list source: [SOURCE OF OLD URLS] - Number of URLs to map: [NUMBER OF URLS] - New URL structure: [NEW URL STRUCTURE] - Pages being removed entirely: [LIST OF REMOVED PAGES] </inputs> <task> Build a redirect map pairing each old URL to its closest new equivalent, and recommend a fallback destination for any removed page that has no direct replacement. </task> <constraints> Never redirect an unrelated old URL to the homepage as a default, choose the closest matching page instead. Flag any old URL you are unsure about instead of guessing. </constraints> <format> Return a table with columns for old URL, new URL, and a note explaining the match, followed by a short list of any URLs flagged for manual review. </format>

You are a Webflow performance specialist who audits sites before launch. <context> I want to brief a performance review of a Webflow site before launch and need to know what to check specifically, not a generic speed lecture. </context> <inputs> - Site type: [SITE TYPE] - Known heavy elements: [LIST OF HEAVY ELEMENTS] - Target load time: [TARGET LOAD TIME] - Pages considered highest priority: [HIGH PRIORITY PAGES] </inputs> <task> Write an audit checklist covering image sizing, video embeds, custom code, and font loading, specific to what commonly slows down a Webflow site. </task> <constraints> Focus on issues that are actually fixable inside Webflow's settings and asset manager, not generic web performance advice unrelated to the platform. </constraints> <format> Return a checklist grouped by category, images, video, fonts, and custom code, each item phrased as a specific check to perform. </format>

You are a technical SEO specialist who plans structured data for CMS driven pages. <context> I want to add structured data to a CMS collection in Webflow using its embed field and need a clear plan for which schema type fits and what fields map to it. </context> <inputs> - Collection type: [COLLECTION TYPE] - Fields available: [LIST OF AVAILABLE FIELDS] - Schema type being considered: [SCHEMA TYPE] - Business goal for rich results: [RICH RESULT GOAL] </inputs> <task> Recommend the correct schema type for this collection, map each required schema property to an existing CMS field, and note any property with no matching field. </task> <constraints> Only recommend schema properties that are actually required or strongly recommended for this schema type, do not pad the markup with optional fields that add no value. </constraints> <format> Return a table with columns for schema property, mapped CMS field, and required or optional, followed by a short paragraph on how to add this via an embed field. </format>

You are a technical SEO specialist who audits Webflow project settings before launch. <context> Before launching a Webflow site I want a full audit of the platform specific SEO settings so nothing gets missed in the excitement of launch day. </context> <inputs> - Site name: [SITE NAME] - Number of static pages: [NUMBER OF STATIC PAGES] - CMS collections in use: [LIST OF CMS COLLECTIONS] - Launch date: [LAUNCH DATE] </inputs> <task> Produce a full checklist covering sitemap settings, robots settings, 301 redirects, canonical tags, and Open Graph images specific to Webflow's project settings panel. </task> <constraints> Reference the actual location of each setting inside Webflow's designer or project settings so the person running the checklist knows where to look. </constraints> <format> Return the checklist as a numbered list grouped under headings for sitemap, indexing, redirects, and social sharing. </format>

You are a Webflow project lead who writes handoff documents for client marketing teams. <context> I am handing a finished Webflow site to a client's marketing team and want a style guide that keeps their future edits consistent with the design. </context> <inputs> - Brand colors: [LIST OF BRAND COLORS] - Approved fonts: [LIST OF APPROVED FONTS] - Components client can edit: [LIST OF EDITABLE COMPONENTS] - Common mistake to prevent: [COMMON MISTAKE] </inputs> <task> Write a short style guide explaining which colors and fonts to use, how to use the editable components correctly, and how to avoid the common mistake. </task> <constraints> Write for someone with no design background. Avoid design jargon. Keep each rule to one or two sentences. </constraints> <format> Return the guide as short sections, colors, fonts, components, and a final section titled things to avoid. </format>

You are a Webflow trainer who writes CMS onboarding guides for non technical clients. <context> I need to write a training guide so a client's content team can add new items to a Webflow CMS collection without breaking the layout. </context> <inputs> - Collection name: [COLLECTION NAME] - Fields the client will fill in: [LIST OF CLIENT FACING FIELDS] - Fields the client should never touch: [LIST OF RESTRICTED FIELDS] - Common error to prevent: [COMMON ERROR] </inputs> <task> Write a step by step guide for adding a new item to this collection, explaining each field the client should fill in and warning clearly about the restricted fields. </task> <constraints> Use numbered steps, not paragraphs. Assume the reader has never used Webflow's CMS editor before. Call out the restricted fields in a clearly separated warning. </constraints> <format> Return the guide as a numbered step by step list, followed by a separate warning box style section listing fields to leave alone and why. </format>

You are a Webflow project manager who scopes projects to prevent scope creep. <context> I am scoping a new Webflow project and want a page by page brief the client can approve before any design work starts, to prevent scope creep later. </context> <inputs> - Project name: [PROJECT NAME] - Pages included in scope: [LIST OF PAGES IN SCOPE] - Pages explicitly out of scope: [LIST OF PAGES OUT OF SCOPE] - Timeline: [TIMELINE] </inputs> <task> Write a scope document listing every page included, a one sentence description of what each page needs, and a clear statement of what is not included in this phase. </task> <constraints> Be explicit about what is excluded, do not leave it implied. Keep the document short enough that a client will actually read it in full. </constraints> <format> Return the document as a table of in scope pages with a one sentence description each, followed by a short list of out of scope items and the timeline. </format>

You are a Webflow QA specialist who catches launch day mistakes before they go live. <context> Before pushing a Webflow site live I want a QA checklist that catches the mistakes that usually slip through at the end of a project. </context> <inputs> - Site type: [SITE TYPE] - Number of pages to check: [NUMBER OF PAGES] - Forms on the site: [LIST OF FORMS] - Browsers or devices to test: [DEVICE LIST] </inputs> <task> Produce a QA checklist covering broken links, form submissions, responsive breakpoints, favicon, and 404 page, specific to what commonly breaks in a Webflow launch. </task> <constraints> Make each item a specific action to check rather than a vague reminder. Include a step for testing form notification emails actually arrive. </constraints> <format> Return the checklist as a numbered list grouped under headings for links, forms, responsive design, and final settings. </format>

You are a Webflow account manager who writes maintenance plans for clients after launch. <context> I want to hand a client a simple maintenance plan after launching their Webflow site so they know what needs regular attention. </context> <inputs> - Site type: [SITE TYPE] - Client technical comfort level: [TECHNICAL COMFORT LEVEL] - CMS collections needing regular updates: [LIST OF CMS COLLECTIONS] - Support arrangement: [SUPPORT ARRANGEMENT] </inputs> <task> Write a maintenance plan listing what should be checked monthly, what should be updated regularly, and when the client should contact support instead of doing it themselves. </task> <constraints> Match the recommendations to the client's stated technical comfort level, do not recommend tasks they are not equipped to do safely. </constraints> <format> Return the plan as three sections, monthly checks, regular content updates, and when to contact support, each as a short bullet list. </format>