OpenSkillIndex← back to search
claude-code

TapCanvas aesthetic-audit

商业级视觉资产与网页(详情页/落地页)的审美与UX视觉审查：输出P0/P1/P2问题清单、可落地的样式tokens与改稿建议；可结合截图、URL与源码进行定位与修改。

install
source · Clone the upstream repo
git clone https://github.com/anymouschina/TapCanvas
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/anymouschina/TapCanvas "$T" && mkdir -p ~/.claude/skills && cp -r "$T/apps/agents-cli/skills/aesthetic-audit" ~/.claude/skills/anymouschina-tapcanvas-aesthetic-audit && rm -rf "$T"
manifest: apps/agents-cli/skills/aesthetic-audit/SKILL.md
source content

Aesthetic Audit (Commercial)

该 skill 用于“审美判断”在商业项目中的落地：

  • 不是泛泛而谈“好不好看”，而是将审美转化为可执行的改动：信息层级、栅格与间距系统、字体层级、色彩与对比度、组件一致性、CTA 可见性、移动端适配、信任要素。
  • 默认以 转化/可用性/品牌一致性/可维护性 为目标约束。

适用输入：

  • 视觉资产图：主视觉/卖点图/细节图/规格图（单张或整套）
  • 网页：URL（可本地/线上）或桌面/移动端截图
  • 源码：页面路由 + 组件/样式文件（React/Next/Vue/Vite/Tailwind/SCSS/CSS-in-JS 等均可）

输出交付（强制结构）：

  1. 一句话结论（页面意图 + 当前最大问题）
  2. P0/P1/P2 问题清单（现象-影响-原因假设-修改建议）
  3. 样式 tokens（可落地的字体/间距/色彩/圆角/阴影/栅格）
  4. Quick wins（3-7 条不大改结构、立刻提升质感/转化的改法）
  5. 若提供源码：改动建议落地到文件路径（或直接修改）+ 验证步骤

审查原则 (Commercial Aesthetics)

优先级从高到低：

  • 清晰度：3 秒内用户能否看懂“卖什么/给谁/最大利益/下一步做什么”
  • 层级：标题/副标题/正文/注释/参数/CTA 的视觉权重是否正确
  • 一致性：栅格、间距、字体、颜色、圆角、阴影、icon、图片色调是否成体系
  • 信任：证据链是否完整（对比/数据/口碑/保障/资质/售后）且表达克制
  • 效率：减少认知负担；移动端首屏与滚动节奏合理
  • 可访问性：对比度、字号、点击热区、键盘/读屏基础

反模式（看到就优先修）：

  • 同一层级文本用不同字号/字重/颜色
  • 间距无规律（到处是 17/23/29 这类魔法数）
  • 过多强调手段叠加（颜色+加粗+描边+阴影+动画）
  • CTA 不突出或被装饰/次要信息抢权重
  • 证据表达过度“像P图/像假数据”，导致信任下降

审查流程

A. 网页（有 URL）

  1. 先获取 桌面/移动 的首屏与全页视图
  2. 只基于渲染结果做第一轮审查（避免被实现细节带偏）
  3. 再结合源码定位：组件边界、布局系统、tokens来源、断点策略

推荐视口：

  • Desktop: 1440x900 (fold) + full page
  • Mobile: 390x844 (fold) + full page

B. 只有截图/图片

  1. 按“信息层级/对齐栅格/间距节奏/字体/颜色/证据链/移动端”逐项检查
  2. 输出 tokens + Quick wins
  3. 如需落地，要求用户提供对应页面/组件路径

C. 有源码（需要落地改）

  1. 先找页面入口：route -> page component -> section components
  2. 找样式入口：global css/tailwind config/theme tokens/component css
  3. 小步改：先建立 tokens，再做版式/组件一致性
  4. 验证：桌面/移动、长文案/短文案、极端数据、加载状态

输出模板 (Must Follow)

1) 一句话结论

  • 这页在卖/表达：...
  • 当前最大问题：...（一句话）

2) P0 / P1 / P2

每条必须用同一格式：

  • 现象：
  • 影响：
  • 原因假设：
  • 修改建议（可执行）：

P0：直接影响“看懂/信任/CTA/移动端可用性” P1：影响质感、一致性、阅读效率 P2：细节优化（微交互、细节对齐、边界情况）

3) Tokens 建议（落地优先）

给出一套可直接映射到 CSS variables / Tailwind theme 的 tokens：

  • Typography: H1/H2/H3/Body/Caption 的 font-size, line-height, font-weight
  • Spacing scale: 4/8/12/16/24/32/48/64/96 (不要碎值)
  • Grid: max width, gutter, breakpoints
  • Color: bg/surface/text/muted/border/brand/accent/success/warn/danger
  • Radius: 8/12/16
  • Shadow: 1-2 档（轻）

4) Quick wins

  • 3-7 条，必须是“不大改结构但效果立竿见影”的改法

5) 落地到代码（若有）

  • 修改哪些文件：
    path/to/file
  • 关键改动点：
  • 如何验证：命令 + 检查点（桌面/移动/断点/状态）

视觉资产图专用检查清单

  • 主体占比：70-85%（主图常用）
  • 文案长度：标题 <= 12-16 字；副文案 <= 24 字；避免长段
  • 证据表达：参数/测试/认证需“可核验”；图表 2 色 + 1 强调色
  • 风格一致：光向、阴影、反射、色温、背景材质统一
  • 留白：边距一致（不贴边），避免四周塞满字

工具使用建议

  • 优先：用户直接给截图/图片（信息最确定）
  • 若只有 URL：
    • 可用 Playwright CLI 获取截图（无头浏览器）
    • 然后再做审查

Playwright 截图示例（仅作参考）：

npx -y playwright screenshot --browser chromium --full-page \
  "http://localhost:5173/?projectId=..." artifacts/audit/desktop-full.png

npx -y playwright screenshot --browser chromium --viewport-size=390,844 --full-page \
  "http://localhost:5173/?projectId=..." artifacts/audit/mobile-full.png

注意：视觉判断不要臆测未出现的品牌/资质/数据；不确定要标注。