Design handoff
Follow the file when you have one. Prototype first when you do not. Review against the guidelines when the page exists.
Skill 1 · Plugin 1 · Tool 1 · Edited 2026-10-10
All
Figma MCP serverPluginReads a Figma file's structure and styles for the agent.Fit：A design file exists and the implementation should follow it.figma.comopen-designToolAn open stand-in for a design file: the agent produces a prototype and a landing page.Fit：There is no Figma file yet and you need to see a layout.Apache-2.0 · open-design.aiweb-design-guidelinesSkillReviews UI code against web interface guidelines: contrast, focus, forms, and hit targets.Fit：A check after the page exists, especially when a spec already exists.MIT · github.com/vercel-labs/agent-skills
How to choose
A Figma file exists Use the Figma MCP server and implement against the file.
No file yet Use open-design to get a prototype you can look at.
After it exists Use web-design-guidelines for contrast, focus, and hit targets.