Vibe Coding vs Agentic Coding: How We Automated a Web Design and SEO System Using AI

What This Case Study Covers

We built a full-scale local business website for Cofton DJS (Cofton Drainage & Jetting Services) with 113 pages, 79 location landing pages, 17 blog posts, 6 service pages, and structured data across every page type. The stack was built using Astro web development (Astro 5, Tailwind CSS 3, React for maps only), Netlify for hosting, and Google Antigravity as the AI coding agent. Most pages are only one to two months old at the time of writing, and the site is already ranking on page one for high-value Birmingham keywords. The project became a genuine test of vibe coding vs agentic coding, and the gap between the two approaches revealed a lot about where quality actually comes from when you combine web design and SEO with AI-assisted development.

The first approach, vibe coding, produced a prototype in hours. The second, agentic coding, turned that prototype into a professional system over the months that followed. Both used AI, but the processes around the AI were completely different, and so were the results.

Defining the Two Approaches

What Is Vibe Coding?

The term “vibe coding” describes the practice of prompting an AI tool with a general description of what you want and accepting whatever it produces. You describe the vibe (“build me a drainage company website with these services and a blog”), the AI generates a project, and you deploy it.

Vibe coding tools like Bolt.new, Lovable, and v0 turn a written description into a working codebase. The appeal is straightforward: you skip wireframing, design mockups, and manual development, and get a functional website in minutes rather than weeks. For prototyping, that speed is genuinely useful.

The structural problem is that the person prompting does not need to understand software engineering, SEO, performance, accessibility, or content strategy to get output. The AI produces something regardless of whether the prompt was good, and there is no feedback loop, quality gate, or domain expertise shaping the result. The output looks finished but typically is not.

Common vibe coding outcomes we found on this project:

• Fabricated pricing the client never approved, because the AI filled in placeholders
• Hero images rendering as tiny thumbnails instead of full-width backgrounds
• Forms that looked correct but failed silently because Netlify’s build scanner could not detect them
• Keyword-stuffed content that would actively harm search rankings
• An exit popup that fired immediately on page load instead of after a 30-second delay
• Mobile layouts that broke on real devices despite looking fine in a preview

None of these problems were visible in the prompt-and-preview workflow. They only appeared when a professional tested the output against real-world requirements.

What Is Agentic Coding?

Agentic coding is a structured approach where the AI operates as an autonomous agent within a defined system of rules, workflows, and expert oversight. Instead of a single prompt producing a single output, the AI receives ongoing direction from a human expert who defines what to build, how to build it, what standards to meet, and what constitutes acceptable quality.

The approach goes beyond having a human “check” the AI’s work. It involves building a system where:

1. The expert defines the standards before the AI generates anything. Writing guidelines, content rules, keyword strategies, anti-AI compliance checklists, and technical specifications all exist before a single line of code is written.

2. The AI reads and follows documented rules. Bootstrap files, project rules, and content guidelines are loaded into the agent’s context at the start of every session. The AI does not guess what tone of voice to use or what keywords to target; it reads the specification.

3. The expert reviews output against measurable criteria. Keyword density requirements, Lighthouse scores, content word counts, banned phrase lists, and schema markup validation are all concrete, testable standards.

4. Failed output creates new rules. When the AI produces spam content, the expert writes a content rules document. When the AI injects HTML into data files and breaks the build, the expert adds that failure to the bootstrap rules. The system gets better over time because failures are codified into constraints.

5. The workflow is iterative and phased. Work happens in documented stages: research, planning, implementation, audit, remediation. Each phase produces documentation that informs the next.

This is the model we used for the Cofton DJS project after the initial Bolt.new prototype. Opace brought 20+ years of experience delivering web design and SEO services to the project. The AI (Google Antigravity) brought speed, scale, and the ability to execute repetitive tasks at volume. The result was a genuinely automated web design and SEO workflow where the expert sets direction and the AI handles production, with each iteration tightening quality controls. It is a practical example of AI business integration and how embedding AI into an existing process can increase efficiency without replacing the expertise that drives quality.

How This Project Actually Started

