How a UX designer and an AI partner built a B2B landing page from zero, through deep discovery, iterative design, and live development.
Deep Dive Edition — The Making Of
March 3, 2026 — 3:42 PM. A single message arrived that would set in motion a 74-hour creative marathon.
The ask was clear: act not just as a developer, but as a design and marketing consultant. Ask every possible question. Dig deep. Then build the most beautiful landing page ever seen for their online ticketing service.
Before asking a single question, Claude deployed an exploration agent to crawl the entire okTicket codebase. The result was a comprehensive map of a multi-product ecosystem far richer than the existing landing page suggested.
The exploration revealed a legacy PHP platform being rewritten in Node.js/Next.js, a sophisticated Flutter POS app (okDesk), mobile apps, and even a digital signage prototype. Most of this richness was completely invisible on the existing landing page.
The discovery phase involved multiple rounds of structured interviews. Here are the key exchanges that shaped the project direction.
Claude fetched and analyzed the existing landing page at aprireunabiglietteria.it, identifying critical weaknesses:
After exploring the entire platform codebase, Claude categorized discovered features by persuasive power:
After gathering all requirements, Claude synthesized everything into a comprehensive implementation plan. But the first version was rejected — and that's where the real collaboration began.
The final plan defined 17 distinct sections, each with specific content, animations, and responsive behavior:
The first plan attempt was rejected. The client identified missing sections and corrections that dramatically expanded the scope:
The client then provided a massive feedback message with 10 bullet points that added 6 entirely new sections:
The client shared an 8-page PDF proposal for premium tickets. Claude analyzed it and extracted the key marketing narrative: transforming the ticket from a "receipt-to-discard" into a "souvenir-to-treasure".
On March 4 at 4:39 PM, the plan was approved and implementation began immediately. The project was scaffolded, dependencies installed, fonts downloaded from Google Fonts, and brand assets copied from the existing codebase.
Using Claude's preview tool, every section was built and immediately verified on both mobile (375x812) and desktop (1280x800) viewports. Here is the visual evolution:
This project pioneered a distinctive development workflow: 102 screenshots were captured during development, with Claude inspecting each render, evaluating DOM properties via JavaScript, and making corrections in real-time. Every section was verified at both 375px (mobile) and 1280px (desktop).
One of the most interesting debugging sessions involved the mobile hamburger menu. The client reported it was broken on his phone.
The Problem: The mobile slide-in panel wasn't covering the full viewport height.
Root Cause: backdrop-filter: blur() (glassmorphism) on the position: fixed children to position relative to the header instead of the viewport.
The Fix: React createPortal to render the menu overlay and panel directly in , escaping the containing block. Plus restricting transition-all to specific properties only.
After the fix, Claude ran 6 verification tests: X close, link navigation, backdrop click, top-of-page state, scrolled state, and production build.
Even during the refinement phase, the client kept adding important features he'd forgotten to mention. Each was smoothly integrated:
Dedicated emotional section with 3-step flow: personalize dedication, beautiful A4 voucher, QR redemption. Positioned between Smart Guide and Resellers.
Added as 5th tab in Platform Features. Campaign pages with goals, donor lists, and progress tracking.
Email + WhatsApp ticket delivery. Added as feature bullet in the Biglietteria Online tab.
Self-service QR code + short URL generator for local promotional materials. Integrated into the Resellers section.
Before deployment, the client requested comprehensive documentation to serve as context for future sessions. Two files were created:
202 lines. Stable reference document: stack with real version numbers, brand system, map of all 17 sections with IDs and nav links, 6 UI components, technical patterns, directory structure, SEO checklist, and dev commands.
234 lines. Living document: status of every section (checkbox format), table of 25 missing assets with target paths and priorities, cross-cutting checklists for accessibility, SEO, performance, animations, responsive, and pre-launch.
credential.helper=osxkeychain configurato da Xcode. In passato hai già autenticato con GitHub da terminale, e il macOS Keychain ha salvato le credenziali. Il PAT che hai creato ora non è stato usato — è stato usato quello già memorizzato.
A complete, production-ready B2B landing page for okTicket — from empty directory to deployed on GitHub in 74.5 hours.
once: true for scroll-triggered reveals, staggered children delays, and viewport-aware counterscn() utility for conditional classesdata-netlify="true")useScrollSpy hook with IntersectionObserver for active section detectionbackdrop-filterfont-display: swap, preloaded in HTML headThe three fonts that make up the project's typographic system, with live specimens:
530 total tool invocations across 21 different tools
Initial brief, codebase exploration, client interview rounds
Page structure, sections, design system, component architecture
Plan approved after multiple revisions. Scaffolding begins.
102 screenshots, hamburger fix, late feature additions
PROJECT.md + CHECKLIST.md created for future sessions
Git init, commit, push to GitHub. 54 files, 7,739 lines.
The most powerful aspect wasn't code generation — it was the structured discovery process. By methodically interviewing the client, analyzing the codebase, and tiering features by persuasive power, the AI delivered strategic consulting value before writing a single line of code. The client's request to be treated as a consulting engagement, not a ticket, made all the difference.
102 screenshots during development created a tight feedback loop that caught issues immediately. The hamburger menu bug, for example, was discovered, root-caused, fixed, and verified across 6 test scenarios — all within the same session. This approach of building and immediately seeing produced quality that would otherwise require multiple deploy-review cycles.
The discovery phase revealed an ecosystem far richer than the existing landing page communicated. Features like Smart Guides, premium tickets, gift vouchers, reseller networks, and the okDesk POS were discovered by exploring the codebase — things the client hadn't even thought to mention initially. The first plan was rightfully rejected because it was too shallow. The 10-point feedback that followed added 6 entire sections.
The iterative feedback model — where the client could drop new requirements even during implementation ("oh, I forgot about Gift Tickets") — mirrors how real creative projects work. The AI's ability to absorb new context, write a mini-plan, get approval, and implement within minutes kept the project momentum flowing without scope-creep paralysis.
The entire conversation happened in Italian while the code was written in English. The AI seamlessly bridged both languages, capturing nuanced marketing concepts in Italian and translating them into clean, idiomatic React/TypeScript code. Phrases like "Regala Cultura" and "biglietto-souvenir" flowed naturally from conversation to component names.