Forem: Ben Sabic

Replace Your Vector Pipeline with bash

Ben Sabic — Sat, 21 Mar 2026 14:10:42 +0000

Most knowledge agents follow the same playbook: pick a vector database, build a chunking pipeline, choose an embedding model, tune retrieval parameters. Weeks later, your agent confidently returns the wrong answer and you can't figure out why.

We took a different path. Instead of embeddings, we gave the agent a filesystem and bash. It searches your content using grep, find, and cat inside isolated sandboxes. No vector DB, no chunking, no embedding model.

The results were striking. Applying this pattern to a sales call summarization agent cut costs from ~$1.00 to ~$0.25 per call, and output quality actually improved. The core insight is simple: LLMs have been trained on enormous amounts of code. They already know how to navigate directories and grep through files. You're not teaching the model a new skill. You're leveraging the one it's best at.

Debugging gets a lot easier too. With vectors, a bad answer means trying to understand why one chunk scored 0.82 while the correct one scored 0.79. Was it the chunking boundary? The embedding model? The similarity threshold? With filesystem search, you open the trace and see exactly which commands ran, which files were read, and where things went wrong. The whole fix loop takes minutes.

We open-sourced a production-ready version of this architecture called the Knowledge Agent Template, built on Vercel Sandbox, AI SDK, and Chat SDK. It includes:

File-system-based search with no vector DB required
Multi-platform deployment via Chat SDK (GitHub, Discord, Slack, Teams, and more from a single codebase)
A complexity router that sends simple questions to fast, cheap models and hard questions to powerful ones
Built-in admin tools with usage stats, error logs, and an AI-powered admin agent for debugging

Read the full writeup and deploy the template:

👉 vercel.com/blog/build-knowledge-agents-without-embeddings

How Agent Skills Can Make AI Actually Useful for Your Business

Ben Sabic — Thu, 26 Feb 2026 01:15:54 +0000

Most people use AI the same way: open a chat, type a prompt, hope for the best. Sometimes it works. Often it doesn't, because the AI has no idea how your business operates, what tools you use, or what good output looks like for your team.

Agent skills change that. They're a simple, open format for giving AI agents the specific knowledge they need to do a job well. And they're about to reshape how marketing teams, designers, and agencies work with AI.

What Are Agent Skills?

An agent skill is a folder containing instructions, reference docs, and scripts that an AI agent can read when it needs them. Think of it like an onboarding guide you'd hand a new team member on their first day, except the new hire is an AI model.

Each skill has a SKILL.md file that tells the agent what the skill does and when to use it. When the agent encounters a task that matches, it reads the instructions and gets to work with the right context. No guessing, no hallucinating, no generic output.

Anthropic originally built skills for Claude, then released the format as an open standard. Now they work across a growing number of AI tools, and partners like Canva, Notion, Figma, and Atlassian are already building their own.

Here's why that matters for you.

Why Should Marketers and Designers Care?

If you've ever asked an AI to write a blog post and received something that sounds like a Wikipedia entry, you've hit the knowledge gap problem. The AI is smart, but it doesn't know your brand voice, your audience, your content strategy, or your style guidelines.

Skills close that gap. A well-built skill can teach an AI how your team actually works: how you structure blog posts, what tone you use, which metrics matter, and how you format deliverables. The result is output that's useful from the first draft, not the fifth.

And skills aren't limited to coding tools. You can use them in Claude's web interface, in Claude Cowork (a desktop tool for file and task automation), and through the API. If your workflow involves generating reports, drafting content, analysing data, or building presentations, skills can improve the quality of every one of those tasks.

How We Use Agent Skills Every Day

At 224 Industries, we started building custom skills because we were tired of babysitting AI output. We're a Webflow agency that works with tech and SaaS companies like Easy Agile, Clear Dynamics, and Giraffe, and our work spans strategy, design, and development. AI touches all three.

Here's how skills show up in our day-to-day:

Research and reporting. We use skills that guide Claude through multi-step research workflows, pulling data from the web, structuring findings, and producing reports that are 30+ pages long. What used to take a full day of manual work now takes under an hour, and the output follows our formatting standards every time.

Content creation. Our SEO content skill teaches the AI how to write for both search engines and AI answer engines, following our internal guidelines for keyword placement, structure, and tone. It even checks for common AI-sounding phrases and flags them before we publish.

Code and development. Our open-source Webflow agent skills give coding agents accurate documentation for Webflow's APIs. Before we built these, agents would hallucinate methods that don't exist. Now they produce working code on the first pass.

Data analysis. We have a CSV analysis skill that turns raw data exports into clear statistical summaries with visualisations, using our preferred tools and formatting conventions.

The pattern is the same every time: teach the AI once, use it repeatedly, get better results.

Our Webflow Agent Skills (Open Source)

We released five Webflow agent skills as open source because we saw a gap nobody was filling. AI coding agents are powerful, but they had zero context on how Webflow's APIs actually work. The result was hallucinated code and wasted time.

Our skills cover the Designer API (building extensions and using the API Playground), the Browser API (consent management and tracking), Code Components (React components via DevLink), Webhooks (signature verification and event handling), and the Enterprise API (workspace management and audit logs).

Each skill follows the open Agent Skills standard and works with Claude everywhere (e.g. web, Cowork, and Code), Cursor, GitHub Copilot, OpenAI Codex, Gemini CLI, and any other compatible agent. They're MIT-licensed and free.

The response from the Webflow community has been positive. After building them for our internal workflow, we realised other agencies and developers would face the same problems. Open-sourcing them was the obvious next step.

Agent Skills as a Lead Magnet

Here's something most businesses haven't figured out yet: agent skills make excellent lead magnets.

If your company has expertise in a specific domain, you can package that knowledge into a skill and offer it as a free download. The people who want it are exactly your target audience: they use AI tools, they work in your industry, and they're actively looking for ways to get better results.

Take our Webflow skills. Every developer or agency that installs them is someone who builds on Webflow. That's our core audience, discovering our brand through a tool that genuinely helps them.

Compare that to a generic PDF ebook that sits in someone's downloads folder unopened. A skill is something people actually use, repeatedly, inside the tools they already work with. The brand exposure compounds every time someone runs it.

Selling and Distributing Skills Privately

Free skills work for lead generation. But there's also a real opportunity to sell premium skills.

If you've spent months refining a workflow (your content strategy, your QA process, your reporting framework), that expertise has value. Packaging it as a skill and distributing it privately, whether through direct sales, a membership, or as part of a service offering, gives clients something tangible beyond a PDF process document.

A few ways this could work: an SEO agency sells a content brief skill that generates briefs matching their methodology. A design studio offers a brand guidelines skill that teaches AI to apply their client's visual identity correctly. A consultancy bundles custom skills as part of their retainer.

The format is simple enough that anyone can build a skill, but the knowledge inside it is what makes it valuable. That's a hard combination to copy.

How We Can Help You Build Your Own

This is where we come in. At 224 Industries, we don't just build skills for our own use. We help brands create agent skills that match their workflows, capture their expertise, and improve how their teams work with AI.

That could look like building a set of custom skills for your marketing team so your AI-generated content always hits the mark. It could mean creating a skill-based lead magnet that attracts your ideal audience. Or it could be packaging your agency's methodology into skills you distribute to clients.

