Rebuilding a decade-old legacy system is one of the most dreaded assignments in software engineering. When a codebase consists of 7,600 lines of procedural PHP 5, inline SQL queries, MD5 password hashes, zero documentation, and twelve years of unvalidated database entries, teams routinely freeze. Conventional wisdom suggests months of discovery meetings, manual specification writing, and cautious incremental refactoring.
There is a faster, more disciplined alternative. By combining top-tier reasoning models with adversarial requirements grilling, autonomous subagent execution, and logo-derived design systems, you can deliver a clean greenfield rebuild with full data parity in hours.
Vibe coding is often caricatured as unguided prompting. In high-stakes modernization, pairing conversational velocity with strict boundary constraints, typed contracts, and automated verification turns vibe coding into a high-precision engineering engine.
This workflow was proven while rebuilding a customer and property registration platform for an established valuation practice. The original system managed records across 5,151 customer files and 7,716 property engagements. The entire modernization, spanning database sanitization, full-stack implementation, UX overhaul, and edge deployment, was planned and executed inside Cursor using autonomous agent workflows paired with Google Stitch for design system generation.
The Stack at Your Fingertips
| Layer | Selected Technology | Why Chosen | What Was Rejected |
|---|---|---|---|
| Architecture | Next.js 16 Modular Monolith | Single deployment boundary, shared TypeScript models, zero network latency between layers | True microservices (excessive operational overhead for 8k LOC) and Strangler patterns |
| Database | PostgreSQL 16 + Drizzle ORM | Strict foreign key constraints, pg_trgm indexes for instant fuzzy search, migration safety | Legacy MySQL 5 (loose typing, unvalidated schema) or NoSQL alternatives |
| Authentication | Auth.js v5 + Argon2 | Modern salted hashing, tamper-proof session cookies, zero exposure to legacy MD5 tables | Migrating insecure MD5 hashes or forcing manual password-reset friction on users |
| Component Kit | Tailwind CSS v4 + shadcn/ui | Unstyled accessible primitives, fast layout control, zero runtime CSS injection | Heavy enterprise UI frameworks (Ant Design, MUI) with bloated script payloads |
| Design System & Mockups | Google Stitch (Logo extraction) | Cohesive brand tokens generated directly from a single PNG logo with zero brand guidelines | Default grey shadcn presets or multi-week manual design mockups in Figma |
| AI Client & Execution | Cursor (Autonomous Agent Mode) | Direct workspace file manipulation, persistent terminal execution, unattended subagent sprints | Disconnected browser chat prompts requiring constant manual copy-pasting |
| Quality & Parity | Headless Browser Automation (Playwright) | Verified 100% of interactive controls, filters, pagers, and edge cases prior to deployment | Manual ad-hoc clicking or unverified code generation |
| Deployment | Podman Containers + Secure Tunnel | Isolated application on port 8173, separate database on port 5436, zero downtime on legacy port 8001 | Modifying live server environments or manual VPS package installations |
1. Open Architectural Consulting: Never Restrict the Stack Early
When a business owner engages a senior technology consultancy, they do not arrive with a rigid list of libraries. They present their business constraints to experienced architects and invite an open evaluation of technical trade-offs.
Engineers should treat frontier AI models the same way. When kicking off a greenfield rewrite, resist the urge to dictate frameworks immediately. Choose the most capable reasoning model available, allocate a generous token budget, and ask the model to evaluate potential architectural paths.
In this rebuild, the initial human instinct was to build three separate microservices: a dedicated frontend, a backend API service, and a database layer. The model immediately pushed back. For an 8,000-line application serving tens of concurrent office clerks, true microservices introduce network latency, distributed state management, and continuous operations overhead with zero practical benefit.
The model recommended a modular monolith built on Next.js 16, TypeScript, Drizzle ORM, and PostgreSQL. By treating the AI as a technical partner rather than a simple code generator, the project gained a simpler architecture that eliminated weeks of boilerplate plumbing.
2. Adversarial Grilling with Real Docs (/grill-with-docs)
The primary failure point in legacy migrations is human memory. Developers often build what they assume the legacy system does, rather than what the code executes.
To prevent hallucinations, the workflow uses an adversarial interrogation protocol called /grill-with-docs. Instead of accepting loose user prompts, the model conducts structured interview rounds against the actual codebase. It inspects configuration files, raw action scripts, database schemas, and view templates to discover architectural contradictions.
During the project rebuild, five rounds of grilling uncovered several technical discrepancies:
First, scanning template files revealed over 130 English labels (“Property”, “Customer”, “Search”) compared to a solitary Malay term. Early assumptions favored a Malay-first interface, but keeping the English copy matched historical usage and eliminated translation work.
Second, project notes requested search filters for national identity card numbers. Querying the database schema proved that customer records contained only dates, names, addresses, and phone contacts. The proposed field did not exist.
Third, code inspection revealed that legacy spreadsheet export buttons served raw HTML print templates with injected browser print scripts. The Excel export branch had been abandoned years earlier.
Fourth, the legacy creation script inserted a blank property record whenever a customer was added, forcing list queries to filter out empty names. Replicating this quirk would have corrupted data counts in the new schema.
Every settled decision was documented in formal Architectural Decision Records (ADRs 0001 through 0006) and locked into a canonical glossary (CONTEXT.md).
3. Strict Coexistence and Non-Destructive Migrations
A production rebuild must never jeopardize daily operations. The existing legacy application was actively serving clerks on port 8001. A fundamental rule of this workflow is total isolation during development.
The execution plan enforced strict boundaries:
- The new Next.js application ran on port 8173, completely decoupled from port 8001.
- PostgreSQL initialized in a dedicated container on port 5436, avoiding shared socket collisions.
- The migration pipeline strictly ingested an offline database dump, never connecting directly to the live production database host.
- Legacy password hashes were not migrated. Old passwords used un-salted MD5 hashes that violated modern security standards. The new system seeded an administrator account with Argon2 encryption, allowing clerks to receive fresh credentials upon cutover.
This setup ensured zero risk to ongoing practice operations while allowing rapid, continuous integration in the new environment.
4. Autonomous Subagent Execution: The Unattended Sprint
Once the specification and migration rules were finalized, development transitioned into autonomous subagent execution.
Instead of guiding the AI through hundreds of incremental terminal prompts, the master plan was handed to Cursor’s agentic execution runner. The agent parsed tasks, managed file edits, executed local shell checks, and verified compilation steps autonomously.
This phase typically takes between four and five hours. Because the boundary conditions and architectural constraints were locked during the grilling phase, the developer can step away entirely, review other codebases, or rest.
During this unattended run, the agent built the entire Drizzle schema with typed relationships, soft-delete archive cascades, and trigram fuzzy search indexes. It formulated an automated data migration script that parsed 5,151 customers and 7,716 properties from the MySQL dump, safely pruning 5,150 legacy blank placeholder rows. It established Auth.js session handling, role-based access gates (Admin vs. Clerk), and password hashing routines. Finally, it packaged the entire platform into reproducible Podman containers ready for production deployment.
The developer returned to a fully functional application with live data, ready for evaluation.
5. Grounded Workplace UX Review (/design-taste-frontend)
Raw AI implementations tend to converge on generic defaults: standard grey palettes, cards that provide visual elevation without function, and tables that fail basic workplace ergonomics.
The next step is applying /design-taste-frontend, an evaluation protocol that reviews UI through the lens of real office operators.
The raw component tables initially overflowed by 800 pixels horizontally on standard displays because table cells prohibited wrapping. The review enforced text wrapping on long client names, right-aligned monetary values with tabular numerical fonts, and concealed secondary geographic columns on mobile screens.
The initial property creation form loaded all 5,151 customers inside a single native HTML select dropdown, freezing the browser. The review replaced it with a debounced asynchronous typeahead picker.
The original dashboard displayed basic total counters. The review transformed the dashboard into an active work queue that prominently surfaces properties with outstanding fee balances (RM 3,553 open items sorted by balance), allowing clerks to take immediate action on delinquent accounts.
Finally, the pager was upgraded from simple Previous and Next buttons to comprehensive numbered indicators, helping clerks navigate 207 customer pages and 309 property pages.
6. Bespoke Design Systems from Just a Logo (Google Stitch)
Small and mid-sized businesses rarely possess comprehensive design libraries, Figma component kits, or modern brand books. In many cases, the only brand asset that exists is a single corporate logo file.
Rather than settling for default CSS themes, the workflow uses Stitch with Google to turn that solitary logo into a complete design language:
First, the firm’s corporate logo was uploaded to Google Stitch to analyze color harmony, typography contrast, and aesthetic tone.
Second, Stitch generated a clean aesthetic profile featuring crisp white headers, deep slate structural text, sky-blue active navigation states, and understated table containers.
Third, real application views were screenshotted and tested against the generated Stitch guidelines, validating font pairings (Plus Jakarta Sans paired with Inter) and checking component contrast ratios.
Fourth, the finalized design system tokens and screen mockups were fed back into Cursor, updating application layout shells, table headers, buttons, and alert modals in a single coordinated pass.
The result is a workplace platform that looks custom-built by an enterprise product agency, completely shedding the generic aesthetic of stock component libraries.
Engineered with Cursor and Google Stitch
The entire engineering lifecycle of this modernization project combined the coding autonomy of Cursor with the design synthesis of Google Stitch:
- Multi-round requirements interviews were conducted directly within Cursor, interrogating legacy code and locking down technical specifications.
- Autonomous agent workflows in Cursor generated full-stack TypeScript code, PostgreSQL schemas, and migration utilities without manual line-by-line prompting.
- Containerized environments were coordinated and launched via terminal tooling inside Cursor, isolating production ports from legacy application processes.
- Google Stitch extracted brand DNA from a single logo image, producing design tokens and UI mockups that turned generic components into a polished workplace directory.
- Headless browser validation scripts walked through user journeys, ensuring zero regression across customer registries, property ledgers, and account controls.
Production Metrics Summary
| Metric | Measurement |
|---|---|
| Legacy Codebase Replaced | ~7,600 lines of procedural PHP 5, Twig, and inline MySQL |
| Customers Migrated | 5,151 active customer files |
| Properties Migrated | 7,716 valuation engagements |
| Data Hygiene Cleanup | 5,150 empty placeholder rows purged automatically |
| Autonomous Sprint Time | Approximately 4.5 hours of unattended agent execution |
| Production Downtime | Exactly 0 seconds (side-by-side verification on port 8173) |
| Database Response Time | Sub-5ms query times using pg_trgm fuzzy indexes |
| Production Stack | Next.js 16, PostgreSQL 16, Drizzle ORM, Auth.js v5, Tailwind CSS v4 |
| Primary Tooling | Cursor (Agent Mode) + Google Stitch |
| Deployment Target | Containerized edge environment with automated SSL tunnel |
The Takeaway: Repeatable Greenfield Engineering
This workflow demonstrates that greenfield legacy modernization does not require multi-month engineering cycles or painful line-by-line manual porting.
By combining frontier reasoning models, adversarial codebase grilling, unattended agent execution in Cursor, and logo-derived design systems in Google Stitch, a decade-old legacy system transformed into a responsive, high-density workplace application in a single afternoon with zero operational disruption.
To install the specialized agent skills used in this workflow, run: