留白艺术
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/self-ent-design-whitespace-use
技能介绍
要解决的问题
页面“看着不舒服”,往往不是缺素材、缺特效,而是留白出了问题:
- 不知道行距、字距、段落间距应该给多少,只能反复拖数值“凭感觉调”;
- 只知道竞品“很高级”,却说不清它在哪些位置做了减法、减了多少;
- 设计原则散落在各处,缺少一套可复用的分析框架,每次从零开始;
- 改完一版后缺乏判断标准,不确定“再删一点”是更好还是更差。
技能如何工作
留白艺术 将 Agent 设定为资深视觉设计师角色,围绕“少即是多”展开探索。触发方式为使用指令 whitespace-use,或直接提到“少即是多”相关的关键词;Agent 空闲时也可主动发起探索。
核心能力
按四个维度组织知识框架:
- 视觉原理与 Gestalt 法则 —— 该领域的基础概念、核心原理与关键术语
- 色彩心理与配色策略 —— 具体案例、代表人物、作品、现象的深度分析
- 排版网格与信息层级 —— 技术细节、方法论与实操要点
- 趋势演变与经典案例 —— 文化背景、发展趋势与日常生活的连接
关键步骤
探索按六个阶段推进,每个阶段都有明确的完成标志:
- 理解需求 —— 确认要分析的设计对象和目标场景
- 原理拆解 —— 用通俗语言解释背后的设计原理和美学法则,建立分析框架(至少 3 条核心原理)
- 案例解构 —— 选取 2–3 个经典案例,拆解其设计决策的因果逻辑
- 实操指导 —— 给出可执行的设计建议、参数或步骤,让用户能立即应用(至少 3 条)
- 对比演示 —— 展示好/坏对比或 Before/After,让设计决策的影响可感知
- 总结反思 —— 梳理设计要点,引导用户形成自己的判断力
互动方面,每 2–3 个知识点抛出一个轻量提问,例如“你觉得呢?”“猜猜看?”,并据此调整探索深度。探索会累积“探索值”,从 🌱 初级探索者(基础概念)逐步解锁到 🌟 专家级(产出原创观点)。
适用边界
- 技能严禁调用任何外部 API 或联网,全部内容由 LLM 自身知识生成,属纯文本输出,零外部依赖。
- 设计建议基于通用认知,无法替代对具体产品、真实用户数据的实测。
- 互动问题不超过 3 个,避免互动变成考试。
- 每次探索聚焦一个具体切入点,不贪多。
- 退出方式为任意输入
退出/结束/够了,立即停止探索。
使用场景
- 设计移动端首页时,需拆解留白与信息层级的关联,确定导航栏与内容区的间距参数
- 分析竞品电商详情页的高级感来源,拆解其图文间距、按钮留白的设计逻辑
- 优化现有产品落地页的留白问题,通过Before/After对比调整段落间距提升可读性
- 学习Gestalt法则在界面设计中的应用,拆解卡片布局的留白对视觉分组的影响
适合人员
- 界面设计师,需要快速确定页面留白参数,提升设计的视觉舒适度
- 产品经理,需要理解留白对用户体验的影响,推动设计优化落地
- 独立开发者,需要掌握基础的留白设计原理,独立完成产品界面设计
- 设计专业学生,需要通过案例拆解学习设计原理,提升实践能力