Designer:在 Agent 里做 UI 设计稿的 UX 评审

前言

设计稿定稿前,团队里常见两种做法:要么靠设计师口头讲一遍层级和动线,要么在文档里零散记几条修改意见。前者难留痕,后者又缺少统一的评审维度。若你已经在 Cursor、Claude Code 等环境里用 Agent 处理产品文档和代码,把「从 UX 视角看一版界面」也交给 Skill,可以在同一对话里附上截图或说明,拿到结构化反馈。

下面介绍 SkillHub 上的 Designer(坐标 @user_eb189599/ui-design-critique),它是一个基于通用 SKILL.md 格式的社区 Skill,面向 UI 设计稿的评审场景。

这是什么

Designer 是 UI 设计评审助手:从 UX 视角评审设计稿,分析视觉层级、信息架构、认知负荷和情感共鸣,并输出量化评分与可落地的改进建议。

  • 维护方:社区发布者 user_eb189599,来源标注为 community。
  • 分类:SkillHub design-media。
  • 版本:1.0.0。
  • 依赖:标签标明 requires_api_key=false,不额外要求配置 API Key。

官方页面:

  • https://www.skillhub.cn/skills/user_eb189599/ui-design-critique
  • https://api.skillhub.cn/user_eb189599/ui-design-critique

核心功能

依据 SkillHub 简介,启用后 Agent 会在合适语境下按 Skill 指引工作,能力可归纳为:

  1. UX 向的设计稿评审:不局限于「好不好看」,而是从体验角度审视页面。
  2. 四个分析维度:视觉层级、信息架构、认知负荷、情感共鸣。
  3. 可执行的输出:量化评分,以及可落地的改进建议,便于写进迭代清单或评审纪要。

触发话术(官方列出):用户说「帮我看看这个设计」「评审一下这个页面」「这个 UI 怎么样」「设计稿 review」等时,应触发该 Skill。

安装与启用

安装流程以 SkillHub 官方说明为准:先具备 skillhub CLI,再把技能装进当前 Agent 的 skills 目录。

1. 检查或安装 SkillHub CLI

command -v skillhub && skillhub --version

若未安装,可按官方安装文档执行(完整安装或仅 CLI):

# 完整安装(CLI + 默认 Skill,推荐)
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

# 仅安装 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

更完整的优先源与目录说明见:https://skillhub.cn/install/skillhub.md

2. 安装 Designer

SkillHub 页面给出的安装提示为:根据上述安装文档,安装 @user_eb189599/ui-design-critique。

使用 CLI 时,必须用 --dir 指向当前 Agent 的 skills 目录,否则默认会装到 ./skills/,Agent 可能无法识别:

skillhub install user_eb189599/ui-design-critique --dir <skills 目录>

常用客户端的 skills 路径(来自官方安装文档):

环境 skills 目录
Cursor ~/.cursor/skills/
Claude Code ~/.claude/skills/
Codex ~/.codex/skills/ 或项目下的 .agents/skills/

安装后按你所用客户端的要求重启或刷新 Agent,使新 Skill 生效。官方未单独列出 Cursor 与 Codex 在本 Skill 上的行为差异时,以「装对目录 + 重启」为准。

典型用法

本 Skill 没有单独公布脚本式示例;用法即:安装完成后,在对话中附上设计稿(截图、链接或文字描述),并使用官方列出的触发话术之一。

示例(可按你的实际素材替换):

评审一下这个页面:这是新版设置页的 Figma 导出图,主要看信息架构和认知负荷。

或:

这个 UI 怎么样?请从视觉层级和情感共鸣给量化评分和改进建议。

Agent 在 Skill 指引下应围绕上述四个维度组织回答,并给出评分与可执行建议。具体评分尺度与输出模板以 Skill 包内 SKILL.md 为准,安装后可在对应 skills 目录中查看。

适用场景与注意

适合谁

  • 产品、设计、前端在评审前需要一份结构化的 UX 检查清单式反馈。
  • 已在用 Cursor / Claude Code 等工具,希望评审与开发文档留在同一工作流里。

使用上注意

  • 评审质量依赖你提供的稿面信息是否完整(关键状态、文案、尺寸语境等);Skill 不能替代真实用户测试。
  • 社区 Skill,迭代与维护节奏取决于发布者;重大改版前可在 SkillHub 页面核对版本(当前为 1.0.0)。
  • SkillHub 页面统计(截至资料抓取):评分 100000,下载 612,安装 3;数据会随平台更新变化,以页面为准。

结尾

Designer 把「UX 视角的设计稿评审」封装成可安装的 Agent Skill:在你说出评审类话术时,从视觉层级、信息架构、认知负荷、情感共鸣等维度给出量化评分和改进建议,且无需额外 API Key。若你正在 SkillHub 上挑选 design-media 类能力,可从官方页安装 @user_eb189599/ui-design-critique:

https://www.skillhub.cn/skills/user_eb189599/ui-design-critique

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye