What is verify-design?

A UI checking and repair workflow that compares a running website with Paper design references, which are the intended visual layouts and design rules.

Use it before or during interface work to test desktop and mobile pages, inspect interactions, capture screenshots, and run linting, type checks, and tests.

It finds differences in layout, styling, behavior, and runtime errors, then fixes them in the source code and checks the result again.

verify-design — Skill for Claude Code by 0xrafasec: A UI checking and repair workflow that compares a…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/0xrafasec/ai-workflow/verify-design

Any agent

npx skills add 0xrafasec/ai-workflow --skill verify-design

Clone the repo

git clone --depth 1 https://github.com/0xrafasec/ai-workflow

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/0xrafasec/ai-workflow/verify-design.svg)](https://agentmods.dev/skills/0xrafasec/ai-workflow/verify-design)

Your own site

<a href="https://agentmods.dev/skills/0xrafasec/ai-workflow/verify-design"><img src="https://agentmods.dev/badge/skills/0xrafasec/ai-workflow/verify-design.svg" alt="Measured on agentmods" height="20"></a>

Per session 33 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,653 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00033	$0.01653
Opus 5	$0.00016	$0.00826
Sonnet 5	$0.00007	$0.00331
Haiku 4.5	$0.00003	$0.00165

Measured 6d ago against content hash 5b28ab54bcfa, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

verify-design scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

Ensure the dev server is running (`curl http://localhost:3000`). If it isn't, start it (`pnpm --filter web dev` in background) before using Playwright.

skills/verify-design/SKILL.md · 120 lines

How it starts

The opening of the file, as written. The whole thing — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Verify current UI against Paper design references for: $ARGUMENTS

Purpose

This skill does a fix-in-place fidelity pass against Paper design references. It:

Loads Paper artboards + design tokens (source of truth)
Reads the corresponding source files
Uses Playwright to exercise the running app at real viewports (desktop + mobile), capturing screenshots, console errors, and interaction flows
Fixes mismatches directly — do NOT stop at a report
Re-verifies with Playwright and runs lint / typecheck / tests before reporting done

The user does NOT want a pure report. They want the issues found AND resolved in the same session. Only stop to ask if a mismatch looks intentional or the fix would change scope.

Parse Arguments

No argument: check all pages with design refs
Page / route name: /verify-design owner — check that page
Component name / file path: /verify-design Hero or web/components/landing/Hero.tsx

Arguments may include free-form notes from the user (specific bugs, reference screenshots, which page to use as a style anchor). Treat those as priority work items.

Step 1 — Locate design references

Priority:

docs/design/ (page-level docs, artboard exports, DESIGN_SYSTEM.md)
specs/**/plan.md / tasks.md / spec.md — extract Paper artboard IDs (e.g. 4P-0, 96-0, 15D-0, 17M-0)
docs/specs/ / docs/roadmap/ cross-refs

Build a scope table (Page → Paper artboard (desktop) → Paper artboard (mobile) → source file). If both a desktop and mobile artboard exist (e.g. 96-0 + 17M-0), check both.

If no design docs exist at all, stop and tell the user to run /design first.

Step 2 — Load design tokens

Read docs/design/DESIGN_SYSTEM.md, web/app/globals.css, and web/tailwind.config.*. Record palette, type scale, spacing, radii, shadows. Flag hardcoded values in source that duplicate a token.

Step 3 — Load Paper artboard context

Use the Paper MCP:

get_basic_info once per session
get_screenshot on each artboard in scope (desktop + mobile)
get_jsx / get_computed_styles on key nodes — never read sizes/colors from screenshots alone

Read the full file on GitHub · 120 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

6d ago First seen · 120 lines · 33 tokens per session scan A 5b28ab54bcfa

Subscribe to this mod's changes

verify-design is a skill published in the GitHub repository 0xrafasec/ai-workflow (9 stars, last pushed 4d ago), licensed MIT. It adds 33 tokens to every session and 1,653 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

verify-design