Skip to content

AI code editor · AI code editor with the Cascade agent

Website templates for Windsurf

Windsurf's Cascade agent builds the site from the prompt in your workspace. Connect the MCP server to search templates from chat.

  1. 01

    Add to mcp_config.json

    ~/.codeium/windsurf/mcp_config.json
    {
      "mcpServers": {
        "vibefather": {
          "serverUrl": "https://mcp.vibefather.ai"
        }
      }
    }
  2. 02

    Ask for a template

    Ask Windsurf to find a template by style or type — “a brutalist portfolio”, “a dark SaaS landing page” — and build it with your product name. Or copy a prompt from any template page.

  3. 03

    Let it build

    Keep DESIGN.md open in the workspace so Cascade picks it up as context for follow-up changes.

Popular templates

All templates →

Hand-drawn science explainer

  • Explainer
  • Hand-drawn

WebGL product launch page

  • Landing Page
  • 3D

Retro OS desktop portfolio

  • Portfolio
  • Retro OS

FAQ

Are these templates free to use with Windsurf?

For personal and non-commercial projects, yes: live demos, DESIGN.md files and most prompts are free under CC BY-NC 4.0. Commercial use, Pro-only prompts and source code come with Pro.

Do the templates only work in Windsurf?

No. The prompts are plain Markdown, so the same template works in Claude Code, Codex, Cursor, GitHub Copilot and other AI coding tools. Results vary a little between tools and models.

Which model built the demos?

Each template page says which model and tool built its live demo. We build it from the published prompt with nothing added.

Windsurf is a trademark of its owner. VibeFather is not affiliated with or endorsed by it.