Zero-Figma Handoff: How AI-Augmented Prototyping Cut B2B Design Time by 90%

TL;DR: Replaced a 500-row Google Sheet used by 5 departments with a parametric B2B ERP Fee Engine. Delivered a functional TypeScript prototype via an AI-augmented pipeline in <24 hours, cutting task completion time from 5 minutes to <3 seconds.

bazzuzu.github.io/consolidator-fee-smart-lookup

System Architecture & Specs

• Role & Domain: Lead Product Designer / Design Engineer | Enterprise B2B SaaS (Travel Tech)
• Users: Sales, Bookkeeping, Support, Ticketing, Expert teams + BE API Integrations
• Tech Stack: TypeScript, Tailwind CSS, Design Tokens, Google AI Studio, Antigravity IDE, GitHub Pages
• UX Patterns: Nested Grouping, Progressive Disclosure, Keyboard Hotkeys, Audit Trail

Problem vs. Solution

Legacy Bottleneck (Google Sheets)

• 500+ rows scanned manually across multi-PCC constraints.
• Zero change tracking; human errors in financial auditing.
• Failed Matrix Proposal: Flat 30-column table rejected due to noise.

New ERP Architecture

• Parametric Query: PCC + Passenger Type = Exact Fee in 1 click.
• Contextual Audit Trail: Full change log & history drawer for Bookkeeping.
• Nested Grouping: Collapsed data hierarchy with progressive disclosure.

Power-User UX Features

• Keyboard-First Navigation: Hotkey bindings for high-frequency operations.
• Micro-Interactions: 1-click Record ID and fee value copying.
• Optimized CRUD: Simplified modal flows for creating/updating tariff rules without breaking data integrity.

AI-Augmented Pipeline & Zero-Figma Handoff

Bypassed static Figma mocks to directly model dynamic fee calculations. Delivered a live, production-adjacent TypeScript prototype with auto-documented dev specs (PROJECT.md).

Hard Metrics & Impact

• Task Velocity: Lookup time dropped from 3–5 minutes to <3 seconds.
• Design Delivery: Delivery time reduced from 2 weeks (Figma) to <24 hours (working code).
• Engineering Efficiency: Zero design-to-code drift; Dev QA reduced to 1 single pass.