We handle the strategy, the skill architecture, and the testing to make sure the output actually meets your standards. We've been through the trial and error already (our early skills were too long, too vague, and too generic before we dialled in what works).

Where This Is Heading

Agent skills are still early. Anthropic launched them in October 2025 and opened the standard in December. But the trajectory is clear: AI agents are moving from general-purpose assistants to specialised tools that know how to do specific jobs well.

The businesses that invest in skills now (building them, using them, distributing them) will have a serious head start. Not because the technology is complicated, but because the hard part is the knowledge and the workflows that go inside them.

If you're curious about what agent skills could look like for your team, book a call with us. We'll walk you through the possibilities and figure out where skills would have the biggest impact on your work.

Frequently Asked Questions

What are agent skills?

Agent skills are folders of instructions, scripts, and reference docs that AI agents load when they need specific knowledge to complete a task. They follow an open standard and work across tools like Claude, Cursor, GitHub Copilot, and others.

Do I need to be technical to use agent skills?

No. You can use pre-built skills in Claude's web and desktop apps without writing a single line of code. Creating custom skills does involve some setup, but the format is designed to be readable and editable by anyone.

What AI tools support agent skills?

The open Agent Skills standard is supported by Claude (web, desktop, API, and Claude Code), Cursor, GitHub Copilot, OpenAI Codex, Gemini CLI, OpenCode, Factory Droid, and a growing number of other AI tools.

Can I use agent skills as a lead magnet?

Yes. Skills make strong lead magnets because they're useful tools people actually return to, not static content that gets downloaded once and forgotten. If your target audience uses AI tools, a free skill that helps them do their job better is an effective way to reach them.

How can 224 Industries help with agent skills?

We build custom agent skills for brands, create skill-based lead magnets, and help teams integrate skills into their workflows. We also maintain open-source Webflow agent skills used by developers and agencies worldwide.

How to Bulk-Invite Members and Assign Plans with Memberstack CLI

Ben Sabic — Tue, 24 Feb 2026 05:14:50 +0000

You can onboard an entire list of members into Memberstack from a single CSV file using the Memberstack CLI. No dashboard clicking, no manual data entry. If you're running a course launch, onboarding event attendees, or migrating a list of users from a spreadsheet, this is the fastest way to get them all into your membership site with the right plans attached.

If you're using an AI agent like Claude Code or Codex, you can hand it this guide and it'll run the whole workflow for you.

This guide covers the full process: install the CLI, prepare your CSV, import your members, and verify the results.

What You Need

Before you start, make sure you have:

Node.js v20 or higher installed on your machine. Check with node --version.
A Memberstack account with at least one app created. Sign up free at memberstack.com.
A CSV or JSON file with the members you want to import (we'll cover the format below).
A terminal (or an AI agent with terminal access like Claude Code, Codex, Cursor, or Gemini CLI).

If you're using an AI agent, install the Agent Skill so the agent knows how to use the CLI:

npx skills add Flash-Brew-Digital/memberstack-skills --skill memberstack-cli

Step 1: Install and Authenticate

Install Memberstack CLI globally:

npm install -g memberstack-cli

Then log in:

memberstack auth login

This opens your browser to the Memberstack OAuth page, where you'll choose which application to connect. Your credentials are stored locally and never leave your machine.

Verify it worked:

memberstack whoami

You should see your email, app ID, and current environment (sandbox by default).

Step 2: Check Your Plans

Before importing members, you need the plan IDs you want to assign. List your existing plans:

memberstack plans list

This prints a table of all your plans with their IDs, names, and statuses. Grab the plan ID (it looks like pln_abc123) for any plan you want to assign to your imported members.

Don't have the right plan yet? Create one:

memberstack plans create --name "Workshop Attendee" --description "Access for workshop participants"

The CLI prints the new plan's ID when it's created. Copy that for the next step.

Step 3: Prepare Your CSV File

Your import file needs two required columns: email and password. To assign plans during import, add a plans column with comma-separated plan IDs.

Here's a sample members.csv:

email,password,plans,customFields.firstName,customFields.lastName,customFields.company
alice@example.com,temp-Pass1!,pln_abc123,Alice,Chen,Acme Corp
bob@example.com,temp-Pass2!,pln_abc123,Bob,Martinez,Globex
carol@example.com,temp-Pass3!,"pln_abc123,pln_xyz789",Carol,Johnson,Initech
dave@example.com,temp-Pass4!,pln_abc123,Dave,Wilson,Umbrella Co

A few things to note about the format:

email and password are required for every row.
The plans column accepts one or more plan IDs, separated by commas. Wrap the value in quotes if you're assigning multiple plans (like Carol's row above).
Custom fields use the customFields.* prefix. These map directly to the custom fields you've set up in Memberstack.
You can also include metaData.* columns for metadata and a loginRedirect column for per-member redirect URLs.

If you're using an AI agent, you can skip building the CSV by hand. Just tell it:

"I have a list of 50 attendees in a Google Sheet. Export it as CSV, make sure it has email, password, plans, and name columns, then format it for Memberstack CLI import."

The agent will handle the column mapping and formatting.

Step 4: Import Your Members

Run the import:

memberstack members import --file members.csv

The CLI reads each row, creates the member, and assigns the specified plans. You'll see a progress spinner while it works through the file.

JSON files work too:

memberstack members import --file members.json

For a JSON import, structure the file as an array of objects with the same field names.

Step 5: Verify the Import

Check that your members came through:

memberstack members list --all

The --all flag auto-paginates so you see every member, not just the first page. For a quick count:

memberstack members count

Want to confirm a specific member? Look them up by email:

memberstack members get alice@example.com

This shows their full profile including assigned plans, custom fields, and metadata.

Step 6: Assign Plans After Import (Optional)

If you imported members without plans (or need to add a plan to existing members later), you have two options.

Add a plan to a single member:

memberstack members add-plan mem_abc123 --plan-id pln_xyz789

Add a plan to all members who don't have one yet:

memberstack members bulk-add-plan --plan pln_abc123 --filter no-plan --dry-run

The --dry-run flag previews the changes without applying them. Remove it when you're ready to commit:

memberstack members bulk-add-plan --plan pln_abc123 --filter no-plan

Working with Live vs Sandbox

All commands run against your sandbox (test mode) environment by default. This is the right place to test your import before going live.

Once you're happy with the results, run the same commands against your live environment:

memberstack members import --file members.csv --live

Or use the full flag:

memberstack members import --file members.csv --mode live

Quick Tips

Export first, then re-import. If you need to update a batch of members later, export them, edit the file, and use bulk-update:

memberstack members export --format csv --output current-members.csv
# edit the file...
memberstack members bulk-update --file current-members.csv --dry-run

Pipe JSON for scripting. Add --json to any command to get raw JSON output. This is useful for chaining commands or feeding data into other tools:

memberstack members list --all --json | jq '.[] | .email'

Stats at a glance. After a big import, check your member breakdown by plan:

memberstack members stats

Frequently Asked Questions

What file formats does Memberstack CLI accept for imports?

The CLI accepts both CSV and JSON files. CSV files should use customFields.* and metaData.* prefixes for nested data. JSON files use an array of objects with the same field names.

Can I assign multiple plans to a member during import?

Yes. In a CSV file, list the plan IDs in the plans column separated by commas and wrap them in quotes. In a JSON file, use an array of plan ID strings.

What happens if I import a member that already exists?

