AI Growth Lab
Vibe-design and code an SEO-Ready Website and Measure Performance
Center for Customer Insights and Digital Marketing · College of Business Administration · Cal Poly Pomona
4/10/2026
Overview
Link to Live Slides
Follow along with the live presentation! Access the companion slides here for clickable links and copy-ready text:
What You Will Build Today
A Live, Public Website
- Professional design generated with AI — no coding required
- Optimized for modern, AI-driven search
- An active lead capture form that routes submissions to your inbox(if time permits)
A Repeatable Workflow
- AI-assisted design and development pipeline
- Drag-and-drop cloud deployment in under 60 seconds
- A measurement foundation built on GA4, GTM, and Google Search Console
What You Need to Build the Website
- Free Accounts: Google and Netlify (you can easily log into Netlify using your Google account)
- Browser: Google Chrome is recommended (some users have experienced compatibility issues with Safari)
Setting Expectations
Today, we will get your website created, published, and about 95% of the way done. It is completely normal to want to spend time after the workshop combing through everything to make it perfect—that final polish always takes the most time!
The Search Landscape Has Changed
Then: Classic SEO
- Compete for keyword-based page rankings
- Drive organic clicks to your website
- Success measured by position on a results page
Now: AI-Powered Search
- LLMs synthesize answers and cite sources directly
- Fewer clicks — but higher-intent discovery
- Brand authority and entity recognition determine who gets recommended
The Business Implication
If an AI cannot accurately describe your brand, it will not recommend you — regardless of how good your product or service is.
Learning Outcomes
After this workshop, you will be able to:
- Formulate a Strategic Web Plan — Define your target audience, primary goal, and an entity-based SEO narrative built for LLM-driven search
- Rapidly Prototype with AI — Use Google Stitch to translate brand inspiration into professional HTML/CSS templates, no coding required
- Edit Code with Natural Language — Leverage LLMs to refine, troubleshoot, and extend website code through plain-language prompts
- Deploy a Live Web Property — Publish to the public internet via Netlify’s drag-and-drop pipeline in under 60 seconds
- Capture Leads Automatically — Configure a working contact form that routes submissions directly to your inbox
- Identify Your Analytics Stack — Understand the GA4 + GTM + GSC infrastructure that powers data-informed digital marketing decisions
The Workshop Pipeline
Phase 1
Ideation
Define your audience, goal, and SEO narrative
10 min
Phase 2
Design
Generate your site in Google Stitch
15 min
Phase 3
Edit
Refine and prep code in AI Studio
20 min
Phase 4
Deploy
Publish live with Netlify
10 min
Phase 5
Measure
Intro to GA4 + GTM + GSC
10 min
Phase 1: Strategy & Ideation
Define Your Website’s Purpose
Every strong website starts with a clear strategy. Answer four questions before you open any tool.
- Who is this for? Be specific — not “small businesses,” but “independent financial advisors in the Inland Empire serving first-generation investors.”
- What is the primary goal? Lead form submission? Portfolio showcase? Product sale?
- What pages are needed? Home, About, Services, Projects, Contact, Form completion, etc.
- What must each page communicate? Your core message, proof points, and call to action.
Prompt Generator
Use the Prompt Generator to translate your answers into structured prompts ready for Google Stitch and AI Studio.
Entity-Based SEO: The New Standard
Keyword Stuffing (outdated)
“Best plumber in Los Angeles. Emergency plumbing services. 24/7 plumber LA”
- Written for search bots, not humans
- Penalized by modern ranking algorithms
- Cannot be interpreted by LLMs
Entity-Based Narrative (current standard)
“Apex Plumbing is a licensed contractor serving residential and commercial clients across Los Angeles County, specializing in emergency repairs and new construction installations.”
- Defines a clear, crawlable brand identity
- Consistent tone and description across every page
- LLMs can accurately summarize and recommend you
Phase 2: Design with Google Stitch
Gathering Your Design Inputs
Quality inputs produce quality outputs. Collect these assets before opening Stitch.
Inputs to Sitch:
- Inspiration photos — Up to 5 images that reflect your aesthetic
- Reference URLs — Websites whose design you admire
Can be automatically Generated from above:
- Brand colors — Extracted from an existing logo, photo, or style guide
- Font style — Modern, rounded, serif, minimal, bold, etc.
Prompting Google Stitch
Stitch translates your brand inputs into functional HTML/CSS — treat it like briefing a designer.
- Reference your entity-based SEO narrative in the prompt
- Use the structured prompt from the Prompt Generator
- Select a model
Exporting your design from Stitch:
- Copy code directly — Paste into AI Studio or a text editor for immediate editing
- Download
.zip— Full project folder for local editing and backups - Export to AI Studio — Send directly for immediate refinement
Phase 3: AI-Powered Editing
Preparing Your Code for Deployment
Raw Stitch output needs three fixes before it will deploy correctly on Netlify. We will use Google’s AI Studio to edit.
The AI Studio Cleanup Prompt
Role: You are an expert web developer assisting with website deployment.
Task: I am providing raw HTML code exported from Google Stitch. Clean, rename, and restructure these files for seamless Netlify drag-and-drop deployment. Follow these rules strictly:
- Create
index.html— Netlify requires a root index file. Name the homepage fileindex.html. - Rename secondary pages — Use logical, lowercase filenames based on each page’s content or
<title>tag (e.g.,about.html,contact.html,our-team.html). Use hyphens for spaces. - Fix all navigation links — Rewrite every
<a href="...">tag across all pages to match the new filenames. The homepage must link toindex.html.
**Role:** You are an expert web developer assisting with website deployment.
**Task:** I am providing raw HTML code exported from Google Stitch. Clean, rename, and restructure these files for seamless Netlify drag-and-drop deployment. Follow these rules strictly:
1. **Create `index.html`** — Netlify requires a root index file. Name the homepage file `index.html`.
2. **Rename secondary pages** — Use logical, lowercase filenames based on each page's content or `<title>` tag (e.g., `about.html`, `contact.html`, `our-team.html`). Use hyphens for spaces.
3. **Fix all navigation links** — Rewrite every `<a href="...">` tag across all pages to match the new filenames. The homepage must link to `index.html`.Editing Paths
Two strategies for refining your site after the initial cleanup.
Conversational Editing
Make targeted changes in Google AI Studio using plain language:
- “Change the hero headline to [X]”
- “Add a testimonials section after the services block”
- “Make the navigation bar sticky on scroll”
- “Update the primary accent color to dark green”
Full Page Generation
Generate entire new pages on demand from any LLM:
- Describe the page’s purpose and required content
- Provide your existing pages as context using Repomix
- The LLM inherits your site’s style and structure
Critical Step
Your homepage must be saved as index.html. Netlify will not serve your site without a root index file at the folder level.
Phase 4: Deployment
Publishing Live with Netlify
No servers. No command line. No developer. Just drag and drop.
- Drop your folder of HTML files into the Netlify deploy dashboard
- Netlify provisions a free
.netlify.appsubdomain automatically - Your site is live and publicly accessible in under 60 seconds
Workshop objectives for this phase:
- Complete your initial drag-and-drop deployment
- Activate lead capture by adding
data-netlify="true"to your contact form - Update your site by dragging the revised folder over the existing deploy
- Rename your site’s default URL to something memorable
After the Workshop
Connect a custom domain from Google Domains, Namecheap, or GoDaddy to give your site a fully professional address.
Phase 5: Analytics
The GA4 + GTM + GSC Stack
Three free Google tools. One integrated measurement system for your web presence.
Google Analytics 4
Tracks user behavior on your site
- Who visits and from where
- Which pages they view and for how long
- What actions they take (form fills, button clicks)
Your behavioral data layer
Google Tag Manager
Manages all tracking scripts from one dashboard
- Add, edit, or remove tracking without touching code
- Trigger events based on specific user interactions
- Centralize control across all tools and pixels
Your deployment layer
Google Search Console
Monitors your site’s search performance
- Which queries surface your site in Google results
- Click-through rates by keyword and page
- Indexing status, errors, and coverage issues
Your search visibility layer
Go Deeper
A dedicated Analytics Workshop covers full implementation, custom event tracking, and using data to optimize campaigns and content strategy.
Showcase
Live Site Competition
Every attendee’s site gets displayed. The audience votes for the winner.
How it works:
- Submit: Scan the QR code or use the link below to submit your Netlify URL.
- Showcase: We will project each site on the main screen.
- Vote: The audience will vote for their favorite via StrawPoll (link provided live after websites are added).
Submission Link:
https://forms.cloud.microsoft/r/RdB5VViMye
Scan to Submit:
Next Steps: Keep Building
Three actions to take in the week after this workshop.
- Connect a custom domain — Purchase from Google Domains, Namecheap, or GoDaddy; link to Netlify in under 10 minutes
- Activate your analytics stack — Implement GA4 + GTM + GSC using the dedicated workshop resources; start collecting real performance data immediately
- Iterate based on what you learn — Use Search Console data to refine your SEO narrative and Google Analytics to identify your highest-value pages
Add your new site to:
- Your LinkedIn profile
- Your email signature
- Your business cards
Thank You! Let’s Connect.
Jarrod Griffin
M.S. Digital Marketing Candidate
College of Business Administration
Cal Poly Pomona
Jarrod Griffin is a graduating Digital Marketing Master’s candidate specializing in data analytics, marketing data analytics, and data pipeline engineering.
He bridges the gap between marketing strategy and technical data infrastructure to build impactful, data-driven solutions.
Connect:
