Building with AI

The AI Website Workflow

Building a website with AI and deploying to Fast Mode is a 3-step process:

Build — Use an AI tool to create your website
Convert — Transform it to Fast Mode format
Deploy — Upload to Fast Mode and go live

Step 1: Choose Your AI Builder

Use any AI tool to build your initial website. Here are popular options:

Browser-Based (No Setup)

Tool	Best For	Website
Bolt	Full websites with multiple pages	bolt.new
Lovable	Polished, production-ready sites	lovable.dev
v0	UI components and landing pages	v0.dev
Replit	Full-stack apps with backend	replit.com

Note: These tools don't support MCP, so you'll use the manual conversion method (Option B below).

IDE-Based (Supports MCP)

Tool	Best For	MCP Support
Cursor	Developers who want full control	Yes
Windsurf	Rapid prototyping	Yes
Claude Code	Terminal-based workflows	Yes
VS Code	Familiar environment	Yes (with extension)

These tools can use the MCP server for automatic conversion and schema creation.

Chat-Based

Tool	Best For	Note
ChatGPT	Quick HTML/CSS generation	Copy code from chat
Claude	Complex, thoughtful code	Good for full pages

Step 2: Build Your Website

Use your chosen AI tool to create your website. Here's how to get better results:

Be Specific

Instead of "make me a website", try:

