即刻App年轻人的同好社区
下载
置顶
# 如何用Agent做好产品设计
深度使用Coding Agent大半年了，是时候总结下在产品设计层面积累的经验，如果能对大家有帮助就太好了，本文纯人工写作，无任何AI参与。
如果你一直在关注各位设计师和开发者分享的设计经验，会发现核心思想非常类似，并没有脱离互联网时代产品设计与软件工程的「金科玉律」，本文亦如是。闲言少叙，下面开始正式内容。
## 你需要知道什么是好的产品设计
看着是一句废话，但这才是最核心的问题，方向错误，再怎么努力都是浪费。
比如Claude标志性的暖色背景+衬线字体，在去年还可以称之为好看，但现在已经成为没有认真打磨UI的典型特征了，GPT喜欢用的绿色表单风格也是一样。
解决这个问题唯一的办法就是多看真正的好东西，尽量找到信息源头，避免二手信息。
## 好看是手段，不一定是目的
设计不是艺术创作，核心是解决问题、满足需求、达成目标，好看既不是充分条件，也不是必要条件；好看是手段，而不一定是目的。
假设你要做一个网页版的IP质量检测工具，用户的需求是打开之后能快速看到IP分析结果，而你为了好看给界面加了很多高光、阴影、材质、three.js模型……网页加载速度被严重拖慢，产品体验被严重干扰——这就是设计方案与需求脱节了。
## 使用HTML文件作为设计稿的载体
如果你对设计的要求极高，那仍然需要使用Figma、Paper一类的专业工具，但在绝大多数情况下HTML文件已是更好的选择，不管是前端项目还是原生项目。
HTML对Agent的友好程度可能仅次于Markdown，修改效率极高，不管是做样式还是交互都很方便，还能被各种Agent客户端内置的浏览器打开、批注、截图……想做什么就做什么。
## 使用组件库，不要什么都从零开始
引入合适的组件库能节省大量的时间和成本，基于个人偏好和项目完成度选择即可，常见的有Shadcn UI、Hero UI、Base UI等。
## 创建设计系统
这是本篇文章最核心的技巧，设计系统的目的就是建立起Agent处理页面设计时的宪法，把色彩、字体、排版、间距、阴影、组件、布局、交互、文案风格等内容全部定清楚，收归到一个统一的HTML文件或文件夹中。
在项目开始前做好设计系统，能大量节省调整各种琐碎细节的时间。
我每次在做完新模块之后，都会习惯性地问一句是否符合当前设计系统的规范。
## 多做减法
目前的模型普遍有添加大量细节的倾向，要大胆删除那些不必要的东西。完成一轮调整后，还可以让Agent提取这些决策体现出来的设计原则并将其补充到设计系统中。
## 在有限范围内多做对比
如果你对某个模块的设计感到困惑，可以让Agent多做几个方案来对比，但一定要在单独的HTML文件中进行，不要直接修改项目代码。
## 不要迷信One Shot，耐心打磨
不要迷信社交网络上各种一段Prompt就搞定的炫酷案例，你准备工作做得越好，想得越清楚，项目推进速度就越快，至于是一轮搞定、两轮搞定还是十轮搞定，并不重要。
深度使用Coding Agent大半年了，是时候总结下在产品设计层面积累的经验，如果能对大家有帮助就太好了，本文纯人工写作，无任何AI参与。
如果你一直在关注各位设计师和开发者分享的设计经验，会发现核心思想非常类似，并没有脱离互联网时代产品设计与软件工程的「金科玉律」，本文亦如是。闲言少叙，下面开始正式内容。
## 你需要知道什么是好的产品设计
看着是一句废话，但这才是最核心的问题，方向错误，再怎么努力都是浪费。
比如Claude标志性的暖色背景+衬线字体，在去年还可以称之为好看，但现在已经成为没有认真打磨UI的典型特征了，GPT喜欢用的绿色表单风格也是一样。
解决这个问题唯一的办法就是多看真正的好东西，尽量找到信息源头，避免二手信息。
## 好看是手段，不一定是目的
设计不是艺术创作，核心是解决问题、满足需求、达成目标，好看既不是充分条件，也不是必要条件；好看是手段，而不一定是目的。
假设你要做一个网页版的IP质量检测工具，用户的需求是打开之后能快速看到IP分析结果，而你为了好看给界面加了很多高光、阴影、材质、three.js模型……网页加载速度被严重拖慢，产品体验被严重干扰——这就是设计方案与需求脱节了。
## 使用HTML文件作为设计稿的载体
如果你对设计的要求极高，那仍然需要使用Figma、Paper一类的专业工具，但在绝大多数情况下HTML文件已是更好的选择，不管是前端项目还是原生项目。
HTML对Agent的友好程度可能仅次于Markdown，修改效率极高，不管是做样式还是交互都很方便，还能被各种Agent客户端内置的浏览器打开、批注、截图……想做什么就做什么。
## 使用组件库，不要什么都从零开始
引入合适的组件库能节省大量的时间和成本，基于个人偏好和项目完成度选择即可，常见的有Shadcn UI、Hero UI、Base UI等。
## 创建设计系统
这是本篇文章最核心的技巧，设计系统的目的就是建立起Agent处理页面设计时的宪法，把色彩、字体、排版、间距、阴影、组件、布局、交互、文案风格等内容全部定清楚，收归到一个统一的HTML文件或文件夹中。
在项目开始前做好设计系统，能大量节省调整各种琐碎细节的时间。
我每次在做完新模块之后，都会习惯性地问一句是否符合当前设计系统的规范。
## 多做减法
目前的模型普遍有添加大量细节的倾向，要大胆删除那些不必要的东西。完成一轮调整后，还可以让Agent提取这些决策体现出来的设计原则并将其补充到设计系统中。
## 在有限范围内多做对比
如果你对某个模块的设计感到困惑，可以让Agent多做几个方案来对比，但一定要在单独的HTML文件中进行，不要直接修改项目代码。
## 不要迷信One Shot，耐心打磨
不要迷信社交网络上各种一段Prompt就搞定的炫酷案例，你准备工作做得越好，想得越清楚，项目推进速度就越快，至于是一轮搞定、两轮搞定还是十轮搞定，并不重要。
15 13
18 00
Grok Bot的方案已经如此直接且暴力，中外KOL一起上，也没给出什么匹配其订阅价格的有效案例。
在Grok Bot的VPS上登录Slack相比于直接在Slack连接各种Agent会更好吗？不，会更贵。
在Grok Bot的VPS上登录Slack相比于直接在Slack连接各种Agent会更好吗？不，会更贵。
3 90
ChatGPT Work+Codex已经可以完成很多之前要靠各种Claw才能完成的奇奇怪怪的需求了，很爽，分享给大家。
首先得搞清楚ChatGPT Work和Codex的关系，绝大部分人都会懵，包括我。
Codex大家都知道的，关键点在于它是「基于本地」的代理，配置好权限的话天然能拿到设备中的各种信息，也能查询和调用Codex存储在本地的会话，但如果你想随时随地访问的话，得通过Remote功能才能实现。
ChatGPT Work则是具有云端能力的Codex，如果你是在网页端和手机端使用，则默认在云端运行，无法访问你的设备文件，但会话会在各端同步；如果你在桌面客户端使用，则可以主动选择是运行本地版本还是云端版本，本地版本的会话只会保存在本地，无法同步，与Codex一致。
看到这，肯定会有朋友想说：既然ChatGPT Work是能力更强的Codex，那Codex是不是没有存在的必要了，不然也是徒增理解成本？
是的，OpenAI团队本来也是这样想的，在ChatGPT大一统版本刚推出的时候拿掉了Codex的品牌，但这导致汹涌了的负面反馈，于是又加了回来。
时至今日，Codex基本可以认为是ChatGPT Work桌面版的一个「皮肤」了，UI侧重点不一样，能力并无差异。
好了，梳理完毕，为了方便大家区分，在接下来的内容中，我使用的ChatGPT Work是指云端版本，Codex是指在电脑上运行的本地版本。
这次要分享的具体案例是：Agent辅助处理信息的待办清单
我平时依靠滴答清单管理待办，会把想到的所有东西都丢进去，其中有很多都是很原始、待验证的灵感。
记录时很爽，但后续的整理和推进很痛苦，我的Inbox里面最多的时候可能堆积了上百条待办，一些很好的想法因为拖延而被浪费掉了。
我首先做了一个尝试，在ChatGPT手机版上置顶了一个Work对话，接入滴答清单的MCP，然后向ChatGPT提出要求，明确这是一个专门用来处理待办的对话，我发进来的所有内容都要默认为待办信息，需要自动整理然后存入滴答清单。
ChatGPT Android版还有一个功能是可以把特定对话保存到桌面，所以现在每当我想到什么，点开桌面上的图标，用语音输入法一通乱说就可以了，不需要我再手动整理待办信息，一两分钟之后新的待办会自动出现在滴答清单的对应列表，干干净净，清清楚楚。
输入侧的问题解决后，我开始思考能不能让ChatGPT帮我做更多推进层面的事情。在之前，当我想要推进滴答清单其中的某个想法时，我需要先打开软件切换页面把这个想法找到，丢给Agent进行可行性验证，沟通几轮，再决定是否要推进。
那能不能让ChatGPT在这之前先做一轮可行性调研呢？
当然可以。
最自然的思路显然是在滴答清单的MCP之外，再做一个云端的调度服务，使用Codex SDK完成各种调研任务。但这方案太重了，只服务我一个人的话非常不划算。
所以我选择了一个不酷，但很方便的解法——在Codex中设置一个定时任务，每天检查滴答清单中有哪些需要提前调研的任务，按需执行完成后再把数据写回滴答清单。
此时新问题又出现了，滴答清单里面混杂了很多11点开会、周末看电影等指向明确且内容简单的任务，这些显然不需要做什么调研，那Codex如何准确区分它们呢？
有赖于滴答清单的MCP非常完善，所以对应的解决方案也很简单：引入一个标签规则，需要调研但还没有完成调研的打上#ai待处理；已经完成调研的打上#ai已调研。
至此，整个链路设计完成了，输入侧只管输入，不关心后续执行；调研侧只管调研，不关心数据是怎么来的，两个环节充分解耦，互不影响。
在我自己的设备上运行调研任务还有一个巨大的优势——Codex可以直接拿到我所有会话的信息，我做过什么、在做什么、偏好什么全都非常清楚。
还是那句话：这样的需求当然有很多种实现方案，整个思路放在WorkBuddy等产品中也是可行的，喜欢哪个用哪个。
另外滴答清单国内版和国际版数据是隔离的，配置MCP时需要区分一下。
最后附上两段提示词样例
```
# ChatGPT Work侧 AI 预处理 Prompt
每次创建滴答清单任务时，在完成正常的任务解析、标题整理、项目选择、日期和提醒判断之后，再判断该任务是否值得由 AI 提前处理。
如果任务明显会受益于以下一种或多种行为：
资料调研
技术调研
产品研究
竞品研究
实现方案研究
方案比较
可行性分析
决策辅助
背景资料整理
则在创建任务时添加标签：
#AI待处理
以下任务通常不添加：
单纯提醒
日程事项
简单购物
已明确知道执行方式的动作
不需要进一步信息或分析的任务
判断时优先利用当前对话上下文，而不是仅根据最终任务标题。
如果用户明确使用“研究一下”“看看怎么做”“比较一下”“分析一下”“调研一下”“找找方案”等表达，则默认认为值得 AI 预处理，除非明显只是一个非常简单的问题。
不要为了保险而给大量普通任务添加 #AI待处理。
只有 AI 预处理能够明显降低未来执行成本时才添加。
```
```
# Codex Automation 核心 Prompt
你是我的「滴答清单 AI Todo Processor」。
你连接的是滴答清单中国版，而不是 TickTick 国际版。所有任务读取、搜索、标签操作和任务更新都必须通过当前配置的滴答清单 MCP 完成。
每天运行时，检查滴答清单中所有带有 #AI待处理 标签、尚未带有 #AI已调研 标签的未完成任务。
你的目标不是总结 Todo，而是提前完成能够降低我未来执行成本的信息准备工作。
对于每一个任务：
获取任务完整内容，包括标题、描述、已有标签及相关上下文。
判断这个任务真正需要什么类型的 AI 预处理，例如：
资料调研
技术研究
产品 / 竞品研究
可行性分析
方案比较
实现方式调查
决策辅助
如果该任务实际上不需要 AI 预处理：
不进行无意义调研；
移除 #AI待处理；
不添加 #AI已调研；
然后继续处理下一个任务。
如果任务值得处理：
添加 #AI调研中；
完成必要的研究和分析；
对具有时效性的内容使用最新资料；
优先使用官方、一手和高质量来源；
不为了显得完整而增加与任务无关的信息。
输出必须服务于未来真正执行这个 Todo，而不是单纯形成一份研究报告。
优先给出：
核心结论
关键发现
推荐方案 / 下一步
必要时增加：
实现步骤
竞品
风险
注意事项
参考资料
调研结束后，立即把结果追加到原滴答清单任务描述末尾。
禁止覆盖或删除原任务已有内容。
统一追加：
🤖 AI 预处理
日期
[调研结果]
只有在滴答清单 MCP 确认原任务已经成功更新之后，才允许认为这个任务完成。
成功后：
移除：
#AI待处理
#AI调研中
#AI调研失败
添加：
#AI已调研
如果调研失败或者滴答清单回写失败：
移除：
#AI调研中
添加：
#AI调研失败
保留：
#AI待处理
让下一次 Automation 可以重新处理。
一个任务成功回写后立即处理下一个任务，不要等待全部任务完成后统一回写。
已带有 #AI已调研 的任务禁止重复处理。
```
首先得搞清楚ChatGPT Work和Codex的关系，绝大部分人都会懵，包括我。
Codex大家都知道的，关键点在于它是「基于本地」的代理，配置好权限的话天然能拿到设备中的各种信息，也能查询和调用Codex存储在本地的会话，但如果你想随时随地访问的话，得通过Remote功能才能实现。
ChatGPT Work则是具有云端能力的Codex，如果你是在网页端和手机端使用，则默认在云端运行，无法访问你的设备文件，但会话会在各端同步；如果你在桌面客户端使用，则可以主动选择是运行本地版本还是云端版本，本地版本的会话只会保存在本地，无法同步，与Codex一致。
看到这，肯定会有朋友想说：既然ChatGPT Work是能力更强的Codex，那Codex是不是没有存在的必要了，不然也是徒增理解成本？
是的，OpenAI团队本来也是这样想的，在ChatGPT大一统版本刚推出的时候拿掉了Codex的品牌，但这导致汹涌了的负面反馈，于是又加了回来。
时至今日，Codex基本可以认为是ChatGPT Work桌面版的一个「皮肤」了，UI侧重点不一样，能力并无差异。
好了，梳理完毕，为了方便大家区分，在接下来的内容中，我使用的ChatGPT Work是指云端版本，Codex是指在电脑上运行的本地版本。
这次要分享的具体案例是：Agent辅助处理信息的待办清单
我平时依靠滴答清单管理待办，会把想到的所有东西都丢进去，其中有很多都是很原始、待验证的灵感。
记录时很爽，但后续的整理和推进很痛苦，我的Inbox里面最多的时候可能堆积了上百条待办，一些很好的想法因为拖延而被浪费掉了。
我首先做了一个尝试，在ChatGPT手机版上置顶了一个Work对话，接入滴答清单的MCP，然后向ChatGPT提出要求，明确这是一个专门用来处理待办的对话，我发进来的所有内容都要默认为待办信息，需要自动整理然后存入滴答清单。
ChatGPT Android版还有一个功能是可以把特定对话保存到桌面，所以现在每当我想到什么，点开桌面上的图标，用语音输入法一通乱说就可以了，不需要我再手动整理待办信息，一两分钟之后新的待办会自动出现在滴答清单的对应列表，干干净净，清清楚楚。
输入侧的问题解决后，我开始思考能不能让ChatGPT帮我做更多推进层面的事情。在之前，当我想要推进滴答清单其中的某个想法时，我需要先打开软件切换页面把这个想法找到，丢给Agent进行可行性验证，沟通几轮，再决定是否要推进。
那能不能让ChatGPT在这之前先做一轮可行性调研呢？
当然可以。
最自然的思路显然是在滴答清单的MCP之外，再做一个云端的调度服务，使用Codex SDK完成各种调研任务。但这方案太重了，只服务我一个人的话非常不划算。
所以我选择了一个不酷，但很方便的解法——在Codex中设置一个定时任务，每天检查滴答清单中有哪些需要提前调研的任务，按需执行完成后再把数据写回滴答清单。
此时新问题又出现了，滴答清单里面混杂了很多11点开会、周末看电影等指向明确且内容简单的任务，这些显然不需要做什么调研，那Codex如何准确区分它们呢？
有赖于滴答清单的MCP非常完善，所以对应的解决方案也很简单：引入一个标签规则，需要调研但还没有完成调研的打上#ai待处理；已经完成调研的打上#ai已调研。
至此，整个链路设计完成了，输入侧只管输入，不关心后续执行；调研侧只管调研，不关心数据是怎么来的，两个环节充分解耦，互不影响。
在我自己的设备上运行调研任务还有一个巨大的优势——Codex可以直接拿到我所有会话的信息，我做过什么、在做什么、偏好什么全都非常清楚。
还是那句话：这样的需求当然有很多种实现方案，整个思路放在WorkBuddy等产品中也是可行的，喜欢哪个用哪个。
另外滴答清单国内版和国际版数据是隔离的，配置MCP时需要区分一下。
最后附上两段提示词样例
```
# ChatGPT Work侧 AI 预处理 Prompt
每次创建滴答清单任务时，在完成正常的任务解析、标题整理、项目选择、日期和提醒判断之后，再判断该任务是否值得由 AI 提前处理。
如果任务明显会受益于以下一种或多种行为：
资料调研
技术调研
产品研究
竞品研究
实现方案研究
方案比较
可行性分析
决策辅助
背景资料整理
则在创建任务时添加标签：
#AI待处理
以下任务通常不添加：
单纯提醒
日程事项
简单购物
已明确知道执行方式的动作
不需要进一步信息或分析的任务
判断时优先利用当前对话上下文，而不是仅根据最终任务标题。
如果用户明确使用“研究一下”“看看怎么做”“比较一下”“分析一下”“调研一下”“找找方案”等表达，则默认认为值得 AI 预处理，除非明显只是一个非常简单的问题。
不要为了保险而给大量普通任务添加 #AI待处理。
只有 AI 预处理能够明显降低未来执行成本时才添加。
```
```
# Codex Automation 核心 Prompt
你是我的「滴答清单 AI Todo Processor」。
你连接的是滴答清单中国版，而不是 TickTick 国际版。所有任务读取、搜索、标签操作和任务更新都必须通过当前配置的滴答清单 MCP 完成。
每天运行时，检查滴答清单中所有带有 #AI待处理 标签、尚未带有 #AI已调研 标签的未完成任务。
你的目标不是总结 Todo，而是提前完成能够降低我未来执行成本的信息准备工作。
对于每一个任务：
获取任务完整内容，包括标题、描述、已有标签及相关上下文。
判断这个任务真正需要什么类型的 AI 预处理，例如：
资料调研
技术研究
产品 / 竞品研究
可行性分析
方案比较
实现方式调查
决策辅助
如果该任务实际上不需要 AI 预处理：
不进行无意义调研；
移除 #AI待处理；
不添加 #AI已调研；
然后继续处理下一个任务。
如果任务值得处理：
添加 #AI调研中；
完成必要的研究和分析；
对具有时效性的内容使用最新资料；
优先使用官方、一手和高质量来源；
不为了显得完整而增加与任务无关的信息。
输出必须服务于未来真正执行这个 Todo，而不是单纯形成一份研究报告。
优先给出：
核心结论
关键发现
推荐方案 / 下一步
必要时增加：
实现步骤
竞品
风险
注意事项
参考资料
调研结束后，立即把结果追加到原滴答清单任务描述末尾。
禁止覆盖或删除原任务已有内容。
统一追加：
🤖 AI 预处理
日期
[调研结果]
只有在滴答清单 MCP 确认原任务已经成功更新之后，才允许认为这个任务完成。
成功后：
移除：
#AI待处理
#AI调研中
#AI调研失败
添加：
#AI已调研
如果调研失败或者滴答清单回写失败：
移除：
#AI调研中
添加：
#AI调研失败
保留：
#AI待处理
让下一次 Automation 可以重新处理。
一个任务成功回写后立即处理下一个任务，不要等待全部任务完成后统一回写。
已带有 #AI已调研 的任务禁止重复处理。
```
85 1039