AC.
06 / BEAGLE · DESIGN CONSULTANT · 2024–PRESENT

I stopped making mockups and started shipping the front end.

On a three-person AI freight team, the shortest path from design intent to working product was for me to build the interface myself.

Role
Design Consultant
Scope
Product → front end
Timeline
Three months
Focus
AI · Systems · Code
Read the case ↓
MEDIA 01 · HEROBeagle's AI freight workspaceShow an RFP workflow, structured freight data, and one useful AI action in a crisp product view · 16:9 (2400×1350px).

01 — THE SETUP

A new domain, a team of three, and no room for a ceremonial handoff.

Beagle helps freight brokers handle shipper RFPs with AI. I had redesigned the brand and marketing site earlier, then returned for a three-month product engagement.

Freight was new to me. The founders taught me the industry; I showed them where expert functionality had buried basic usability.

We worked directly: founders on the domain, one engineer on backend and data, and me on the product experience.

Domain
learning→Product
structure→Front-end
code→Shared
system
EXPERT LOGICUSABLE WORKFLOW
MEDIA 02 · WORKFLOWMaking freight logic visibleUse an annotated comparison or one end-to-end RFP sequence, prioritizing comprehension · 16:9 (2400×1350px).

02 — THE CHALLENGE

The design file stopped being the source of truth.

When the round trip breaks, move the design work closer to the product.

I started with Figma and MCP. Once code changed, the round trip became unreliable and the mockups fell behind.

So I dropped the design tool, worked in an engineering branch, and built layouts, components, motion, and interactions with Claude. The engineer connected backend and data. The code merged into the product.

MEDIA 03 · MOTIONFrom prompt to merged interactionCapture the branch, working component, and finished behavior; show code only where useful · 16:9 (2400×1350px).

03 — WHAT I DID

Moving faster exposed the drift faster. I built the guardrails with the product.

  1. Built the interface in the repo.Designed and implemented layouts, reusable components, motion, and interactions in the same environment where they had to survive.
  2. Reduced visual drift.The product had accumulated roughly 32 colors and four dropdown patterns. I consolidated the palette to about eight working colors and merged duplicate behavior.
  3. Made the component library live.Built an interactive reference from the real product components, so the examples stayed connected to the same code the team shipped.
  4. Added instructions for the AI collaborator.Started a Design.md with principles, priorities, and the questions Claude should ask before producing more interface.

04 — THE RESULT

No victory-lap metric. A working product and a much tighter system.

This is a process case, not a conversion story. What shipped was front-end code, a consolidated visual language, and a workflow the team could keep using.

MEDIA 04 · SYSTEMComponents, tokens, and shipped screensShow one component-library frame, one token cleanup, and one production workflow · 16:9 (2400×1350px).
TESTIMONIAL PLACEHOLDER

Beagle founder or engineer quote

Best quote: collaboration in code, speed without loss of judgment, or how the system improved implementation.

05 — LOOKING BACK

The tool changed. My job did not.

Working in code made some decisions faster and some mistakes more immediate.
Both were useful.