Create a portfolio website for a UX designer with:
- Hero section with name "Sarah Chen" and tagline "Designing intuitive experiences"
- Projects grid showing 6 case studies with images
- About page with bio and skills list
- Contact page with a form
- Clean, minimal design with lots of whitespace
- Color scheme: white background, dark gray text, blue accents (#3B82F6)

Request Multi-Page Sites

Build a complete marketing website with these pages:
1. Homepage - hero, features, testimonials, CTA
2. About - team, story, values
3. Pricing - 3 tiers with comparison
4. Contact - form with name, email, message
5. Blog listing page (I'll add content later)

Make sure navigation works between all pages.

Ask for Clean HTML

For easier conversion, request:

Semantic HTML (header, main, section, article, footer)
External CSS file (not inline styles)
Mobile-responsive design
Working navigation links between pages

Iterate Until You're Happy

Keep refining with follow-up prompts:

"Make the hero section taller with more padding"
"Change the font to Inter"
"Add a gradient background to the CTA section"
"Make the navigation sticky on scroll"

Step 3: Convert to Fast Mode Format

Once your website looks how you want it, convert it to Fast Mode format. Choose the method based on your AI tool:

Option A: MCP Server (Recommended for IDE Users)

If you're using Cursor, Claude Code, Windsurf, or VS Code with the MCP server:

Install the Fast Mode MCP Server
Ask: "Convert this website to Fast Mode format for my [project name] project"
The MCP will automatically:
- Create the proper folder structure
- Generate manifest.json
- Create your CMS collections and fields
- Add CMS tokens for editable content
- Move assets to the public folder
- Validate everything
Deploy with: "Deploy this to Fast Mode"

Why MCP is best: It handles schema creation automatically. You don't need to manually set up collections — the AI analyzes your site and creates the right CMS structure for you.

Option B: Settings Conversion Prompt (For Browser-Based Builders)

If you're using Bolt, Lovable, v0, Replit, ChatGPT, or Claude (tools without MCP support):

1. Create Your Schema First

Before converting, set up the CMS structure your site needs:

Go to your Fast Mode dashboard
Navigate to Collections
Create the collections your site needs (e.g., Blog Posts, Team Members, Products)
Add the appropriate fields to each collection

For example, a blog site might need:

Blog Posts collection with: title (text), content (rich text), featured image (image), published date (date), author (relation)
Authors collection with: name (text), bio (rich text), photo (image)

2. Get the Dynamic Conversion Prompt

Go to Settings in your Fast Mode dashboard
Find the Conversion Prompt section
Copy the entire prompt

Important: This prompt is dynamically generated and includes your specific collections schema. It tells the AI exactly what CMS tokens to use based on your collections.

3. Convert Your Site

Paste the conversion prompt into your AI tool
Include your website code (HTML, CSS, JS files)
The AI will convert your site to Fast Mode format with the correct CMS tokens

4. Deploy

Download/export the converted files
ZIP the folder
Upload to Fast Mode via Settings → Site Package

What Gets Converted?

During conversion, your website is restructured:

Folder Structure

Before:                    After:
index.html                 manifest.json
about.html                 pages/
contact.html               ├── index.html
styles.css                 ├── about.html
images/                    └── contact.html
└── logo.png               public/
                           ├── css/
                           │   └── styles.css
                           └── images/
                               └── logo.png

Manifest Creation

A manifest.json is generated defining your pages:

{
  "name": "My Website",
  "pages": {
    "/": { "file": "pages/index.html", "title": "Home" },
    "/about": { "file": "pages/about.html", "title": "About" },
    "/contact": { "file": "pages/contact.html", "title": "Contact" }
  }
}

CMS Tokens

Content that should be editable gets CMS tokens:

<!-- Static content becomes dynamic -->
<h1>Welcome to My Site</h1>

<!-- After conversion -->
<h1 data-edit="hero-title">Welcome to My Site</h1>

<!-- Collection content uses template syntax -->
{{#each posts}}
  <article>
    <h2>Building with AI</h2>
    <div>{The AI Website Workflow
Building a website with AI and deploying to Fast Mode is a 3-step process:

Build — Use an AI tool to create your website
Convert — Transform it to Fast Mode format
Deploy — Upload to Fast Mode and go live




Step 1: Choose Your AI Builder
Use any AI tool to build your initial website. Here are popular options:

Browser-Based (No Setup)

Tool Best For Website
Bolt Full websites with multiple pages bolt.new
Lovable Polished, production-ready sites lovable.dev
v0 UI components and landing pages v0.dev
Replit Full-stack apps with backend replit.com

Note: These tools don't support MCP, so you'll use the manual conversion method (Option B below).

IDE-Based (Supports MCP)

Tool Best For MCP Support
Cursor Developers who want full control Yes
Windsurf Rapid prototyping Yes
Claude Code Terminal-based workflows Yes
VS Code Familiar environment Yes (with extension)

These tools can use the MCP server for automatic conversion and schema creation.

Chat-Based

Tool Best For Note
ChatGPT Quick HTML/CSS generation Copy code from chat
Claude Complex, thoughtful code Good for full pages




Step 2: Build Your Website
Use your chosen AI tool to create your website. Here's how to get better results:

Be Specific
Instead of "make me a website", try:
Create a portfolio website for a UX designer with:
- Hero section with name "Sarah Chen" and tagline "Designing intuitive experiences"
- Projects grid showing 6 case studies with images
- About page with bio and skills list
- Contact page with a form
- Clean, minimal design with lots of whitespace
- Color scheme: white background, dark gray text, blue accents (#3B82F6)

Request Multi-Page Sites
Build a complete marketing website with these pages:
1. Homepage - hero, features, testimonials, CTA
2. About - team, story, values
3. Pricing - 3 tiers with comparison
4. Contact - form with name, email, message
5. Blog listing page (I'll add content later)

Make sure navigation works between all pages.

Ask for Clean HTML
For easier conversion, request:

Semantic HTML (header, main, section, article, footer)
External CSS file (not inline styles)
Mobile-responsive design
Working navigation links between pages


Iterate Until You're Happy
Keep refining with follow-up prompts:

"Make the hero section taller with more padding"
"Change the font to Inter"
"Add a gradient background to the CTA section"
"Make the navigation sticky on scroll"




Step 3: Convert to Fast Mode Format
Once your website looks how you want it, convert it to Fast Mode format. Choose the method based on your AI tool:

Option A: MCP Server (Recommended for IDE Users)
If you're using Cursor, Claude Code, Windsurf, or VS Code with the MCP server:

Install the Fast Mode MCP Server
Ask: "Convert this website to Fast Mode format for my [project name] project"
The MCP will automatically:

Create the proper folder structure
Generate manifest.json
Create your CMS collections and fields
Add CMS tokens for editable content
Move assets to the public folder
Validate everything


Deploy with: "Deploy this to Fast Mode"

Why MCP is best: It handles schema creation automatically. You don't need to manually set up collections — the AI analyzes your site and creates the right CMS structure for you.

Option B: Settings Conversion Prompt (For Browser-Based Builders)
If you're using Bolt, Lovable, v0, Replit, ChatGPT, or Claude (tools without MCP support):

1. Create Your Schema First
Before converting, set up the CMS structure your site needs:

Go to your Fast Mode dashboard
Navigate to Collections
Create the collections your site needs (e.g., Blog Posts, Team Members, Products)
Add the appropriate fields to each collection

For example, a blog site might need:

Blog Posts collection with: title (text), content (rich text), featured image (image), published date (date), author (relation)
Authors collection with: name (text), bio (rich text), photo (image)


2. Get the Dynamic Conversion Prompt

Go to Settings in your Fast Mode dashboard
Find the Conversion Prompt section
Copy the entire prompt

Important: This prompt is dynamically generated and includes your specific collections schema. It tells the AI exactly what CMS tokens to use based on your collections.

3. Convert Your Site

Paste the conversion prompt into your AI tool
Include your website code (HTML, CSS, JS files)
The AI will convert your site to Fast Mode format with the correct CMS tokens


4. Deploy

Download/export the converted files
ZIP the folder
Upload to Fast Mode via Settings → Site Package




What Gets Converted?
During conversion, your website is restructured:

Folder Structure
Before:                    After:
index.html                 manifest.json
about.html                 pages/
contact.html               ├── index.html
styles.css                 ├── about.html
images/                    └── contact.html
└── logo.png               public/
                           ├── css/
                           │   └── styles.css
                           └── images/
                               └── logo.png

Manifest Creation
A manifest.json is generated defining your pages:
{
  "name": "My Website",
  "pages": {
    "/": { "file": "pages/index.html", "title": "Home" },
    "/about": { "file": "pages/about.html", "title": "About" },
    "/contact": { "file": "pages/contact.html", "title": "Contact" }
  }
}

CMS Tokens
Content that should be editable gets CMS tokens:
<!-- Static content becomes dynamic -->
<h1>Welcome to My Site</h1>

<!-- After conversion -->
<h1 data-edit="hero-title">Welcome to My Site</h1>

<!-- Collection content uses template syntax -->
{{#each posts}}
  <article>
    <h2>{{name}}</h2>
    <div>{{{content}}}</div>
  </article>
{{/each}}



After Conversion
Once your site is on Fast Mode, you can:

Edit content from the dashboard without touching code
Add a blog using the built-in CMS collections
Capture form submissions automatically
Connect a custom domain
Set up auto-deploy from GitHub




Tips for Success

Start Simple
Build a basic version first, then add complexity. It's easier to convert a clean 5-page site than a complex 20-page app.

Keep Assets Organized
Put images in an images folder, CSS in a css folder. This makes conversion smoother.

Test Before Converting
Make sure your site works locally (navigation, images loading, responsive design) before converting.

Plan for CMS
If you want a blog or other dynamic content, mention it during the build:
"Add a blog section. I'll connect it to Fast Mode's CMS later,
so just create placeholder cards for now that I can replace with
{{#each}} loops."



Related Docs

MCP Server Setup — Install the MCP server for automatic conversion
Package Structure — How Fast Mode sites are organized
Template Syntax — Adding CMS tokens to templates
Managing Collections — Creating and configuring collections

}</div>
  </article>
{{/each}}

After Conversion

Once your site is on Fast Mode, you can:

Edit content from the dashboard without touching code
Add a blog using the built-in CMS collections
Capture form submissions automatically
Connect a custom domain
Set up auto-deploy from GitHub

Tips for Success

Start Simple

Build a basic version first, then add complexity. It's easier to convert a clean 5-page site than a complex 20-page app.

Keep Assets Organized

Put images in an images folder, CSS in a css folder. This makes conversion smoother.

Test Before Converting

Make sure your site works locally (navigation, images loading, responsive design) before converting.

Plan for CMS

If you want a blog or other dynamic content, mention it during the build:

"Add a blog section. I'll connect it to Fast Mode's CMS later,
so just create placeholder cards for now that I can replace with
{{#each}} loops."

Related Docs

MCP Server Setup — Install the MCP server for automatic conversion
Package Structure — How Fast Mode sites are organized
Template Syntax — Adding CMS tokens to templates
Managing Collections — Creating and configuring collections