Awwwards Nominee
04 · BLIVE

A real travel agency’s sales flow, run by an agent pipeline I design, build and operate.

ROLE
DESIGN ENGINEER — DESIGN · CODE · DEPLOY · OPERATE
COMPANY
TYPE:ZERO (client: Blive Viagens)
TIMELINE
2026 — in production
SCOPE
Agent pipeline architecture · Proposal block system · Full-stack build · Production operations
AI AgentsClaude Agent SDKNext.jsDesign EngineeringIn Production
BLIVE
01

CONTEXT

A family-run travel agency selling Orlando packages — every proposal handcrafted across three tools, one attendant at a time.

Real agency, real clients
Briefings arrive on WhatsApp
2026
In production since April
95
Proposals in the first 2 months
02

THE CHALLENGE

The bottleneck wasn’t demand — it was 27 minutes of skilled handwork per proposal, unscalable by design.

27 minutes per proposal

WhatsApp → claude.ai → Canva → site, by hand, every single time.

130+ Canva designs

Every proposal “unique” — beautiful, and impossible to scale or automate.

A static PDF at the end

No updates after sending, no telemetry, no way to know what happened next.

03

WHAT I DID

  1. Verified before building

    A one-day spike falsified the original Canva-API plan (9 required tools didn’t exist publicly) — pivoted to the Claude Agent SDK before writing the pipeline.

  2. De-LLM’d the deterministic parts

    Replaced a monolithic LLM interpreter with a typed block-parser — 98s/$0.18 → 12ms/$0 — proven by an A/B replay harness: 25/25 identical quotes.

  3. Rebuilt the design layer as blocks

    14 hand-tuned HTML/CSS blocks replaced 130+ Canva designs, with a variant catalog and a Zod-driven editor. Clients never noticed.

  4. Shipped the web proposal — and operate it

    Static PDF became a mobile-first web page with pure-CSS animation and WhatsApp-ready previews. Designed, coded, deployed and run on my own infra.

THE MOBILE APP
PROPOSTA WEB · MOBILE-FIRST · 95 SHIPPED IN 2 MONTHS

The deliverable clients actually see: a mobile-first web proposal (they open it from WhatsApp), hand-tuned CSS, pure-CSS animation — assembled by the pipeline from reusable blocks in minutes.

Cover — each proposal opens like a story, not a quote
Cover — each proposal opens like a story, not a quote
Trip summary — the whole itinerary at a glance
Trip summary — the whole itinerary at a glance
Hotel block — matched from the briefing by a fuzzy tier resolver
Hotel block — matched from the briefing by a fuzzy tier resolver
Tickets — Disney, Universal, Seaworld, quoted live from the agency’s systems
Tickets — Disney, Universal, Seaworld, quoted live from the agency’s systems
Investment & payment — the close, with PIX options (values anonymized)
Investment & payment — the close, with PIX options (values anonymized)

THE PIPELINE

Three phases, each gated by a human — the attendant stays in control, the machine does the work.

  1. 01

    BRIEFING

    Semi-structured WhatsApp text pasted by the attendant — dates, pax, parks, hotel hints.

  2. 02

    INTERPRET

    Typed block-parser (regex + Zod): 12ms, $0. Small validated LLM calls only where fields are ambiguous.

  3. 03

    QUOTE

    Parallel calls to the agency’s GraphQL and partners — hotels, tickets, insurance, cars — into a mixed cart with coupon.

  4. 04

    ASSEMBLE

    Variant matching picks each block; the proposal is persisted as a jsonb snapshot — render is instant and stable.

  5. 05

    SHIP

    Public web proposal behind an unguessable link, WhatsApp-tuned preview — plus a print-mode PDF.

The operations view — 95 proposals, pipeline status at a glance, and per-proposal LLM cost as a plain column (client names blurred)
The operations view — 95 proposals, pipeline status at a glance, and per-proposal LLM cost as a plain column (client names blurred)
One proposal, inside: the original WhatsApp briefing, quote cards, and the run timeline — four pipeline steps in about a second (client anonymized)
One proposal, inside: the original WhatsApp briefing, quote cards, and the run timeline — four pipeline steps in about a second (client anonymized)
The block catalog — 14 blocks, 160+ variants, edited by the team without a pull request
The block catalog — 14 blocks, 160+ variants, edited by the team without a pull request
Schema-driven editing — the form is generated from each block’s Zod schema; live preview alongside
Schema-driven editing — the form is generated from each block’s Zod schema; live preview alongside
04

OUTCOMES

The full before/after is charted below — measured, not estimated.

27 min → 1–4 min

Per proposal, depending on product count — the agency’s whole production bottleneck removed.

Invisible to clients

Proposals became reusable blocks and nobody noticed — each one still reads one-of-a-kind.

Observable and priced

Every run logged, every LLM call costed — cost per proposal is a database column, not a guess.

05

WHAT I LEARNED

Verify before you build

One spike falsified the whole plan and saved weeks. Plausible APIs lie; bytes don’t.

LLMs only where they earn it

The best agent system is mostly deterministic code, with small validated LLM calls at the gaps.

Design systems scale trust

Blocks kept the handmade feel at pipeline speed — governance is what makes automation invisible.

Results

USABILITY TESTING · BEFORE / AFTER

TIME PER PROPOSAL

WAS
27 min
NOW
1–4 min

BRIEFING → QUOTE

WAS
3:38
NOW
0:55

INTERPRETER COST

WAS
$0.18 · 98s
NOW
$0 · 12ms

Manual flow (WhatsApp → claude.ai → Canva → site) vs. the pipeline, measured on real proposals.

95

PROPOSALS / 2 MO

−90%

TIME PER PROPOSAL

14

BLOCKS ← 130+ DESIGNS

$0

INTERPRETER COST

Clients never noticed the proposals became blocks — each one still feels handmade.