site-design-audit

Audit live-site design quality without modifying source code.

3|1|Updated Mar 17, 2026

Search Tags:#typography #design-system #visual-qa #ai-slop #design-audit #live-site

Ready to run

npx skills add https://github.com/cogine-ai/cogine-dev-skillset --skill site-design-audit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: site-design-audit
Source: https://github.com/cogine-ai/cogine-dev-skillset/tree/main/skills/site-design-audit
Command: npx skills add https://github.com/cogine-ai/cogine-dev-skillset --skill site-design-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables teams to assess the live site’s design quality without touching source code, catching visual issues before they reach users.

Core Features & Use Cases

Visual QA & typography review: verify typography, spacing, color, and overall visual coherence across pages.
Design-system inference: extract an implied design system from rendered UI and propose a DESIGN.md baseline.
AI slop detection: identify AI-generated look that lacks intentional design craft and propose improvements.
Render-focused audit: evaluate hierarchy, spacing, contrast, and responsive behavior on target URLs.

Quick Start

Provide a live-site design audit by entering a target URL and running the site-design-audit command.

Frequently Asked Questions about site-design-audit

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

FAQPage Schema

How do I perform a visual QA audit on a live site without changing the code?▼

Performing a live-site design audit requires no code changes; simply provide a target URL and trigger the audit command to evaluate the rendered UI. The tool reports on typography, spacing, hierarchy, and visual coherence across pages.

What is AI slop in UI design and how do I detect it?▼

AI slop is AI-generated UI lacking intentional design craft. Detect it by running a design audit on your live site URL, which identifies these visual shortcomings and proposes specific improvements to restore design quality.

Can I extract a design system from an existing website?▼

Yes, you can extract an implied design system from an existing website by running a live-site audit. The tool analyzes the rendered UI to infer typography and spacing rules, proposing a DESIGN.md baseline for reference.

Does live-site design audit work for checking responsive behavior and contrast?▼

Yes, live-site design audit works for checking responsive behavior and contrast. It performs a render-focused evaluation of visual hierarchy, spacing, and color contrast directly on target URLs without accessing source code.

What is the best way to audit typography and spacing on a deployed webpage?▼

The best way to audit typography and spacing on a deployed webpage is to run a render-focused design audit. This evaluates the live UI without requiring code access, providing structured observations and annotated screenshots for improvements.