The import will fail for that row and continue processing the remaining members. The CLI reports which rows succeeded and which failed so you can fix and re-run.

Is there a limit to how many members I can import at once?

There's no hard limit on the file size. The CLI processes members sequentially and respects Memberstack's API rate limits automatically. Large imports (thousands of members) will take longer but will complete without issues.

How do I test the import before going live?

All commands target the sandbox environment by default. Run your import there first, verify the results, then re-run with the --live flag to push to your live environment.

Key Takeaways

Memberstack CLI lets you import members from a CSV or JSON file in a single command.
You can assign plans, set custom fields, and add metadata during import.
The --dry-run flag on bulk operations lets you preview changes before committing.
Sandbox mode (the default) is the safe place to test imports before going live.
AI agents like Claude Code and Codex can run this entire workflow from a single prompt.

Resources

Five Webflow Agent Skills So AI Coding Agents Can Actually Work With Webflow

Ben Sabic — Tue, 24 Feb 2026 00:20:45 +0000

Webflow Agent Skills by 224 Industries

AI coding agents are good at writing code. They're not so good at writing code for platforms they don't know much about. If you've ever asked Claude Code or Cursor to build a Webflow Designer Extension and received a hallucinated API that doesn't exist, you know what I mean.

We built five open-source Agent Skills that give coding agents the context they need to work with Webflow properly. They're MIT-licensed, free, and work across any agent that supports the open Agent Skills standard.

See the five skills

What Are Agent Skills?

Agent Skills are folders of instructions, scripts, and reference docs that AI agents can discover and load on demand. Think of them as knowledge packs. When an agent encounters a task it doesn't have enough context for (like building a Webflow Designer Extension), it reads the relevant skill and gets up to speed.

The format was originally developed by Anthropic and released as an open standard. It's now supported by a growing list of agent products including OpenAI Codex, Claude Code, Cursor, GitHub Copilot, Gemini CLI, OpenCode, Roo Code, Factory's Droid, and many others.

Each skill contains a SKILL.md file (the entry point), reference documentation, and helper scripts. Agents parse these files to understand how an API works, what patterns to follow, and what mistakes to avoid.

Why We Built These

224 Industries is a Webflow Premium Partner based in Brisbane, Australia. Since 2016, we've been building marketing websites for tech and SaaS companies like Easy Agile, Clear Dynamics, and Giraffe.

We use AI coding agents daily in our development workflow. The problem? Webflow's APIs are well-documented on their site, but agents don't have that documentation in their context window when they're writing code. The result is guesswork, hallucinated methods, and broken output.

Agent Skills fix this. Instead of agents guessing how the Webflow Designer API works, they can read accurate, structured reference docs at the point they need them. Our team's output quality improved immediately after we started using these skills internally, so we decided to open-source them.

The Five Skills

Here's what we released:

1. webflow-designer-api

Work with the Webflow Designer API, either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns.

This is the skill we use most. It includes references for every webflow.* method, plus workflow-specific guides for building extensions vs. prototyping in the Playground.

2. webflow-browser-api

Control Webflow Analyze and Optimize from JavaScript via the Browser API. Covers the global wf object, consent management (with CMP integrations for OneTrust and TrustArc), experiment variation tracking, and custom visitor attributes.

Useful when you need to manage tracking consent, integrate a CMP, or personalise experiences based on visitor attributes.

3. webflow-code-components

Build, define, and import React code components into Webflow using DevLink. Covers declareComponent definitions, all 11 prop types, Shadow DOM styling, Webpack bundling, SSR behaviour, and the CLI import workflow.

If you're building custom React components for Webflow, this skill gives agents full context on how DevLink works, from prop type definitions to framework-specific styling guides for Tailwind, Emotion, Material UI, and others.

4. webflow-webhooks

Receive and verify Webflow webhooks. Includes HMAC-SHA256 signature verification, all 14 event types with payload schemas, setup guides for both dashboard and API-created webhooks, and common debugging patterns.

The skill includes working code examples for Express.js webhook handlers with proper signature verification and timestamp validation.

5. webflow-enterprise-api

Enterprise-only API endpoints for workspace management, audit logs, site activity, 301 redirects, robots.txt configuration, and well-known files. Covers all endpoints, required scopes, and pagination.

This one is only relevant if you're on a Webflow Enterprise workspace, but it fills a gap where agents otherwise have zero context on these endpoints.

How to Install

The fastest way is with the Vercel skills CLI:

# Install all five skills
npx skills add 224-industries/webflow-skills

# Install just one
npx skills add 224-industries/webflow-skills --skill webflow-designer-api

# See what's available
npx skills add 224-industries/webflow-skills --list

If you're using Claude Code or Factory's Droid, you can add them as a plugin:

/plugin add 224-industries/webflow-skills

They also work with the CLIs by Playbooks and Context7:

# Playbooks
npx playbooks add skill 224-industries/webflow-skills

# Context7
npx ctx7 skills install /224-industries/webflow-skills

How They're Structured

Each skill follows the Agent Skills specification. The structure looks like this:

skills/webflow-designer-api/
├── SKILL.md                    # Entry point with overview and reference index
├── references/                 # Detailed API docs, guides, and examples
│   ├── elements-api.md
│   ├── styles-api.md
│   ├── components-api.md
│   └── ...
├── scripts/
│   └── search_references.py    # Search references by tag or keyword
└── assets/
    └── webflow-variables.css   # Design system variables

The SKILL.md file acts as a table of contents. It gives the agent a high-level overview and tells it where to find detailed reference docs. Agents typically read the skill file first, then pull in the specific references they need for the task at hand.

Every reference file includes YAML frontmatter with name, description, and tags so agents (and humans) can search across them:

python scripts/search_references.py --search "consent"
python scripts/search_references.py --tag "styles"

What We Learned Building These

A few things stood out during development.

Concise beats comprehensive. Early versions of our skills were too long. Agents have limited context windows, and stuffing every edge case into one file made them slower and less accurate. Breaking content into focused reference files that agents load on demand produced better results.

Structure matters more than prose. Tables, code examples, and clear headings are more useful to agents than paragraphs of explanation. Agents parse structured content faster and produce more accurate code when they can pattern-match against examples.

Frontmatter enables discoverability. Adding tags and descriptions to every reference file lets agents search for what they need rather than reading everything. The search scripts in each skill make this even easier.

Contributing

The repo is open for contributions. If you spot inaccuracies, want to add more examples, or have ideas for new Webflow-related skills, PRs are welcome.

You can also use the included script to scaffold new skills:

node scripts/add-skill.js <skill-name> "<description>"

This creates the folder structure and updates all manifest files automatically.

Frequently Asked Questions

What agents support Agent Skills?

The Agent Skills format is supported by Claude Code, Cursor, GitHub Copilot (via VS Code), Gemini CLI, Roo Code, OpenHands, Goose, Factory Droid, and many more. The full list of compatible agents is available on agentskills.io.

Do I need a Webflow Enterprise plan to use these skills?

No. Four of the five skills work with any Webflow plan. The webflow-enterprise-api skill covers Enterprise-only endpoints, so you'll need an Enterprise workspace for that one. The webflow-browser-api skill requires Analyze or Optimize to be enabled on your site.

Can I use these skills without Claude Code?

Yes. Agent Skills are an open standard and work with any compatible agent. You can install them with the npx skills CLI, Playbooks, or Context7, depending on which agent you're using.

