Prompt Library

 <task>
Add meaningful alt text to all images in the media library.
</task>

‍

<guidelines>

 <rule>Describe the image in 5–12 words.</rule>

  <rule>Include concrete details (objects, action, setting, people, brand/logos if visible).</rule>

  <rule>Do not start with "image of" or "photo of".</rule>

  <rule>Use sentence case; no trailing period; be objective.</rule>

</guidelines>

‍

<model>

Before doing anything else, send this message, word for word, nothing else:“The best Miyagi model to use for alt text is Gemini 2.5 flash. Take a minute to switch if needed and then let me know when you’d like me to proceed with adding alt text to the site.”
</model>

You are a Webflow expert. Your task is to organize all image assets in this Webflow project into folders based on the pages where each image is used.

Instructions:

1. Open the Assets panel in the Webflow Designer.
2. Create a new folder for each static page in the project.
   
   • Name the folder after the page. Example: Home, About, Contact, Services.
3. Review every image in the Assets panel and:
   
   • Identify the page(s) where the image is used.
   • If the image is used on only one page, move it to that page’s folder.
   • If the image is used on multiple pages, move it to the Global folder instead.
4. Move all globally used assets (logos, icons, social icons, favicons, etc.) to the Global folder.

Example:

team-photo.jpg used only on the About page → Move to About folder

<task>

Get every anchor/link element on the current page and check if the protocol equals "HTTP". If it does, replace it with "HTTPS".

</task>

<task>

Get all styles / CSS classes for this Webflow website and then provide a CSS file that contains the classes with all properties.

</task>

‍

<task>

Find all elements on the current page which have the <old-attribute> applied and replace that attribute with <new-attribute>. If a value has been provided for BOTH the <old-attribute> and <new-attribute> (e.g. data-example=hello-world), then target plus replace the name AND value, otherwise replace only the name (e.g. data-example).

</task>

‍

<old-attribute>

data-example=earth

</old-attribute>

‍

<new-attribute>

data-experiment=moon

</new-attribute>

‍

<task>

Get every anchor/link element on the current page which points to a third-party site (so, external links). Apply the following two HTML attribute to them: target="_blank" and rel="noopener nofollow". Before completing this task, get the current site info, so you know what domain(s) we use.

</task>

‍

<task>

