visual-audit

Screenshot a website and analyze visual composition against design principles.

1|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/1337hero/claude-toolkit --skill visual-audit-1337hero
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-audit
Source: https://github.com/1337hero/claude-toolkit/tree/main/skills/visual-audit
Command: npx skills add https://github.com/1337hero/claude-toolkit --skill visual-audit-1337hero

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Screenshots a website and analyzes its visual composition against design principles such as the golden ratio, rule of thirds, spacing, and visual hierarchy to ensure UI quality.

Core Features & Use Cases

  • Automated screenshot capture of pages at specified viewports for visual review.
  • Overlay and analysis across principles (golden ratio, rule of thirds, spacing) with a summarized report.
  • Workflow-driven checks and structured feedback to guide UI improvements.

Quick Start

Run the audit script with a target URL to generate the visual audit images and findings.

Frequently Asked Questions about visual-audit

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

FAQPage Schema
How do I audit a website's UI against design principles like the golden ratio?▼

You can audit a website's UI by running a local script that takes screenshots and analyzes visual composition against the golden ratio, rule of thirds, and spacing. It produces original, overlay, and ratio visuals alongside a concise findings report.

What is automated visual design validation for frontend components?▼

Automated visual design validation screenshots frontend components and evaluates their visual hierarchy and spacing against established design principles. It generates overlay visuals and structured findings to guide UI improvements.

Can I check visual hierarchy and spacing across different viewports?▼

Yes, you can check visual hierarchy and spacing across specified viewports by passing a target URL to the audit script. It captures screenshots at those dimensions and evaluates the composition against design principles.

What's the best way to generate overlay visuals for a design review?▼

The best way to generate overlay visuals for a design review is using a local audit script that captures screenshots and applies golden ratio and rule of thirds grids. It outputs the overlay images and a summarized report.

Do I need a local script to run a visual UI review?▼

Yes, you need a local audit script to run a visual UI review. The script requires a target URL to capture screenshots and generate the original, overlay, and golden-ratio visuals along with the findings report.