Skills
.Work. You
Rest

design-spec-audit

Community

Verify your app matches DESIGN.md at runtime.

Design & Creative#design tokens#design audit#playwright#visual regression#ios simulator#axe cli#ui conformance
AuthorElvinOuyang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill resolves the gap between design intent and what users actually see by auditing a running iOS app or web UI against the authoritative design spec instead of relying on static review.

Core Features & Use Cases

  • Runtime, spec-driven audits: Parses DESIGN.md or equivalent sources into concrete rules (tokens, spacing, typography, component variants, motion, layout) and applies them to real rendered screens.
  • iOS via AXe CLI, web via Playwright: Drives the app using label/identifier interactions for stability, then captures screenshots and runtime structure to diff against the spec.
  • Actionable, prioritized gap reports: Produces a P0–P3 prioritized list of divergences with screenshots and exact mismatch details, plus proposed fixes, so teams can ship confident design conformance.

Quick Start

Ask the auditor to run a design-spec audit of your running app against DESIGN.md, including the top user-facing screens and producing a P0–P3 report with screenshots and exact divergences.

Dependency Matrix

Required Modules

pillow

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-spec-audit
Download link: https://github.com/ElvinOuyang/claude-skill-collection/archive/main.zip#design-spec-audit

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.