Cofton DJS is a Birmingham-based drainage company run by Craig Argyle. They offer drain unblocking, CCTV drain surveys, high-pressure jetting, drain repairs, blocked toilet services, and emergency drainage across the West Midlands, Worcestershire, and Warwickshire. Their Checkatrade rating sits at 9.8 out of 10, built over more than a decade of hands-on work.

The client needed a website that would generate phone calls and form enquiries from local search, ranking for queries like “blocked drain Birmingham”, “drainage Solihull”, and “drain unblocking Coventry” across the entire service area.

Dave made the decision to use AI tooling to accelerate the build. Rather than the traditional agency process of briefs, wireframes, design mockups, front-end development, content writing, and QA spread across weeks, he chose to test whether AI could compress that timeline while still producing output that worked commercially.

The Vibe Coding Phase

What We Prompted

Dave used Bolt.new to generate the initial prototype. He provided the client’s service list, branding direction, target audience, and general site structure. Bolt.new produced a complete Astro 5 project with Tailwind CSS: homepage, 6 service pages, blog pages with the client’s original posts, about page, contact page, navigation, and Netlify deployment configuration.

The .bolt/config.json file in the project root confirms the origin: {"template": "astro"}. The first commits were pushed to GitHub shortly after.

What Vibe Coding Got Right

• A clean, well-structured Astro project scaffold
• Reasonable component architecture: separate Header, Footer, CTA, and form components
• A basic responsive layout that rendered on desktop
• Working Netlify deployment pipeline from git push to live site

What Vibe Coding Got Wrong

The gap between “looks finished” and “is finished” became clear once the output was tested properly.

Visual problems:

• Hero images rendered as small thumbnails. The CSS referenced image files correctly but sized them as inline thumbnails instead of full-width hero backgrounds. On a drainage company site, where hero images of vans, engineers, and pipe work build trust, this made the site look cheap.
• The sticky trust bar (Checkatrade badge, 5-star rating, fixed pricing guarantee) was duplicated on multiple pages.
• Mobile navigation did not include the services submenu, so visitors on phones could not find individual service pages.

Functional problems:

• Contact forms looked correct in the browser but failed silently. Netlify Forms requires static HTML markup at build time to detect and register forms. Astro’s SSR mode generates pages dynamically, so Netlify never saw the forms during its build scan, and no enquiries were being delivered.
• The exit popup triggered on DOMContentLoaded rather than after a delay, hitting visitors within milliseconds of arrival.
• 301 redirects from the old domain created redirect loops that broke certain page loads.

Content problems:

• The AI fabricated pricing for services without any confirmation from the client. Numbers appeared on the live site that Craig Argyle had never agreed to.
• Placeholder content was mixed with the client’s genuine copy, making it unclear which text was real and which was generated.

SEO problems:

• No schema markup beyond basic HTML.
• No breadcrumbs.
• No sitemap strategy.
• Meta titles and descriptions were generic or missing.

None of these issues were visible in Bolt.new’s preview. They required a professional to test the live deployment, inspect the markup, submit test forms, and evaluate the content against what the client actually offers. The prototype gave us a starting point, but turning it into a functioning web design and SEO system required a completely different way of working with AI.

Cofton DJS homepage after the agentic coding phase

The Transition to Agentic Coding

Setting Up the System

Google Antigravity entered the workflow at this point, and the approach shifted from generating a complete output in one pass to working through individual problems in sequence with human direction at each step.

Rather than handing the broken prototype to the AI with a general instruction to fix it, Dave identified each problem, prioritised them by business impact, and directed the AI through each fix individually. When fixes failed, he tested the result, reported what happened, and directed the next attempt.

The Netlify Forms problem is a good example of how this worked in practice. Getting forms to work required 11 separate commits in a single day:

1. Attempted JavaScript form interception (failed: CORS issues)
2. Removed a non-existent Netlify plugin that the AI had referenced
3. Switched to native HTML form submission (failed: Netlify did not detect the form)
4. Added a static forms.html file for Netlify’s build-time detection
5. Removed hardcoded subject lines that broke form routing
6. Fixed SSR-specific form submission handling
7. Removed JavaScript interception that was competing with native submission
8. Configured POST to hit the static thank-you page for SSR capture
9. Added thank-you page UX with auto-redirect back to the site
10. Added email event function with SMTP support (failed: DNS issues on the client’s Squarespace domain)
11. Replaced SMTP with Resend as the email delivery provider

