Designer built production yacht configurator in 10 days using AI

Project URL: https://simpatico-clients.com/boat-show/quote-calculator-v8.html

The opportunity

Valiatt Yachts, a luxury yacht manufacturer, needed a branded interactive quote calculator for the Miami International Boat Show. Their COO wanted customers to pick a model, customize it (colors, engines, upgrades), receive an instant quote by email, and have that lead automatically added to their CRM. This was a real client project with a signed contract: $4,500 build + $75/month managed services.

What I built

I built a production-ready, interactive yacht configurator and quote system using Claude Code, n8n, Higgsfield, Airtable, Adobe Photoshop, and Adobe Illustrator. Important detail: I am a designer, not a developer.

The frontend (single-file web app)

The frontend is a single-file web application with 5 yacht models ($445K–$715K) and a clean model selection grid. Customers can customize their build in real time, including exterior colors (hull, hardtop, bootstrip) across 8 RAL colors using live overlays, plus interior finishes with 14 decking textures and 18 vinyl options shown as image swatches. Each model also includes 5 engine/propulsion options, with model-specific “standard” engines, and 19 premium upgrades with model-specific pricing. Pricing updates instantly as users click, the layout is fully responsive for desktop/tablet/mobile, and the sticky hero yacht image updates immediately as color selections change.

The automation backend (n8n)

On the backend, an n8n webhook receives each form submission and runs the full automation flow: it creates the lead in Zoho CRM, logs quote details to Airtable (model, colors, upgrades, total price, contact info), sends a branded HTML quote email to the customer, and returns a clean 200 OK right away (no “did it go through?” drama).

CRM + database layer

Airtable tracks every quote request through a simple pipeline (New → Contacted → Quoted → Sold), while the Zoho CRM integration supports the client’s existing sales workflow.

The hard part (and the fun part): real-time yacht color preview

The most ambitious piece was letting customers preview color choices on the actual yacht photos without generating a million image variations. To make that possible, I first used Perplexity to research the best path for consistency and file storage, then summarized the plan for Claude Code to implement. I traced the hull/hardtop/bootstrip shapes in Adobe Illustrator over yacht photos created in Higgsfield, then used inline SVG overlays with mix-blend-mode: multiply to colorize the yacht in real time. I also built a two-phase image approach: the original photo loads first, then after the first color click the system switches to a “white base + SVG overlay” setup for cleaner, consistent coloring. I added a special case for Signal White (because multiply makes white basically invisible), and I made sure color selections stay consistent when switching models for a smoother user experience. The result is that instead of needing 32+ pre-rendered images per model, the system uses one SVG per model that can display any color instantly.

Iteration timeline (V1 → V5)

This project evolved fast based on real client feedback:

- V1: Basic quote calculator

- V2: Color customization

- V3: Two-page flow + updated pricing

- V4: Mobile-first sticky layout

- V5: Full SVG overlay system + model-specific engines/upgrades

That’s 5 major versions in ~10 days (Feb 5–14, 2026). Not exactly “normal dev timeline”… unless your dev team is AI.

How AI was used (honestly)

Claude Code functioned like my full development team. It helped plan the technical approach (SVG overlays vs. pre-rendered images), wrote and iterated the HTML/CSS/JS, debugged layout and responsive issues, helped extract model pricing from the client’s purchase agreement spreadsheet, designed the n8n → Zoho → Airtable → email automation flow, and fixed edge cases (like the bootstrip disappearing when white was selected). My role was strategy, UX decisions, design direction, and client management, and Claude handled execution with my guidance.

Business results

This was a real paying client with a real contract, not a classroom demo. The project delivered $4,500 payout + $75/month recurring managed services, and it’s built and ready in 10 days for the Miami International Boat Show. I also proposed Phase 2–3 expansion work to add more interior color options. Most importantly, the whole pipeline is fully automated: form → CRM → Airtable → branded email, with no manual steps.

Why this project is notable

This is production software built by a non-developer using AI, iterated rapidly at client speed, with real technical complexity (SVG blend modes, responsive UI, multi-system automation). It’s an end-to-end business system, not just a front-end toy, and it includes a recurring revenue model baked into the engagement.