skills.rest
cogine-ai
cogine-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/cogine-ai/cogine-dev-skillset --skill site-design-audit
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
lucas-flatwhitelucas-flatwhite
43

design-review

Audit live sites for visual inconsistencies and implement fixes with before/after verification.

Community
Advanced
HerbertGaoHerbertGao
1

openspec-verify-change

Verify change implementations against intended outputs using the OpenSpec CLI.

Community
Advanced
diiviikk5diiviikk5

design-consultation

Generate a complete design system and DESIGN.md for products.

Community
Advanced
postpo-cmykpostpo-cmyk

security-audit

Audit project codebases for security vulnerabilities in read-only mode.

Community
Advanced