The AI was able to try, fail, and try again at machine speed, which is a genuine advantage. A human developer might have spent a full day researching the Netlify + Astro SSR compatibility problem before writing their first line of code, whereas the AI produced 11 working implementations in the same time.

The direction was still human throughout. Dave identified the root cause (SSR pages are not present during Netlify’s static build scan), decided which alternative approaches to try, and made the call to use Resend for email delivery when SMTP proved unreliable. The AI never diagnosed the underlying architectural problem on its own; it kept trying variations until one worked, but the decision about which variations to try came from Dave.

Working contact form after 11 iterations

Building the Agentic System

Why Rules Matter More Than Prompts

With a stable, functional website in place, the vibe coding output had been fixed into something presentable, and the next phase was turning that basic site into a local SEO system that would generate business across three counties.

Rather than prompting the AI with general instructions like “add some location pages”, Dave defined a structured framework for the AI to work within:

1. Strategic framework (human-defined):

• Individual landing pages for every city and suburb the client actually serves
• Target keywords at scale: “blocked drain [location]”, “drainage [location]”, “drain unblocking [location]”
• Hierarchical URL structure under /services/drain-unblocking/[location]/
• Google Maps integration with service area markers
• Multi-location LocalBusiness schema for each area

2. Data architecture (AI-built to spec): The AI created a dynamic routing system using Astro’s [location].astro template. Instead of manually creating 79 individual page files, every location page renders from a central src/data/locations.js data file. Each location object holds:

• Slug, name, county, postcodes
• Soil type, property era, and drainage materials typical to the area
• Common drainage issues specific to the local housing stock
• Response time from the Birmingham base
• SEO title, meta description, and H1 (each written to target specific keywords)
• Local expertise paragraphs (100% unique per location)
• Local FAQs (specific to each area’s drainage challenges)
• Coordinates for the Google Maps component

Adding a new location means adding a data entry, not building a page. That architecture decision, proposed by the AI and approved by Dave, enabled scaling from 36 to 79 location pages without the codebase growing linearly.

3. The initial major build saw the AI execute the following:

• Enhanced all 6 service hub pages with enriched content
• Created 36 initial location pages from the data file
• Added Google Maps with service area pin markers across all pages
• Implemented breadcrumbs, schema markup, and dynamic sitemaps
• Fixed the canonical domain, removed duplicate trust bars, and stripped fabricated pricing

That volume of work, 36 new pages in two days, is only possible with automated web design tooling, but the architecture, keyword targeting, URL structure, and the decision to remove fabricated content were all human decisions.

Unique local content per location page

Software Engineering Practices in the Agentic Workflow

The codebase evolved using genuine software engineering discipline rather than ad hoc AI-generated code.

Component-based architecture: The site uses a proper component hierarchy. SiteLayout.astro handles the global head, structured data, header, and footer. SEO.astro generates meta tags and Open Graph data from page-level props. FAQItem.astro renders individual FAQ entries with built-in schema markup. RegionMap.tsx is the only React component, isolated specifically for the interactive Google Maps integration.

Dave directed this architecture. The AI proposed including React for several components, but Dave limited it to the map. Every other component is pure Astro, rendering to static HTML with zero JavaScript overhead, which directly affects Core Web Vitals by reducing client-side scripts and improving Time to Interactive.

Data normalisation: The locations.js data file follows a normalised schema. Counties, cities, and suburbs are stored in separate arrays with referential keys. Helper functions abstract data access. This structure means the AI can modify location content without touching template code, and template changes do not require editing 79 data entries.

Version control discipline: Every change goes through git. The commit history serves as the audit trail. Commits are descriptive rather than vague. When changes broke things, the team reverted cleanly and documented why.

Separation of concerns: Content lives in data files. Templates live in .astro page files. Styles use Tailwind utility classes defined in a custom configuration. SEO logic lives in a dedicated utility file that generates structured data for every page type. This separation meant the AI could work on content, templates, and SEO logic independently without one change breaking another.

Vibe Coding vs Agentic Coding: How Failures Became Rules

The most important difference between vibe coding and agentic coding on this project was not the level of supervision. It was that agentic coding turns failures into permanent constraints that prevent the same problems from recurring.

