skills.rest
krzemienski
krzemienskiCOMMUNITY
Explore all skills by this author →
Website𝕏@nkrzemienskiGitHub

design-validation

Compare implementation screenshots against design references to measure visual and structural fidelity.

2|Updated Apr 8, 2026
Search Tags:#accessibility#figma#playwright#visual-regression#design-validation#computed-styles#fidelity-score
One-click install
npx skills add https://github.com/krzemienski/validationforge --skill design-validation-krzemienski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-validation
Source: https://github.com/krzemienski/validationforge/tree/main/skill-audit-workspace/design-validation/skill-snapshot
Command: npx skills add https://github.com/krzemienski/validationforge --skill design-validation-krzemienski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and implementation often drift over time, causing visual regressions, accessibility mismatches, and layout regressions that degrade user experience; this skill provides a repeatable way to detect and document those discrepancies by comparing implementation renders to authoritative design references.

Core Features & Use Cases

  • Gather reference artifacts from Stitch MCP, Figma exports, or DESIGN.md and store them as structured reference files.
  • Capture implementation evidence using browser automation: screenshots at design viewports, computed styles for key elements, and accessibility tree snapshots.
  • Compare across five fidelity categories (colors, typography, spacing, layout, interactions), compute per-category scores, calculate a weighted overall score, and produce PASS/CONDITIONAL/FAIL verdicts with linked evidence.
  • Use cases include post-implementation checks for individual components or pages, pre-release validation, regression checks after CSS refactors, and supporting designer-developer review cycles.

Quick Start

Compare the implementation at http://localhost:3000/home against the Figma reference for the homepage and produce a design validation report with per-category scores and linked evidence files.

Frequently Asked Questions about design-validation

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

FAQPage Schema
How do I compare my implemented UI against Figma design specs to check for visual regressions?▼

To compare UI implementations against Figma specs, you can capture screenshots at design viewports, extract computed styles and accessibility trees, then analyze colors, typography, spacing, layout, and interactions to produce per-category fidelity scores and a PASS/CONDITIONAL/FAIL verdict.

Can I automate Playwright screenshots to validate UI fidelity and computed styles during pre-release checks?▼

Yes, you can use Playwright browser automation to capture implementation screenshots, extract computed styles for key elements, and snapshot accessibility trees to validate UI fidelity during pre-release checks, post-implementation reviews, and regression checks after CSS refactors.

What's the best way to measure visual and structural fidelity between a web page and its design reference?▼

The best way to measure visual and structural fidelity is to compare implementation renders against authoritative design references by matching viewport sizes, analyzing computed styles, and calculating weighted overall scores across colors, typography, spacing, layout, and interactions categories.

Does design validation work with DESIGN.md files and Stitch MCP exports as reference artifacts?▼

Yes, design validation works with DESIGN.md files, Stitch MCP, and Figma exports by gathering these reference artifacts and storing them as structured reference files to compare against captured implementation evidence for measuring visual and structural discrepancies.

Why does my UI implementation drift from the original design over time and how can I document the discrepancies?▼

UI implementations drift from original designs over time due to CSS refactors and updates, causing visual regressions, accessibility mismatches, and layout degradations; you can document these discrepancies by comparing renders to design references and producing reports with per-category scores and linked evidence.

When do I need to run a design validation report for post-implementation component checks?▼

You need to run a design validation report for post-implementation checks of individual components or pages, during designer-developer review cycles, before releases, and after CSS refactors to detect visual regressions, accessibility mismatches, and layout discrepancies using structured reference files.

Related Skills

Explore More Design & Creative Skills→
thuandiep1707thuandiep1707
4

coding-fe

Convert approved Stitch artifacts into Next.js route slices with mock data.

Community
Advanced
nicolasguelfinicolasguelfi
4

health

Compute eight-dimension project health scores from configuration, backlog, test results, and review data.

Community
Advanced
thehivegroup-aithehivegroup-ai

playwright-capture

Capture screenshots and HTML at multiple viewports with Playwright.

Official
Intermediate
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate