> ## Content Index
> Fetch the complete content index at: https://vill.ar/llms.txt
> Use this file to discover other available public pages before exploring further.

# Did I just vibe code a major redesign project?
- URL: https://vill.ar/trusting-vibe-coding-with-a-major-redesign-project/
- Published: 2026-10-24T03:27:09.000Z
- Updated: 2026-10-30T16:36:09.000Z
- Description: Vibe coding as a term undersells how much effort and structure is involved. Judgment is still the job. But the distance between having an idea and seeing it work has collapsed to a degree I wouldn't have believed if someone had described it to me a few years ago.
- Author: Mike Villar

I decided to do a major redesign of the [Growth Rocket agency website](https://growth-rocket.com/?ref=vill.ar). The old site was a WordPress theme that had grown by accretion over several years, with hand-written CSS, jQuery, and a stack of plugins doing jobs a theme can do itself. The new one is still WordPress, but the front end, the templates and the visual identity were redone from scratch.

The redesign is also about something agencies like mine rarely admit: client work takes all the bandwidth. When a campaign needs a fix, there's a person waiting and a deadline attached. When your own site has a slow page or a leftover plugin, the cost is real but spread thin, so it never makes the schedule. Agencies end up neglecting their own websites and internal applications while they're busy improving everyone else's, and ours was no exception. What allowed me to finally get to it was accepting that majority of the project needs to be vibe coded and the rebuild coursed through agents working in the background, in phases, so it didn't have to compete with client work for the same people. 

I ran those agents through [Paseo](https://paseo.sh/?ref=vill.ar), hosted on a private server of my own, so a lot of processes could keep working in the background and I could keep coordinating them, approving requests and checking progress, even from my phone.

I'm not a developer, and the all the code code was entirely vibe coded based off a plan I wrote and reviewed. So this is a description of the decisions and how they fit together, not a tutorial.

## The Stack

The site stays server-rendered PHP inside a WordPress theme. The front-end pipeline is new:

- **Vite 6** builds the CSS and JavaScript. Output goes to the theme's `assets/dist` folder with hashed filenames and a manifest, and that output is committed, so deploying doesn't need Node on the production server.
- **Tailwind CSS 4** handles styling, with the design tokens (colors, type, easing) defined once in a theme layer and reused everywhere.
- **Alpine.js 3** covers small interactions: menus, the search overlay, tabs, the lead-form modal. No jQuery on the pages we rebuilt.
- **GSAP 3** drives the larger animations, such as the hero rocket drawing itself, section reveals and the orbiting team photos.
- **Lenis** provides smooth scrolling.
- **Apache ECharts 5** renders the graphs in the case studies, replacing the older charting setup.

On the WordPress side, a few plugins were replaced by code in the theme: the custom-fields plugin, the custom post type plugin, the search plugin and the SCSS compiler. The field migration was checked value by value, and the new field engine returns the same values as the old plugin for every field. Yoast, Contact Form 7, redirects, spam protection and Google Tag Manager all stayed as they were.

The reasoning is short. We stayed on WordPress because the site has 119 indexed URLs, years of posts and redirects that carry search equity, and a different CMS would have turned a redesign into a migration. We wrote a custom theme instead of using a page builder because a theme in version control gives us readable changes and automated tests, which matters when I can't read the code myself. Vite, Tailwind and Alpine keep the pages light and the design tokens in one place, GSAP and Lenis handle the sequenced, scroll-linked motion that CSS can't, and ECharts draws the case-study graphs without jQuery. The animation libraries are also the heaviest part of the bundle, so they load only where they're used.

## The Design Language

The identity is called **Flight Manual**. The idea came from the name: a steampunk-ish rocket company's documentation in blueprints. The master look is a light page with a hairline grid, thin linework, technical illustration, numbered indexes and tight, heavy headlines. Section labels are set in small monospace capitals, the way a drawing labels its plates.

![The Growth Rocket homepage hero: a blueprint-style rocket on a launch tower with a dimensioned grid](https://vill.ar/content/images/2026/10/gr-redesign-home-hero.png)

*The homepage hero. The rocket, the dimension lines and the orange flight path are all line art that draws in on load.*

**Type.** Headlines use Sora, body text uses Geist, and labels use Geist Mono. All three are variable fonts served from the theme, so there are no third-party font requests. Headings are set heavy with tight tracking, and body text stays at a comfortable reading size and line height.

**Color.** The palette is built from the logo: deep navy (`#00233b`) for ink, orange (`#f58d49`) as the single action color, and an azure accent (`#62d7de`) used sparingly for linework on dark pages. Paper and cream neutrals sit behind them. Orange is reserved for things you can click and for emphasis, so the buttons are easy to find.

**One identity, several moods.** A single look across 100+ pages gets flat, so we picked a mood for each page family and tied them together with shared tokens. Dark sections are a token swap (a `data-theme="dark"` attribute), not a separate stylesheet, which keeps everything consistent:

- **Homepage and service pages:** Flight Manual, light blueprint.
- **Our Team:** Orbit Crew, dark space, with leadership photos orbiting a central rocket.
- **Case studies:** Flight Log, a light editorial layout with hairline stat tables and a magazine-style layout.
- **Blog:** Editorial Feature, a warm reading mode with a featured post, filter chips and a clean article column.
- **Generative Engine Optimization page:** Signal, dark, with a glass-like answer-engine illustration.

![A case study page built in the Flight Log style](https://vill.ar/content/images/2026/10/gr-redesign-case.png)

*A case study in the Flight Log style: large type, hairline rules and monospace labels.*

![The Your Team page: team photos orbiting a rocket on a dark starfield](https://vill.ar/content/images/2026/10/gr-redesign-team.png)

*Your Team, in the dark Orbit Crew mood. Every team photo from the old page is still here.*

![The Generative Engine Optimization page hero on a dark background with a blueprint plate of a star surrounded by satellites](https://vill.ar/content/images/2026/10/gr-redesign-geo.png)

*The GEO page uses the dark Signal mood, with the same blueprint "plate" language as the homepage.*

![The Growth Rocket blog home with category chips and a featured article](https://vill.ar/content/images/2026/10/gr-redesign-blog.png)

*The blog in the warm editorial mode.*

## Media

0:00 

/0:06 

1× 

The illustrations, textures and short ambient loops were generated with [fal.ai,](https://fal.ai/?ref=vill.ar) and never page mockups. They're used as decoration: the rocket plates, the industry icons, the starfield behind the team page. The rules for media were strict: WebP images at the sizes they're used, lazy loading everywhere except the first screen, and video capped at a small file size with a poster image, loaded only when near the viewport, paused off-screen, and skipped entirely for reduced-motion, Save-Data and small screens. Every generated asset and its prompt is logged in a doc in the repo.

## Mobile

![The Growth Rocket homepage on a phone-sized screen](https://vill.ar/content/images/2026/10/gr-redesign-mobile.png)

Every template was checked at phone and tablet widths for horizontal overflow. Some layouts changed on small screens: the case-study index on the homepage turns into a swipeable rail below 1000 pixels, for example, and the mega menus collapse into a mobile menu.

## The feeling of living in the future took time to set in

I want to say something about how this felt, because it's easy to describe the project as a list of decisions and leave out the part that surprised me most.

I've been around the industry long enough to remember what a redesign like this used to involve. You'd brief a design team and wait for concepts. A front-end team would turn the approved concepts into templates, a WordPress developer would wire those templates to the content, and someone would audit the SEO before launch and again after. Between each of those groups sat a handoff, and every handoff lost a little of the original intent. Add sprint planning, a project manager keeping the calendar honest, QA rounds, and the inevitable "can we revisit the hero?" in week six, and you have a project measured in quarters and in a very large number of hours. For a site with this many pages, nobody would have started it casually.

In this purely vibe coded redesign, I merely described what I wanted, looked at what came back, and said what to change. When I asked for a section where app screens assemble like an exploded engineering drawing, I could scroll through a working version shortly afterward. When we needed to know which of thousands of files in the old theme were actually used, the answer came from crawling 144 URLs and logging every file the server touched, a job that would once have been somebody's tedious week. The 119-URL SEO comparison, the field-by-field check of 3,739 stored values and the form submissions with mail logged to confirm delivery all ran while I did other things. The commit history for the rebuild covers two calendar days, and that's not counting the prototyping and planning that came first.

It would be dishonest to make it sound effortless. Nothing here runs itself. I still had to decide what the site should be, choose between prototypes, notice when something looked wrong, and catch mistakes the checks missed, like the cleanup that quietly stripped the badge styling. Judgment is still the job. But the distance between having an idea and seeing it work has collapsed to a degree I wouldn't have believed if someone had described it to me a few years ago.

People call this vibe coding, a term that undersells how much effort and structure is involved. What I can say is that you don't really appreciate how far it has come until you've done something this large with it and then looked back at what the same project would have cost before. It feels like living in the future, and that feeling only arrives once you've actually done it.

##