The Content Spam Incident

The site had grown to 47 location pages but an audit revealed that only 5 had genuinely unique content. The remaining 26 city pages and most suburb pages used the shared template with fewer than 200 words of unique text. A site:cofton-djs.com search on Google returned only 8 results out of approximately 60 published pages.

Dave directed the AI to enrich all 31 city pages with unique local content. He wrote detailed content briefs for every location, specifying which housing estates to reference, what soil types engineers encounter, which pipe materials were common in each era of construction, and what specific drainage problems arise in each area. These were not generic instructions; they reflected real knowledge of the client’s work across the West Midlands.

The AI generated the content, but the output had significant quality problems. It included keyword-stuffed headings, unnatural phrase patterns (“Drainage Shirley Experts”, “Drain unblocking Coventry residents contact us”), and over-optimised body text that read like SEO spam rather than expert advice. The content was technically complete, hitting word count targets and keyword density requirements, but publishing it would have harmed the site’s rankings.

In a vibe coding workflow, this content would have shipped because there is no review step and no expert evaluating whether “Trusted Drainage Shirley Experts” is something a real tradesperson would write. In the agentic workflow, the failure triggered a process that prevented the problem from recurring:

1. Dave directed 13 separate cleanup commits, each targeting a specific category of spam pattern
2. After the cleanup, Dave wrote a comprehensive content rules document defining 4 specific banned phrase patterns with before/after examples, maximum keyword density per paragraph, a “smell test” requirement, and a self-verification checklist
3. This document was added to the agent’s bootstrap rules, meaning the AI reads it automatically before starting any content work
4. Dave also created a writing guidelines document listing every banned AI phrase, required tone of voice, keyword placement rules, and a 10-point quality checklist

Because these rules are loaded into the agent’s context at the start of every session, the AI is permanently constrained from repeating those patterns. By the time we reached the blog cluster phase, the AI was producing content that passed all compliance checks on the first attempt.

What the Training Loop Looks Like in Practice

1. Expert defines task and standards
2. AI executes task
3. Expert reviews output against standards
4. If output fails:
   a. Expert identifies the failure pattern
   b. Expert writes a rule that prevents that pattern
   c. Rule is added to the agent's bootstrap/context
   d. AI re-executes with the new constraint
5. If output passes:
   a. Work ships
   b. Audit scripts verify compliance at scale

This loop ran dozens of times across the project. Each iteration added a new constraint, and the cumulative effect was that the system’s output quality improved steadily over the eight-month period.

Automated SEO: Expert-Driven Strategy, AI-Driven Execution

The Indexation Problem

Dave ran a site:cofton-djs.com search on Google and found that only 8 of approximately 60 published pages were appearing. The indexed pages were an odd selection: the homepage, about page, testimonials, services hub, and three random small-town location pages.

Dave directed a full technical SEO audit. Every technical factor checked clean (robots.txt, meta robots, canonicals, HTTP headers, and structured data all passed), and the real causes turned out to be:

1. Google Search Console had not been properly configured until that day. The sitemap had never been formally submitted.
2. Content similarity. 36 location pages used the same template with only 150-200 unique words each, and Google treated them as near-duplicates.
3. Page explosion. Adding 36 pages in a single deploy (a 60% increase in total page count) likely triggered quality filters on a low-authority domain.
4. Domain migration. The old domain may have suppressed indexation signals.

The AI ran the audit scripts, but Dave interpreted the results and connected them to known Google indexation behaviours. This is a clear example of where automated SEO tooling can surface the data but still requires an expert to interpret it. The strategic response, enriching every location page with 300-400 words of genuinely unique, locally-specific content, was Dave’s call based on his understanding of how Google’s helpful content systems evaluate page quality.

Early Results

The site is still in its early stages. Most location pages are only one to two months old at the time of writing. Indexation is an ongoing process, and it takes time for a new domain with 113 pages to build authority.

The more telling indicator at this stage is ranking performance rather than raw indexation counts. Within weeks of the content enrichment and blog deployment, keyword tracking showed the site appearing on page one of Google for multiple high-value terms:

Page one rankings for competitive drainage keywords