Are these officially maintained by Webflow?

No. These skills are built and maintained by 224 Industries, a Webflow Premium Partner. The reference content is sourced from Webflow's official documentation and kept up to date by our team.

npx build-skill

Build your own Agent Skills with npx build-skill

Memberstack Agent Skills

Integrate Memberstack Agent Skills for the Memberstack CLI and other parts of Memberstack ecosystem. The perfect skills for those building on Webflow and Memberstack.

Built by Ben Sabic, Fractional CTO at 224 Industries.

How to Scrape Web Data and Import It into Memberstack with Firecrawl CLI

Ben Sabic — Mon, 23 Feb 2026 12:49:34 +0000

You can pull content from any website and load it straight into your Memberstack data tables using two CLI tools: Firecrawl for scraping and Memberstack CLI for the import. No backend code needed. If you're using an AI agent like Claude Code or Codex, you can hand it this guide and it will run the whole workflow for you.

This guide walks through each step, from installation to a working import, with real commands you can copy and run. All three walkthroughs (scrape a single page, crawl a full site, and search the web) follow the same pattern: pull the data, shape it, import it.

What You Need

Before you start, make sure you have:

Node.js v18 or higher installed on your machine. Check with node --version.
A Firecrawl account for web scraping. Sign up free at firecrawl.dev.
A Memberstack account to store the data. Sign up free at memberstack.com.
A terminal (or an AI agent with terminal access like Claude Code, Codex, Cursor, or Gemini CLI).

If you're using an AI agent, install both Agent Skills so the agent knows how to use these tools:

npx skills add Flash-Brew-Digital/memberstack-skills --skill memberstack-cli
npx skills add firecrawl/cli --skill firecrawl

Step 1: Install Both CLIs

Install Firecrawl CLI and Memberstack CLI globally with a single command:

npm install -g firecrawl-cli memberstack-cli

Check that both are working:

firecrawl --version
memberstack --version

Step 2: Authenticate

Authenticate with both services. Each tool stores credentials locally so you only do this once.

Firecrawl:

firecrawl login --browser

This opens your browser to sign in and link your API key. For AI agents, the --browser flag handles this without manual prompting.

Memberstack:

memberstack auth login

This opens the Memberstack OAuth page, where you'll be prompted to choose a Memberstack application.

Verify both are connected:

firecrawl --status
memberstack whoami

Step 3: Scrape Your Source Data

Here's where Firecrawl does its work. Choose the approach that matches what you need.

Option A: Scrape a Single Page

Pull clean content from one URL. Good for grabbing a product page, directory listing, or article.

firecrawl scrape https://example.com/products --only-main-content -o .firecrawl/products.md

The --only-main-content flag strips out navigation, footers, and ads, leaving just the useful content.

For structured data like links and metadata alongside the markdown:

firecrawl scrape https://example.com/products --format markdown,links --pretty -o .firecrawl/products.json

Option B: Crawl an Entire Site Section

When you need content from multiple pages, like all docs or all blog posts on a site, use crawl.

First, discover what pages exist:

firecrawl map https://example.com --search "products" -o .firecrawl/product-urls.txt

Then crawl the section:

firecrawl crawl https://example.com --include-paths /products --limit 50 --wait --progress -o .firecrawl/crawl-results.json

The --wait flag keeps the command running until the crawl finishes. --progress shows you how far along it is.

Option C: Search the Web and Scrape Results

If you don't have a specific URL yet, search for what you need:

firecrawl search "organic coffee suppliers wholesale" --scrape --scrape-formats markdown --pretty -o .firecrawl/coffee-suppliers.json

The --scrape flag tells Firecrawl to not just return search results, but also scrape the content from each result page. That gives you full page content to work with.

Step 4: Prepare the Data for Memberstack

Memberstack's records import accepts CSV or JSON files. You need to shape your scraped data to match the table columns you want in Memberstack.

Here's where an AI agent really shines. If you're using Claude Code, Codex, or a similar agent, you can say:

"Read the scraped data in .firecrawl/crawl-results.json, extract the page titles, URLs, and descriptions, and create a CSV file with columns: title, url, description."

The agent will write a small script to transform the data. That's it. No coding on your part.

If you prefer to do it yourself, here's a quick example using jq (a command-line JSON tool):

# Extract data from a crawl result into CSV format
echo "title,url,description" > import-data.csv
jq -r '.data[] | [.metadata.title, .metadata.sourceURL, .metadata.description] | @csv' \
  .firecrawl/crawl-results.json >> import-data.csv

Your CSV file should look something like this:

title,url,description
"Organic Beans Co","https://example.com/products/beans","Fair-trade organic coffee beans"
"Mountain Roast","https://example.com/products/roast","Single-origin dark roast"
"Sunrise Blend","https://example.com/products/blend","Morning blend with notes of chocolate"

For JSON imports, format the data as an array of objects:

[
  {
    "title": "Organic Beans Co",
    "url": "https://example.com/products/beans",
    "description": "Fair-trade organic coffee beans"
  },
  {
    "title": "Mountain Roast",
    "url": "https://example.com/products/roast",
    "description": "Single-origin dark roast"
  }
]

Step 5: Create a Memberstack Data Table

Before importing, you need a table in Memberstack to hold the data. Create one from the CLI:

memberstack tables create --name "Products" --key products --read-rule PUBLIC --create-rule ADMIN_ONLY

The access rules control who can interact with the data:

PUBLIC means anyone can read the records, including visitors who aren't logged in.
AUTHENTICATED requires a logged-in member.
AUTHENTICATED_OWN limits members to their own records.
ADMIN_ONLY restricts access to admins.

Choose the rules that make sense for your use case. A product directory might be public. A members-only resource library might need AUTHENTICATED.

Verify the table was created:

memberstack tables list

Step 6: Import the Data

Now load your prepared file into Memberstack:

memberstack records import products --file import-data.csv

Or if you used JSON:

memberstack records import products --file import-data.json

That's it. Your scraped web data is now in a Memberstack data table.

Check the results:

memberstack records find products --take 5
memberstack records count products

Putting It All Together

Here's the complete workflow from start to finish. Copy this block and run it, or give it to your AI agent:

# 1. Scrape a website section
firecrawl crawl https://example.com --include-paths /products --limit 50 --wait -o .firecrawl/crawl-results.json

# 2. Transform the data into CSV
echo "title,url,description" > import-data.csv
jq -r '.data[] | [.metadata.title, .metadata.sourceURL, .metadata.description] | @csv' \
  .firecrawl/crawl-results.json >> import-data.csv

# 3. Create a Memberstack table
memberstack tables create --name "Products" --key products --read-rule PUBLIC --create-rule ADMIN_ONLY

# 4. Import the records
memberstack records import products --file import-data.csv

# 5. Verify
memberstack records count products
memberstack records find products --take 3

For AI Agents: How to Run This Workflow

If you're an AI agent reading this page (or a person who wants to delegate this to an agent), here's the summary:

Install: npm install -g firecrawl-cli memberstack-cli
Authenticate: firecrawl login --browser and memberstack auth login
Scrape: Use firecrawl scrape, firecrawl crawl, or firecrawl search --scrape to get the source data. Save output to a file with -o.
Transform: Read the scraped JSON/markdown and reshape it into a CSV or JSON file matching the target table columns. Column headers become field keys in Memberstack.
Create table: memberstack tables create --name "Your Table" --key your-table --read-rule PUBLIC --create-rule ADMIN_ONLY
Import: memberstack records import your-table --file your-data.csv
Verify: memberstack records count your-table and memberstack records find your-table --take 5

