skills.rest
i3ringit
i3ringitCOMMUNITY
Explore all skills by this author →
GitHub

design-implementation-reviewer

Compare live UI states against Figma design specs and generate structured feedback.

3|1|Updated Jan 15, 2026
Search Tags:#UI#Playwright#design-system#pixel-perfect#Figma#design-review
One-click install
npx skills add https://github.com/i3ringit/antigravity-cortex --skill design-implementation-reviewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-implementation-reviewer
Source: https://github.com/i3ringit/antigravity-cortex/tree/main/.agent/skills/design-implementation-reviewer
Command: npx skills add https://github.com/i3ringit/antigravity-cortex --skill design-implementation-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure that implemented UI components faithfully reflect the approved Figma designs, reducing visual regressions and design drift.

Core Features & Use Cases

  • Visual comparison workflow: captures live UI states and compares against design specs.
  • Design-system fidelity: audits typography, spacing, colors, and components against tokens from Figma.
  • Feedback & remediation: generates actionable fixes and a structured review for developers.

Quick Start

Run a design-implementation-review for the hero component against the Figma design to generate a structured feedback report.

Frequently Asked Questions about design-implementation-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify that my UI implementation matches the Figma design?▼

Design-implementation review captures your live UI state and compares it systematically against Figma design specs, flagging visual discrepancies in layout, spacing, colors, and typography so developers get actionable feedback to align implementation with approved designs.

Can I use Playwright to automate design compliance checks?▼

Yes. This Skill integrates Playwright MCP to capture UI component states and Figma MCP to retrieve design specifications, then performs visual comparisons and delivers structured feedback reports for design-system fidelity audits.

What should I check when auditing a design system against Figma tokens?▼

Design-system audits validate typography, spacing, colors, and component structure against Figma tokens. This Skill systematically reviews these dimensions across components, identifies drift from approved specs, and generates remediation guidance for developers.

How do I catch design drift in responsive web components?▼

Run visual comparison workflows at different breakpoints to capture implementation state across responsive contexts, then compare against Figma design specs. The Skill surfaces misalignments and delivers structured fixes for pixel-perfect alignment.

Do I need both Figma and Playwright to use design reviews?▼

Yes. This Skill requires Figma MCP to retrieve design specifications and Playwright MCP to capture live UI implementation state; both are integrated to enable systematic visual comparison and actionable feedback.

Related Skills

Explore More Design & Creative Skills→
elsolalelsolal
1

ui-designer

Define and document design tokens, component states, and exportable guidelines.

Community
Advanced
whd4whd4

canary

Monitor live deployments for console errors, performance regressions, and page failures.

Community
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced