dreamGTM Website Playbook

What is this?

The dreamGTM Website Playbook is a structured, AI-powered workflow for building modern business websites — from blank slate to live, SEO-ready, analytics-wired site in one focused session.

It works for any business type: SaaS, agencies, local businesses, creators, nonprofits, and more. You don’t need design skills, a developer, or hours of configuration. You need Claude Code and about 2–4 hours.

The playbook is a GitHub repo you clone. Inside are a production-ready Astro 5 + Tailwind CSS v4 + Netlify starter template and 7 Claude Code slash commands that run in sequence — each reading the previous phase’s output from disk and building on it.

The 7-Step Workflow

Step 1 — /gtm-strategy

Interviews you about your business — ICP, competitors, positioning, and the pages your site needs. Adapts the suggested sitemap to your business type (SaaS vs. agency vs. local business vs. creator, etc.).

📄 Output: playbook/01-strategy-brief.md — every later skill reads this file. Get it right and the rest flows naturally.

Step 2 — /gtm-copy

Reads the strategy brief and writes page-by-page copy for every page in your sitemap: headlines, subheads, section body copy, and CTAs.

Applies professional copywriting principles throughout:

• Benefit-led headlines — lead with the outcome, not the feature
• ICP-mirroring — borrows language from how your customer describes their own problem
• One CTA per section — no competing choices
• Social proof placement — positioned right before or after the primary CTA

📄 Output: playbook/02-copy/<page>.md per page — one file per page in your sitemap.

Step 3 — /gtm-design-system

Sets the visual identity — colors, fonts, corner radius, shadow style — then edits design-tokens.css directly. Four ways to set direction:

Choose your input method

• Named reference — “make it feel like Linear” → Claude extracts the design from its knowledge
• Screenshot — drop images in playbook/design-inspiration/ → Claude reads them visually
• Live URL — give any URL → Claude fetches and analyzes the palette, type, and spacing
• Style preset — pick from 6 built-in options

The 6 built-in style presets

📄 Output: Edits website/src/styles/design-tokens.css directly + writes playbook/03-design-system.md documenting the chosen direction and rationale.

Step 4 — /gtm-scaffold

Builds out all your pages using the UI component kit, populating them with the copy from Step 2. Wires Navigation and Footer with your real brand name and links. Customizes the blog category system to your taxonomy. Confirms npm run build passes before marking this step complete.

The UI kit includes: Button (7 variants), Card (5 variants), Container, Heading, Text, Section, Badge. Every component accepts a class prop for one-off overrides.

🔨 Output: Completed website/src/pages/* with real content + playbook/04-scaffold-log.md confirming build status.

Step 5 — /gtm-seo

Full SEO audit and implementation across every page. Works through a 7-point checklist and applies fixes directly to the codebase:

• Unique title tags and meta descriptions per page (under 60 / 160 chars)
• Open Graph + Twitter Card tags on every page
• Canonical URLs + sitemap.xml via @astrojs/sitemap
• robots.txt pointing to the correct production domain
• JSON-LD structured data (Organization + BlogPosting schemas)
• Single H1 per page, heading hierarchy check
• Image alt text audit + internal linking suggestions

📋 Output: playbook/05-seo-checklist.md with pass/fail per item and a list of manual tasks remaining (e.g. “create OG image at 1200×630px”).

Step 6 — /gtm-analytics

Wires GA4 and Google Search Console into the site, then adds conversion event tracking on your primary CTA. GA4 loads only when PUBLIC_GA_MEASUREMENT_ID is set — silent no-op in dev if missing.

• GA4 snippet added to BaseLayout.astro via environment variable
• GSC HTML-tag verification slot wired to PUBLIC_GSC_VERIFICATION
• cta_click events on all CTA buttons tagged with data-ga-event
• Netlify Forms configured on the contact form (no backend needed)

📋 Output: playbook/06-analytics-setup.md — IDs used, verification steps, and a go-live manual checklist (GA4 Realtime check, GSC sitemap submission, Netlify env vars).

Step 7 — /gtm-launch

Pre-launch QA checklist, Netlify deploy walkthrough, custom domain setup, and post-launch monitoring guide.

Checks: build passes · no placeholder copy remaining · OG image exists · favicon replaced · robots.txt not blocking crawlers · PageSpeed ≥ 85 mobile · accessibility basics · dark mode readable.

🚀 Output: playbook/07-launch-checklist.md — your complete go-live reference.

What you get

• A real website — your copy, your brand colors, your pages. Not lorem ipsum.
• SEO-ready from day one — sitemap, schema, canonical URLs, meta tags all set up correctly.
• Analytics wired — GA4 + GSC + conversion tracking, configured before you deploy.
• A paper trail — the playbook/ folder documents every decision made during the build.
• A reusable system — re-run individual skills after launch for new pages, redesigns, or SEO health checks.

What’s inside the repo

dreamGTM-website-playbook/
├── .claude/skills/           # The 7 slash commands
│   ├── gtm-strategy/
│   ├── gtm-copy/
│   ├── gtm-design-system/
│   ├── gtm-scaffold/
│   ├── gtm-seo/
│   ├── gtm-analytics/
│   └── gtm-launch/
├── playbook/                 # Your decisions accumulate here as you run each skill
│   ├── design-references.md  # 12 gallery sources + 6 built-in style presets
│   └── design-inspiration/   # Drop screenshots here before /gtm-design-system
└── website/                  # Production-ready Astro starter template
    ├── src/components/ui/    # Button, Card, Container, Heading, Text, Section, Badge
    ├── src/layouts/          # BaseLayout (OG/GA4/GSC slots) + BlogLayout
    ├── src/content/          # blogs + authors collections
    ├── src/styles/           # design-tokens.css (Tailwind v4 @theme)
    ├── astro.config.mjs      # Astro 5 + @astrojs/sitemap + Tailwind v4 Vite plugin
    └── netlify.toml          # Security headers + asset caching rules

Requirements

• Claude Code — CLI or desktop app (free tier works)
• Node.js 20+
• A GitHub account (for Netlify deploy)
• ~2–4 hours for your first run

Honest note: Claude Code does the heavy lifting, but you’ll need to review copy, confirm design choices, and make judgment calls at each step. It’s a workflow, not a vending machine. The quality of your playbook/01-strategy-brief.md answers directly determines the quality of everything that follows.

Tech stack

Astro 5.16 · Tailwind CSS v4 (Vite plugin, all tokens in @theme {}) · @astrojs/sitemap · Netlify · GSAP 3 (optional animations)