The Agent Draws Its Own Handshake
The cast: an agent window, an MCP block in the middle, and Figma on the right. Three objects. They pass two things between them: a request going out and data coming back.
The Agent Draws Its Own Handshake
The cast: an agent window, an MCP block in the middle, and Figma on the right. Three objects. They pass two things between them: a request going out and data coming back.
Series: Figma for Educational AI Topic: FIGMA · MCP · SEQUENCE DIAGRAM
Chapters
0:00 Introduction 0:28 Introduction 1:30 Your Turn
YOUR TURN
Your turn. Paste this into Claude: Here is the Mermaid sequence diagram an agent drew of a get design context round trip: paste it. List every step it shows. Then list every step it does not show that would be needed for a complete picture of the handshake: auth, caching, code generation, error paths. Then rewrite the diagram with those steps added
@NikBearBrown
Part of the Figma for Educational AI series.
Sources and citations: see the reel's SOURCES.md in the open textbook.
▶ The full series playlist — Brutalist https://www.youtube.com/playlist?list=PLG9H-C6rp5RU
What this video covers
- 0:00 — Introduction
- 0:28 — Introduction
- 1:30 — Your Turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Introduction
[0:00] Bock, this is Liam in for Bear. When an agent calls get design context, what actually happens? Better question, can it draw that handshake accurately enough to teach it? Three terms, a handshake, the exchange of request and response between two systems that sets up a connection. Design context, what Figma's MCP server returns when an agent asks to read a frame, code, a screenshot, and any annotations on the node. Sequence diagram, a picture of who calls whom in order with the arrows as the story.
Introduction
[0:28] The cast, an agent window, an MCP block in the middle, and Figma on the right. Three objects, they pass two things between them, a request going out and data coming back. The call get design context file key in node one colon six, the study card. One tool call into the MCP block. The MCP block now calls Figma's REST API twice. First to fetch the node's raw data, then to render a PNG of it. Two outward calls, two returns. What came back, React and Tailwind code for the card, a screenshot, and a review annotation Bear left on the node in an earlier film. Three things in one reply. The agent then drew that round trip as a sequence diagram and put it in a new FigJam board. Three participants, Claude code, the MCP server, Figma. Six arrows, the board came back clean. What is confirmed, the input, the output, and the three participants. What is inferred, the two REST API calls inside the server. The server's source is not open. Pending Bear, check the inferred steps against Figma's documentation or the server itself.
Your Turn
[1:31] Your turn, paste this into Claude. Here is the mermaid sequence diagram an agent drew of a get design context round trip. Paste it, list every step it shows, then list every step it does not show that would be needed for a complete picture of the handshake, off caching, code generation, error paths. Then rewrite the diagram with those steps added, then check two things yourself. Find one step the rewritten diagram added that changes what you would tell a student. And find one step that is still missing. The agent draws its own handshake at Nick Bare Brown.
