01 / Intent and specification
Start with a product brief, not a prompt
Choose one person, one problem and one useful outcome. Write the job your site does in a sentence. List what a visitor can accomplish on day one, what data the site must keep, and what can wait. AI can implement a clear decision; it cannot make that decision for you.
Turn the brief into a queue of small, testable tasks. Each task names the user action, expected result, data involved, edge cases, and a way to verify it. Keep a companion document for decisions and constraints so a new AI session can resume without inventing the product again.
试试看Write a one-page spec for a site that solves a real problem you know. Break its first release into five tasks, each with an acceptance check.
继续学习： Vibe Coding 101
02 / Design and build
Give the machine a design direction
Collect three references and explain what works in each. Specify typography, spacing, contrast, mobile layout and the one action each page should support. Ask for a design system before asking for ten pages. Review the first real page on a phone and a desktop.
Build one vertical slice: page, form, validation, stored record, confirmation and error state. Ask the AI to show its work and test the result yourself. A working screen is evidence; a confident summary is not.
试试看Build the smallest complete user journey in Replit or your preferred editor. Record what you tested and one defect you fixed.
继续学习： Vibe Coding 101 design lessons
03 / Open-source starting point
Start with Freeholder, then build your own site
Freeholder is Tony Aly's powerful open-source starting point for a vibe-coded site. You begin with a working website and CMS, a shared customer record, and connected business workflows instead of asking an AI to invent everything from a blank prompt. Import the source into Replit or another development environment, then use your own spec to adapt the pages, data and workflows to the site you want to create.
Freeholder will keep evolving, as useful software does. You can start with it now: explore the live demo, clone the source, and follow the Replit recipe. The create-freeholder npm package has not been published, so source import is the current path. Use fictional data in the shared demo; for your own deployment, follow the recipe's setup and verification steps. Freeholder's Apache-2.0 license permits adaptation with its notices kept intact.
试试看Explore Freeholder's demo or import its source. Choose one site idea and write a five-task spec that adapts its existing foundation while keeping the shared customer record coherent.
继续学习： Freeholder source and status · Freeholder Replit recipe · Freeholder demo
04 / Technical SEO foundations
Give crawlers useful HTML from the first response
A site people cannot discover is unfinished. Check the HTML returned before JavaScript runs: it should contain the page's actual heading, useful content and links. Give each important page a descriptive title, one clear purpose and a stable URL. Mobile navigation must expose the same important routes.
Ask the AI to show both the rendered page and the raw response. Review the mobile layout and compare visible text with crawler-visible text. Keep private, search and filter states out of the index while preserving crawlable links to the public pages you want found.
试试看Fetch your page's HTML without running JavaScript. Verify title, H1, primary copy and internal links. Fix what is missing.
继续学习： BigDataSEO technical SEO standards · Vibe Coding 101 SEO foundation
04 / Technical SEO foundations
Design URLs, canonicals and redirects
Decide the canonical URL for each distinct piece of content. Keep trailing slash and parameter rules consistent. A canonical is a hint about duplicates, not a repair for an incoherent site. Redirect retired URLs in one hop and return honest 404 or 410 responses for missing content.
Use breadcrumbs and descriptive internal anchors to connect related pages. Test the complete path from your homepage to the pages that matter, not just whether a sitemap contains them.
试试看List ten public URLs, their canonicals, index status and shortest click path from home. Test three redirects for chains or loops.
继续学习： BigDataSEO standards reference · Canonical audit and redirect tools
05 / Crawl architecture at scale
Build a discoverable path through large datasets
BigDataSEO's Root-Indexed Browse Architecture, or RIBA, treats a large catalog as a balanced browse tree. It is useful when flat pagination, arbitrary categories or faceted combinations bury important pages. Start by counting indexable records and choosing a bounded number of links per browse page; then calculate the levels needed to reach each record.
For a small site, keep the structure simple. For a large one, measure depth, duplicate URLs and bot visits before and after changes. A sitemap helps discovery but cannot replace internal links. Keep filters from creating limitless indexable combinations.
试试看Use the Root Page Calculator on a sample dataset. Draw the path from home to one leaf, then compare it with flat pagination. Explain which pages should be canonical and which filters should stay out of the index.
继续学习： BigDataSEO RIBA whitepaper · BigDataSEO tools
05 / Crawl architecture at scale
Ship sitemaps, schema and measurement
Generate XML sitemaps from canonical, indexable URLs and split large sets into valid files. Use structured data only when it describes the visible page. Set robots rules for crawl control, but remember that a blocked page cannot be read for its canonical or noindex directive.
Use search performance, index coverage and server logs to distinguish discovery, crawling, indexing and ranking. Measure each separately. BigDataSEO's tools cover sitemap splitting, metadata uniqueness, template duplication, logs and crawl budget; use the ones that answer an actual diagnosis.
试试看Build a sitemap from your live routes, inspect five entries, validate one page's structured data, and write a short diagnosis from a crawl or Search Console export.
继续学习： BigDataSEO standards · BigDataSEO tools
06 / Launch and improve
Prove the site works before you promote it
Test the full user journey with a fresh account and a narrow screen. Check forms, privacy controls, payment boundaries if relevant, broken links, accessibility, errors and loading states. Keep a rollback path. Ask another person to try the site without your guidance.
After launch, watch real actions and technical signals together: visits, signups or leads, important events, search visibility and crawl health. Change one meaningful thing at a time and record what happened. The class is free; any third-party hosting or AI service you choose may charge separately.
试试看Publish a small site, run a 12-point launch check, and write a one-week measurement plan with a clear success action.
继续学习： Vibe Coding 101 · BigDataSEO
