Vibe Code a SaaS Startup Website

Plan and produce a complete WordPress site architecture for a B2B SaaS
startup, including data model, theme.json, templates, plugin stack, and
launch checklist. Output should be production-ready and copy-paste-able.

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Product name: [PRODUCT NAME]
- One-liner: [PRODUCT NAME] is [WHAT IT DOES] for [WHO IT'S FOR]
- Hero outcome promised: [e.g., "Cut close-rate analysis from 3 days to
 3 hours"]
- Audience: B2B, [SMB / MIDMARKET / ENTERPRISE]
- Pricing model: monthly + annual; 3 tiers (Starter, Growth, Enterprise)
- Existing assets: logo SVG, brand colors, product screenshots (placeholders
 acceptable)
- Goals: demo requests + trial signups + organic SEO + content

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: bold primary (#3850ff blue) + dark ink (#0a0e27) + cream
 surface (#f6f4ef) + single signal-green accent (#1cc984) for "success"
 states. Override if user provides; pass AA contrast for body.
- Type stack: display sans (Manrope, Inter Tight, or Söhne Halbfett) for
 headings + Inter for body + monospace for code (JetBrains Mono).

═══════════════════════════════════════════════════════════════
WORDPRESS STACK
═══════════════════════════════════════════════════════════════
- Theme: lightweight block theme (recommend GeneratePress, Kadence, OR
 custom child-of-TwentyTwentyFive). Justify the choice in 2 lines.
- Editor: Gutenberg with custom block patterns. Optional builder: Bricks
 Builder OR Spectra (free), recommend ONE for this site, and stay
 consistent throughout.
- Custom blocks: rely on patterns + ACF Blocks for complex sections
 (pricing table, feature comparison, demo-form embed).
- Plugins (install via WP-CLI):
 wp plugin install --activate 
 wordpress-seo 
 advanced-custom-fields 
 wpforms-lite 
 wp-rocket 
 wp-rest-cache 
 stream
 • Yoast (or RankMath), SEO + schema
 • ACF Pro, for CPT field groups
 • WPForms or Fluent Forms, demo form + Slack/email notifications
 • WP Rocket + ShortPixel, performance
 • Stream, audit log

═══════════════════════════════════════════════════════════════
DATA MODELING LAYER
═══════════════════════════════════════════════════════════════
Output JSON exports for ACF field groups and `register_post_type` PHP for
each CPT.

Custom Post Types:
- `feature`, fields: hero_eyebrow, hero_headline, hero_subhead, value_prop,
 icon_svg (text), screenshot (image), benefit_bullets (repeater),
 related_features (post object multi)
- `solution`, fields: industry (taxonomy), persona (taxonomy), outcome_metric
 (text), case_study_excerpt, related_features (post object multi)
- `customer_story`, fields: company_name, industry (taxonomy), customer_role
 (text), logo (image), hero_quote, results (repeater of label+value),
 before_after (group), video_url
- `changelog`, fields: version (text), release_date (date), tags (taxonomy:
 Feature/Fix/Breaking), changes (wysiwyg)
- `integration`, fields: integration_logo (image), category (taxonomy),
 setup_url (url), docs_url (url), supported_features (checkbox list)

Taxonomies:
- `industry`, for solutions + customer_stories (hierarchical)
- `persona`, for solutions (non-hierarchical)
- `integration_category`, for integrations (hierarchical)

═══════════════════════════════════════════════════════════════
SITE MAP
═══════════════════════════════════════════════════════════════
1. Home (front page)
2. Features (archive) + /features/{feature-slug} (single)
3. Solutions (archive) + /solutions/{industry} + /solutions/by-persona/{persona}
4. Pricing
5. Integrations (archive) + /integrations/{slug}
6. Customers (archive) + /customers/{story-slug}
7. Blog
8. Changelog
9. About
10. Careers (Workable or Greenhouse embed)
11. Contact
12. Login (external link to product app)
13. Request Demo (page with WPForms multi-step)
14. Start Free Trial (external CTA to signup app)

═══════════════════════════════════════════════════════════════
THEME.JSON
═══════════════════════════════════════════════════════════════
Output a complete theme.json that defines:
- color palette + duotone (brand blue + ink for tinted product shots)
- gradient presets for hero (subtle blue-to-ink) and CTA bands
- typography: 4-step type scale + line-heights + letterSpacing
- spacing scale: 8-step rhythm (4, 8, 12, 16, 24, 32, 48, 64, 96, 128)
- block defaults: button (large pill, brand blue → ink on hover), heading,
 paragraph
- registered patterns for: hero with split layout, feature card,
 testimonial pull-quote, pricing table, integration grid, CTA band

═══════════════════════════════════════════════════════════════
HOME PAGE, WRITE THE EXACT BLOCK MARKUP
═══════════════════════════════════════════════════════════════
Output full Gutenberg block markup (wp:heading / wp:paragraph /
wp:cover etc.) for each section:

1. Sticky nav (custom block via patterns) with logo, primary nav, "Login"
 link + "Start Free Trial" pill CTA
2. Hero: two-column split, eyebrow with line marker, two-line headline
 with italic accent on outcome word, subhead, two CTAs (Start Free
 Trial / Watch Demo), product screenshot on right inside browser-frame
 SVG (with subtle shadow + animated cursor on hover)
3. Logo bar (8 customer logos, grayscale), "Trusted by teams at"
4. 3-up benefit grid (icon + bold heading + 2-line description)
5. Feature highlights, alternating left/right image-text rows for top 4
 features, each with a screenshot + 3-bullet benefit list as prose
6. Integrations strip, "Connects to your stack" + horizontal logo row
7. Customer story spotlight, full-width quote pull from one customer
 with results card (3 metric callouts)
8. Pricing preview, 3 cards summarized, "Compare all plans →" link
9. ROI section, "What our customers see in 90 days" with 3 metric blocks
10. CTA band, gradient bg, "Start your free trial, no credit card" with
 primary + secondary CTA
11. Footer, 4-column links, newsletter, status page link, copyright,
 SOC 2 typeset badge (NOT image)

═══════════════════════════════════════════════════════════════
PRICING PAGE
═══════════════════════════════════════════════════════════════
- 3-tier card grid with annual/monthly toggle (small JS, no library)
- Middle tier highlighted with "Most popular" small tag
- Each card: tier name (sans), price (display sans + .reduced state for
 annual), 6-8 feature checklist in prose, CTA
- Below cards: full feature comparison table (HTML table, sticky header,
 semantic <th> with scope), features grouped into 4-5 categories
- ROI calculator concept (interactive, sliders for team size + cost
 saved per hour → annual savings shown live)
- FAQ at bottom (8 items, native <details>)
- Schema: `Offer` + `Service` JSON-LD

═══════════════════════════════════════════════════════════════
DEMO REQUEST FORM (WPForms multi-step)
═══════════════════════════════════════════════════════════════
Step 1: name, work email, company name (auto-validate work email, block
 gmail/outlook with friendly message)
Step 2: company size (select), industry (select), role (select)
Step 3: biggest challenge today (textarea), preferred demo time (date+time)
Submit:
- Email notification to sales@ + Slack via webhook
- If company_size > 100 → route to enterprise@ instead
- Auto-create lead in CRM (HubSpot/Pipedrive via Zapier webhook)
- Show inline success: "We will email you within 1 business day to confirm"

═══════════════════════════════════════════════════════════════
SEO & SCHEMA
═══════════════════════════════════════════════════════════════
- Target keywords per page (write them out for: home, each feature, each
 solution, pricing)
- Schema types: SoftwareApplication (home + product), Organization (site-
 wide), FAQPage (pricing/features), Article (blog), BreadcrumbList (all
 archives), Review (customer stories)
- Sitemap: split by post type
- Internal linking model: features ↔ solutions ↔ customer_stories ↔ blog
- OG image template: generate for each post via "Open Graph Image" plugin

ADDITIONAL SEO REQUIREMENTS (implement all of these):

On-Page SEO for Every Page:
- Yoast/RankMath meta title template: "[Page Title] | [Site Name]" (under 60 chars)
- Meta description per page: 150-160 chars, include primary keyword + CTA
- Exactly ONE H1 per page — use the real, human headline; keep keywords in the title and meta, not the visible H1
- Logical H2 > H3 heading hierarchy, never skip a level
- Headings should include secondary keywords naturally,
  keep the section's real, human label (keywords in title and meta, not stuffed headings)
- Every image must have a descriptive alt attribute with keywords
- Internal links between related content using descriptive anchor text

Structured Data (JSON-LD via Yoast/RankMath + manual where needed):
- Primary schema types: SoftwareApplication, Organization
- BreadcrumbList on all pages
- FAQPage schema on any page with an FAQ/accordion section
- Article schema on all blog posts (auto via Yoast)
- Validate schema with Google Rich Results Test before launch

Open Graph & Social Sharing:
- og:title, og:description, og:image, og:url on every page
- twitter:card=summary_large_image on every page
- Default OG image set in Yoast; per-page overrides for key landing pages
- OG images should be 1200x630px, branded, with clear text

Content SEO:
- Write real, useful body copy for every page (not just headings and CTAs).
  Every major section needs at least 2-3 sentences of descriptive text
  that search engines can index.
- Blog content strategy: 10 seed articles targeting long-tail keywords
  related to "SaaS startup". List the titles and target keywords.
- Use the primary keyword once or twice where it reads naturally; keep the rest in titles and meta, never stuffed.
- Every CTA should use descriptive anchor text with the service keyword.

Technical SEO:
- XML sitemap split by post type (auto via Yoast)
- Canonical tags on all pages (auto via Yoast)
- robots.txt: allow all, point to sitemap
- 301 redirects plan for any renamed/moved content
- Breadcrumbs enabled via Yoast + schema
- Clean permalinks: pick one post-permalink base that fits the site (do not force /blog/ on a post-centric site); /%postname%/ is fine for pages
- Lazy load all images below the fold, eager load hero/LCP image
- Core Web Vitals targets: LCP < 2.5s, CLS < 0.1, INP < 200ms

SECURITY, ACCESSIBILITY & HONESTY (required):
- Escape all output (esc_html/esc_url/esc_attr), sanitize all input (sanitize_text_field + wp_unslash), and use a nonce + current_user_can() on every form handler and custom action. Emit JSON-LD with wp_json_encode().
- Target WCAG 2.2 AA: visible :focus-visible states, <label for> on every field, full keyboard operability, and @media (prefers-reduced-motion: reduce) around all motion.
- Never fabricate business data, testimonials, ratings, credentials, or stats; leave labeled {{TODO}} placeholders for anything the user has not supplied.
- PLUGIN INSTALL: some listed plugins are premium or not in the wordpress.org directory, so a single `wp plugin install` will error out. Split the list into free (wp.org) vs premium (upload/license), verify each slug, and note that gallery/group ACF fields and ACF Blocks need ACF Pro.
- Commit to ONE paradigm: a block theme (theme.json + block templates) OR a classic theme/builder — never mix them. If a plugin already owns a post type or feed (inventory, sermons, courses, job listings, podcast feeds), extend it — do not re-declare that CPT or emit a second, conflicting schema block.

═══════════════════════════════════════════════════════════════
PERFORMANCE
═══════════════════════════════════════════════════════════════
- WP Rocket presets: page cache, critical CSS, deferred JS, lazy iframes
- ShortPixel WebP + adaptive images
- Cloudflare in front (caching at edge for marketing pages)
- Object cache (Redis), required, not optional
- Hero LCP under 1.5s; CLS under 0.05; INP under 200ms
- Self-host Google Fonts (woff2 subset, font-display: swap)

═══════════════════════════════════════════════════════════════
ANALYTICS
═══════════════════════════════════════════════════════════════
- GA4 via Site Kit (no Universal Analytics)
- Events: cta_click (Start Trial, Demo, Login), form_submit, pricing_view
- Conversion goals: trial_signup (offsite), demo_request (form_submit)
- UTM source tracking on every CTA → preserved into the trial signup flow
- Hotjar / Microsoft Clarity for session replay (privacy-compliant)

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis in nav, headlines, or buttons (rocket emoji in CTAs especially
 banned)
- No autoplay videos with audio in hero
- No "Sign up now and get 50% off!" exclamation marks
- No fake stock photos of generic "diverse team in conference room"
- No real customer logos without permission (mark all placeholders)
- No live chat widgets that hijack the page on load
- No newsletter popups within 5 seconds of page load
- No script/handwritten fonts
- No deep blue gradients that scream "another SaaS site"
- No "AI-powered" claims unless the product actually is

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
Produce, in this order:
1. Sitemap diagram (text tree)
2. WP-CLI install commands (single block, copy-paste)
3. theme.json (complete, valid)
4. ACF JSON exports for each CPT
5. PHP for register_post_type() and register_taxonomy() for each CPT
6. Block markup for the homepage (every section)
7. Block markup for the pricing page
8. Demo form schema + routing rules
9. Launch checklist (15 items, in execution order)