Agent Skills
返回列表
🎨

弹窗对话框

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/self-ent-design-modal-dialog

技能介绍

为什么需要这个技能

设计知识领域有一个尴尬的现实：你很容易找到一堆讲"Gestalt 法则""色彩心理""排版网格"的文章，但读完之后往往只能复述几个名词，面对真实设计决策时依然无从下手。问题出在两个方面——内容呈现方式把知识压缩成了单向灌输，缺少互动和个性化的引导；而专业术语的堆砌又让初学者难以建立"为什么这样做"和"具体怎么用"之间的连接。

技能如何工作

这个技能让 Agent 扮演一位资深视觉设计师的角色，围绕四个知识维度展开结构化探索：视觉原理与 Gestalt 法则、色彩心理与配色策略、排版网格与信息层级、趋势演变与经典案例。

每次探索遵循一条固定的流程线：

  1. 理解需求 —— 确认要分析的具体对象和目标场景
  2. 原理拆解 —— 用通俗语言解释背后的设计原理，输出 ≥3 条核心原理
  3. 案例解构 —— 选取 2-3 个经典案例，拆解其设计决策的因果逻辑
  4. 实操指导 —— 给出可执行的设计建议或参数，≥3 条
  5. 对比演示 —— 展示好/坏或 Before/After 对比，让设计决策的影响可感知
  6. 总结反思 —— 梳理要点，引导用户形成自己的判断力

互动是这套流程的核心。每 2-3 个知识点后，Agent 会抛出一个轻量提问（如"你觉得呢？""猜猜看？"），根据用户回应动态调整深度和方向。同时，每次探索会积累"探索值"，从 🌱 初级探索者逐步解锁到 🌟 专家级，鼓励持续深入。

适用边界与注意点

  • 纯文本输出，零外部依赖：不调用任何外部 API、插件或联网，全部内容由 LLM 自身知识生成
  • 聚焦单点：每次探索聚焦一个具体切入点，不贪多
  • 互动克制：互动问题不超过 3 个，避免变成考试
  • 触发方式：需要用户提到与"重要信息"相关的关键词或输入指令 modal-dialog 才能启动
  • 随时退出：任意输入「退出」「结束」「够了」即可终止，无需遵循特定流程

使用场景

  • 在编写App界面视觉规范时，需要向团队解释Gestalt法则如何指导元素分组与信息层级划分。
  • 在优化电商App结算页时，需要运用色彩心理学原理找出降低用户焦虑感并提升转化率的配色策略。
  • 在重构信息密集型的产品介绍PPT时，需要拆解经典版式案例，提取网格对齐与留白控制的实操参数。
  • 在准备设计评审汇报时，需要通过Before/After对比演示，向开发团队清晰说明排版优化决策背后的因果逻辑。

适合人员

  • 刚转行做UI设计师的新人，希望在缺乏导师时，通过结构化对话快速建立设计原理与实操落地之间的连接。
  • 负责输出设计规范的视觉设计师，需要一套逻辑严密的推导工具，以便在跨部门沟通中说服非设计背景的同事。
  • 经常需要评审设计稿的前端开发工程师，希望理解视觉决策背后的底层逻辑，从而更准确地还原界面细节。
  • 独立开发产品的全栈开发者，在没有专职设计师的情况下，需要获取可直接应用的排版与配色参数来提升界面质感。