夜雨聆风
一个开源工具,让你现有的 AI 编程助手能帮你做设计稿
故事是这样的。
每次我想做个简单的界面原型，或者给内部分享弄个像样的PPT，我就得切出去，打开Figma，或者打开Canva，然后开始新一轮的“咒语吟唱”。
我就寻思，不对啊。
我在代码编辑器里，能让AI帮我写一个复杂的React组件，能重构整个函数，能解释晦涩的算法。
怎么到了“设计”这件事上，我就得换个战场，重新适应另一套工具逻辑，另一套和AI对话的方式？
这感觉就像，你家里请了个全能管家，做饭、打扫、修水电样样精通。
但你想让他帮你把客厅的画挂正，他说：“对不起先生，挂画这个技能，您得去隔壁‘挂画专用工具屋’里，用我们公司另一款‘挂画AI助手’来完成。”
就，很割裂。
你明明已经习惯了对一个AI说话，它也能理解你的上下文，但某些任务就是被硬生生切出去了。
然后，我就看到了这个项目。
nexu-io/open-design
它的介绍简单到有点“狂妄”：让你现有的AI编程助手，变成你的设计助手。
不是换个新AI，不是让你去学Figma。
就是让你在现在写代码的窗口里，直接对那个你已经用顺手的AI说：“嘿，给我画个登录页的草图”，或者“做个种子轮融资用的杂志风PPT”。
它就开始给你画了。
我当时的第一反应是：？？？
这玩意，靠谱吗？
坦率地讲，我一开始是抱着“这又是个玩具吧”的心态点进去的。
但看完README，我有点被震住了。
它不是自己又造了个AI模型。
它的思路特别“狡猾”，也特别聪明：它不造车，它造“翻译器”和“工具箱”。
我打个比方你就懂了。
你想让一个只会说中文的顶级大厨（你的AI编程助手），去做一道标准的法式大餐。
传统做法是：再雇一个法国厨师（比如Claude Design）。
而 open-design 的做法是：它给这位中国大厨一本超详细的、带图片的《法餐烹饪指南》（设计系统），再配一个实时翻译，把“勃艮第红酒炖牛肉”这道菜名，翻译成“用红酒慢炖牛肉，配蘑菇和洋葱，最后汤汁要浓稠”（设计技能）。
大厨一看：“哦，这个啊，我会。”
然后他就用他熟悉的厨具（代码编辑器），给你做出来了。
它核心就干两件事：
- 给你塞了一堆“设计系统”的说明书。 71套。从硅谷顶流产品Linear的极简风，到苹果的Human Interface Guidelines，到Ant Design、Tailwind UI这些前端兄弟熟悉的，甚至还有Windows 95那种复古风。 这就意味着，AI不是凭空瞎猜“好看”是什么。它有了确定的、可复用的“配方”。你说“要Linear那种感觉”，它就知道是那种灰白底色、高对比度、精致小圆角的样子。
- 教你的AI理解“设计任务”到底要干嘛。 “做个PPT”是个模糊指令。open-design 把它拆解成：封面、目录、章节过渡页、内容页（图文、图表、引用）、结尾页。 “画个移动端设置页”也被拆解成：顶部标题栏、搜索框、设置项列表（带图标、标题、开关/箭头）、底部导航。 它把“设计”这个黑盒，拆成了19种AI能一步步执行的“技能”。
最骚的是，它支持几乎所有你现在可能在用的AI编程助手：Cursor, Claude Code, Windsurf, Bito, Continue, Tabby, CodeGPT…
你不用换工具。
你不用学新东西。
你就在你每天敲代码的地方，像平时让AI写个函数一样，让它给你出个设计稿。
这种“无缝入侵”的感觉，太特么赤鸡了。
我肯定不能光看介绍就信了，对吧。
得试试。
我找了个我正在用Cursor写的小工具项目，按照文档，把open-design的“工具箱”（其实就是一组精心编写的提示词和上下文）配置了进去。
过程比想象中简单，就是复制粘贴几个配置。
然后，我在代码文件里，选中一片空白的注释区域，唤出Cursor的AI聊天框。
我有点紧张，又有点恶作剧的心态，敲了一行字：
“帮我设计一个用于监控服务器状态的仪表盘首页，要暗黑主题，带科技感，参考一下Linear的风格。”
回车。
光标开始跳动。
我屏住呼吸。
然后我看到AI没有直接开始画，而是先反问我：
“好的。为了设计这个监控仪表盘，我需要了解几个细节：
- 主要监控指标有哪些？（比如CPU、内存、网络流量、错误日志）
- 数据更新频率是实时的吗？
- 需不需要关键警报的突出显示区域？
- 目标用户是运维工程师还是更广泛的团队？”
我愣住了。
这感觉……太专业了。
它没有一上来就天马行空地乱画，而是在模仿一个真实设计师的工作流程：先澄清需求，再动手。
我一一回答后，它才说：“明白了，我现在开始设计。”
接着，我的屏幕上开始一行行地“长出”代码。不是乱七八糟的HTML，而是结构清晰、带了Tailwind CSS类名的React组件代码。
它生成了一个完整的、带侧边导航栏、顶部状态栏的布局。
中间是几个卡片区域，分别用不同的图表形式展示CPU、内存、网络流量，还真的留了一个醒目的“警报”区域，用了红色边框。
配色就是深灰背景、青色高亮，线条干净利落，完全是我脑子里想的那个“暗黑科技感Linear风”。
整个过程，我没有离开我的代码编辑器一步。
那种流畅感，就像你正在和同事脑暴，他一边听你说，一边就在白板上把草图给你画出来了。
障碍消失了。
这件事让我兴奋了很久。
但兴奋劲过去，我坐下来想，为什么这么个“小工具”，会让我觉得这么震撼？
它背后戳中的，可能是一个我们正在经历，但还没完全说清楚的巨大转变。
我们和工具的交互方式，正在从“图形界面”全面滑向“自然语言界面”。
过去几十年，我们学软件是怎么学的？
记住菜单在哪，记住这个按钮是干什么的，记住这个快捷键。
我们是去适应工具的逻辑。
Figma很强大，但它的强大建立在你要理解画板（Frame）、组件（Component）、自动布局（Auto Layout）这一整套概念上。
而现在，AI给我们的承诺是：你用你的逻辑就好。
你只需要说人话。
“我要个登录页。” “这里放张图，右边放个表单。” “风格活泼点，像Notion那样。”
工具在背后，默默地把你的“人话”，翻译成它自己能执行的指令（创建画板、设置约束、应用样式库）。
open-design 就是在这个历史关口，一个非常精准的“桥梁建造者”。
它没有去重新发明“自然语言到设计”这个轮子（那是GPT-4V、Midjourney他们在干的事），它做的是更务实、更急迫的事：
把已经存在于我们工作流里的、最强大的那个“自然语言界面”（AI编程助手），它的能力边界，悄悄地、暴力地，向外拓展了一大圈。
从“只能写代码”，拓展到“也能搞设计”。
这带来的连锁反应是细思极恐的。
今天，一个程序员可以在不离开编码环境的情况下，搞定低保真甚至中保真的UI原型。
明天，会不会产品经理直接在需求文档里描述交互，AI就同步把可交互的原型生成了？
后天，会不会运营同学在数据后台说一句“给我看个上月用户增长的爆款图”，一张信息图表就直接嵌进报告里了？
角色的边界，正在因为工具的“语言化”而变得模糊。
以前，设计是一道专业门槛，需要学习和训练。
现在，设计正在变成一种可被调用的、标准化的服务。
你不需要成为设计师，你只需要成为一个“清晰的需求描述者”。
这听起来有点残酷，对吧？对设计师来说。
但我觉得，这可能不是取代，而是解放。
把设计师从重复性的、标准化的界面拼装工作中解放出来，去解决更根本的问题：体验策略、情感化设计、创意发想、解决那些AI还没见过的、全新的问题。
而产品经理、开发者、创业者，则获得了一种前所未有的“视觉表达自足力”。
一个想法，从文字描述，到可运行的代码，再到有模有样的视觉呈现，可以在同一个人手里，同一条流水线上快速完成。
想法到实现的摩擦系数，被降到前所未有的低。
这，才是让我觉得最震撼的地方。
open-design 这个项目本身，可能只是昙花一现，可能很快会被大厂用更集成的方式覆盖。
但它像一颗信号弹。
照亮了我们正在奔赴的那个未来：一个用语言编织一切的数字世界。
在那里，专业工具的护城河，不再是复杂的界面和操作手册。
而是你提出问题的能力，和判断答案好坏的眼力。
回到开头那个割裂的问题。
open-design 给了一个很酷的答案：别让工具分裂你。
让你最强大的那个AI伙伴，学会所有你需要的技能。
然后，用你最自然的方式——说话——去创造一切。
这玩意，有点意思。
它不仅仅是个工具。
它是一个关于未来工作方式的，非常具体的预言。
https://github.com/nexu-io/open-design