Agent Skills
返回列表
🎨

空状态

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 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设计师,需要打磨无数据场景的视觉表达
  • 兼任产品设计的前端工程师,在开发阶段要确定空状态的文案与引导逻辑
  • 独立开发者,需要为自己的产品补齐搜索无结果等场景的体验细节