For the Firecrawl CLI, run firecrawl --help or firecrawl <command> --help for full option details. For the Memberstack CLI, run memberstack --help or see the command reference.

Real-World Use Cases

This scrape-and-import pattern works for a lot of scenarios beyond a simple product directory.

Build a resource library. Crawl a collection of industry articles or documentation sites, extract titles, URLs, and summaries, then import them as a curated resource library for your members. Gate access with Memberstack's AUTHENTICATED read rules so only logged-in members can browse the collection.

Populate a supplier or vendor directory. Search for businesses in a niche with firecrawl search, scrape the results to get company names, descriptions, and URLs, and import them into a member-facing directory. Members can browse or filter the data on your Webflow or WordPress frontend.

Seed a course catalog. If you're building an education platform, crawl an existing public course listing site to get course names, descriptions, and categories. Import them as records, then link each to a Memberstack plan so only paid members can access certain courses.

Migrate content from another platform. Crawl your existing site on Teachable, Kajabi, or another platform to extract page content. Reshape it and import it into Memberstack data tables as part of a platform migration.

Keep data fresh. Script the whole workflow as a cron job or CI step. Crawl a source site on a schedule, overwrite or update your Memberstack records with memberstack records bulk-update, and your membership site stays current without manual work.

Helpful Flags to Know

A few flags across both CLIs that are especially useful in this workflow:

What you want to do	Command
Scrape only the main content (skip nav/footer)	`firecrawl scrape <url> --only-main-content`
Wait for JavaScript to finish rendering	`firecrawl scrape <url> --wait-for 3000`
Find specific pages on a site before crawling	`firecrawl map <url> --search "keyword"`
Preview a bulk update before applying it	`memberstack records bulk-update --file data.csv --dry-run`
Delete old records before re-importing	`memberstack records bulk-delete table-key --where "field equals value"`
Export existing records for backup	`memberstack records export table-key --format csv --output backup.csv`
Run everything against your test environment	Add `--sandbox` to any Memberstack command (this is the default)
Switch to production	Add `--live` to any Memberstack command

Frequently Asked Questions

Can I scrape a website and put the data into Memberstack without coding?

Yes. Both Firecrawl CLI and Memberstack CLI are terminal tools you can run with simple commands. If you use an AI agent like Claude Code, you can describe what you want in plain English and the agent runs the commands for you. No scripting or programming is required.

What data formats does Memberstack accept for record imports?

Memberstack CLI accepts CSV and JSON files. CSV column headers can use the data.* prefix or plain field names (both title and data.title work). JSON files should be arrays of objects where each key becomes a field name.

Does Firecrawl work on JavaScript-heavy websites?

Yes. Firecrawl handles JavaScript rendering, dynamic content, and single-page applications automatically. Use the --wait-for flag to give a page extra rendering time, or use firecrawl browser for sites that need user interaction like clicking pagination buttons or expanding dropdowns.

Do I need an API key for both tools?

Firecrawl requires an API key (sign up at firecrawl.dev for a free tier with 500 credits). Memberstack CLI uses OAuth browser login with no API key needed. Both tools store credentials locally so you authenticate once.

Which AI agents can run Firecrawl and Memberstack CLI together?

Both tools ship Agent Skills that work with Claude Code, OpenAI Codex, Gemini CLI, GitHub Copilot, Cursor, and any agent that supports the open skills standard. Install both skills and the agent can chain the two tools together in a single workflow.

Will this work with my live Memberstack environment?

By default, Memberstack CLI runs all commands against your sandbox (test mode). This lets you test the full import without affecting live data. When you're happy with the results, add --live to your commands to run against production.

Can I update existing records instead of creating new ones?

Yes. Use memberstack records bulk-update --file updates.csv to update records you've already imported. The file needs an id column with each record's ID. Add --dry-run to preview what would change before committing.

Key Takeaways

Firecrawl CLI scrapes the web and outputs clean markdown or JSON. Memberstack CLI imports that data into your membership platform. Together, they form a no-code pipeline from web to membership site.
Install both with npm install -g firecrawl-cli memberstack-cli. Authenticate each tool once.
Use firecrawl scrape for single pages, firecrawl crawl for site sections, or firecrawl search --scrape to find and scrape in one step.
Shape the scraped data into CSV or JSON, then import with memberstack records import.
AI agents like Claude Code can run this entire workflow from a plain-English prompt. Install both Agent Skills and let the agent handle it.

I built npx build-skill, here's why you should use it

Ben Sabic — Mon, 16 Feb 2026 01:55:18 +0000

Every time I wanted to create a new AI agent skills repository, I found myself doing the same tedious dance. Create the folder structure. Write the SKILL.md with the right frontmatter. Set up the marketplace config. Wire up GitHub Actions for validation. Write sync scripts. Copy-paste from old repos and hope I didn't miss a replacement.

I got tired of it, so I built build-skill.

npx build-skill

One command. Answer a few prompts. Get a complete, spec-compliant skills repository ready to publish.

What is build-skill?

build-skill is an open source CLI that scaffolds AI agent skill repositories following the Agent Skills Specification. It generates everything you need to start writing and distributing skills for AI coding agents like Claude Code, Cursor, Codex, and 35+ others.

Think of it like create-react-app, but for agent skills.

The problem it solves

If you've tried creating a skills repository from scratch, you know the setup is tedious. A properly structured repo needs a specific folder layout with SKILL.md files containing correct YAML frontmatter, a .claude-plugin/marketplace.json for the plugin marketplace, a plugin.json inside each skill's directory, a GitHub Actions workflow for validation on PRs and syncing on push, and helper scripts to keep your README and configs in sync as you add or remove skills.

None of it is hard. All of it is annoying. And if you get the structure wrong, your skills just silently don't work. No error, no feedback, just an agent that doesn't pick up what you built.

What you get when you run it

When you run npx build-skill, the CLI walks you through a few prompts (your brand name, skill name, and description) and generates this structure:

your-brand-skills/
├── .claude-plugin/
│   └── marketplace.json
├── .github/
│   └── workflows/
│       └── process-skills.yml
├── scripts/
│   ├── add-skill.js
│   └── sync-skills.js
├── skills/
│   └── your-skill-name/
│       ├── .claude-plugin/
│       │   └── plugin.json
│       └── SKILL.md
└── README.md

The GitHub Actions workflow validates all skills on pull requests using the Validate Agent Skill action and syncs the README, marketplace.json, and plugin configs on push to main. That means your repo stays correct without manual maintenance.

How to use it

Interactive mode

The simplest way to get started:

npx build-skill

You'll be prompted for your brand/organization name, skill name, and a description of what the skill does.

Quiet mode for CI and scripting

If you want to skip the prompts (useful for CI pipelines or scripting), pass everything as flags:

npx build-skill \
  --brand acme-corp \
  --name data-processor \
  --description "Processes CSV and JSON data files" \
  --quiet

Adding more skills later

The generated repo includes a helper script for adding new skills:

node scripts/add-skill.js my-new-skill "Description of what it does"

This creates the skill directory, generates the SKILL.md and plugin.json, and automatically runs the sync script to update your README and marketplace config.