Local drainage keyword rankings including Stratford, Warwick, Henley, Leamington Spa, and Dudley

Several patterns are visible in this data. The homepage is ranking for competitive Birmingham-wide terms, which indicates Google is recognising the site’s topical authority for drainage services. Location pages for Stratford-upon-Avon, Leamington Spa, Warwick, and Pershore are ranking for their target keywords, confirming that the unique local content strategy is working. Blog posts are already ranking for informational queries within days of publication.

Blog rankings within days of publication

Content Production at Scale

How Detailed Briefs Changed Everything

The spam content incident made it clear that “write unique content for each location” is not a brief. The quality of AI-generated content was directly proportional to the specificity of the input.

For every location page, Dave wrote paragraph-by-paragraph outlines specifying:

• Which housing estates and local areas to reference by name
• The dominant soil type and how it affects drainage (Mercia Mudstone clay in Birmingham, sandy gravel in parts of Worcestershire)
• Which pipe materials are common in each area (Victorian salt-glazed clay, 1960s pitch fibre, modern PVC)
• Specific drainage challenges local engineers encounter (root ingress from mature gardens, subsidence from former mining areas, shared sewers in terraced streets)
• Local landmarks or infrastructure relevant to drainage (Severn Trent water authority boundaries, flood-prone areas, conservation zone restrictions)

This was a 930-line specification document and one of the most significant human contributions to the entire project. It transformed the AI from a generic content generator into a focused writer working from expert knowledge. Pages written from detailed briefs passed anti-AI content audits on the first attempt, while pages written from generic instructions needed 2-3 remediation passes.

Blog Content Clusters

The first batch of 4 blog posts totalled 5,765 words with 12 AI-generated images:

Post	Words	Primary Keyword	Monthly Searches
How Much Does Drain Unblocking Cost in 2026?	1,311	drain unblocking cost	320
What Happens During a CCTV Drain Survey?	1,471	cctv drain survey	5,400
Fat, Oil and Grease: Why Your Kitchen Is Killing Your Drains	1,331	fat oil grease drains	590
Tree Root Damage to Drains	1,506	tree root damage drains	480

Combined primary search volume: 5,900 per month. With secondary keywords: 7,770+ monthly searches targeted by four posts.

Dave selected every topic, defined the content angle, and set strict constraints for the AI-generated images: no people (no faces, hands, or bodies), no branding (no logos or text on equipment), high realism, and UK-standard drainage systems only. All 60 images for the full 20-post cluster were generated and verified before a single post was written.

Each post was built with full Article and FAQ schema markup, Open Graph and Twitter Card tags, 3-5 internal links to service and location pages, and staggered publication timestamps.

Performance Engineering

Between the content phases, Dave directed a dedicated performance sprint, starting with a detailed audit document that catalogued every performance issue and mapped it to specific fixes.

Image optimisation delivered 6.8 MB of savings. The hero image alone dropped from 599 KB to 67 KB. Every image received explicit width and height attributes to prevent Cumulative Layout Shift. The AI compressed, resized, and converted images across the entire site in a single pass.

Render-blocking resources were eliminated. All CSS was inlined to remove render-blocking stylesheet requests. Google Fonts loading was made asynchronous. The logo was resized to exactly 2x retina dimensions to avoid the browser downloading an oversized file and rescaling it.

Irrelevant stock photos were replaced. The original Bolt.new output included generic Unsplash images that had nothing to do with drainage work. Dave directed the AI to generate contextually correct replacement images.

These changes took the site from a Lighthouse score in the mid-40s to the mid-90s, which directly affects search visibility and user experience. Performance engineering is often overlooked in automated web design workflows, but it is one of the areas where expert direction makes the biggest difference to real-world results.

The Automated Quality System

Why Manual Review Does Not Scale

With 79 location pages, 17 blog posts, and 6 service pages, manually checking keyword density, meta tag lengths, banned AI phrases, internal link counts, and schema validity across every page is not practical. We needed automated systems.

Dave directed the creation of automated audit infrastructure:

generate-audit.cjs (~250 lines, ~13.5 KB): A Node.js script that crawls every location page and checks keyword density, content length, heading structure, em dash compliance, banned AI phrase detection, internal link presence, and schema markup validation.

