即刻App年轻人的同好社区
下载
置顶周末高强度用了两天Astra，实打实地讲，对我个人来说并没有翻天覆地的变化，更聪明，更靠谱，更擅长说「人话」，但并没有「哇，什么都不一样了」的感觉。
但这正是我需要的模型，稳定，可靠，可预期。
但这正是我需要的模型，稳定，可靠，可预期。
13 00
# 如何用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就搞定的炫酷案例，你准备工作做得越好，想得越清楚，项目推进速度就越快，至于是一轮搞定、两轮搞定还是十轮搞定，并不重要。
18 14
18 00
Grok Bot的方案已经如此直接且暴力，中外KOL一起上，也没给出什么匹配其订阅价格的有效案例。
在Grok Bot的VPS上登录Slack相比于直接在Slack连接各种Agent会更好吗？不，会更贵。
在Grok Bot的VPS上登录Slack相比于直接在Slack连接各种Agent会更好吗？不，会更贵。
3 90