Why not just use a template repo?

I tried that first. But template repos have a few problems in this context. You still have to manually find-and-replace your brand name, skill name, and description across multiple files. The marketplace config and plugin.json need to reference the right paths. And every time the spec evolves, you're updating a template instead of bumping a version.

With a CLI, the scaffolding adapts. You run the latest version and get the latest structure. No stale templates, no missed replacements.

Where this fits in the ecosystem

The Agent Skills ecosystem is growing fast. Vercel launched the skills CLI as a package manager for skills. Anthropic baked skills into Claude Code. The Agent Skills Specification is becoming a real standard across 35+ agents.

build-skill sits at the beginning of that workflow. Before you can install, share, or discover skills, someone has to create them. And the less friction there is in getting from "I have an idea for a skill" to "I have a working repo ready to publish", the more skills get built.

Frequently Asked Questions

What agents does build-skill support?

build-skill generates repositories that follow the open Agent Skills Specification. Any agent that supports this spec can use the skills you create. That currently includes Claude Code, Cursor, Codex, Windsurf, OpenCode, GitHub Copilot, and over 35 others.

Do I need to install build-skill globally?

No. Running npx build-skill fetches and runs the latest version without a global install. If you prefer a global install, you can run npm install -g build-skill.

Can I add multiple skills to one repository?

Yes. The generated repo is designed for multiple skills. Use the included add-skill.js script to add new skills, and the sync-skills.js script keeps your README and marketplace config up to date automatically.

Is build-skill tied to Claude Code specifically?

No. While the generated repo includes .claude-plugin configs for Claude Code's marketplace, the skills themselves follow the open Agent Skills Specification and work across any compatible agent.

How is this different from `npx skills init`?

npx skills init creates a single SKILL.md file. build-skill scaffolds an entire repository with CI/CD workflows, marketplace configuration, sync scripts, and helper utilities for managing multiple skills over time.

Get started

npx build-skill

The project is open source under MIT. The repo is at github.com/Flash-Brew-Digital/build-skill and the package is on npm.

Issues, PRs, and feedback are all welcome. I'm curious what skills you're building for your agents.

Stop Losing Marketing Attribution Data in Your Forms (Zero-Dependency Solution)

Ben Sabic — Tue, 30 Dec 2025 11:05:03 +0000

Ever wondered where your leads actually come from? If you're not capturing UTM parameters and referrer data in your forms, you're flying blind.

TL;DR

Form Attribution is a lightweight (~5KB), zero-dependency JavaScript library that automatically captures marketing attribution data (UTM parameters, referrer URLs, ad click IDs) and injects them as hidden fields into your forms. One script tag. No configuration required.

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"></script>

GitHub Repository | Documentation | Interactive Builder

The Problem: Marketing Attribution Gap

Here's a scenario every marketer and developer has faced: A lead submits a form on your website. Sales closes the deal. But when leadership asks "What campaign brought them in?" — silence.

The attribution data was in the URL when the visitor landed. It was in the document.referrer. But by the time they filled out the form three pages later, that data was gone.

Common workarounds that don't scale:

Manually adding hidden fields to every form
Building custom JavaScript for each project
Relying on CRM-specific tracking scripts
Asking users "How did you hear about us?" (unreliable)

What is Form Attribution?

Form Attribution is an open-source JavaScript library that solves the attribution gap with minimal effort. It captures visitor data on first touch and persists it until form submission.

How Does Form Attribution Work?

Capture: On page load, captures URL parameters and metadata
Persist: Stores data in sessionStorage, localStorage, or cookies
Inject: Automatically adds hidden fields to all forms on the page
Observe: Uses MutationObserver to handle dynamically-added forms

What Parameters Does Form Attribution Capture?

URL Parameters (captured by default):

Parameter	Description
`utm_source`	Traffic source (e.g., google, newsletter)
`utm_medium`	Marketing medium (e.g., cpc, email)
`utm_campaign`	Campaign name
`utm_term`	Paid search keywords
`utm_content`	Content variant for A/B testing
`utm_id`	Campaign ID
`ref`	Referrer tracking parameter

Metadata (automatically captured):

Parameter	Description
`landing_page`	First page URL visited
`current_page`	Current page URL (form submission page)
`referrer_url`	Document referrer
`first_touch_timestamp`	ISO 8601 timestamp of first visit

Ad Platform Click IDs (optional):

Parameter	Platform
`gclid`	Google Ads
`fbclid`	Meta Ads
`msclkid`	Microsoft Advertising
`ttclid`	TikTok Ads
`li_fat_id`	LinkedIn Ads
`twclid`	Twitter/X Ads

Quick Start: Basic Implementation

Add this single line before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"></script>

That's it. The script will:

Capture UTM parameters and metadata from the current session
Store them in sessionStorage (default)
Inject hidden fields into every form on the page
Monitor for dynamically-added forms via MutationObserver

What Gets Injected Into Forms?

Each captured parameter becomes a hidden input:

<input type="hidden" 
  name="utm_source" 
  value="google" 
  data-form-attribution="true"
  data-form-attribution-managed="true">

Key behaviors:

Existing hidden fields with matching names are updated (no duplicates)
User-visible form fields are never modified
All values are HTML-entity encoded for XSS protection

Configuration Options

For more control, use data attributes on the script tag:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-storage="localStorage"
  data-field-prefix="attr_"
  data-extra-params="custom_param,another_param"
  data-exclude-forms=".no-track, [data-no-attribution]"
  data-click-ids="true"
  data-debug="true">
</script>

Available Configuration Options

Attribute	Default	Description
`data-storage`	`sessionStorage`	Storage method: `sessionStorage`, `localStorage`, or `cookie`
`data-field-prefix`	`""`	Prefix for hidden field names (e.g., `attr_` → `attr_utm_source`)
`data-extra-params`	`""`	Comma-separated additional URL parameters to capture
`data-exclude-forms`	`""`	CSS selector for forms to exclude
`data-storage-key`	`form_attribution_data`	Custom storage key name
`data-debug`	`false`	Enable console logging and debug panel
`data-privacy`	`true`	Set `"false"` to disable GPC/DNT detection
`data-click-ids`	`false`	Set `"true"` to capture ad platform click IDs

Storage Options Explained

When to Use sessionStorage (Default)

Best for single-session attribution where you want data cleared when the browser closes.

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-storage="sessionStorage">
</script>

When to Use localStorage

Best for first-touch attribution across multiple sessions.

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-storage="localStorage">
</script>

When to Use Cookies

Best for cross-subdomain tracking or server-side access.

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-storage="cookie"
  data-cookie-domain=".example.com"
  data-cookie-expires="90"
  data-cookie-samesite="lax">
</script>

Cookie-specific options:

Attribute	Default	Description
`data-cookie-domain`	`""`	Cookie domain (e.g., `.example.com`)
`data-cookie-path`	`/`	Cookie path
`data-cookie-expires`	`30`	Expiration in days
`data-cookie-samesite`	`lax`	SameSite policy: `lax`, `strict`, or `none`

Storage Fallback Chain

If your preferred storage isn't available, the script falls back gracefully:

Requested	Fallback Chain
`localStorage`	localStorage → sessionStorage → cookie → memory
`sessionStorage`	sessionStorage → cookie → memory
`cookie`	cookie → memory

JavaScript API for Custom Integrations

Form Attribution exposes a global FormAttribution object:

