Design reference analysis

Skill jukrap/ai-agent-playbook/skills/design/design-reference-analysis

Use when analyzing screenshots, competitor sites, reference apps, visual samples, or design boards before implementing or refactoring UI.From its SKILL.md

Install

npx -y skills add jukrap/ai-agent-playbook --skill design-reference-analysis

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.3 KB, 214 tokens by cl100k_base, as published. Nobody here has run it

Design Reference Analysis

Use this when reference material should inform design decisions without copying the reference into the product or public docs.

Workflow

Capture the reference scope, source boundary, viewport, state, and why the reference is relevant.
Analyze hierarchy, layout, spacing, typography, color, components, motion cues, content density, and accessibility risks.
Separate reusable principles from distinctive source assets, copy, brand marks, and product-specific interaction patterns.
Convert useful findings into a local brief, design-system handoff, visual QA checklist, or implementation acceptance criteria.
Preserve evidence with portable locators or screenshots when allowed, but keep generated reports under runtime until reviewed.

Reference

Read references/reference-analysis-protocol.md for the analysis sequence and adoption rules.

Read references/design-system-audit-matrix.md when a reference should inform tokens, components, variants, density, or design-system rules.

Read references/visual-evidence-package.md for screenshot, annotation, and before/after evidence requirements.

What ships with it: 3 files

6.1 KB alongside SKILL.md