空状态
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/self-ent-design-empty-state。
技能介绍
空状态不该只是「暂无数据」
列表页没有记录、搜索结果为零、新用户第一次打开仪表盘——这些「没有内容的时刻」几乎出现在每个产品里,却也最容易被随手应付:一张静态插画加一句「暂无数据」,就当作交付。但空状态承担着三重任务:解释当前发生了什么、引导用户下一步做什么、传达产品的性格与品质。处理不当,它会让新用户在最初几秒就流失;处理得当,它能把一次挫败感转化成探索欲。
这个技能如何工作
empty-state 技能把 Agent 设定为一位资深视觉设计师,围绕「没有内容时该如何设计」展开结构化探索,而不是直接丢给你一套模板。
核心流程分为六步:
- 理解需求——先确认你要分析的对象和具体场景,避免泛泛而谈;
- 原理拆解——用通俗语言讲清背后的设计法则(如 Gestalt 原理、色彩心理、信息层级),核心原理不少于 3 条;
- 案例解构——选取 2–3 个经典案例,拆解其设计决策的因果逻辑,而非只晒效果图;
- 实操指导——给出可直接落地的建议、参数或步骤,至少 3 条;
- 对比演示——用 Before/After 对比让设计决策的影响可感知;
- 总结反思——梳理要点,帮你形成自己的判断力。
技能还内置了进度系统:每次探索积累「探索值」,从 🌱 初级探索者逐步解锁到 🌟 专家级,对应从理解基础概念到产出原创观点的不同深度。互动方面,每讲 2–3 个知识点会抛出一个轻量提问(如「你觉得呢?」),并根据你的回应调整深度,避免单向输出。
适用边界与注意点
这个技能存在明确的边界:
- 所有内容由 LLM 自身知识生成,严禁调用外部 API 或联网,因此案例与建议基于训练知识,无法实时验证最新设计趋势;
- 输出为纯文本,视觉方案需要你自己在设计工具中还原;
- 每次探索聚焦一个具体切入点,不追求一次覆盖全部知识维度;
- 互动提问不超过 3 个,目的是引发思考而非考试。
常见误区包括把探索变成单向知识灌输、堆砌术语不做解释、只讲「是什么」不讲「为什么」和「怎么用」。如果觉得方向跑偏,输入「退出」即可结束当前探索。
使用场景
- 列表页无数据时,为“暂无记录”提供符合产品调性的插画与引导文案
- 首次登录的仪表盘缺少数据,设计降低挫败感并引导创建首个项目
- 搜索结果为零,优化空状态页以减少用户流失并给出下一步操作建议
- 过滤条件过严导致内容不显示,补充解释原因与放宽条件的交互入口
适合人员
- 负责B端列表页、仪表盘等界面的UI设计师,需要打磨无数据场景的视觉表达
- 兼任产品设计的前端工程师,在开发阶段要确定空状态的文案与引导逻辑
- 独立开发者,需要为自己的产品补齐搜索无结果等场景的体验细节