p1Split-layout left pane
DVI Report Panel
Service cards for the four recommended services with priority dots, approve/decline actions, sticky summary footer, and reactive totals.
ReactTailwindshadcn/ui
// road_warriorAI Prompt Kit · Automotive
Road Warrior
Built for Christian Brothers Automotive in Bolingbrook, IL. Each module is a copy-ready prompt that generates production-quality React, wired to Claude for the conversational service advisor and jsPDF for the approved-work report.
v0 Prompt EngineeringClaude APIDesign TokensDVI WorkflowJobs To Be DoneADA Advocate
Client
Christian Brothers Automotive
Location
Bolingbrook, IL
My Role
AI Product Designer
Toolchain
v0 · Claude · Next.js
// brief
A service write-up shouldn't feel like a sales pitch.
Christian Brothers Automotive's Nice Difference® promise is built on trust — technicians who explain the work in plain English and never oversell. The existing Digital Vehicle Inspection (DVI) flow surfaced repair recommendations, but customers still left the lobby without fully understanding what they were approving.
Road Warrior reframes the inspection as a guided conversation. Every screen is generated from a shared prompt kit so the surveyor, the advisor, and the customer are all reading from the same source of truth — a 2019 Honda CR-V EX with 74,820 miles, four prioritized services, and one friendly ASE-certified advisor named Lucas.
// cba_design_tokens
One palette, pasted into every prompt.
Tokens ship at the top of every Road Warrior prompt so v0 inherits the exact brand language instead of defaulting to its own conventions. Navy carries trust, gold signals the Nice Difference® warranty, and red is reserved for safety-critical callouts only.
Primary
CBA Navy
#1A2744
Accent
Gold
#C9972E
Background
Cream
#F9F6F0
Critical
Safety Red
#C0392B
Success
Service Green
#1A7A4A
Surface
Light Gray
#F1EDE6
Typography stack
Display
Playfair Display
Body
Source Sans 3
Mono / Code
JetBrains Mono
// prompt_kit
Eight modules, one scaffold.
Each module is a self-contained prompt with a specification, a state-management note, and a fallback plan. Paste any card into v0 to scaffold that surface — or run them in order to stand up the full DVI experience in a single afternoon.
Inspection
03p6Page header
Vehicle Banner & Health Score
Top hero banner with VIN, mileage, technician, and a 4-system health-score widget that deep-links into each service card.
ReactSVGshadcn Badge
p3Card-level accordion
Step-by-Step Repair Guide
Expandable accordion inside each service card — numbered stepper, per-step illustrations, and a reusable StepGuide component.
ReactSVGTailwind
Chatbot
02p2Split-layout right pane
Lucas AI Chat Panel
Conversational right-side panel for Lucas, the service advisor — typed bubbles, quick-reply chips, typing indicator, and welcome auto-send.
ReactTailwindClaude API
p7API route + hook
Claude API Integration
Next.js route + useCBAChat hook wiring Claude with streaming, decision-aware system prompt, and graceful fallback messaging.
Next.jsClaudeStreaming
Export
02p4Modal overlay
Export Report Modal
Branded inspection-report modal with approved / declined / pending sections, jsPDF download, and print stylesheet.
ReactjsPDF@media print
p8Standalone page
Post-Approval Summary
Consumer-facing confirmation dashboard — donut cost breakdown, timeline stepper, next-steps card, and declined-services reminder.
ReactRechartsFramer Motion
Mobile
01p5Full-app layout
Mobile-Responsive App Shell
Bottom tab bar swap between Report and Chat on sub-768px, sticky chat input above the mobile keyboard, and swipe-gesture support.
ReactuseMediaQueryZustand
// lucas_ai
Lucas is a system prompt, not a personality.
Lucas Martinez is an ASE-certified service advisor stationed in Bolingbrook. On the backend, he's a Claude claude-sonnet-4-6 instance with a locked system prompt and streaming enabled. Every request carries the live decisions state — approved, declined, pending — so his answers stay consistent with what the customer has already tapped.
The behavior constraints matter more than the content: never recommend a service that hasn't been flagged by the technician, always cite the Nice Difference® Warranty when money comes up, and cap responses at two to four sentences unless details are explicitly requested.
// trust_layer
Guardrails that keep the AI in service of the customer.
Technician-sourced only
Lucas can only discuss services the human technician has flagged on today's DVI. If a customer asks about something off-sheet, he defers to the shop phone line.
Exportable decisions
Every approval, decline, and pending item is written to a PDF report the customer keeps — even if they never open the chat panel. AI assistance is additive, never the audit trail.
Accessible by default
44px tap targets, 320px reflow, AA contrast on navy/gold/cream, keyboard-first chat, and a visible escalation path to a real advisor at every step.
Try the DVI report live
This is the actual customer-facing prototype generated from the prompt kit above. Expand any line item to see Lucas' plain-language note, walk the repair process step-by-step, and use Approve / Decline to watch the running total update in the sticky summary bar.
Vehicle2019 Honda CR-V EXMileage74,820 miTechLucas M.Items3 need attention
cba-dvi.roadwarrior.app /report/74820
Open in new tabMore experiments live in the AI Laboratory.
Browse Alfred, the agentic job-application pipeline, the multi-model comparison, and the prompt pattern library — all sourced from real product work.