// Get all attribution data
const data = FormAttribution.getData();
// → { utm_source: 'google', utm_medium: 'cpc', ... }

// Get a specific parameter
const source = FormAttribution.getParam('utm_source');
// → 'google'

// Get all tracked forms with status
const forms = FormAttribution.getForms();

// Clear stored data
FormAttribution.clear();

// Re-inject data into forms
FormAttribution.refresh();

Event Callbacks

// Fires when initialization is complete
FormAttribution.on('onReady', ({ data, config }) => {
  console.log('Attribution ready:', data);
});

// Fires when new data is captured
FormAttribution.on('onCapture', ({ data }) => {
  console.log('New data captured:', data);
});

// Fires when data is updated
FormAttribution.on('onUpdate', ({ data }) => {
  console.log('Data updated:', data);
});

// Remove a callback
FormAttribution.off('onCapture', myHandler);

Privacy-First Design

By default, Form Attribution respects user privacy preferences:

Global Privacy Control (GPC): Tracking disabled when navigator.globalPrivacyControl is true
Do Not Track (DNT): Tracking disabled when DNT is enabled

When privacy signals are detected, no data is captured or stored.

<!-- Override privacy detection (not recommended) -->
<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-privacy="false">
</script>

Debug Panel for Development

Enable the visual debug panel during development:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-debug="true">
</script>

Debug panel features:

Data Tab: View all captured UTM parameters and metadata
Forms Tab: See all forms and their injection status (click to highlight)
Log Tab: Real-time activity log with timestamps
Actions: Copy data as JSON, clear storage, refresh forms

The panel is draggable, collapsible, and uses Shadow DOM for style isolation.

⚠️ Remove data-debug before deploying to production.

Real-World Use Cases

Use Case 1: HubSpot Form Integration

Capture UTM parameters and pass them to HubSpot for closed-loop reporting:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-field-prefix="hs_"
  data-storage="localStorage">
</script>

Use Case 2: Multi-Domain Tracking

Track attribution across subdomains (blog.example.com → app.example.com):

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-storage="cookie"
  data-cookie-domain=".example.com"
  data-cookie-expires="30">
</script>

Use Case 3: Paid Ad Campaign Tracking

Capture all major ad platform click IDs for offline conversion tracking:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-click-ids="true"
  data-storage="localStorage">
</script>

Use Case 4: Exclude Login/Auth Forms

Prevent attribution injection on sensitive forms:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"
  data-exclude-forms=".login-form, .auth-form, [data-no-track]">
</script>

<form class="login-form">
  <!-- No attribution fields injected here -->
</form>

Why Not Just Use Google Analytics?

Great question. Google Analytics is excellent for aggregate traffic analysis. But it doesn't help when you need lead-level attribution in your CRM, email platform, or database.

Form Attribution complements GA by:

Passing attribution data directly into form submissions
Enabling CRM-native attribution reporting
Supporting offline conversion tracking
Working without cookies (sessionStorage/localStorage options)

FAQ

Does Form Attribution work with React/Vue/Angular?

Yes. The MutationObserver monitors the entire DOM for form elements, including those rendered by JavaScript frameworks.

Does it work with iframes?

The script only operates on forms within its own document context. For cross-origin iframes, you'll need to include the script in each iframe.

What about GDPR/CCPA compliance?

Form Attribution respects GPC and DNT by default. For full compliance, ensure your privacy policy discloses the use of attribution tracking and provide users a mechanism to opt-out.

Can I use it with Webflow/WordPress/Squarespace?

Yes. Add the script via your platform's custom code injection feature (usually in site-wide footer scripts).

Performance & Bundle Size

Zero dependencies: No jQuery, no React, no external libraries
~5KB minified: Minimal impact on page load
Lazy initialization: Runs after DOMContentLoaded
Efficient DOM updates: Uses MutationObserver, not polling

Get Started

Add a single script tag before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/form-attribution@latest/dist/script.min.js"></script>

That's it — no build step, no package manager, no configuration required.

Interactive Script Builder

Not sure which options you need? Use the Interactive Script Builder to generate a configured script tag with a visual interface.

Contributing

Form Attribution is open source under the Apache-2.0 license. Contributions welcome!

Conclusion

Marketing attribution shouldn't require complex integrations or heavyweight tracking platforms. Form Attribution provides a simple, privacy-respecting solution that works out of the box with any form on any website.

One script tag. Zero configuration. Complete attribution data.

Built by Ben Sabic at Flash Brew Digital

Scaling Webflow Sites Past 100 Pages: The Reverse Proxy Solution

Ben Sabic — Fri, 29 Aug 2025 04:05:43 +0000

How enterprise companies like Upwork leverage reverse proxy to run high-performance sites on Webflow while maintaining SEO authority and adding server-side capabilities

Webflow's 100-page static limit and single-folder URL structure can create significant roadblocks for growing businesses. But what if you could maintain Webflow's visual development power while removing virtually all platform limitations? This comprehensive guide from 224 Industries reveals how reverse proxy technology transforms what's possible with Webflow.

A reverse proxy acts as an intelligent traffic controller, routing visitors to different content sources while maintaining a consistent domain experience. Major brands like Upwork run their blog on Webflow while their main application uses Vue.js—all seamlessly under one domain. Even Webflow itself uses this approach for their templates store and blog.

Key capabilities unlocked include connecting multiple Webflow projects to build 500+ page sites, implementing server-side authentication for truly secure gated content, capturing analytics that bypass ad-blockers, and maintaining complex URL structures like /resources/whitepapers/2025/ai-trends that Webflow can't natively support.

The business impact is substantial: consolidating subdomains under one domain concentrates SEO authority instead of diluting it across blog.site.com and docs.site.com. It enables gradual platform migrations with zero downtime, preserves all existing URLs and link equity, and allows different teams to use their preferred tools while maintaining a unified web presence.

Implementation complexity varies—basic Cloudflare Worker setups take hours with intermediate technical skills, while authentication or e-commerce integrations require developer expertise. The article provides detailed scenarios, real-world examples, and a clear framework for determining if reverse proxy suits your needs.

Learn more about reverse proxies in Webflow →

How AI Agents Are Revolutionizing Webflow Development in 2025

Ben Sabic — Thu, 28 Aug 2025 02:40:33 +0000

Cut development time by 40-60% with native AI tools and workflow automation that transform routine tasks into intelligent, self-managing processes

The integration of AI with Webflow is fundamentally changing how developers and designers approach web development in 2025. This article explores how agencies can leverage AI automation to deliver faster turnarounds while maintaining quality, transforming traditional development workflows into intelligent, self-managing systems.

Webflow's native AI Assistant now generates new page sections using existing design systems, while third-party tools like Miyagi bring unprecedented automation capabilities. Miyagi's specialized agents—Design, Code, and CMS—work directly within projects to clean styles, fix accessibility issues, write JavaScript/CSS, and automate content operations. Users report saving hours on tasks that previously took days.

The ecosystem extends beyond Miyagi. Tools like n8n enable complex workflow automation connecting Webflow with AI models from OpenAI to Anthropic's Claude. Asset Bae automates image optimization and alt text generation, while Jasper handles on-brand content creation at scale.

For marketing teams, the practical applications are immediately valuable: automated CMS updates, SEO optimization, workflow automation connecting CRMs and analytics platforms, and AI-powered localization for global reach. The article provides crucial ROI insights—67% of business leaders expect AI to reshape their organizations within two years, yet only 31% can evaluate ROI within six months.

