Working Surfacelink · 4 Nov 2026
05
Cisco Blogs

Design-to-Code: Reimagine Handoff Workflow with AI – Rebuilding PubHub Part 3

Alejandro Marrufo, Casey Tong and Jerry Chang · 2 November 2026

Company story · handoff · prototyping · After the prototype

Read the original
Takeaway

Cisco DevNet's UX team stopped redrawing an AI-built interface in Figma and made the working HTML prototype, with a changelog, the handoff to engineers.

Summary

Alejandro Marrufo, a UX designer, and Casey Tong, head of UX, at Cisco DevNet, Cisco's developer programme, describe the rebuild of PubHub, an internal publishing tool, under a tight deadline. The team asked an AI coding agent to build the interface from user stories and backend APIs. The result worked end to end but did not follow the team's visual language, so the designers had to refine it.

Key points
  • Converting the HTML pages into Figma lost interactions, flows and animations. It was slower than the deadline allowed and left two versions with no clear current one.
  • Designers instead refined the HTML prototype directly with an AI coding tool, producing new pages every day where one page had taken days in Figma.
  • Each version goes to engineers with an embedded design system, a switch to view each user persona's flow, and a changelog. Engineers give the changelog and the HTML to a coding agent, which applies the changes to the real project.
  • Reviews became more frequent and engineers tested sooner. The team keeps Figma for asset libraries and fine detail, and warns that the agent invents secondary interactions and edge cases unless they are written down.
Implication

A design team can make the working prototype the single design record if each version travels with its changelog and design rules. This is the team's own account of one internal tool, with no measured results.

Plays
Design

Hand engineers the refined working prototype, with its design system and a changelog of what changed in each version, instead of a separate set of design files.

Design

Before engineers give a coding agent a refined design prototype to apply, have the designer write down the secondary interactions and edge cases the prototype does not show, so the agent does not invent them.

Derived by Working Surface from the article; more in the Playbook. Source line: The HTML prototype became the single source of truth.

Source issue

4 November 2026: teams building with AI agents are turning each failure or correction into a permanent check, rule or shared record, rather than fixing one result at a time.