You are running the Webflow to Self-Served Page conversion workflow.
Task: Convert a Webflow landing page export (with CSV CMS data) into a self-served static page with dynamic content loading.
Target Directory: $ARGUMENTS (if provided, otherwise current directory)
Conversion Workflow
Step 1: Analyze the Webflow Export
- Scan for CSV files in the target directory
- Identify all HTML files
- Validate this is a Webflow export (check for .w-dyn-list, .w-dyn-bind-empty classes)
Step 2: Set Up Directory Structure
- Create
data/ directory for JSON files
- Create
scripts/ directory for converter script
- Create
js/ directory if it doesn't exist
Step 3: Analyze CSV Structure
For each CSV file found:
- Read the CSV headers to understand the data structure
- Detect the collection type based on field names:
- Has "Comentario" or "testimonial" → testimonials
- Has "Logo" or "school" → schools
- Has "Instagram" or "ambassador" → ambassadors
- Has "profesor" or "teacher" → teachers
- Otherwise → generic collection
- Map CSV fields to JSON structure intelligently
Step 4: Generate CSV to JSON Converter
- Copy the Python converter template from
${CLAUDE_PLUGIN_ROOT}/scripts/templates/csv-to-json.py
- Customize it based on detected CSV structures
- Make it generic to handle any CSV format
- Save to
scripts/csv-to-json.py
Step 5: Run CSV Conversion
- Execute:
python3 scripts/csv-to-json.py
- Verify JSON files are created in
data/ directory
- Report number of items converted per collection
Step 6: Analyze HTML Structure
- Search for dynamic content containers:
- Elements with class
.w-dyn-list
- Elements with class
.w-dyn-items
- Elements with class
.w-dyn-bind-empty
- Text containing "No items found"
- Map HTML sections to CSV/JSON collections
- Identify the CSS selectors needed for injection
Step 7: Generate CMS Loader JavaScript
- Copy the CMS loader template from
${CLAUDE_PLUGIN_ROOT}/scripts/templates/cms-loader.js
- Customize based on detected HTML structure and collections
- Create rendering functions for each collection type
- Add debug mode and error handling
- Save to
js/cms-loader.js
Step 8: Update HTML Files
- Find all HTML files that need the CMS loader
- Add script reference before closing
</body> tag:
<!-- CMS Data Loader -->
<script src="js/cms-loader.js"></script>
- Report which HTML files were updated
Step 9: Generate Documentation
- Create a README.md with:
- Project overview
- Directory structure
- How to update content
- How to run locally
- Deployment instructions
- Include CSV field documentation for each collection
Step 10: Set Up Local Preview
- Start a Python HTTP server on available port (try 8080, 8081, etc.)
- Display the URL for preview
- Provide instructions for testing
Success Criteria
- ✅ All CSV files converted to JSON
- ✅ CMS loader JavaScript generated
- ✅ HTML files updated with script references
- ✅ Documentation created
- ✅ Local server running for preview
Output Format
Provide a summary at the end:
🎉 Webflow Conversion Complete!
📊 Results:
- CSV Files Processed: X
- JSON Files Generated: X
- Total Items: X
- HTML Files Updated: X
📁 Generated Files:
- data/cms-*.json
- scripts/csv-to-json.py
- js/cms-loader.js
- README.md
🚀 Next Steps:
1. Preview: http://localhost:XXXX
2. Review: Check browser console for CMS loader logs
3. Test: Verify all sections display content
4. Deploy: Upload all files to your web server
Run '/webflow-preview' to open the preview again anytime.
Run '/webflow-update' to regenerate JSON after CSV changes.
Important: Use the webflow-converter subagent for this task by explicitly invoking it for complex analysis and generation tasks.