HTML audit reports: Colour-coded tables showing PASS/FAIL for every metric across all pages. Red cells flag failures, green confirms compliance. Dave could scan 79 location pages in seconds instead of reading each one.

Anti-AI content scanning: Automated grep-based checks for every phrase on the banned list, run before any content is committed to the repository.

The audit system caught problems that human review missed. On one pass, it flagged 11 pages where the target keyword appeared only once in the body text. On another, it caught en dashes that had been introduced during a bulk find-and-replace. At the scale of 79 location pages, automated SEO auditing is essential for maintaining consistent quality.

What Actually Got Built

The Numbers

Metric	Value
Total live pages	113
Location landing pages	79 (31 cities, 45 suburbs, 3 county hubs)
Service pages	6, each exceeding competitor word counts
Blog posts live	17 (9 original expanded, 8 new)
Blog posts planned	12 more across Batches 3-5
Schema types implemented	LocalBusiness, Organization, WebSite, Service, FAQ, Article, BreadcrumbList, Review
Counties covered	3 (West Midlands, Worcestershire, Warwickshire)
Git commits	126+
Location data file	5,241 lines, 560 KB
Total content words	~106,500
Blog images pre-generated	60 for the full 20-post cluster
Blog search volume targeted	9,500+ monthly searches across 17 live posts

The Tech Stack

Layer	Technology	Why
Framework	Astro 5	Static-first with SSR for forms. Fast page loads, excellent SEO.
Styling	Tailwind CSS 3	Rapid utility-first development.
Interactive components	React 19	Used only for the Google Maps component.
Hosting	Netlify	Git-triggered deploys, serverless functions, edge caching.
Email	Resend	Reliable transactional email. Replaced SMTP after DNS issues.
Maps	Google Maps JS API	Service area visualisation with marker clustering.
Sitemap	@astrojs/sitemap	Automated XML sitemap generation.

Why This Stack Supports Automated Web Design and SEO

The technology choices were not arbitrary. Astro’s static-first architecture means every page ships as pre-rendered HTML, which is ideal for automated SEO because search engines can crawl and index content without executing JavaScript. The dynamic routing system lets the AI generate dozens of location pages from a single data file, turning what would be weeks of manual web design and SEO work into a structured, repeatable programmatic SEO process. Combined with Netlify’s git-triggered deploys, every commit the AI makes goes live within minutes, giving Dave immediate feedback on whether each change improved or harmed the site.

The Expert’s Role vs The AI’s Role

The project worked because both human and AI were focused on the things they were best suited for.

What the Human Expert Did

Strategic direction: Dave defined every strategic decision, including the local SEO approach, target locations, keyword strategy, URL architecture, the content plan, blog topic selection, and the phased execution roadmap.

Content architecture: Dave wrote the detailed content briefs for every location page, specifying soil types, pipe materials, housing eras, local area names, and specific drainage challenges for each city. This is domain knowledge that comes from understanding the client’s business, the local geography, and years of SEO experience.

Quality control: Dave reviewed every deployment. He caught fabricated pricing, identified spam content across 31 pages, spotted the HTML rendering failure from data file link injection, and tested form submissions on live devices. The AI did not self-detect a quality problem during this project.

Content governance: Dave created writing guidelines (200 lines of banned phrases, tone rules, and compliance checks), content rules for location pages (banned SEO patterns with before/after examples), and the bootstrap rules that ensure the AI reads these files before starting work.

What the AI Did

Code generation: Built every Astro component, page, layout, and configuration file. The Header, Footer, StickyTrustBar, MobileStickyCTA, Breadcrumbs, SEO, RegionMap, LatestBlogPosts, RelatedServices, CTABlock, and FAQItem components were all AI-generated to Dave’s specifications.

Content production: Generated 79 unique location page texts from Dave’s detailed briefs, 17 blog posts, expanded service page content, and all SEO metadata (titles, descriptions, schema markup).

Technical implementation: Implemented structured data across every page type, performance optimisations (image compression, CSS inlining, async font loading), the dynamic location routing system, Google Maps integration with marker clustering, and the Netlify serverless function for form handling.

Audit tooling: Built the automated audit scripts, content compliance scanners, and HTML report generators that enabled quality control at a scale manual review could not match.