Get every element on the current page and identify all buttons that either have no URL (e.g. field is empty) OR buttons that are linked to a section on the page (e.g. #footer). If a link has not been set, then apply the following two HTML attributes: "role=button" and tabindex="0" to the element.

</task>

‍

<task>

Get each 'Static Page' on this Webflow website, ignoring 'CMS Collection Pages' and the homepage. Retrieve the 'SEO Settings', namely the 'Title Tag' and 'Meta Description'; along with the 'Open Graph Settings', namely the 'Open Graph Title', 'Open Graph Description' and 'Open Graph Image'. Output a CSV file for all this data and include the page's 'Slug' as a column as well. Skip any pages where every 'SEO Settings' field is empty.

</task>

‍

<task>

Add or replace the 'Open Graph' image URL for each 'Static Page' on this Webflow website with either the provided URL OR with the 'Open Graph' image URL from the current page (if no URL was provided). Update all pages on the Webflow website, ignoring 'CMS Collection Pages'.

Before updating the 'Static Pages', verify the URL is valid using basic validation (e.g. protocol, hostname, etc.).

</task>

<open-graph-image-url>

If this XML tag is empty, get the 'Open Graph' image URL for the current page instead and use that.

</open-graph-image-url>

‍

<task>

Get each 'Static Page' on this Webflow website, ignoring 'CMS Collection Pages'. Update each page to enable the 'Exclude this page from site search results' setting, so no pages are discoverable via the site search.

</task>

You are a visual Webflow developer improving accessibility. Your task is to add aria-label attributes to button and link elements only where needed using Webflow’s Custom Attributes panel.

How to Add ARIA Label in Webflow

1. Select the Button or Link
2. Open the Settings panel
3. Go to Custom Attributes
4. Click + Add Custom Attribute
5. Name = aria-label
6. Value = clear description of what the element does

Label Length Guidelines

• Word limit = 2 to 7 words
• Character limit = 25 to 60 characters
• Keep labels short, specific, and action-based

When to Add aria-label

Add only if the visible text is unclear or missing:

• Icon-only elements
• Generic text like "More", "Click here", "→", "2", or "Submit"
• Text is visually cut off
• Multiple buttons with the same label in different forms

When Not to Add

Skip aria-label if:

• The visible text is already clear (example: "Download Resume", "Contact Us")
• The element is understandable without extra info
• The same label is used for different actions

Examples

Icon-only button

aria-label = Search

Blog card "More" button under "Dental Tips"

aria-label = Read more about Dental Tips

Pagination number "4"

aria-label = Go to page 4

Submit buttons

Contact form: aria-label = Submit contact form

Job form: aria-label = Submit job application form

task: Replace all instances of the target_class with the replacement_class across the defined scope.

success: Complete the task in one go. Do not pause between steps. Break the task into manageable chunks if needed, but do not stop until the entire scope is processed. Use batch execution for efficiency.

execution_steps:

1. Access the defined page or set of pages.
2. Process one section at a time (sections typically have "section" in the class name, such as section_header).
3. Within each section, find all elements with the target_class and replace them with the replacement_class.
4. Move to the next section and repeat the process.
5. Once all sections on the page are complete, move to the next page.
6. Continue until every page within the defined scope has been fully processed.

user_inputs:
scope: {{Describe scope, e.g., "All pages attached"}}
target_class: {{Insert class to be replaced}}
replacement_class: {{Insert new class to apply}}

‍

You are an expert LLM agent designed to generate an accurate, well-structured `llms.txt` file based on a Webflow website.

‍

The goal is to help downstream LLMs quickly understand the site structure and locate high-signal resources for reasoning, coding, or content generation. Your output is a valid `llms.txt` markdown file that reflects the Webflow site layout.

‍

---

‍

## 📘 Context:

‍

Check the **homepage and all other relevant Webflow pages**, including global elements (navbar/footer), CMS collections, and static pages.

‍

Extract meaningful sections and links based on what an LLM would find most useful — e.g., overview summaries, example patterns, key documents, and API endpoints, *not* visual fluff or marketing-only copy.

‍

---

‍

## 🧱 llms.txt Structure:

‍

Your output should follow this structure:

‍

1. `# <Project Title>`

Use the **project or site name** as the H1 heading.

‍

2. `> <Purpose Summary>`

A **clear, specific blockquote** describing what the site or product does, who it's for, and why it matters.

‍

3. Optional Notes Section (Markdown text, no headings)

Notes for downstream LLMs — how to interpret site sections, reuse patterns, or caveats.

‍

4. `## <Section Name>`

Use **Webflow-relevant groupings**, like:

‍

* "Product Pages"

* "Use Cases"

* "Docs"

* "CMS Collections"

* "Customer Stories"

‍

Each section should contain:

‍

```

- [Page Title](https://example.com/page): Optional short description

```

‍

5. `## Optional`

Lower-priority or supplemental links, like:

‍

* Changelog

* Terms / Privacy

* Blog archives

* Legacy components

‍

---

‍

## ✅ Example (for a Webflow SaaS site):

‍

```

# Miyagi

‍

> AI agents that automate design, code, and CMS tasks inside Webflow.

‍

Built for Webflow developers to save hours on routine work. Supports on-canvas actions, CMS updates, and JS animation helpers with context-aware AI.

‍

## Product Pages

- [AI Agent](https://example.com/design-agent): Automates tasks in Webflow Designer

- [Code Agent](https://example.com/code-agent): JS/CSS editing with project-aware AI

- [CMS Agent](https://example.com/cms-agent): Automates Webflow CMS entries and updates

‍

## Use Cases

- [Build Faster](https://example.com/use-cases/build-faster): Reduce time spent on busywork

- [Handle Complexity](https://example.com/use-cases/complex-sites): Use AI on large, component-driven sites

‍

## Docs

- [Quick Start](https://example.com/docs/start): Setup and activation steps

- [Agent Capabilities](https://example.com/docs/agents): Full list of AI actions supported

‍

## Optional

- [Changelog](https://example.com/changelog): Weekly release updates

- [Terms](https://example.com/legal/terms): Legal agreement

- [Privacy Policy](https://example.com/legal/privacy): User data handling

```

‍

---

‍

## 🧠 Guidelines:

‍

* Base all links and section groups on Webflow's page structure — nav items, footer links, CMS collections.

* Keep the file under 100 KB, UTF-8 encoded

* You may omit purely visual or decorative pages.

* If no useful content exists for a section, skip it.

* Do not include internal-only or draft links.

* Prefer summarizing content over listing redundant links.

‍

---

‍

Now use this instruction to generate a `llms.txt` file from a Webflow site.

You are converting a Webflow project that uses Finsweet Attributes CMS Filter v1 to the new List Filter v2.

Your job is to update all HTML elements with the correct attribute names and values to reflect the new v2 system. Use the following conversion rules:

---

**SCRIPT TAG**

Replace:
```html
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
```
With:
```html
<script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"></script>
```

---

**ATTRIBUTE CONVERSIONS**

| v1 Attribute | v2 Attribute |
|--------------|--------------|
| `fs-cmsfilter-element="list"` | `fs-list-element="list"` |
| `fs-cmsfilter-element="filters"` | `fs-list-element="filters"` |
| `fs-cmsfilter-field="..."` | `fs-list-field="..."` |
| (inferred label value on checkbox/radio) | Add `fs-list-value="..."` |
| `fs-cmsfilter-element="clear"` | `fs-list-element="clear"` |
| `fs-cmsfilter-element="results-count"` | `fs-list-element="results-count"` |
| `fs-cmsfilter-element="items-count"` | `fs-list-element="items-count"` |
| `fs-cmsfilter-element="empty"` | `fs-list-element="empty"` |
| `fs-cmsfilter-element="initial"` | `fs-list-element="initial"` |
| `fs-cmsfilter-element="tag"` | `fs-list-element="tag"` |
| `fs-cmsfilter-element="tag-text"` | `fs-list-element="tag-value"` |
| `fs-cmsfilter-element="tag-remove"` | `fs-list-element="tag-remove"` |
| `fs-cmsfilter-element="anchor-scroll"` | `fs-list-element="scroll-anchor"` |
| `fs-cmsfilter-showquery="true"` | `fs-list-showquery="true"` |
| `fs-cmsfilter-highlight="true"` | `fs-list-highlight="true"` |
| `fs-cmsfilter-highlight-class="className"` | `fs-list-highlightclass="className"` |
| `fs-cmsfilter-debounce="300"` | `fs-list-debounce="300"` |

---

**NOTES**
- Every `fs-cmsfilter-field` should now be updated to `fs-list-field`.
- Add `fs-list-value="..."` for checkboxes or radio buttons that previously relied on label text.
- If you have multiple filter groups or lists on a page, add `fs-list-instance="uniqueName"` to both the list and form wrapper.
- Only include one v2 script tag per page, even if there are multiple filters.

---

Using this mapping, convert all instances of Finsweet CMS Filter v1 attributes in the provided HTML into the List Filter v2 equivalents. Do not skip or rename any classes or structure unless necessary for the attribute change.

‍

You are a Webflow expert familiar with the Client-First framework by Finsweet. Below is a summarized reference of the key principles from the "Client-First Quick Guide" PDF. Use these guidelines when naming classes, structuring pages, applying utility systems, and organizing content within Webflow projects. Any output you generate — including class names, layout suggestions, spacing systems, or naming conventions — must align with these principles.

**Class Naming Guidelines:**
- Use **utility classes** with dashes (e.g. `text-size-large`, `background-color-primary`)
- Use **custom classes** with underscores to create “folders” (e.g. `team-list_headshot-wrapper`)
- Use **combo classes** with the `is-` prefix for variations (e.g. `button is-primary`)
- Names should be **descriptive**, **complete**, and avoid abbreviations
- Follow a **general → to → specific** hierarchy in names (e.g. `team-list_headshot-texture-layer`)

**Page Structure Guidelines:**
- Use structural wrappers like: `page-wrapper`, `main-wrapper`, `section_[identifier]`, `padding-global`, `container-[size]`
- Use `<main>` and `<section>` HTML tags appropriately for accessibility and clarity
- Global styles should live in a `global-styles` embed symbol on every page

**Spacing System:**
- Use `padding-[direction]`, `padding-[size]`, `spacer-[size]`, `margin-[direction]`, etc. with REM values
- Use `padding-section-[size]` on section wrappers for global top/bottom spacing
- Avoid deep stacking of multiple spacing utilities — use one class or merge with Finsweet’s extension if needed

**Typography:**
- Use `heading-style-h1` through `heading-style-h6` to override visual style without breaking semantic heading order
- Use `text-size-[scale]`, `text-color-[name]`, `text-weight-[value]`, `text-align-[value]`, and `text-style-[variant]` for global text styling
- Stack only typography-related utility classes together (avoid mixing with layout/util spacing classes)

**Fluid Responsive & REM Sizing:**
- All units (text, spacing, layout) should use `rem`
- Support browser zoom and accessibility
- Optional: Use Finsweet’s fluid responsive system for consistent scaling

**Folder Strategy:**
- Use underscores to organize custom classes into folders in the Webflow class manager
- Example: `hero_headline` and `hero_subtitle` are grouped under “hero”

**Other Utility Classes:**
- Buttons: `button`, `button is-secondary`, `button is-text`
- Icons: `icon-[size]`, `icon-1x1-[size]`
- Visibility: `hide`, `hide-mobile`, etc.
- Max-width: `max-width-[size]`, including responsive variants
- Layering: `z-index-[level]`, `position` utilities, `display-inlineflex`, `pointer-events-none`

**Sales Strategy Notes (if relevant):**
- Client-First helps with maintainability, scalability, accessibility, and team handoff
- Enables clients to understand and manage projects even after handoff

Please apply all of the above when generating Webflow code, class names, or project structure recommendations. Do not deviate from these conventions unless explicitly told otherwise.

‍