夜雨聆风这不是一篇普通的工具清单。
❝这几件东西放在一起看，其实在提示一件更大的事，设计工具正在从「素材库」变成「工作流基础设施」。
这两天在网上，连续看到几条很有意思的设计相关动态。
一开始我以为只是普通的工具分享。
一本设计心理学在线书，一个 Vercel 开源的设计系统文档，一个给 iOS 模拟器用的 serve-sim，一个 Codex 无限画布插件 Cowart。
看起来都挺散的，对吧。
但我顺着动态、链接、repo 和网上的讨论挖了一圈之后，突然发现它们其实在讲同一件事。
「设计工具正在从「素材库」变成「工作流基础设施」。」
以前我们说值得收藏的设计素材，大概率是在说 Behance 灵感、UI Kit、图标库、字体、配色网站。
现在不太一样了。
真正值得收藏的东西，开始变成一套能喂给 AI、能约束团队、能嵌进开发现场、能让模型看见真实上下文的东西。
我觉得这个变化对设计师、产品经理、开发者都挺重要。
因为它不是「又来了几个新工具」这么简单。
它是在提醒我们，AI 时代的设计能力，不只是审美，也不是 prompt 写得多玄乎，而是你能不能把自己的判断、规则和上下文，沉淀成 AI 能接住的东西。
1. Product Design Psychology，一本给设计师补「人脑上下文」的书
Wouter de Bres 发了一条动态，说自己写了一本书，花了 10 年。
原文大概是这样。
❝Good humans,
I wrote a book. Took me 10 yrs.
Share it with anyone who wants to understand the minds they're designing for and the mind they're designing with.
40 chapters free to read.
❞
他给的链接是 Product Design Psychology，一个可以直接在线读的设计心理学网站。
这个网站的副标题很准。
❝Understand the minds you're designing for and the mind you're designing with.
❞
理解你正在为之设计的心智，也理解你正在用来设计的心智。
我点进去看了一下目录，40 章免费在线阅读，结构分成四大块。
这本书在讲什么
「The Designer's Mind」，讲设计师自己的心智。
比如 Nobody Thinks Like You、You Ruin Your Own Designs、Taste Isn't Talent、Deadlines Make You Dumb。
「Minding the Design」，讲界面机制如何影响人的感知和行为。
比如 Pass the Vibe Check First、Your Design Is Rigged、Intuitive Design Is a Lie、Fake Progress Is Real Motivation。
「The User's Mind」，讲用户带着什么心理进入产品。
比如 Users React, Then Rationalize、Users Will Hate Your New Design、More Options Make Users Quit。
「The Organization's Mind」，讲组织如何塑造最终发出去的设计。
比如 Good Design Dies in Meetings、The Metric Is Not the User、Research as Alibi。
我觉得这本书最值得看的地方，不是它又整理了一堆心理学概念。
而是它把设计这件事重新拉回到一个非常朴素的问题。
「你到底是在和谁的脑子打交道。」
很多设计师刚入行的时候，会把设计理解成画面问题。
按钮漂不漂亮，卡片有没有层次，动效顺不顺。
再往后，会把设计理解成系统问题。
组件、token、规范、设计系统。
但再往深一层，其实是心理问题。
用户为什么看不见你精心放在那里的按钮。
为什么嘴上说喜欢新设计，实际上还是回去用老流程。
为什么老板会在评审会上坚持一个你觉得很丑的颜色。
为什么 deadline 一压下来，团队会突然集体变笨。
这些都不是单纯的审美问题。
它们是人脑、组织和产品界面一起拧出来的问题。
谁适合看
设计师看它，可以补一层「为什么」的解释能力。
不只是说「这样更好看」，而是能说清楚「这样更符合人的注意力和记忆方式」。
产品经理看它，可以少一点拍脑袋，多一点对用户行为的敬畏。
开发者看它也有价值，尤其现在很多开发者已经开始用 AI 直接做页面了。
你会写代码，不代表你自然知道用户怎么理解一个界面。
说真的，我现在越来越觉得，AI 时代最稀缺的不是会不会生成界面，而是你有没有足够好的判断力去知道「生成出来的东西哪里不对」。
模型可以把按钮画出来。
但按钮为什么放这里，为什么现在出现，为什么这个状态要弱一点，为什么错误提示不能这么写，这些还是要靠人。
链接：https://productdesignpsychology.com/
2. Vercel design.md，把设计系统写成 AI 能读懂的规则
第二个值得看的东西，是 Vercel 的设计系统。
那条动态很长，核心是 Vercel 把他们的设计系统直接开源成了两个地址。
design.md，light themedesign.dark.md，dark theme
我把这两个链接都扒了一遍。
这玩意很有意思，因为它不是传统那种「官网展示版设计系统」。
它更像一份可以直接被 AI 和工程读懂的品牌规格书。
里面有颜色 token、字体规格、间距、圆角、组件、动效，甚至包括文案规范。
而且不是虚的，很多地方直接写死具体数值。
颜色不是装饰，是信息
比如颜色部分，Geist 的描述很明确。
❝Geist 是 Vercel 用来构建一致开发者界面的设计系统，美学是 minimal and high-contrast，强调留白、克制用色、接近中性的表面。优先考虑可读性和可访问性，颜色用于表达状态或层级，而不是装饰。
❞
这句话其实已经把 Vercel 的视觉气质讲完了。
颜色不是用来好看的。
颜色是用来传达信息的。
蓝色负责成功、链接和 focus，红色负责错误，amber 负责警告。
其他绿色、青色、紫色、粉色也都有 accent scale，但 solid accent color 只应该留给状态和当前页面最重要的一个动作。
这个判断特别 Vercel。
它的产品界面里，最重要的不是让你觉得「哇好丰富」。
而是 dashboard、日志、部署状态、代码、错误信息同时出现时，你不能乱。
所以它大量使用灰阶，让真正需要被注意的东西跳出来。
字体、动效、圆角，全都变成规则
字体部分也很具体。
Geist Sans 做 UI 和正文，Geist Mono 做代码、数据和对齐数字。
标题从 heading-72 到 heading-14 都给了 font size、weight、line height 和 letter spacing。
比较有意思的是，标题越大，letter-spacing 越紧，比如 72 px 标题是 -4.32px。
MengkePM 的感受是，这让标题看起来沉，不飘。
我觉得这个感受挺准。
很多中文产品做大标题容易有一种飘在页面上的感觉，不是字号问题，而是字距、行高、权重和空间关系没收住。
Vercel 这套东西最值得学的不是「黑白灰真高级」。
而是它把每个视觉决策都变成了明确规则。
动效这块更狠。
文档里有一句，我觉得可以直接贴在很多产品会议室墙上。
❝Use motion only when it clarifies a change, never for decoration.
❞
只在动效能解释变化的时候使用动效，不为了装饰而动。
它还直接说，Most interactions should feel instant，a duration of 0ms is often the snappiest and best choice。
0ms 往往是最好的选择。
不是哥们，这句话对很多动效爱好者可能有点刺耳。
但它确实很对。
尤其是工具类产品。
不是每个 hover 都需要弹一下，不是每个菜单都需要飞进来，不是每个按钮都需要展示自己会动。
用户来这里不是来看你表演的。
用户是来完成任务的。
圆角规则也很克制。
6px，日常表面和控件12px，菜单和弹窗16px，全屏大块表面9999px，pill、头像和圆形控件
重点是，同一个 view 里最好保持一个 radius family，不要一会儿圆一会儿硬。
真正该学的是逻辑，不是样子
这些细节对设计师当然有用。
但我觉得对产品经理和开发者更有用。
因为你可以把它当成「AI 设计提示词的底层配置」。
以前我们让 AI 做界面，经常这么说。
❝做一个高级的、简洁的、现代的 SaaS dashboard。
❞
然后模型给你一堆差不多的玻璃拟态、紫蓝渐变、卡片阴影。
看起来都很 AI。
但如果你把设计系统喂给它，事情就不一样了。
你可以要求它，颜色只用于状态和主操作，标题使用负 letter-spacing，正文 copy-14 或 copy-16，日常控件 6px 圆角，popover 200ms，modal 300ms，非必要动效 0ms。
这时候模型拿到的不是抽象审美词，而是一套约束。
这也是我觉得 Vercel 开源 design.md 最有价值的地方。
它不是给你抄的。
它是提醒你，每个成熟产品都应该有一份能被人和机器共同理解的设计规则。
直接照搬 Geist，问题很明显。
第一，它辨识度太强，别人一看就知道这是 Vercel 味。
第二，它是为开发者工具设计的，它的冷静和克制，是因为它要承载 dashboard、日志、代码和部署信息。
如果你做的是消费者产品、教育产品、生活方式产品，照搬就会冷。
所以正确用法不是复制它的颜色。
而是问自己，我的产品到底要解决什么样的信息问题。
如果你做的是数据工具，你可能也需要极高信息密度和状态清晰。
如果你做的是内容社区，你可能需要更多情绪、温度和身份表达。
如果你做的是 AI 创作工具，你可能需要在「自由探索」和「明确反馈」之间找到平衡。
风格不是模板。
风格是一套解决问题的方式。
3. serve-sim，让 AI coding agent 看见真实模拟器
第三个工具是 Evan Bacon 的 serve-sim。
他的动态里说，serve-sim 新增了这些能力。
simulator buttons and controls unified devices panel fast device switching streaming controls optimized for Cursor, Codex, and Claude Desktop
命令也很简单。
npx serve-sim
我查了一下 npm 和 GitHub。
serve-sim 的一句话介绍是 The npx serve of Apple Simulators。
repo 是 EvanBacon/serve-sim，TypeScript 项目，4 月 29 日创建，到我抓的时候已经 1900 多 star。
npm 最新版本是 0.1.43，依赖里有 inspect-webkit 和 ws。
它的定位很有意思。
不是又做一个 iOS 模拟器。
而是把 Apple Simulator 包成一个更容易被 AI coding agent 使用的本地服务。
它为什么重要
这件事对开发者很明显有用。
你在 Cursor、Codex、Claude Desktop 里写 React Native 或 Expo 应用时，以前 AI 能做的事情主要是改代码、读日志、跑命令。
但手机界面长什么样，切到哪个设备，按钮状态怎么变化，stream 怎么看，这些东西很难稳定进入模型上下文。
serve-sim 解决的就是这块。
它把模拟器控制、设备切换、streaming controls 统一起来，让 coding agent 更接近「看见和操作一个真实运行环境」。
这对设计师和 PM 也不是无关的。
因为移动端设计最烦的不是画稿。
是画稿到了真机以后，发现状态栏、键盘、安全区、字体缩放、列表滚动、加载状态、错误状态，全都在跟你作对。
很多设计问题不是静态稿里看出来的。
是在跑起来以后才暴露的。
所以我觉得 serve-sim 这种工具代表了一个方向。
AI 不应该只在代码编辑器里聪明。
它应该能进入真实产品现场。
看到模拟器，看到页面，看到状态变化，看到用户路径。
也只有这样，AI 才能从「帮我写代码」往「帮我一起做产品」靠近。
4. Cowart，给 Codex 装上一块无限画布
第四个，也是这几条里我最兴奋的一个，是钟二信做的 Cowart。
他先发了一段视频，主题是 Codex + 画布工具，以及尝试一种更直觉、更留痕的图片标注修改方式。
大意是，直接用 Codex 的好处，是 GPT Image 2 也基本可以自由干。
后面他又把 repo 发出来了，说还是先把 Repo 发出来，来不及改成 Widget，还有很多要打磨的地方，大家先玩着。
再后面还有一条更正式的开源动态。
❝Cowart，Codex + 无限画布工具插件开源，大家可以来试试啦，这个插件先取名叫 Cowart，别问为什么叫这个，我只能说 Code with Art 这种冠冕堂皇的理由。
❞
我看了 README。
Cowart 是一个面向 Codex 的本地无限画布插件，基于 tldraw 提供可视化画布，用于构思、标注、生成图片和根据标注图迭代图片。
画布运行在本地网页服务中，数据默认保存到当前用户项目的 canvas 目录，而不是保存在插件仓库里。
它现在能做什么
在 Codex 中打开本地 tldraw无限画布在当前项目目录里持久化画布页面和图片资源 在画布里创建 AI image holder，让 Codex 生成图片并填入选中的 holder 上传或提供 Cowart 标注截图，让 Codex 根据标注生成干净的新图，并放到原图旁边 通过 Cowart MCP 工具读取选择状态、插入图片，并保存到页面本地资源目录
这玩意为什么让我觉得兴奋。
因为它解决的不是「能不能生图」。
现在能生图的工具太多了。
它解决的是「人怎么和 AI 一起改图」。
以前我们改图，靠文字。
❝把左边那个按钮稍微往右一点，背景不要这么蓝，人物脸再自然一点，右上角加一点空间，logo 小一点，不要挡住主体。
❞
你写着写着就会崩溃。
因为空间关系天然不是文字最擅长表达的东西。
人类做视觉沟通，最自然的方式就是指。
这里，往这边，删掉这个，保留这个，旁边补一点，别动这个区域。
Cowart 把这件事接进了 Codex。
你在画布上标注，截图给 Codex，Codex 读取标注和箭头，再生成一张干净的新图放在原图旁边。
原图和标注都不删，留痕。
这就很关键。
设计工作不是一次生成。
设计工作是来回比较，是保留过程，是知道自己为什么从 A 走到 B。
很多 AI 生图工具的问题是，它给你一张图，然后你继续改，改着改着上下文就散了。
你不知道上一版为什么被否定，也不知道某个局部到底改了多少轮。
而画布天然适合这件事。
原图、标注、修改版、备选方案、参考图，全都摊在一个空间里。
网上为什么会讨论它
网上很多人把 Cowart 类比成 Codex 版 Lovart，或者说是「Codex + 无限画布实现生图自由」。
我搜了一下相关讨论，Cowart 开源那条动态本身有接近 500 赞、近百转发。
有人说它是「Codex 版本的 Lovart 无限画布」。
有人说「相当于开了 Codex 会员也可以免费用上 Lovart 了」。
也有人总结得很直接，以前改图只能靠长提示词，现在可以直接在图上标注，再让 Codex 按标注修改。
当然，我觉得这里也要冷静一点。
Cowart 现在还是很早期的东西。
repo 是 6 月 18 日创建的，我抓的时候 298 star，作者自己也说还有很多要打磨的地方。
它不一定马上适合所有人拿来当生产工具。
但方向非常对。
AI 设计工具下一阶段的关键，不是把 prompt 输入框做得更大。
而是让 AI 拿到更自然的上下文。
这四个东西，其实在讲同一个趋势
画布是上下文。
标注是上下文。
模拟器是上下文。
design.md 是上下文。
用户心理学也是上下文。
这几条动态串起来看，就很明显了。
Product Design Psychology给的是认知上下文Vercel design.md给的是系统上下文serve-sim给的是运行上下文Cowart给的是视觉协作上下文
它们不是同一类工具，但它们都在回答同一个问题。
「怎么让 AI 不只是听你说，而是真的进入你的工作现场。」
我自己的判断是，未来一两年，设计师的工具箱会发生一次挺大的重排。
以前最重要的是素材库。
谁有更好的参考图，谁有更全的组件，谁有更漂亮的模板。
以后更重要的是上下文库。
你的品牌规则能不能被 AI 读取。
你的设计系统有没有明确 token。
你的用户研究能不能转成具体判断。
你的画布过程有没有留痕。
你的真机状态能不能被 agent 看到。
你能不能把「我觉得不对」翻译成模型能执行的反馈。
这听起来有点抽象。
但落到今天，其实可以做几件很具体的事。
如果你今天就想用起来
如果你是设计师，先去读 Product Design Psychology 的目录，不用一口气读完。
挑那些让你有点不舒服的章节看，比如 You Ruin Your Own Designs、Users Will Hate Your New Design、Good Design Dies in Meetings。
那些地方往往是盲区。
然后去看 Vercel 的 design.md。
不是为了抄 Vercel 风格，而是照着它的颗粒度，给自己的产品写一版设计规则。
哪怕只有颜色、字体、圆角、动效四块，也比一句「高级简洁」强太多。
如果你是 PM，可以把 design.md 当成产品规范写法的参考。
很多时候团队吵架，不是审美差异，而是规则没有被写出来。
没有规则，每次评审都像重新投胎。
如果你是开发者，serve-sim 和 Cowart 这种东西很值得盯。
因为它们都在把 coding agent 从纯文本环境里拖出来，拖到真实界面和视觉空间里。
谁先把这个链路跑顺，谁就能更早体会到「AI 不是代码补全，而是工作流搭子」。
最后
我最喜欢 Cowart 的一个点，是它没有试图发明一种全新的交互。
它只是把人类最自然的协作方式接了回去。
画出来。
圈出来。
指给它看。
有时候技术发展到最后，最厉害的不是让人学会机器语言。
而是让机器终于能理解一点人的工作习惯。
这也是我觉得这几条动态值得写下来的原因。
它们提醒我，设计工具的下一个阶段，可能不是更炫的生成结果。
而是更好的上下文接口。
让 AI 看见你的规则，看见你的现场，看见你的标注，也看见人脑那些混乱、固执、短视又真实的部分。
大时代啊，朋友们。
设计素材也开始变成基础设施了。
「更多 AI 前沿技术与设计灵感，欢迎关注「设计小站」公众号（ID：sjxz00），一起探索科技与设计的融合创新。」
