Compare Figma designs with rendered UIs using Playwright. Visual regression and structured reports for CI and experimental AI repair loops.
-
Updated
Aug 12, 2026 - TypeScript
Compare Figma designs with rendered UIs using Playwright. Visual regression and structured reports for CI and experimental AI repair loops.
Design DNA Phase 3 verification harness — scores fidelity (tokens, style, effects) and drives a correction loop until ship-ready.
Two composable Claude Code skills for design-to-code fidelity: extract exact specs from Figma, then verify the running web or mobile app matches them.
Spacing & grid QA for AI-generated UIs, in the agent loop. MCP server that audits computed geometry and returns fix hints.
Visual QA CLI for AI-built frontends that renders pages, finds design and accessibility issues, and writes agent-ready fix prompts.
Pre-ship design QA gate - contrast, touch targets, keyboard paths, breakpoints for any screen before it merges
Design QA for the AI era — catch drift between your Figma designs and shipped UI. Pixel + element-level diff, auto-matching, token drift detection.
DESIGN-LAB(设计实验室):面向职业视觉设计的、AI 原生、平台中立的设计智能与生产能力实验室。设计研究、合规知识、设计方法、领域能力、视觉质量、工具适配、生产预检、可编辑交付与证据体系,组织为可组合、可执行、可验证、可回滚的设计能力闭环。Host-native,当前参考宿主 Open Design(无默认绑定)。Agent-platform-neutral design intelligence & production laboratory for professional visual design.
MCP server + CLI for AI-powered design fidelity — compare Figma designs or screenshots against rendered UI. 90% mutation recall, zero false positives on a golden eval set. No API keys — uses your Claude Code or Codex subscription.
Portable Markdown skill for AI vibe coding with design QA: accessibility, WCAG, responsive testing, visual consistency, UI polish, and remediation plans.
Design QA Agent helps teams catch design-system drift in coded UI before it ships.
Vibe coding is 30% building, 70% getting it to shipping quality. An agent skill that systematizes the 70% — a designer's pre-launch review for Claude Code, Cursor, or Codex that hands back a ranked, paste-ready fix list.
Visual UI regression agent for React: renders components with Playwright and uses Llama 4 Maverick (multimodal) to find visual defects and propose a unified-diff fix.
Stress-test Figma layouts for localization readiness, text expansion, RTL, and locale-specific formats.
Structured style-fidelity checker for design-to-code: diff Figma vs. front-end per-attribute + by geometric boundary distance. AI judges only what needs judgment — a faster, cheaper, quantifiable alternative to screenshot visual diff.
Audit Figma flows for missing states, broken transitions, unsafe recovery paths, and unresolved product decisions.
Claude Code skill: screenshot every route of your web app (auth included) into a comment-review gallery that exports agent-ready feedback
Evidence-first UI alignment audit skill for AI coding agents (Claude Code / Cursor / Codex): real rendered evidence, typed findings, interactive A/B acceptance — without touching product code.
Figma plugin that finds layers hiding outside their frames — the oversized decorations and clipped junk that break Dev Mode handoff. Audit-only, fully offline.
Audit fixed-viewport HTML slides for excessive whitespace by rasterizing visible content onto a grid and computing coverage ratio
Add a description, image, and links to the design-qa topic page so that developers can more easily learn about it.
To associate your repository with the design-qa topic, visit your repo's landing page and select "manage topics."