Design Spec: Rebuilding How Chợ Tốt's Product Design Team Hands Off

A look at how our Product Design team replaced the “Figma + Dev Mode” handoff with a single AI-built Design Spec - enough context to build straight to production, in half the time.

The problem: one frame per case, every frame coded from scratch

Once the Solution Design is agreed with stakeholders, the Product Designer's real work begins: turning the chosen option into a complete Figma design - every screen, the user flow for each case, all the component states, and countless annotations so Engineering codes it exactly right. It's a story almost everyone in Product or Engineering has lived.

The numbers sound harmless but pile up fast. For a single section of the Agent Showcase feature on Nhà Tốt, the Product Designer had to build more than 12 frames to cover every case. Engineering then had to code exactly those 12 frames - no more, no less - and because we're human, one slip is all it takes to miss a case, usually an important one.

But that's only half of it. The harder problem sits in the gaps the traditional handoff leaves behind: the design and Dev Mode give you exact px, hex and font, but say nothing about what happens on tap, what shows when there's no data, or which design-system token that hex maps to. Every gap is one more trip back to PD, one more guess, one more rework.

Add it up across a two-week sprint - 10 working days: Design takes 2-3 days to work through the pile, Dev another 3-5 days to reach staging, and the rest drains into back-and-forth to pin down behavior. The familiar ending: the sprint closes with a few cases still unfinished, “rolled to next sprint”. In the AI era, the business needs to learn fast whether a feature actually meets a real user need - and the old way simply isn't fast enough to learn that.

Same inputs - what changes is who has to assemble them. Before, it was the developer, tracing through each source; after, it's a single Design Spec that has already merged the context.

The solution: an AI-built Design Spec layer

Instead of handing off a “Figma file + Dev Mode,” we hand off a Design Spec: a Markdown document generated by AI, scored against the design system, and developer-ready. People still design exactly as before; AI fills the very gaps the traditional handoff leaves behind - interaction behavior, empty states, edge cases, and which token each value maps to.

The workflow runs through four stages, mostly automated. The designer builds in Figma as usual. A plugin extracts all the design data into YAML. The /handoff skill analyzes the context and generates the specification. The result is a Design Spec engineering can build straight to production.

Four stages, mostly automated. People design; the plugin extracts data;/handoffadds context; the developer receives a developer-ready document instead of guessing.

Inside a Design Spec

The power isn't that AI “draws nicely” - it's that every handoff is forced through one fixed frame of 10 core sections, each answering a question a developer used to have to ask: header & metadata, open questions, display conditions, interaction rules, layout YAML, design-token map, states & animations, content rules & edge cases, tagging & analytics, and a verify checklist.

The layout is written in YAML, referencing design-system tokens directly, with display conditions and edge cases included - so getting from a Figma file to working code takes about 20 minutes to generate the spec and a little over an hour to reach production, instead of days of back-and-forth.

Results: two months, 21 features, 100+ pieces of feedback

After more than two months of testing across 21 features and two large workgroups at Chợ Tốt, we collected over 100 pieces of feedback and refined the skill more than 50 times. Against the baseline week, both quality and speed jumped clearly.

Five quality dimensions, measured weekly across 21 features and 2 workgroups. The raw plugin (YAML) alone wasn't enough - it's the/handofflayer that pulled logic and edge cases up.(Figures re-estimated from an internal tracking sheet - hover for detail.)

Improving the Design Spec isn't a matter of feeling - it's numbers. We built a dedicated process to eval the skills and plugins that generate a Design Spec across versions; each metric is weighted by importance and refined over many iterations. The score climbed from 64 to 97 out of 100:

Impact and what's next

The biggest business impact isn't a single quality number - it's the delivery cadence: the time for each feature, from design to production, was cut in half.

Fewer round-trips, less rework, faster delivery - and more value reaching our users. With the new workflow we can handle at least 60 features per quarter; the time saved compounds into capacity to build more valuable features, ship faster, and learn faster.

But a good process isn't measured by business impact alone - it has to be one people actually choose to use. After more than three months it now covers every major workgroup at Chợ Tốt (Vertical, Platform, Seller, Buyer, Customer Success), and in grooming sessions, instead of “when will it be done,” the first question we now hear is when can my team start using Design Spec.

That's the idea we're carrying further: we've just completed Phase 1 - AI Native, and the next leg is starting from an HTML prototype instead of Figma - to make the distance from idea to production shorter still.