Communitygithub.com

深度设计 (Deepen Design)

递归地将通用或精致但易被遗忘的着陆页、作品集和产品营销界面转变为具有独特辨识度的设计方向。

深度设计 (Deepen Design) 是什么?

该技能旨在帮助 AI 代理系统地提升设计的深度和独特性,避免产生“好看但平庸”的结果。它通过一个结构化的递归树状流程,从产品核心真实性和品牌定理出发,逐步深入到页面架构、视觉原型和微观细节。技能支持二进制方向分支、成对比较、回溯机制,并配备了严格的深度门控。它适用于 Claude Code、Cursor 等擅长编程和设计决策的代理,帮助用户将任何“无聊、模板化、缺乏品味”的设计迭代为拥有鲜明“设计论点”的作品。最终产出包含探索树、获胜方向、对比截图和功能验证结果,确保设计不仅在视觉上更精致,而且在品牌辨识度和用户认知上更强大。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cubxxw/agent-kit/tree/HEAD/skills/deepen-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

深度设计 (Deepen Design) 是做什么的?

创造更具辨识度的设计,而非仅仅更华丽的设计。

开始工作前请阅读 references/recursive-tree.md。 如果用户对之前的结果不满意,也请阅读 references/failure-patterns.md。

核心区别

设计粒度分为不同层级:

  1. 产品真相与期望信念;
  2. 品牌定理与叙事隐喻;
  3. 页面架构与节奏;
  4. 章节构成与交互;
  5. 组件语言;
  6. 字体、颜色、间距、边框、阴影和动效打磨。

始终按此顺序逐层深入。当层级 1-4 未改变时,更多的元素集、阴影或微交互动效并非更深度的设计。

从渲染的证据开始

对于现有界面:

  1. 保留当前实现和用户所做的更改。
  2. 捕获当前桌面端和移动端的首屏视图。
  3. 检查至少两个后续章节和一次有意义的交互。
  4. 说明客观上运行良好的部分。
  5. 说明为什么页面在五秒钟内令人遗忘。
  6. 区分功能门控与品味判断。

将“仍然平庸”视为设计测试失败。不要为之前的评分辩护,也不要默认延续相同的方向。

构建有界的二叉树

在每个需要改变方向的节点上,精确创建两个实质不同的分支。有效分支会改变视觉论点、信息结构或标志性交互。调色盘调换不算分支。

使用束搜索 (beam search):

  • 展开两个分支;
  • 以最经济保真的方式使两者可见;
  • 进行成对比较;
  • 保留最强的分支和一个可信的挑战者;
  • 下降到下一层级;
  • 当两个子分支都继承了相同弱点时进行回溯。

不要构建所有可能的叶子节点。将深度投入在关键决策上,而非组合数量。

必需的深度门控

深度 0:产品不变量

写下:

  • 访客;
  • 紧张关头;
  • 他们应理解、感受和做的事情;
  • 竞品无法以相同方式诚实声称的产品真相。

在这一点明确之前,不要实施任何设计。

深度 1:两个品牌定理

创建两个具有不同含义的单句定位。每个必须产生:

  • 一个叙事隐喻;
  • 一种空间语法;
  • 一个内容优先级;
  • 一个标志性机制;
  • 一个明确的反例参考:此方向不能与什么相似。

在可行时,搜索三到五个当前相关的参考。提取机制,而非风格拼贴。任何候选者都不得复制任何一个参考的完整视觉特征。

深度 2:两种架构

对于领先的定理,将页面分支成两种不同的浏览旅程。为每个章节定义任务、布局家族、节奏、对比事件、证明和退出动作。

当出现以下情况时,拒绝该架构:

  • 大多数章节重复“大标题 + 段落 + 图片/卡片”;
  • 产品证明与通用的 SaaS 截图可以互换;
  • 去掉 Logo 后,类别或品牌变得无法识别;
  • 唯一的可见区别是调色盘或字体。

深度 3:视觉原型

在完全实施前,渲染两个幸存的方向。优先考虑:

  • 两个首屏原型;
  • 每个方向的一个代表性中间页面部分;
  • 先做桌面端,然后进行移动端折叠检查。

并排比较截图。不要仅凭文字描述来选择。

如果用户有空且两个方向编码了真正不同的品味,提出一个简洁的分岔问题。如果用户要求自主权,则根据证据做出选择并保留挑战者分支。

深度 4:系统和实现

仅在此阶段定义:

  • 字体角色与字号;
  • 调色盘与对比度;
  • 素材语言;
  • 网格、间距与形状规则;
  • 动效语义;
  • 组件原语。

当相关设计系统数据可用时,使用 ui-ux-pro-max。在方向选定后,使用 design-taste-frontend 作为预检检查器。其规则可能会拒绝陈词滥调,但不能选择概念方向。

深度 5:微观细节

仅在方向与架构门控通过后,调整边框、阴影、材质、悬停效果、光学间距和性能。

每个微观变化必须指明其强化的父级决策。如果它不改变层次结构、含义、反馈或材质一致性,则将其移除。

评估正确的东西

保持两个独立的账本。

功能门控

  • 产品真相;
  • 响应式行为;
  • 无障碍性;
  • 性能;
  • 代码和测试健康度。

这些是通过/不通过的限制条件。它们不能证明品味。

设计判断

  • 五秒内理解度;
  • 去掉 Logo 后的可拥有性;
  • 经过一段延迟后的视觉记忆度;
  • 与类别模板的距离;
  • 产品机制的可见性;
  • 整个页面的对比度与节奏;
  • 用户偏好。

使用参考工作流中的成对证据。不要根据自定的评分标准给出绝对的 95/100 或 98/100。如果用户说结果是通用的,那么无论 Lighthouse 分数如何,独特性声明都已失败。

以证据收尾

返回:

  1. 探索过的树结构及回溯点;
  2. 获胜方向及幸存的挑战者分支;
  3. 之前/分支A/分支B 截图或等效的视觉证据;
  4. 按深度排序的三个最大可见变化;
  5. 功能门控结果;
  6. 未解决的品味或产品决策。

不要将微观细节的数量描述为主要成果。成果是一个可被识别的设计论点,即使去掉 Logo 也能存在。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能