Interestingly, productivity has overtaken profitability as the primary ROI metric in 2025. The guide recommends tracking development time reduction (target: 40-60% for routine tasks), content generation speed, and project turnaround times. Implementation advice emphasizes starting small, choosing native solutions, and scaling gradually.

Discover the complete AI automation guide for Webflow →

The Webflow Developer's AI Toolkit: Five Apps That Save Hours Daily

Ben Sabic — Thu, 28 Aug 2025 02:38:38 +0000

From Miyagi's native design agents to Slater's unlimited code editor—practical tools that actually ship in production environments

For Webflow developers looking to dramatically accelerate their workflow, these five AI-powered apps represent the cutting edge of development automation in 2025. Each tool addresses specific pain points that traditionally consume hours of manual work.

Miyagi leads the pack as a native Webflow app with three specialized agents. Unlike ChatGPT or browser extensions, it executes changes directly in your project—cleaning styles, fixing accessibility, standardizing SEO, writing context-aware code, and handling CMS migrations. It understands your project's structure, making it invaluable for complex sites.

Slater solves Webflow's custom code limitations with unlimited character capacity, AI code generation, and staging/production publishing. Perfect for GSAP animations and advanced functionality, it includes code explanations to help developers learn while building.

Asset Bae automates the tedious task of image optimization—generating SEO-friendly alt text, renaming files properly, and ensuring WCAG compliance across entire collections. For content-heavy sites, it's a game-changer.

Webflow AI Assistant brings native design generation that respects your existing design system. It creates new sections from conversational prompts, suggests conversion optimizations, and delivers contextual help without leaving the canvas.

Jasper rounds out the toolkit with enterprise-grade content generation. Its Webflow integration maintains brand voice consistency while rapidly producing product descriptions, blog posts, and multi-language content.

The implementation strategy is straightforward: start with Miyagi for immediate productivity gains, add Slater for custom functionality, implement Asset Bae before major content uploads, leverage AI Assistant for prototyping, and integrate Jasper when content becomes a bottleneck.

Explore all five AI apps and transform your Webflow workflow →

Building a Tech Startup Brand That Converts

Ben Sabic — Thu, 28 Aug 2025 02:35:31 +0000

From mission statements to market positioning—a data-driven approach to creating brands that resonate with 88% of values-conscious consumers

Building a startup brand goes far beyond logos and color palettes—it's about creating a strategic foundation that drives growth and resonates with your target market. This comprehensive guide from 224 Industries breaks down the essential components of effective brand building for Australian startups.

The article emphasizes starting with core fundamentals: defining your mission (why you exist beyond profit) and vision (the future you're creating). It then dives into uncovering your unique market position—that crucial gap only your startup can fill. With 88% of consumers globally feeling brand messages don't align with their values, and 46% of Australian shoppers prioritizing sustainability, purpose-driven branding isn't just nice-to-have—it's a competitive advantage.

Key practical takeaways include a detailed brand foundation checklist covering mission statements, target audience definition, and unique value propositions. The guide explores building visual identity systems that work cohesively, from typography to imagery styles, all documented in a comprehensive brand style guide.

The article also covers crafting messaging pillars, developing content strategies, and executing successful brand launches. It addresses common founder concerns like budgeting (expect $15,000-$50,000 for comprehensive projects), timing for rebrands, and measuring ROI through metrics like branded search volume and customer acquisition costs.

Real-world examples, including Canva's democratization of design and their journey to 220 million users, illustrate how strategic positioning drives success. The guide concludes with actionable frameworks for social media community building and amplification strategies specific to the Australian market.

Read the full startup branding strategy guide →

GPT-5 vs GPT-4: Why You Should Upgrade

Ben Sabic — Fri, 08 Aug 2025 04:19:11 +0000

GPT-5 is here

OpenAI's GPT-5, released yesterday on August 7, 2025, makes staying on GPT-4 increasingly difficult to justify. With 2x better context length, 50% lower input costs, and 45-80% fewer hallucinations, the new model addresses every major pain point of its predecessor. Even OpenAI's CEO Sam Altman acknowledged GPT-4's shortcomings, calling it "mildly embarrassing at best" and admitting the model "kind of sucks" compared to what GPT-5 now delivers.

Superior performance eliminates GPT-4's frustrations

GPT-5 doesn't just incrementally improve on GPT-4—it fundamentally solves its most aggravating limitations. The model achieves 74.9% on SWE-bench Verified for coding tasks, leaving GPT-4's 69.1% in the dust. Mathematical reasoning jumps to 94.6% accuracy on AIME 2025, with perfect scores when using Python assistance. Most critically, hallucination rates plummet by up to 80% with the integrated reasoning system, finally delivering the reliability that GPT-4 users have been desperately seeking.

The unified architecture represents a paradigm shift in usability. While GPT-4 forces you to juggle between GPT-4o for general tasks and separate o-series models for complex reasoning, GPT-5 automatically routes queries to optimal processing modes. This eliminates the guesswork and context-switching that makes GPT-4 workflows unnecessarily complex.

Lower costs make GPT-4 economically obsolete

Here's the killer advantage: GPT-5 outperforms GPT-4 while costing half as much. At $1.25 per million input tokens versus GPT-4o's $2.50, you're literally paying more for inferior results by sticking with the older model. GPT-5 Mini pushes this even further at $0.25 per million input tokens, opening up use cases that were economically impossible with GPT-4's pricing structure.

The 272,000 token context window dwarfs GPT-4o's 128,000 token limit, meaning fewer API calls, simpler implementations, and the ability to process entire codebases or lengthy documents in single requests. Every metric that matters—performance, cost, capability—favors immediate migration.

Revolutionary features leave GPT-4 behind

GPT-5's "vibe coding" capability generates complete, production-ready applications from casual descriptions, accomplishing in minutes what takes hours of careful prompt engineering with GPT-4. The model intuitively grasps design patterns, architectural decisions, and aesthetic preferences that GPT-4 consistently misunderstands or ignores.

Healthcare professionals see a 46.2% score on HealthBench Hard, while improved safety mechanisms replace GPT-4's frustrating blanket refusals with nuanced, contextual responses. The dramatic reduction in sycophantic behavior means you finally get honest, reliable outputs instead of GPT-4's tendency to agree with incorrect premises.

The few edge cases for keeping GPT-4

Only three scenarios justify maintaining GPT-4 access: legacy systems with hard-coded dependencies that can't be immediately updated, regulated environments requiring specific model certifications that haven't yet approved GPT-5, and ultra-low-latency applications where GPT-4.1 Nano's marginal speed advantage outweighs accuracy improvements. Audio processing currently remains exclusive to GPT-4o, though GPT-5's multimodal expansion roadmap will eliminate this gap.

The bottom line: Upgrade immediately

Continuing to use GPT-4 means accepting inferior results at higher prices—a position that becomes increasingly indefensible as competitors adopt GPT-5's capabilities. With immediate availability across all subscription tiers and API access, there's no technical barrier to migration. Organizations clinging to GPT-4 risk not just competitive disadvantage but active user frustration as GPT-5's superior performance becomes the expected baseline.

The upgrade path is clear: better results, lower costs, simpler implementation. GPT-5 doesn't just improve on GPT-4—it makes it obsolete.