Webflow
Build landing pages, microsites, and full-stack web apps with AI—from concept to production in minutes
Video: Introduction to Webflow App Gen
01Overview
Webflow offers three powerful ways to go from prototype to production: Site Builder for marketing sites, App Gen for interactive applications, and Webflow Cloud for deploying any Next.js or Astro app you build in tools like Cursor.
🎨 AI Site Builder
Generate complete, customizable marketing sites with AI. Perfect for landing pages, campaign microsites, and SEO-optimized content.
⚡ App Gen
Build full-stack web apps with interactive features. Ideal for calculators, dashboards, tools, and dynamic experiences.
☁️ Webflow Cloud
Deploy any Next.js or Astro app built in Cursor or other IDEs. Serverless hosting on Cloudflare's edge with sub-50ms response times.
02Choosing the Right Tool
| Feature | AI Site Builder | App Gen | Webflow Cloud |
|---|---|---|---|
| Primary Use | Marketing sites, landing pages, content | Interactive apps, tools, dynamic features | Deploy any Next.js/Astro app from Cursor or IDEs |
| Building Tool | AI prompt + Webflow Designer | AI prompt + code editor | Your preferred IDE (Cursor, VS Code, etc.) |
| Customization | Full design system control via Designer | Code-level customization + Variables panel | Complete code control |
| SEO/AEO | Built-in optimization | Headless optimization | Full control over SEO |
| Interactivity | Basic (forms, animations, CMS) | Advanced (logic, state, APIs) | Unlimited (any React/Astro code) |
| Storage | Webflow CMS | Webflow CMS + Webflow Cloud storage | SQLite, KV Store, Object Storage |
| Deployment | Webflow hosting | Webflow Cloud | Webflow Cloud (Cloudflare edge) |
| Best When You Need | Discoverability, brand presence, content marketing | Quick interactive prototypes without local dev | Full dev control, custom frameworks, complex apps |
03AI Site Builder
Webflow's AI Site Builder generates complete, production-ready websites from a simple text prompt. It's perfect when you need a fully customizable design system, SEO optimization, and the ability to spin up landing pages in minutes.
Best For:
- Landing pages — Product launches, event registrations, lead capture
- Campaign microsites — Seasonal campaigns, special promotions, brand activations
- Marketing sites — Company websites, product marketing pages, content hubs
- SEO-driven content — Blog sites, resource centers, documentation
Key Benefits:
- Fully Customizable Design System — Complete control over styles, components, and layout. Adjust every detail to match your brand.
- SEO & AEO Optimization — Built-in SEO best practices and Answer Engine Optimization (AEO) for better discoverability across search and AI tools.
- Speed to Market — Generate complete sites in minutes. Test concepts quickly without engineering dependencies.
- Visual Editor — Edit visually in Webflow Designer or use AI prompts to refine. No code required.
How to Build a Site
Enter Your Prompt
Describe what you want to build. Be specific about purpose, audience, and key pages.
AI Generates Your Site
Webflow AI creates a complete site with pages, components, and content in minutes.
Customize in Designer
Use Webflow's visual editor to refine styles, adjust layout, and add custom interactions.
Publish & Optimize
Deploy to Webflow hosting with SEO settings, then iterate based on performance.
💡 Pro Tip: Iterative Prompting
After the initial generation, use follow-up prompts to refine sections, adjust tone, or add features. The AI learns from each iteration.
🚀 Get Started: Learn more about Site Builder
04App Gen
Webflow App Gen generates full-stack web applications with interactive features, CMS integration, and custom logic. Build calculators, dashboards, tools, and dynamic experiences without engineering dependencies.
Best For:
- Interactive tools — ROI calculators, pricing configurators, product finders
- Dynamic experiences — Event schedules, portfolio browsers, course catalogs
- Data dashboards — Analytics views, progress trackers, reporting tools
- Multi-step flows — Onboarding wizards, lead capture forms, guided experiences
Current Capabilities:
- Generation — Prompt-based app generation using Claude Sonnet 4.5
- CMS Integration — Connect to Webflow CMS collections for dynamic data
- Code Access — Full code editor with Navigator, Dev Server, Terminal
- Deployment — Deploy to Webflow Cloud with custom domains
On the Roadmap:
- Native database support for data storage (only available on Webflow Cloud)
- Built-in authentication capabilities
- Expanded app limits (currently 5 on Starter)
- Component Gen for broader access
- Enhanced AI context understanding
Building Your First App
Step 1: Add Context
Click the plus button (+) to add:
- CMS collections for dynamic data
- Components from your site for brand consistency
Step 2: Write Your Prompt
Build an ROI calculator that shows cost savings based on user inputs. Include fields for team size, current cost per user, and our product pricing. Show results with a breakdown chart and call-to-action to schedule a demo. Use our brand colors and navigation component.
Step 3: Generate & Preview
- Click the arrow button to submit
- Generation takes a few minutes
- Preview opens when complete
Step 4: Refine & Deploy
Use follow-up prompts to adjust functionality, or edit code directly for precise control. When ready, click Deploy to publish.
Best Practices
- Start simple — Build a basic version, then add complexity incrementally
- Be specific — Clear prompts with concrete examples produce better results
- Test incrementally — Make one change at a time and preview
- Connect your CMS — Use real data for more accurate prototypes
- Customize with Variables — Adjust colors, spacing, typography via the Variables panel
🚀 Get Started: Sign up for App Gen • View Documentation
05Webflow Cloud
Webflow Cloud is a serverless hosting platform that lets you deploy any Next.js or Astro application—whether you built it in Cursor, Claude Code, or another IDE. Deploy prototypes to production on Cloudflare's global edge network with built-in storage and automatic scaling.
Why Webflow Cloud for Prototyping?
When you're prototyping in Cursor or other AI-assisted tools, you need a fast path from code to production. Webflow Cloud removes the infrastructure complexity so you can focus on building and iterating.
The Complete Workflow
- Build in Cursor — Prototype your Next.js or Astro app using AI-assisted development
- Push to GitHub — Commit your code and push to your repository
- Deploy on Webflow Cloud — Automatic deployments across dev, staging, and production environments
What You Get:
- Edge-Powered Performance — Global CDN with Cloudflare Workers delivering sub-50ms response times worldwide
- Framework Support — Native support for Next.js and Astro, with more frameworks coming
- Built-in Storage — SQLite databases, Key Value Store for caching, and Object Storage for media files—no external services needed
- GitHub Integration — Automated CI/CD workflows with environment-based deployments
- Zero Infrastructure — No servers to manage, no scaling concerns—just push your code and go
Getting Started with Webflow Cloud
Step 1: Build Locally in Cursor
- Create your Next.js or Astro app using AI-assisted development
- Add features, test locally, and iterate quickly
- Use your preferred tools and packages
Step 2: Push to GitHub
- Initialize a Git repository if you haven't already
- Commit your code and push to GitHub
- Webflow Cloud will automatically detect your framework
Step 3: Connect to Webflow Cloud
- Link your GitHub repository in Webflow
- Configure build settings (usually auto-detected)
- Set up environment variables if needed
Step 4: Deploy
- Automatic deployments on every push to main branch
- Preview deployments for pull requests
- Instant rollback if needed
Best Practices
- Use environment variables — Keep API keys and secrets secure with environment variables
- Test locally first — Validate your app works before deploying to production
- Leverage built-in storage — Use SQLite, KV Store, or Object Storage for data persistence
- Monitor performance — Take advantage of edge deployment for global performance
- Use preview deployments — Test changes in isolated environments before merging
Ready to deploy your Cursor prototypes?
Explore Webflow Cloud documentation →06Use Cases
Site Builder Use Cases
| Use Case | Goal | Example |
|---|---|---|
| Product Launch Pages | Drive awareness & conversions | Hero section, features, pricing, testimonials, CTAs |
| Event Registration | Maximize signups | Agenda, speakers, venue details, sign-up forms |
| Content Hubs | SEO & thought leadership | Blog, resources, case studies, documentation |
| Campaign Microsites | Campaign engagement | Seasonal promotions, brand activations, partnerships |
App Gen Use Cases
| Use Case | Goal | Example |
|---|---|---|
| Pricing Calculators | Lead generation & qualification | ROI calculator, savings estimator, plan selector |
| Product Finders | Guide users to solutions | Quiz-based recommender, comparison tool |
| Event Experiences | Drive registrations | Interactive schedule, speaker directory, favorites |
| Location Finders | Drive foot traffic | Store locator with maps and filtering |
| Multi-Step Forms | Improve conversions | Onboarding wizard, guided lead capture |
| Data Dashboards | Build trust & authority | Industry benchmarks, performance visualizations |
Webflow Cloud Use Cases
| Use Case | Goal | Example |
|---|---|---|
| Advanced Prototypes | Test complex features quickly | AI-powered search, real-time collaboration, custom workflows |
| Data-Driven Apps | Build with persistent storage | User dashboards with SQLite, KV-cached APIs, file uploads to Object Storage |
| Cursor Experiments | Ship code-first prototypes | Next.js apps built in Cursor with custom logic and third-party APIs |
| Multi-Environment Testing | Test across dev/staging/production | A/B tests, feature flags, preview deployments for pull requests |
| Portfolio Projects | Showcase technical work | Personal sites, case studies, interactive demos with global edge performance |
| Internal Tools | Build team productivity apps | Admin panels, reporting tools, content management interfaces |