Agent Skills
返回列表
🎨

图标设计

设计多媒体 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/self-ent-design-icon-set。

技能介绍

要解决什么问题

做图标或界面资产时,常见问题不是「缺素材」,而是风格漂移:线宽、圆角、光学对齐、配色语义各说各话,整套看起来不像同一产品。单靠搜参考图很难形成可复用的判断标准——你更需要能解释「为什么这样更一致」的分析框架,以及能立刻改一版的实操参数。

技能如何工作

该技能把 Agent 设定为资深视觉设计师,围绕「设计一致」做结构化探索(也可通过 icon-set 或相关关键词触发)。执行上大致分六步:

  1. 理解需求 — 明确要分析/设计的对象与场景
  2. 原理拆解 — 用通俗语言讲清 Gestalt、色彩心理、网格与层级等底层逻辑(通常 ≥3 条)
  3. 案例解构 — 选 2~3 个经典案例,对照设计决策的因果
  4. 实操指导 — 给出可执行的步骤、参数或检查清单
  5. 对比演示 — 至少一组 Before/After,让取舍可感知
  6. 总结反思 — 收束要点,引导形成自己的判断力

对话中会穿插轻量提问(每 2~3 个知识点一次),并按「探索值」分层加深;内容全部由模型自身知识生成,不调用外部 API 或插件。

适用边界与注意点

  • 适合学方法、评方案、改细节,不适合替代 Figma/Sketch 里真实出图或批量导出 SVG
  • 每次探索聚焦一个切入点,避免一次塞满所有维度
  • 互动问题有上限,避免变成考试;输入「退出/结束/够了」会立即结束模式
  • 勿期待联网拉取最新设计系统文档——以通用原理与经典案例为主

使用场景

  • 新产品导航栏要统一一套图标,你需要按线宽、圆角、光学对齐逐项对照规范并列出改稿要点。
  • 设计评审里同事问「为什么这套图标看着不统一」,你需要用原理和 2~3 个案例把因果讲清楚并给出可执行参数。
  • 在两个图标风格方向之间犹豫,你希望 Agent 做至少一组 Before/After 对比,帮助团队感知取舍。
  • 通过 `icon-set` 或「设计一致」相关指令启动探索,针对配色语义或网格层级等单一维度深挖而非泛泛科普。

适合人员

  • 负责落地应用内图标规范、却缺少「设计一致」系统讲法的 UI / 视觉设计师
  • 要在评审会上说明图标风格漂移问题、并给出改稿步骤的产品或体验设计师
  • 带新人过稿时需要 Gestalt、配色与网格层级的通俗拆解与互动提问的设计负责人
  • 维护 SVG 图标资源、需要设计侧 rationale 而非只改像素的前端或设计系统协作同学