Build 02 · Surf travel

AST surf website
redesign

A website redesign build to test how quickly I could go from audit to pitch-ready MVP with AI as part of the workflow.

Built with AI Live MVP
AST surf website redesign

Build snapshot

Type

Website redesign

Tools

Claude Code, ChatGPT, Cursor, Next.js

Role

Audit, UX direction, content shaping, build direction

Outcome

A pitch-ready MVP with a homepage, El Salvador trip page, and inquiry page

Estimated time

~2 hours

Overview

From cluttered to pitch-ready in under 18 hours

I came across AST while researching a surf trip to El Salvador and felt the website was underselling the quality of the experience. So I treated it as a build experiment: could I take the existing content, rethink the structure, and create a much stronger front-end MVP quickly?

The challenge

The original site had strong raw material: great destinations, strong trip experiences, and useful content, but the overall experience felt cluttered, dated, and harder to trust than it should have been.

The challenge was to improve the front-end experience without overcomplicating the scope.

What I built

A redesigned homepage

A redesigned El Salvador landing page

A contact / inquiry page

Clearer calls to action and page hierarchy

A more premium, mobile-responsive direction

Process

From audit to prototype

Site audit
MVP scope in ChatGPT
Build prompts & scaffolding
Claude Code implementation
Accessibility & mobile polish
Pitch-ready prototype
How I used AI

AI as both strategist and builder

This project was much more compressed than building my own portfolio, so AI became useful as both strategist and builder. The tighter the scope, the more useful the tools became.

ChatGPT: scope and strategy

I used ChatGPT to define the scope, shape the MVP, think through what was worth keeping from the existing site, and draft the pitch framing around the redesign. Starting here kept the build focused; I wasn't just generating pages, I knew exactly what each one needed to do.

Claude Code: scaffolding and build

Claude Code scaffolded the site, generated the page structure, created reusable components, fixed implementation issues, and helped polish accessibility and responsiveness. The compressed timeline only worked because I could move fast at the implementation layer.

Cursor: review and iteration

Cursor was where I inspected the code, made manual edits, reviewed content, and understood the file structure well enough to keep iterating confidently. It bridged the gap between what AI generated and what I actually wanted.

Accessibility and mobile polish

Once the MVP was working, I used AI to help tighten contrast, improve readability, fix weak image choices, and make sure the site held up on mobile. That final polish made a big difference to how trustworthy the concept felt; it was the step that turned a draft into something pitch-ready.

Learnings

What this build taught me

A tighter scope makes AI much more useful. When the brief is narrow, the tools can move fast without going off-track,and the output holds together well enough to pitch from.

A tighter scope makes AI much more useful

The more clearly I defined what the MVP needed to be, the faster and more useful the AI output became. Ambiguity at the scope stage costs time everywhere else.

Working prototypes are more persuasive than loose ideas

A built thing is worth more than a slide deck when you're trying to show a client what's possible. AI made it viable to build fast enough to pitch.

AI helps you move faster, but it still needs a strong point of view

The speed only works if you have clear design judgment driving it. Without that, you end up with a lot of generated content that doesn't quite add up to anything.

Previous build

Building my portfolio with AI

Using Claude Code, Cursor, and a lot of iteration to design and build a portfolio that finally felt like me.

View build