skills.rest
Analog-Labs
Analog-LabsOFFICIAL
Explore all skills by this author →
Website𝕏@OneAnalogGitHub

design-review

Review live websites for visual design gaps and generate annotated fix recommendations.

Updated Feb 28, 2026
Search Tags:#typography#color#design-system#spacing#design-review#visual-audit
One-click install
npx skills add https://github.com/Analog-Labs/pixelport-launchpad --skill design-review-analog-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Analog-Labs/pixelport-launchpad/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/Analog-Labs/pixelport-launchpad --skill design-review-analog-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design-review workflow detects visual inconsistencies, spacing issues, typographic misalignments, and interaction glitches on live sites, then guides concrete fixes to achieve pixel-perfect polish.

Core Features & Use Cases

  • Systematic visual audit across pages and breakpoints, highlighting typography, color, spacing, and interaction gaps.
  • Generate annotated screenshots, before/after comparisons, and actionable fix recommendations to align with design tokens and design-system docs.
  • Use on new features or refactors (diff-aware mode on feature branches) to audit only the affected areas and verify changes against the project's design standards.

Quick Start

Navigate to a live site URL and run the design-review workflow to audit visuals and generate fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform a visual design audit on a live website?▼

To conduct a visual design audit, browser automation captures live site screenshots across breakpoints, calibrates elements against design tokens, and documents typography, spacing, and color inconsistencies with annotated fix recommendations.

Can I review visual design changes only on a feature branch?▼

Yes, diff-aware mode targets audits specifically to affected areas on feature branches, verifying visual changes against your project's design standards without reviewing the entire site.

What is the best way to identify typography and spacing gaps in a web interface?▼

The best way to identify typography and spacing gaps is systematic visual auditing, which compares live interface screenshots against design-system calibration metrics and generates annotated recommendations to correct misalignments.

Does design review work with existing design tokens and system documentation?▼

Yes, visual audits calibrate captured live screenshots against existing design tokens and design-system documentation to highlight visual inconsistencies and align implementations with your defined standards.

How do I generate before and after screenshots for visual regression fixes?▼

You generate before and after screenshots for visual regression fixes by running an automated visual audit that captures the current state, identifies interaction glitches, and outputs annotated comparisons demonstrating concrete corrections.

Related Skills

Explore More Design & Creative Skills→
GLaDO8GLaDO8

unified-web-design

Review web UI accessibility and visual design against WCAG 2.1 guidelines.

Community
Basic
SHUAXINDIARYSHUAXINDIARY
4

polish

Fix alignment, spacing, consistency, and micro-details in UI designs before shipping.

Community
Advanced
launchapp-devlaunchapp-dev
38

interface-design

Define typography, color tokens, spacing, and navigation for dashboard interfaces.

Official
Advanced
ShmurdocShmurdoc

design-review

Automates UI visual audits and fixes identified issues in source code.

Community
Advanced