Agent Skills
返回列表
🎨

暗色模式

设计多媒体 更新于 2026.08.29

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

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

技能介绍

深色界面设计的复杂性

深色模式不是简单地把浅色界面反色。它涉及 视觉层级重建、色彩心理学 与 排版可读性 的重新平衡。低对比度文本在深色背景上容易糊成一团，错误的配色会让用户眼睛疲劳，信息层级混乱则会让整个界面失去结构感。这些不是靠调色板反转就能解决的问题。

技能如何工作

这个技能以资深视觉设计师的角色介入，围绕四个知识维度展开探索：

  • 视觉原理与 Gestalt 法则 —— 格式塔分组、接近性、相似性在深色环境下的表现差异
  • 色彩心理与配色策略 —— 深色背景下的色彩感知偏移、对比度控制、语义色彩的适配
  • 排版网格与信息层级 —— 字重选择、行高调整、留白策略在深色界面的特殊考量
  • 趋势演变与经典案例 —— 从早期终端界面到现代深色设计系统的演进脉络

执行流程分为六个步骤：理解需求 → 原理拆解（核心原理≥3条）→ 案例解构（2-3个经典案例分析）→ 实操指导（可执行建议≥3条）→ 对比演示（至少1组 Before/After）→ 总结反思。每2-3个知识点会抛出互动问题（如「你觉得这个配色为什么显得廉价？」），保持双向交流而非单向灌输。

适用边界

  • 内容完全由大模型自身知识生成，不调用外部 API 或联网获取资料
  • 每次探索聚焦一个具体切入点，不会一次性覆盖整个知识体系
  • 互动问题不超过3个，避免变成考试式问答
  • 适合探索式学习场景，不适合作为设计系统的自动化生成工具
  • 输出为纯文本，无法生成实际的代码或设计稿

使用场景

  • 前端工程师正在设计数据看板的深色主题，发现图表与背景对比度不足导致数字模糊，需要获取具体的配色调整与字重建议。
  • UI 设计师在为阅读类 App 重构深色模式，用户反馈文字层级不清且易疲劳，需要获取排版网格与信息层级的具体优化策略。
  • 产品经理准备向团队评审新的深色设计规范，缺乏经典行业案例支撑，需要梳理关键案例与设计决策背后的因果逻辑。
  • 独立开发者正在开发一款夜间使用的工具型应用，需要一套完整的深色界面配色和视觉原理解释，以指导代码实现中的颜色变量定义。

适合人员

  • 前端工程师：负责将设计稿转化为深色主题页面，需要具体的颜色变量建议与对比度参数，以解决视觉可读性问题。
  • 视觉设计师：正在为应用重构深色模式，需要建立排版网格和信息层级的优化策略，以降低用户在暗光环境下的视觉疲劳感。
  • 产品经理：计划向设计团队推行新的深色设计规范，需要行业经典案例和趋势演变作为理论支撑，以便在评审中说服开发团队。
  • 独立开发者：正在从零开始开发夜间使用的工具型应用，缺乏专业设计背景，需要通俗易懂的视觉原理和配色策略来指导界面实现。