Designing in code with real data
Thirdfort • 2026
Overview
A complete rebuild of the production environment using natural language, built to speed up my workflow as a product designer on KYB. It replaces the slow Postman to Figma loop with a live dashboard wired to real D&B data, gives clients something they can actually use rather than look at, and exposes every design decision to developers through a built-in annotation layer.
Problem
Three things kept blocking the work. Pulling company JSONs from Postman was painfully slow, no D&B search endpoint hooked up, too many parameters, too much guessing. Figma couldn't show how data actually returns: string lengths, badge variants, what surfaces in cards across micro vs large companies. And developers had no fast way to map a design back to its data source, dimensions, or Tailwind, just design tokens.
Solution
A working prototype hitting D&B's search, company, and UBO endpoints, designs tested against the real shape of production data, not mocked fixtures. Clients interact with it like a real product without waiting on devs. Developers can see component annotations and view the design decisions, sizing, Tailwind, and exact D&B response block driving it.
Impact
Time to client-testable cut from weeks to days
Production D&B endpoints wired in
Understand data in seconds vs. ~4 min per Postman analysis
All components annotated with data source and CSS
Adopted by PMs and designers across the product team
Unlocked by Opus 4.7 Claude Code CLI
Links