Image generation: Created 60+ contextually relevant images for blog posts and service pages, following strict constraints (no people, no branding, UK-standard systems, high realism).

The Collaboration Dynamic

Without Dave’s direction, the AI would have produced a functional but mediocre website with keyword-stuffed content, broken forms, fabricated pricing, and no strategic SEO architecture, which is essentially what the vibe coding phase produced.

Without the AI, Dave would have needed months of manual development and copywriting to achieve the same scope. Building 79 location pages with unique content, 17 blog posts with custom images, comprehensive schema markup, and automated audit systems by hand would have been a team project spanning quarters.

Working together, the governance framework, the training loop of failures becoming rules, and the automated quality checks meant that the AI’s output quality improved steadily over the project. That compounding improvement over time is what separates vibe coding vs agentic coding in practice: one gives you a snapshot, the other gives you a system that gets better with every iteration.

Professional presentation through agentic AI development

Practical Lessons for Agencies

1. Vibe coding is useful for prototypes but not for production

Bolt.new produced a working scaffold in hours, which is valuable for pitching concepts, testing layouts, or getting a client’s initial reaction. Shipping vibe-coded output to production without expert review is a professional risk though; the fabricated pricing alone could have created a legal problem for the client.

2. The brief is the most valuable deliverable

Generic prompts produce generic output, and the quality of AI-generated content scales directly with the quality of the input. Dave’s 930-line location content specification took hours to write and saved weeks of remediation.

3. Write the rules before the content

Creating the writing guidelines before generating content would have prevented the spam incident. The content rules document should exist before the first paragraph is written, not after the first cleanup.

4. Automate your quality gates

At 113 pages, manual review catches some problems but not all. The automated audit scripts caught issues like single-count keyword density failures, en dashes introduced by find-and-replace, and missing internal links on specific suburb pages that no human reviewer would have spotted across that volume.

5. Failures create permanent improvements

Every AI failure on this project produced a documented constraint that prevented the same problem from recurring. The spam content created the content rules document, the broken HTML links created the data file constraints, and the form submission failures led to the Resend integration. Over time, these accumulated constraints made the system increasingly reliable.

6. The expert’s role changes rather than disappearing

Dave did not write less during this project; he wrote differently. Instead of website copy, he wrote content briefs, audit specifications, governance rules, and strategic documents. His expertise shaped every page the AI produced, even though the AI did the production work. The skill set shifts from execution to direction and from writing code to writing the rules that code must follow.

What Comes Next

The project continues with a structured roadmap:

Blog Cluster Completion (Batches 3-5): 12 remaining posts targeting additional monthly searches. All 60 images are already generated and uploaded.

Suburb Expansion: 72 additional suburb pages are specified in a 3,734-line requirements document, organised into 14 groups covering South Birmingham, Inner/West Birmingham, North/East Birmingham, Coventry suburbs, Black Country, Sandwell, Stourbridge/Halesowen, and Worcestershire. Each suburb has a pre-written content brief.

Off-Page SEO: Local citation building, Google Business Profile alignment, and review generation strategy.

Technical SEO: Core Web Vitals monitoring, schema expansion, and continuous indexation tracking.

Every phase follows the same agentic model: expert-defined strategy, AI execution, automated auditing, human review, and documented constraints from any failures. The system we have built is not a one-off project; it is an automated web design and SEO framework that scales with each new page, each new rule, and each new failure that gets codified into a permanent constraint.

Conclusion

Vibe coding answers the question “Can AI build this?” and the answer is almost always yes.

Agentic coding answers a different question: “Can AI build this to the standard my client needs, following the rules I have defined, using the strategy I have designed, and producing output I can verify?” The answer to that depends on the professional directing the process.

The practical takeaway from this project is that AI amplifies existing expertise rather than replacing it. The brief, the rules, the quality gates, and the strategic decisions are where the value sits. The code generation and content production are execution. Agencies weighing up vibe coding vs agentic coding for AI-assisted web design should focus on building the governance framework around the AI rather than on choosing the right AI tool, because the system around the tool matters considerably more than the tool itself.

For a professional but forward-thinking approach to AI SEO and web design, get in touch with Opace to discuss how we can help you meet your goals, or connect with us on social media.