AI Engineer, dedicated to learning and disseminating knowledge about AI, software engineering, and engineering management.
Joined April 2007
- Tweets 32,335
- Following 1,670
- Followers 225,040
- Likes 51,545
5,677 Photos and videos
模型是根本，Harness层相对好补齐，但Harness这层不需要太多垂直领域的，Claude Design 很快就会合并到 Claude Desktop，Codex 在下一代或者几代模型能力够了后，会在 Codex App 直接以 Plugin 集成 Codex Design
模型能力与Harness是相辅相成的。
宝玉这篇对这两个的解释太通透了。另外，宝玉怎么看开源的Open Design之类的？如果他用上了Claude Code的模型，是否也能达到类似的工程能力呢？
7
1
18
7,970
精细调整字型字号颜色，确实是设计师的日常。但我觉得用 AI Agent 辅助设计之后，修改的方式也得跟着变：
1、设计系统要用起来
为什么需要手动精调字型字号、颜色？很多时候是因为没有统一的设计系统做规范。如果有配套的设计系统，按钮圆角、字号、间距都有严格定义，生成时不会出现 3px、5px 这种随意值。就算偶尔有偏差，让 Agent 遵循设计系统去修改就行，极少需要人工微调。
2、设计师变成设计经理
不再亲自调像素，而是用文字指令指挥 Agent 去改。Opus 4.8 结合设计系统，基本做到"言出法随"，不太会偏出你的要求。
3、方向和验收还是人的活
虽然执行交给了 Agent，但大方向还是人来把关，告诉 Agent 该怎么调整，调完检查结果是否符合预期。Agent 干活，人做判断。
10
10
7,549
给 Agent 交代任务的时候一定说清楚怎么验证，然后就怎么需要管中间结果了
12h
有什么与 AI Agent 交互的习惯，你一旦开始后就再也回不去的？
我先来一个 —— 先让 Agent 把 coding plan 写出来，反复确认后，汇总一个 task 列表，最后再编程，同时把 task 标记已完成
12
3
37
26,203
为啥 Codex 还不推出类似 Codex Design 的产品？
Anthropic 最近推出了 Claude Design，是我除了编程之外用得最多的 Agent，也推荐过很多次。效果真的好：你用一句话描述想要的 App，它直接给你生成一个可交互的原型，点哪哪都有反应，不仔细看还以为在操作真实的 App。
有网友问：为啥 Codex 还不推出类似 Codex Design 的产品？
简单来说，GPT-5.5 的模型能力还做不好这件事。但要解释清楚为什么，得先理解一个关键区分。
【1】Agent 的两层：模型和 Harness
很多人把 Codex、Claude Design 和 GPT-5.5、Claude Opus 4.8 混在一起说，其实它们是完全不同的两层。
Claude Design 和 Codex 是"产品层"，业界叫 Harness，包括提示词、工具链、UI 交互流程这些工程层面的东西。Claude Opus 4.8 和 GPT-5.5 是"模型层"，是真正干活的大脑。
打个比方：Harness 是厨房，里面有锅碗瓢盆（工具）和菜谱（Skills），模型是厨师。同一套厨房，换个厨师，做出来的菜完全不一样。
理解了这个区分，后面的事情就好说了。
【2】Harness 不是门槛
Claude Design 的 Harness 层技术上不复杂。花点心思逆向一下，提示词、工具代码几乎都可以拿到。我已经做过了，成果在 baoyu-design（github.com/JimLiu/baoyu-desi…），可以借助 Skill 把 Claude Design 在其他模型上运行。工程上没秘密。
真正拉开差距的是背后的模型。
【3】高精度可交互原型，难在模型
Claude Design 这个名字容易让人误解，以为交付的是 Figma、Photoshop 那样的静态设计图。实际上它交付的比 Figma 更进一步，是融合了设计稿和原型的高精度可交互原型：你不光能看到设计，还能直接上手操作。
这对模型的要求很高。
举个例子。我要做一个类似 X/微博的客户端。让模型画一个好看的静态界面，很多模型都做得到。但要让这个界面能交互就复杂了：切换不同 Timeline，展示不同类型的推文（文本、图片、视频），点赞要变红心，删推要从列表消失，从列表点进详情再返回，状态还要保持住。
要做到这些，模型必须在动手画 UI 之前，先把整套数据结构和状态管理想清楚：tweet 长什么样、timeline 有哪几种、每个按钮当前是什么状态、状态之间怎么联动。这是系统架构设计的活，不是画 UI 的活。
Claude Design 对模型的要求，是同时具备优秀的 UI/UX 设计能力和系统架构设计能力，缺一个效果就大打折扣。这也是为什么我之前反对只产出纯 HTML 的设计稿，那只是静态的 UI 设计，没有融合 UX 交互。
有条件的话可以自己测试感受一下。比如用这个提示词：
Design a X Client for Mac, similar to Tweetbot for Mac from Tapbots
同样的提示词让 Codex 去做，也能出个东西，能看，也能简单交互。但对比一下就知道差距了：列表能滚动，sidebar 不能点；点赞按钮没反应。来回迭代好几轮，才能达到一个勉强凑合的水平。
Claude Design 做出来完全不一样。从 Timeline 切到通知页，从列表点进详情再返回，全程流畅，状态都保持住了。不仔细看真以为在操作一个完成度很高的 App，虽然数据都是模拟的。
Claude Opus 4.8 显然在设计和架构这类场景上做了大量训练和优化。
【4】产出物就是代码
去看 Claude Design 的产出物，注意里面的 data.jsx 文件。它把整个设计的数据结构定义得很清晰，基于这个结构模拟了一套完整数据，然后用 React 在这套数据上构建 UI。
设计产物本身就是代码（React、CSS、JSON），不是 Figma 或 PSD，任何开发者拿到都能直接看出按钮的圆角、主色、间距，照着自己的技术栈实现就行。后续设计变更？git diff 一看就知道改了什么。设计和开发之间的沟通损耗降到了最低。
说得不严谨，应该说设计 Agent 和开发 Agent 之间的沟通损耗很低了。现在都是人在指挥 Agent 去设计，人指挥 Agent 写代码了。
【5】怎么用好 Claude Design
很多人不知道该怎么用好 Claude Design，其实有点像 Vibe Coding：有个基本的想法，先让它做一个版本出来，然后通过 Chat 去指挥 Agent 帮你改，调整几个版本你的思路就清晰了。
整个调整的过程非常神奇，有一种"言出法随"的感觉，你想让它怎么改它总能给你实现出来。这也是为啥我现在很痴迷用 Claude Design，反馈来得太快太过瘾了。
还有一个小技巧：不要说太具体的要求，而是说你的目标是想要什么，让它自由发挥。往往能得到更好的效果，毕竟它训练过几乎所有公共的 UI 设计。
回到最初的问题。Codex 不推类似的设计产品，是因为 GPT-5.5 还扛不住这个活。画个好看的界面很多模型都行，难的是在动手之前把数据结构、状态管理、交互逻辑都想清楚，然后一次性交付一个完整的可交互原型。
目前只有 Claude 的模型做到了。至于能领先多久，就看 OpenAI 或者其他家后面模型的进化速度了。
33
42
228
34,511
模型能力才是王道，如果模型能力差不多，自然是 Codex 胜出，模型能力有差距的时候我宁可麻烦一点手动操作
x.com/Xxi5olc/status/2065935…
因为codex browser内建的前端修改功能比claude design强。 跟我一起合作的设计师都觉得claude design是网页版这件事极反常理。 他就应该跟coding agent做在一起。
3
1
4
6,797
举一个具体的用 Claude Design 更新设计和代码的例子
我有一个视频字幕编辑器工具，是 Claude Design 做的设计，之前标题文字和下面的信息是放在一行，标题一长就放不下，于是我就让它变成两行。
图1 是我在设计稿上做的修改，修改好了后导出下载 zip 文件，放到项目中，用 git diff 很容易看到做了哪些变更（图2）
然后一句简单的提示给 Claude Code：
> 参考设计稿 design 目录下的相关变更，对 UI 进行变更
Claude 自己通过 git diff 去分析变更，然后找出所有设计稿修改了的位置，自己帮我修改了相应的 Swift 代码，任务完成！（图4是修改后的效果）
全程我主要是在 Claude Design 上修改，然后需要手工去同步一下。
为啥 Codex 还不推出类似 Codex Design 的产品？
Anthropic 最近推出了 Claude Design，是我除了编程之外用得最多的 Agent，也推荐过很多次。效果真的好：你用一句话描述想要的 App，它直接给你生成一个可交互的原型，点哪哪都有反应，不仔细看还以为在操作真实的 App。
有网友问：为啥 Codex 还不推出类似 Codex Design 的产品？
简单来说，GPT-5.5 的模型能力还做不好这件事。但要解释清楚为什么，得先理解一个关键区分。
【1】Agent 的两层：模型和 Harness
很多人把 Codex、Claude Design 和 GPT-5.5、Claude Opus 4.8 混在一起说，其实它们是完全不同的两层。
Claude Design 和 Codex 是"产品层"，业界叫 Harness，包括提示词、工具链、UI 交互流程这些工程层面的东西。Claude Opus 4.8 和 GPT-5.5 是"模型层"，是真正干活的大脑。
打个比方：Harness 是厨房，里面有锅碗瓢盆（工具）和菜谱（Skills），模型是厨师。同一套厨房，换个厨师，做出来的菜完全不一样。
理解了这个区分，后面的事情就好说了。
【2】Harness 不是门槛
Claude Design 的 Harness 层技术上不复杂。花点心思逆向一下，提示词、工具代码几乎都可以拿到。我已经做过了，成果在 baoyu-design（github.com/JimLiu/baoyu-desi…），可以借助 Skill 把 Claude Design 在其他模型上运行。工程上没秘密。
真正拉开差距的是背后的模型。
【3】高精度可交互原型，难在模型
Claude Design 这个名字容易让人误解，以为交付的是 Figma、Photoshop 那样的静态设计图。实际上它交付的比 Figma 更进一步，是融合了设计稿和原型的高精度可交互原型：你不光能看到设计，还能直接上手操作。
这对模型的要求很高。
举个例子。我要做一个类似 X/微博的客户端。让模型画一个好看的静态界面，很多模型都做得到。但要让这个界面能交互就复杂了：切换不同 Timeline，展示不同类型的推文（文本、图片、视频），点赞要变红心，删推要从列表消失，从列表点进详情再返回，状态还要保持住。
要做到这些，模型必须在动手画 UI 之前，先把整套数据结构和状态管理想清楚：tweet 长什么样、timeline 有哪几种、每个按钮当前是什么状态、状态之间怎么联动。这是系统架构设计的活，不是画 UI 的活。
Claude Design 对模型的要求，是同时具备优秀的 UI/UX 设计能力和系统架构设计能力，缺一个效果就大打折扣。这也是为什么我之前反对只产出纯 HTML 的设计稿，那只是静态的 UI 设计，没有融合 UX 交互。
有条件的话可以自己测试感受一下。比如用这个提示词：
Design a X Client for Mac, similar to Tweetbot for Mac from Tapbots
同样的提示词让 Codex 去做，也能出个东西，能看，也能简单交互。但对比一下就知道差距了：列表能滚动，sidebar 不能点；点赞按钮没反应。来回迭代好几轮，才能达到一个勉强凑合的水平。
Claude Design 做出来完全不一样。从 Timeline 切到通知页，从列表点进详情再返回，全程流畅，状态都保持住了。不仔细看真以为在操作一个完成度很高的 App，虽然数据都是模拟的。
Claude Opus 4.8 显然在设计和架构这类场景上做了大量训练和优化。
【4】产出物就是代码
去看 Claude Design 的产出物，注意里面的 data.jsx 文件。它把整个设计的数据结构定义得很清晰，基于这个结构模拟了一套完整数据，然后用 React 在这套数据上构建 UI。
设计产物本身就是代码（React、CSS、JSON），不是 Figma 或 PSD，任何开发者拿到都能直接看出按钮的圆角、主色、间距，照着自己的技术栈实现就行。后续设计变更？git diff 一看就知道改了什么。设计和开发之间的沟通损耗降到了最低。
说得不严谨，应该说设计 Agent 和开发 Agent 之间的沟通损耗很低了。现在都是人在指挥 Agent 去设计，人指挥 Agent 写代码了。
【5】怎么用好 Claude Design
很多人不知道该怎么用好 Claude Design，其实有点像 Vibe Coding：有个基本的想法，先让它做一个版本出来，然后通过 Chat 去指挥 Agent 帮你改，调整几个版本你的思路就清晰了。
整个调整的过程非常神奇，有一种"言出法随"的感觉，你想让它怎么改它总能给你实现出来。这也是为啥我现在很痴迷用 Claude Design，反馈来得太快太过瘾了。
还有一个小技巧：不要说太具体的要求，而是说你的目标是想要什么，让它自由发挥。往往能得到更好的效果，毕竟它训练过几乎所有公共的 UI 设计。
回到最初的问题。Codex 不推类似的设计产品，是因为 GPT-5.5 还扛不住这个活。画个好看的界面很多模型都行，难的是在动手之前把数据结构、状态管理、交互逻辑都想清楚，然后一次性交付一个完整的可交互原型。
目前只有 Claude 的模型做到了。至于能领先多久，就看 OpenAI 或者其他家后面模型的进化速度了。
9
3
57
12,634
首先这个 Skill 很好，另外提供一个额外选择： 可以试试用 Claude Design 生成一份简历试试，也许你会喜欢
假如你的朋友最近需要更新简历，一定要把 Kami 推荐给他，我单独细致优化了一个版本，单独让 Kami 写简历变得非常好用好看清晰，让他把他的原生素材 md 准备好，然后对着 AI 说 /kami 帮我产出一个简历，然后调1-2下差不多就好了。
github.com/tw93/Kami
4
19
117
21,247
Codex 操作浏览器有两种模式，一种是 Chrome 插件，一种是内置浏览器。用了一段时间之后，我总结一下两者的差异和各自适合的场景。
【1】先说一个被低估的用法：拿 Codex 当爬虫
传统爬虫用 requests 或者 Playwright 无头模式去请求页面，现在风控越来越严，指纹检测、行为分析、验证码轮番上阵，很多网站一看你是程序化请求直接拦截。Codex 的浏览器不一样，它操作的是真实浏览器，有完整的渲染引擎、真实的用户代理、正常的 JavaScript 执行环境，在网站看来就是一个普通用户在浏览页面。
配合 /goal 模式，你设定一个目标（比如“把这个网站上所有产品的名称、价格、评分抓下来存成 CSV”），Codex 会自己规划步骤、翻页、处理异常，不需要你一步步指挥。这比自己写爬虫脚本省事得多。
但 Codex 有两种浏览器模式，特性完全不同，选对了事半功倍。
【2】Chrome 插件模式：能力强，但吃资源
用 @Chrome 调用的 Chrome 插件模式，核心优势是一个字：登录态共享。
它直接运行在你自己的 Chrome 浏览器里，继承你所有的 Cookie、登录会话、已安装的扩展。那些需要登录才能访问的内容，比如付费订阅的文章、企业内部的管理后台、CRM 系统里的客户数据、需要登录的社交平台，Chrome 插件都能直接访问，因为对网站来说，就是你本人在操作浏览器。
Codex 在 Chrome 里工作时会把任务放进独立的标签页分组，不会打断你正在看的页面。它还支持 DevTools 协议，能抓性能数据、看网络请求、调试 Console 错误。
但代价也很明显：资源消耗相当大。Chrome 本身就是内存大户，每个标签页都是独立进程。Codex 的 Chrome 插件在上面再加一层操控逻辑，截图、DOM 解析、指令交互全在跑，内存和 CPU 占用会非常高。机器配置不行的话（比如 8G 内存的笔记本），跑起来能明显感觉到卡顿，拿来做批量爬虫任务就更难受了。长时间运行还容易出现截图延迟、状态不同步的问题。
另外 Chrome 插件目前只支持 macOS 和 Windows，Linux 用户暂时用不了。它也不支持无头模式，Chrome 窗口必须保持打开状态。
适合的场景：需要登录态的短期任务。比如登录某个平台抓一批数据、在内部工具上批量操作、从 CRM 导出信息。
【3】内置浏览器模式：轻快，但有局限
用 @Browser 调用的内置浏览器，是 Codex 自带的沙盒浏览器环境。
它最大的优势是轻量。不需要启动整个 Chrome，资源消耗小很多，响应速度快，适合需要频繁操作浏览器的场景。
但它有一个根本性的限制：没有你的登录态。不继承 Cookie、不继承浏览器扩展、不继承已保存的会话。打开一个需要登录的页面，你得在内置浏览器里重新登录。而且有些反爬严格的网站，对这种非标准浏览器环境的检测更敏感。我试过在内置浏览器里登录 X，反复失败，大概率是因为 X 的风控识别出了异常的浏览器指纹。
内置浏览器真正出彩的地方是前端开发调试。它有一个标记模式（Annotation Mode），你可以直接在渲染好的页面上选中某个元素或者框选一个区域，写上“这个按钮往上移”“字体加粗”“这个间距太大了”之类的批注，Codex 会把这些批注当作可执行指令来处理。这比用文字描述“第三行第二个按钮的 margin-top 减少 8px”直观太多了。
配合 Developer Mode，内置浏览器还能跑性能分析、抓网络请求、看 Console 输出，对本地开发服务器的调试非常友好。
适合的场景：公开页面的数据抓取、本地开发调试、不需要登录态的网页操作。
【4】怎么选
简单说：需要登录的用 Chrome 插件，不需要登录的用内置浏览器。如果你的机器配置有限又需要大量抓取公开数据，内置浏览器是更好的选择。如果目标网站必须登录才能看到内容，或者反爬很严需要真实浏览器指纹，那只能用 Chrome 插件，但要有心理准备面对资源消耗。
Codex 自己也会根据任务判断应该用哪种浏览器。它的优先级是：有专用插件（比如 Jira、GitHub 的集成）就用插件，需要登录态就用 Chrome，其余情况用内置浏览器。
当然浏览器的用途远不止爬虫。我觉得内置浏览器做前端调试的体验比很多专门工具都好，标记模式配合 Codex 的理解能力，几乎是“指哪改哪”。Chrome 插件在自动化操作企业内部工具方面也很实用，比如定期从后台导数据、批量更新记录。这些场景还有不少值得挖掘的空间，大家可以根据自己的实际需求去试试。
30
77
430
33,055
宝玉 retweeted
Jun 13
本来要 Anthropic 要在旧金山搞“Fable 5 Build Day”的，现在降为“Opus 4.8 Build Day”了。哈哈哈哈哈哈哈哈哈。
Jun 13
Tomorrow’s Build Day event is still on, we're building on Opus 4.8 instead. Thank you, we can’t wait to build with you tomorrow!
12
14
152
39,213
宝玉 retweeted
Jun 12
如果你要追求终极的coding agent自由，目前只有pi才能给你安心。
如果你一直想试试 pi deepseek，但是不知道怎么配置，强烈推荐新手查看这篇老外小哥的blog:
deepakness.com/blog/pi-agent…
耐心花半小时， 逐字逐段耐心看完，你将彻底入门pi.
23
75
479
79,679
祝贺 YouMind 发布 1.0 🎉
Jun 12
YouMind 1.0 is officially here.
The loudest story about creating is a heavy one.
More discipline. More originality. More talent. More audience.
So that too many ideas stay saved, highlighted, half-written, but never become anything.
But that gets creation wrong.
The beginning was already there.
In what you saved. What you noticed. What you couldn’t stop thinking about.
So, in a moment when everyone is told to create better, we want to remind people what YouMind stands for:
Create bolder.
3
1
18
17,470
一竿一线一山水，一漂一钩一逍遥。
鱼咬不咬随它去，坐看云起日头高。
一杯一椅一 Agent，一聊一等一逍遥。
跑完没跑不必盯，起身续水伸个腰。
Jun 12
朋友圈一个钓鱼的大哥的微信签名：
一竿一线一山水，一漂一钩一逍遥。
8
3
28
12,494
宝玉 retweeted
Jun 11
经过一些调整，墨韵1.0现已完整开源且正式上线，可以直接进行体验（虽然也有移动端，但是比较好资源，建议桌面端体验玩耍）。
有多种笔刷笔触颜色浓度来一起使用
带有四种不同颜色的纸张
以及一个有仪式感的题词和印章功能
体验地址：
inkpainting.tanshilong.com/
Github开源地址：
github.com/TanShilongMario/I…
期待你们的作品
Jun 10
卧槽！Claude Fable 5.0是特么有点东西啊
来回对话四五次，就可以实现一个极其优雅有美学的小工具，好到离谱
一个中国画的绘图板，有墨迹效果，有颜色体系，还能题字盖章，简直无敌了！
墨的笔触和晕染感都非常好，如果鼠标的轨迹质感再调整调整会很精彩。而这个结果，从开始第一句聊天到最后的录制成品，不超过2个小时。
就是不知道下个月的信用卡是不是能还得上了
4
12
100
19,014
Codex 真是把 Token 用量重置玩出花开了，邀请好友，双方都获得一次重置机会，自己重置。
We heard you wanted to use Codex rate limit resets on your own time.
Starting today, we’re rolling out the ability to save rate limit resets to use later.
We’re starting Go, Plus, Pro, and Business users with one free reset:
37
50
34,696
