aesthetic-audit

Audit commercial visuals and webpages for aesthetic quality and usability.

523|125|Updated Nov 11, 2025
One-click install
npx skills add https://github.com/anymouschina/TapCanvas --skill aesthetic-audit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: aesthetic-audit
Source: https://github.com/anymouschina/TapCanvas/tree/main/apps/agents-cli/skills/aesthetic-audit
Command: npx skills add https://github.com/anymouschina/TapCanvas --skill aesthetic-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

商业级视觉资产与网页的审美与 UX 视觉审查。将审美判断转化为可执行的改动清单,帮助提高转化、信任与一致性,同时降低维护成本。

Core Features & Use Cases

  • 输出 P0/P1/P2 问题清单,聚焦信息层级、栅格与间距、字体层级、色彩与对比度、组件一致性、CTA 可见性、移动端适配等。
  • 生成可落地的 design tokens(字体、间距、颜色、圆角、阴影、栅格),以提升团队对视觉系统的统一性。
  • 提供改稿建议、落地修改路径、以及在真实页面中的验证步骤,支持快速迭代与跨职能协作。
  • 支持输入来源:视觉资产图、URL/网页截图、以及源码定位。

Quick Start

Upload a homepage URL or visual assets and receive a structured aesthetic audit with design tokens and actionable edits.

Frequently Asked Questions about aesthetic-audit

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

FAQPage Schema
How do I run a visual audit on a webpage to improve conversion?

To run a visual audit for conversion, submit a URL or screenshot to receive a structured report of P0/P1/P2 issues. The audit evaluates information hierarchy, typography, color contrast, CTA visibility, and mobile adaptation to provide actionable modification guidance.

Can I generate design tokens from an existing website screenshot?

Yes, you can generate design tokens from a website screenshot. The audit extracts structured style tokens for fonts, spacing, colors, corner radii, shadows, and grids to establish unified visual system standards across your team.

What is a P0/P1/P2 UX review and how does it prioritize design fixes?

A P0/P1/P2 UX review prioritizes design fixes by severity. P0 addresses critical layout and usability issues, P1 covers component consistency and spacing, and P2 targets minor visual refinements, ensuring your team tackles the highest conversion-impacting problems first.

Does the aesthetic audit work with source code or only visual assets?

The aesthetic audit works with both source code and visual assets. You can input homepage URLs, screenshots, or source code to assess layouts, typography, color, spacing, and branding consistency across different views and devices.

What's the best way to fix branding consistency issues across multiple views?

The best way to fix branding consistency issues is to apply generated design tokens across all views. The audit identifies inconsistencies and provides concrete modification paths and validation steps to ensure visual uniformity during cross-functional iteration.

When do I need an aesthetic audit for my web design?

You need an aesthetic audit when your webpage suffers from poor usability, inconsistent components, or low conversion rates. It translates subjective aesthetic judgments into actionable edit lists and style tokens to reduce maintenance costs and build user trust.