Cisco DevNet's UX team drops the Figma round trip and hands off an AI-built HTML prototype
A Cisco UX team refines an AI-built HTML prototype directly, after a Figma MCP round trip lost detail, and hands it off with a design system and changelogs.
Done withFFigmaCCursorCClaudeCCodex
Corporate team blog about an internal tool; work dates and exact agent setup not stated
WHAT THEY DID
Cisco DevNet's UX team (UX designer Alejandro Marrufo, head of UX Casey Tong, with Jerry Chang) let an AI agent build PubHub's interface from user stories and APIs. The designer then refined the working HTML with AI coding tools instead of rebuilding screens in Figma.
STEP BY STEP
- Product team writes user stories and backend APIs.
- An AI coding agent builds an end-to-end UI.
- The designer reviews working pages and refines the HTML with an AI coding tool.
- The designer hands over the HTML with an embedded design system, persona switcher and changelog.
- Developers give the changelog and HTML to a coding agent, which applies the changes; the team reviews and repeats.
HOW IT WENT
By the team's account, the designer turned out new iterations every day, where a single page took days under the old Figma-first process. The post shows before/after screens of the AI first pass and the designer's version.
Reported results: New design iterations every day, versus days per page under the old Figma-first process.
WORTH KNOWING
A dated, first-hand account from a UX team that tried a Figma MCP round trip, says where it failed and where Figma still works, and describes its new handoff: an HTML prototype with design system, persona switcher and changelogs.
TRY IT
- Refine a working AI-built prototype instead of redrawing it in Figma.
- Ship a changelog with each design iteration so an agent can apply it.
- Write down edge cases and secondary interactions, or the agent will invent them.
Rates the entry, not the tool.
Source: Alejandro Marrufo, Casey Tong, Jerry Chang · Cisco Blogs (DevNet)Open as a page
- Work done: 2026
- Source published: Nov 2, 2026
- On 4TC: added Nov 3, 2026 · checked Nov 3, 2026
About this source
Type: First-person workflow · Firsthand report · Demonstrated workflow
- Design-to-Code: Reimagine Handoff Workflow with AI – Rebuilding PubHub Part 3
Alejandro Marrufo, Casey Tong, Jerry Chang · Cisco Blogs (DevNet) · Published Nov 2, 2026 (Byline 'November 2, 2026'; matches page metadata.) · Checked Nov 3, 2026
The team's own post on Cisco's DevNet blog about Cisco's internal tool. No sponsorship or affiliate links; Cisco does not sell the AI tools named.
Access: open - Rebuilding PubHub: How AI-assisted development shipped a mandatory rewrite 3.5 months early – Part 1
Koushik Dhar · Cisco Blogs (DevNet) · Published Oct 19, 2026 (Byline 'October 19, 2026'; matches page metadata.) · Checked Nov 3, 2026
Part 1 of the same series on Cisco's DevNet blog (context on the PubHub rebuild).
Access: open
Source check: Reviewed by a 4TC editor on Nov 3, 2026. Numbers, names and quotes checked by Ella on 3 Nov 2026 against the Cisco DevNet blog post of 2 Nov 2026; every source link returned 200. Nobody at 4TC has tested this.
Claims and where they come from
- On a revamp of PubHub, a DevNet internal publication tool, the team asked AI 'to build the interface directly from our user stories and backend APIs'. (reported) [1]
- The AI version worked end to end, but 'The app didn't follow our visual language, some AI-generated components weren't intuitive, and several workflows needed cleanup.' (reported) [1]
- They first tried converting the HTML pages into Figma and using a Figma MCP connection, but the round trip 'missed interactions, complete page and button flows, and animations', was slower than the timeline allowed, and left the source of truth unclear. (reported) [1]
- They say Figma was still the better tool 'for maintaining a library of assets and for precise work on small, highly detailed UI elements.' (reported) [1]
- Instead, the designer used an AI coding tool to adjust the existing HTML directly, and 'The HTML prototype became the single source of truth.' (reported) [1]
- 'Partway through the project, designer ran out of tokens and moved from Cursor to Claude to Codex, switching tools until limits reset.' (reported) [1]
- The team reports new iterations every day; 'Under the old Figma-first process, a single page took days.' (reported) [1]
- The handoff became the HTML prototype with an embedded design system, a persona switcher and a changelog per iteration; developers give the changelog and HTML to a coding agent, 'and it applies the changes across the project automatically.' (reported) [1]
- Their advice includes 'Specify what the agent can't infer. Document secondary interactions and edge cases, or the coding agent will invent them.' (reported) [1]
4TC interpretation
Our reading, not something the source says.
Many teams now get AI-built code before any mockup exists. This shows one way a designer can work on the running product instead, and what a developer handoff can look like when the prototype is the design.
Designer impact
Alleged [1]
A Figma–code round trip can lose interactions, flows and animations.
- Keep one source of truth.
- Use Figma for asset libraries and fine detail, as the team does.
Alleged [1]
Token limits can stop an AI tool mid-project.
- Keep the design state in a file (here, the HTML) so you can switch tools.
Alleged [1]
Coding agents invent behaviour you don't specify.
- Document secondary interactions and edge cases.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.