AI Writes Code. Engineers Build Systems. Businesses Buy Outcomes.

| | 5 min read

AI can generate interfaces in minutes. But shipping production-ready software requires much more than generated code. It requires architecture, security, maintainability, and sound engineering judgment. We put this to the test while building the landing page for our own product.

We have been building Zygnet Plexus, an intelligent outbound sales orchestration platform designed to help B2B growth leaders and sales development teams unify multi-channel outreach, enforce strategic playbooks, and automate context-aware AI response drafting from a single workspace. As we prepared for our private beta, we needed a microsite to capture early interest. Rather than following a traditional development process, we decided to answer a question many businesses are asking today: How far can AI take you, and where does engineering expertise still make the difference?

Step 1: Giving AI Business Context

We knew we couldn't just open a prompt window and ask an AI to "build a website." We started by anchoring the AI to our core commercial strategy. We fed our complete GTM brief directly into Stitch, Google’s platform for generating website designs.

The prompt didn't just ask for layouts; it detailed the exact anxieties of our economic buyers. It explained how we protect profit margins for agency owners, solve technical objection handling for MSPs, and prevent massive CRM tier-pricing spikes for SaaS founders by acting as a top-of-funnel "dirty outbound" buffer zone. Because the AI understood  why we were building the page and  whom we were targeting, the visual assets it generated actually mapped to our business logic. 
 

AI Design with Stich

After three focused iterations of tweaking layout hierarchies and positioning typography, we had exactly the premium, dark-mode command center foundation we were looking for.

With the visual direction finalized, we turned to implementation. We asked our AI coding agent to translate the approved design into an Astro-based landing page that aligned with our engineering standards.

 

 

Step 2: Architecting the Technical Brief

Next came the technical architecture. It is easy to let an AI blindly select your tech stack, but as technology strategy partners, we maintain strict engineering control. We needed a flexible, highly lightweight system where frequent design changes weren't the primary constraint. What mattered most was a system capable of executing flawless performance, seamless lead capture, and robust tracking.

We selected  Astro because it compiles to pure, zero-JavaScript HTML, guaranteeing the sub-second load times required to capture high-intent traffic. Astro gave us a clean, scalable workflow: we update our copy directly in our self-hosted GitLab editor (or via Antigravity, our AI coding agent), and the pipeline automatically triggers a static build that goes live in the blink of an eye.

This is where the difference between generated code and engineered software became apparent. Like most first-draft AI-generated implementations, the initial output optimized for producing working code, not for long-term maintainability.

Gitlab Editor

AI agents cannot read minds and they do not inherently architect for long-term maintainability. As engineers, our immediate question was:  How do we create a similar landing page for our next product? Is there a theme concept in Astro? We simply asked the coding agent this question. It utilized its MCP (Model Context Protocol) integration to look up the official Astro documentation and guided us in decoupling the content and styles. It helped us architect a reusable Astro theme package (`@zygnet/theme`) alongside Astro Content Collections to isolate our features, pain points, and FAQs into strictly typed Markdown files. We achieved a clean separation between content and presentation. Now, when we want to spin up a new landing page, we know exactly how to do it in minutes.

Step 3: The Security Check

Just as we thought we were ready to deploy, we hit a critical structural roadblock. Our lead capture form was designed to route payloads straight to our automation engine. The AI's initial implementation exposed our backend webhook URL directly in the client-side HTML source code, this would create a serious security and compliance risk. 

True engineering value lies in proactive risk mitigation. We consulted the LLM tools on the vulnerability and deployed a serverless edge defense layer: a Cloudflare Worker paired with Cloudflare Turnstile.

Cloudflare Variables

We securely stored our private API keys inside the Cloudflare environment, hidden from the browser. Now, when a prospect submits a request to join the private beta, the browser only talks to the edge network. The Worker processes the form, Turnstile silently validates that the visitor is human without intrusive visual puzzles, and the authenticated payload is safely passed server-to-server. The public code contains zero secrets, and 100% of automated spam is dropped at the edge before it ever reaches our infrastructure. Before deployment, every AI-generated change was reviewed and validated against our performance, security, and maintainability requirements.

Step 4: Automating the Lead Pipeline

n8n workflow

With the submission path secured, the next challenge was turning verified requests into actionable sales opportunities. We routed the sanitized JSON payload into a self-hosted instance of n8n. We chose this approach because it made it incredibly simple to glue our systems together. The moment a new lead is captured, n8n triggers an automated workflow that logs the entry into a Google Sheet, sends a confirmation email to the relevant team members, and pushes a real-time notification to our internal communication tool, Mattermost. This setup doesn't just ensure data privacy; it turns a simple form submission into an actionable sales event, allowing our team to follow up in minutes.

What We Learned: Prototype Code vs. Engineered Systems

This experiment highlighted the exact dividing line between artificial acceleration and human engineering judgment:

Where AI Accelerated DeliveryWhere Engineering Judgment Added Value
Generated the initial UI layouts in minutesDefined the overarching architecture and stack constraints
Built the core Astro project directoryInstructed the AI assistant to refactor into a sustainable Markdown architecture and reusable theme
Implemented responsive Tailwind CSS componentsReviewed the code, secured the workflow and obfuscated private webhooks
Accelerated localized iteration speedValidated every technical decision against business ROI

There is a fundamental difference between first-draft prototype code and an engineered system. Prototype AI code gives you immediate visual gratification, but it is brittle, lacks context, and introduces massive security gaps. An engineered system proactively anticipates data privacy risks, seamlessly adapts as organizational scale increases, and is rooted in deep strategic business knowledge.

The Takeaway

Zygnet Plexus Home

We compressed a traditional 40-to-60-hour, multi-disciplinary agency development lifecycle into a single, highly controlled 8-hour sprint. But AI did not eliminate the engineer; it amplified the architect.

AI is an extraordinarily capable implementation partner, but it replaces repetitive typing, not techno-business strategy. The competitive advantage is no longer how quickly you can generate syntax. It is how effectively you can translate high-level business outcomes into systems that are secure, maintainable, and production-ready.

Engineering and AI

Every major improvement we made, from architecture and maintainability to security, deployment, and operational automation, came from engineering decisions built on top of AI-generated implementation. AI accelerated execution, but it was engineering judgment that made the system production-ready

AI writes code. Engineers build systems. Businesses buy outcomes.