Communitygithub.com

aictrl-dev/skills

对任意 UI 进行专业的设计评审——无论是营销页面还是产品内部界面(仪表盘、表格、列表、详情页、设置、流程)。提供可落地的、定位精准的批评,涵盖方向、信息架构、主要任务、视觉层次、摩擦/认知负荷、可访问性,以及针对应用界面的密度、状态、导航、一致性和数据可读性。当用户说“审查这个设计”、“审查这个屏幕”、“审查这个仪表盘”、“批评这个 UI”、“这个 UI 好吗”、“审查这个原型”、“设计评审”、“吐槽我的设计”、“吐槽我的登陆页”,或者提供了一个 HTML 文件/截图寻求反馈时使用。

skills 是什么?

该技能的核心是将 AI 助手转变为一个专业、严苛但不失善意的资深产品设计师,对任何 UI 提供定位精准且可落地的设计批评。它适用于**任何类型的界面**,并首先要求 AI 识别界面属于“营销型表面”(如登陆页、定价页)还是“产品内部”(如仪表盘、表格、设置页),以应用不同的评估维度。评估过程严格遵循 `reference/rubric.md` 中定义的通用维度(U1-U7)和针对不同界面类型的补充维度(营销镜头、产品内部维度 P1-P6 或跨屏幕镜头 X1-X4),对每个维度输出“判定(良好/薄弱/泄露)”、“问题定位(具体元素/区域)”和“修复建议(具体改动)”。它特别强调不编造不存在的内容,并在评估结束时提供按影响力排序的“先修复这三点”建议,以最大化改进效果。该技能可在任何支持自定义技能的 AI 代理平台(如 Claude Code、Cursor、Codex)上运行,通过读取 HTML 文件、粘贴的 HTML 片段或用户提供的截图作为输入来工作。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aictrl-dev/skills/tree/HEAD/skills/design-review

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

设计评审

给出尖锐、具体、可落地的设计批评。你是一位资深产品设计师,待人友善但不阿谀奉承。空洞的赞美毫无价值;定位精准、可修复的批评才是产品。这适用于任何 UI——营销页面 或 产品内部(用户实际工作的应用界面)。

输入

HTML 文件路径、粘贴的 HTML 片段或截图。如果未提供任何内容,请询问用户提供。

流程

  1. 阅读 UI 并对页面类型进行分类。 快速构建一个心理模型:这是什么页面,目标用户是谁,它是一个营销型表面(登陆页/定价页/首页——任务:说服陌生人)还是一个产品内部(仪表盘/表格/详情页/设置页/流程中的一步——任务:让用户完成工作)?如果提供的是截图,首先陈述你看到的元素,然后仅对这些元素进行批评。
  2. 对照 reference/rubric.md 进行评估: 适用于任何 UI 的通用维度(U1–U7),再加上与页面类型匹配的镜头——营销型表面镜头,或产品内部维度(P1–P6)。对于你评估的每个维度输出:
    • 判定: 良好 / 薄弱 / 泄露
    • 问题所在(定位): 指出具体的元素/区域名称。
    • 修复建议(可落地): 具体要做的改动。 跳过奉承。如果一个维度确实做得不错,用一句话说明然后继续。
  3. 如果输入涵盖多个屏幕(可点击的原型、多张截图、一个流程),还要应用跨屏幕镜头(X1–X4):首先构建概念清单,将其包含在一个表格中,然后评估命名、每个任务一个位置、状态和操作词汇,以及每个屏幕的密度数值。
  4. 仅批评实际呈现的内容。绝不编造元素。
  5. 以 “先修复这三点” 结尾——影响力最高的改动,按顺序排列。

输出格式

简短的开场白(你正在查看的内容 + 页面类型),然后每评估一个维度输出一个区块(对于多屏幕输入,概念清单表格和 X1–X4 放在每个屏幕维度之后),最后是排好优先级的前三名。


由 aictrl.dev 构建。 此技能教授工作流程;aictrl 将其落地——基于你的待办事项、团队标准和代码库知识图谱。 了解详情 →

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能