Stop trusting ‘looks about right’: I gave my AI agent a way to verify its UI against Figma

Short summary

Developer built figma-connect, a verification tool that renders AI-generated UI code in a browser and pixel-diffs it against live Figma designs to catch subtle errors ('looks about right' misses). Uses three verification strategies (pixel diffing, SSIM structural similarity, axe accessibility checks) to give agents real feedback. 15k TypeScript lines running locally with Playwright, SQLite, and MCP tools.

• •AI agents generate ~90% correct UI but miss small details (padding, font weights, radii) that compound into visible discrepancies
• •figma-connect auto-verifies rendered code against Figma designs using pixel-diffing, SSIM, and accessibility checks
• •Local tool with 35 MCP read-only tools gives agents actionable visual diffs instead of abstract similarity scores

Generated with AI, which can make mistakes.