前言¶

做界面开发的同行多半遇到过这类情况：需求方说“这里要好看一点”，设计稿没有写清状态，开发阶段才发现漏了异常态和响应式断点，验收时又在文案和可访问性上来回拉扯。问题往往不在代码能力，而在界面规格本身没被定义清楚。下面介绍的这个 Skill，就是把“界面应该长什么样、有哪些状态、怎么验收”这件事系统化，输出可开发、可验收的规格。

这是什么¶

界面设计助手是一个基于通用 SKILL.md 格式的 Skill，坐标 @user_b4da0893/ui-design-guide-cn，版本 1.0.0，由发布者 user_b4da0893 维护，来源为 community（社区）。它面向网页、移动端和后台系统的界面设计与评审，帮助使用者把模糊的界面诉求收敛成具体的设计决策、实现约束和验收清单。

核心功能¶

这个 Skill 覆盖界面规格的几个关键环节，每一步都围绕“能不能落地、能不能验收”来组织。

1、明确用户任务。先把用户在这个界面上要完成什么、为什么完成说清楚，界面结构才有依据。

2、梳理信息层级与页面结构。区分主次信息，给出页面骨架，而不是直接堆组件。

3、定义组件状态。列出组件的正常、悬停、禁用、加载、异常等状态，避免开发阶段临时补。

4、补充交互反馈与文案。说明操作后的反馈方式，以及界面文案的统一要求。

5、给出响应式断点。针对网页、移动端和后台分别说明断点和适配规则。

6、对齐可访问性要求。把可访问性作为明确要求纳入，而非事后附加。

7、输出设计决策、实现约束和验收清单。把前面的结论落成可核对的验收项。

安装与启用¶

该 Skill 通过 SkillHub 目录获取，坐标为 @user_b4da0893/ui-design-guide-cn。安装后在对应的 Agent 客户端（Cursor / Codex CLI / Claude Code 等支持 SKILL.md 的客户端）中启用即可使用。

# 安装坐标
@user_b4da0893/ui-design-guide-cn

需要说明的是，官方资料中未给出逐客户端的专属安装命令，上面的坐标是经核实的获取方式。该 Skill 标签为 requires_api_key=false，启用时无需额外配置 API Key。

典型用法¶

下面给出一个可复现的用法示例：评审一套后台列表页的界面规格。

1、先说明业务目标。例如“运营需要一个商品列表页，支持筛选和批量操作”。

2、再让 Skill 帮助梳理用户任务。明确浏览、筛选、批量操作这三类任务，及其对应的信息需求。

3、然后要求给出页面结构与组件状态。包括表格的空状态、加载状态、筛选后的无结果状态。

4、最后拿到设计决策、实现约束和验收清单。验收清单可直接用于开发自测和需求方验收。

# 以评审后台列表页为例
业务目标：运营需要一个商品列表页，支持筛选和批量操作
要求输出：用户任务 → 信息层级 → 组件状态 → 响应式断点 → 验收清单

适用场景与注意¶

适合做网页、移动端和后台系统的界面设计与评审，尤其是需要把设计结论落成可核对文档的场景。它的价值在于把界面要求说清楚、验收项写全。

需要注意两点。一是它输出的是规格与清单，不能替代真实的视觉设计，也不能自动生成可运行代码。二是官方资料中未提供各客户端的详细安装参数，实际启用方式以 SkillHub 目录和所用客户端的 SKILL.md 支持情况为准。

结尾¶

界面设计助手的价值，在于把“好看、好用”这类模糊诉求，转成有状态、有断点、有验收项的界面规格，减少开发与验收阶段的反复沟通。官方地址：https://api.skillhub.cn/user_b4da0893/ui-design-guide-cn，SkillHub 页面：https://www.skillhub.cn/skills/user_b4da0893/ui-design-guide-cn。