Webflow to Self-Served Page Plugin
Convert Webflow exports with CSV CMS data to self-served static pages with dynamic content loading
A Claude Code plugin that automates the conversion of exported Webflow landing pages into self-served static sites with dynamic content injection from CSV files.
🎯 What This Plugin Does
When you export a Webflow site, CMS content comes as separate CSV files and the HTML contains empty placeholders. This plugin:
- Analyzes your Webflow export structure and CSV data
- Converts CSV files to optimized JSON format
- Generates JavaScript loaders for dynamic content injection
- Updates HTML files with proper script references
- Creates comprehensive documentation
- Sets up local development environment for preview
Result: A fully functional static site that loads CMS content dynamically, with no server or API required.
🚀 Quick Start
Installation
Option 1: Via Claude Code Marketplace (Recommended)
# Add the plugin marketplace
/plugin marketplace add gutitrombotto/webflow-to-self-served-page
# Install the plugin
/plugin install webflow-to-self-served-page
Option 2: Direct from GitHub
# Clone and link the plugin
git clone https://github.com/gutitrombotto/webflow-to-self-served-page.git
mkdir -p ~/.claude/plugins
ln -s "$(pwd)/webflow-to-self-served-page" ~/.claude/plugins/
Verify Installation
# Check if commands are available
/help
# You should see: /webflow-convert, /webflow-setup, etc.
Basic Usage
# Navigate to your Webflow export directory
cd /path/to/webflow-export
# Run the conversion
/webflow-convert
# Preview the result
/webflow-preview
That's it! Your Webflow export is now a self-served static page with dynamic content.
📋 Commands
/webflow-convert [directory]
Main conversion command - Converts the entire Webflow export
- Analyzes CSV and HTML structure
- Generates CSV-to-JSON converter
- Creates CMS loader JavaScript
- Updates HTML files
- Generates documentation
Example:
/webflow-convert
/webflow-convert ./my-landing-page
/webflow-setup [directory]
Initialize directory structure - Prepares the environment
- Creates
data/, scripts/, js/ directories
- Validates Webflow export
- Reports detected collections
Example:
/webflow-setup
/webflow-preview [port]
Start local server - Preview your converted page
- Starts Python HTTP server
- Displays preview URL
- Provides testing checklist
Example:
/webflow-preview
/webflow-preview 8080
/webflow-update [csv-file]
Regenerate JSON - Update after CSV changes
- Reruns CSV conversion
- Updates JSON files
- Much faster than full conversion
Example:
/webflow-update # Update all
/webflow-update testimonials.csv # Update specific file
/webflow-clean [--force]
Remove generated files - Clean up conversion artifacts
- Removes generated JSON, scripts, and docs
- Preserves original CSV and HTML files
- Asks for confirmation (unless
--force)
Example:
/webflow-clean
/webflow-clean --force
🤖 Webflow Converter Agent
The plugin includes a specialized webflow-converter subagent with expertise in:
- Webflow export structure analysis
- CSV data type detection
- Intelligent field mapping
- JavaScript generation
- HTML integration
The agent is automatically invoked during /webflow-convert for complex tasks.
🏗️ How It Works
Architecture
CSV Files → Python Converter → JSON Files → JavaScript Loader → HTML DOM
1. CSV Analysis
The plugin intelligently detects collection types:
- Testimonials: Fields like "Comentario", "Student", "Rating"
- Schools: Fields like "Logo", "Institution", "Location"
- Ambassadors: Fields like "Instagram", "Profile", "Social"
- Teachers: Fields like "Profesor", "Image", "Photo"
- Generic: Any other CSV structure
2. JSON Generation
Converts CSV to clean, structured JSON:
{
"collection": "testimonials",
"total_count": 16,
"items": [
{
"id": "unique-id",
"name": "Student Name",
"comment": "Clean text without HTML",
"photo": "https://cdn.url/image.jpg",
"order": 1
}
]
}
3. JavaScript Injection
Creates modular CMS loader: