Stitch → Astro + WordPress Website Delivery

Complete workflow for AI-generated designs → production websites.

Stack

Component	Technology	Purpose
Design	Google Stitch	AI mockup generation
Frontend	Astro	Static site generation
Styling	Tailwind CSS	Stitch-native
CMS	WordPress (headless)	Blog, portfolio
SEO	RankMath	Meta, schema
Hosting	Cloudflare Pages	Frontend CDN

---

Phase 1: Design Generation (1-2 hrs)

1.1 Write Stitch Prompts

Use detailed prompts with: sections, colors, typography, content.

1.2 Generate in Stitch

# Use Stitch MCP tools:
mcp_stitch_create_project
mcp_stitch_generate_screen_from_text
mcp_stitch_fetch_screen_code

1.3 Organize Exports

client-name/
├── stitch-exports/
│   ├── homepage.html
│   ├── about.html
│   └── ...

---

Phase 2: WordPress Setup (2-3 hrs)

2.1 Install WordPress

• Subdomain: wp.clientdomain.com
• Plugins: RankMath, ACF, Classic Editor

2.2 Configure

// wp-config.php - CORS
header("Access-Control-Allow-Origin: *");

---

Phase 3: Astro Setup (1 hr)

npm create astro@latest client-name
npx astro add tailwind sitemap

Project Structure

src/
├── components/
├── layouts/MainLayout.astro
├── lib/wordpress.js
├── pages/
│   ├── index.astro
│   └── blog/[...slug].astro

---

Phase 4: Convert Stitch HTML (4-8 hrs)

4.1 WordPress API Helper

// src/lib/wordpress.js
const WP_URL = 'https://wp.clientdomain.com/wp-json/wp/v2';

export async function getPosts(count = 10) {
  const res = await fetch(`${WP_URL}/posts?per_page=${count}&_embed`);
  return res.json();
}

export async function getPost(slug) {
  const res = await fetch(`${WP_URL}/posts?slug=${slug}&_embed`);
  const posts = await res.json();
  return posts[0];
}

4.2 Convert Pages

1. Create .astro file for each Stitch export
2. Wrap with MainLayout
3. Extract reusable components

---

Phase 5: Testing (1-2 hrs)

npm run dev

Checklist:

• All pages load
• Blog pulls from WordPress
• Mobile responsive
• SEO meta present

---

Phase 6: Deployment (30 min)

npm run build
npx wrangler pages deploy ./dist --project-name=client-name

Or connect GitHub to Cloudflare Pages.

---

Phase 7: Handoff (1 hr)

Provide client:

• WordPress admin URL + credentials
• Brief editing guide
• Support contact

---

Time Estimate

Phase	Hours
Design	2-4
WordPress	2-3
Astro	1
Conversion	4-8
Testing	1-2
Deploy	0.5
Handoff	1
Total	12-20

---

Maintenance

Requires Rebuild:

• Homepage changes, new pages, service updates

Auto-Reflects:

• Blog posts (from WP API)
• Portfolio items

---

Final Checklist

• All Stitch exports converted
• WordPress + RankMath configured
• Blog pulling from WordPress
• Sitemap + robots.txt
• Deployed to Cloudflare
• Custom domain + SSL
• Client has credentials