15分钟做完2天的活,一个设计师CEO的vibe coding真相
AI Coding

15分钟做完2天的活,一个设计师CEO的vibe coding真相

F
Felix Lee(ADPList CEO,设计师转型独立开发者) | 主持人: Peter Yang
2026年3月22日YouTube
返回首页

金句精选

「Claude Code的输出质量比其他编码代理都高,从审美角度来说,它就是赢家。」

「大部分设计师还不够焦虑,他们仍然在用Figma,下班后也不会去学Claude Code。」

「它自己生成了3D地球,我连素材都没找。我只是提供了一个截图。」

「设计已经太标准化了——设计系统、Auto Layout、组件库,创意空间越来越小。」

「用Figma MCP的话,所有素材自动同步,不用来回折腾要图标和字体。」

Felix Lee打开屏幕分享时,光标停在一个叫felix.dev的个人网站上。深色背景自动切换,AI聊天框回答着关于他创业故事的问题。

「这些都是我自己做的,没用任何第三方插件。」他说这话时,语气像在讨论周末的家常菜。

这位ADPList的CEO,三个半月前还是个标准的设计师。现在他每月看着平台上5.5万次导师预约,顺便用Claude Code搭了三个完整产品——个人网站、全球预约可视化系统、落地页分析工具。

12小时造出一个地球

第二个演示更离谱。

屏幕上旋转着一个3D地球,黄色光点标记着全球各地的ADPList线下聚会,白色连线代表导师与学员的通话路径。底部滚动着2025年贡献导师的名字,像股市行情板。

「我给Claude Code看了Shopify的全球订单地球,然后扔了一堆CSV数据——城市、国家、通话时长、会话数。告诉它照着Shopify那样做一个。」

Peter Yang追问:「你是不是下载了3D地球素材?」

Felix摇头:「它自己生成的3D地球,我连素材都没找。」

整个项目花了12小时。以前这种需求得写PRD、排开发优先级、等一两周才能上线。

从Figma到代码,只要一个复制粘贴

真正的演示从一个落地页设计开始。

Felix在Figma里打开ADPList的电子书下载页——标题、表单、封面图,标准的营销落地页布局。他切换到开发模式,复制设计链接,粘贴到Claude Code。

「用Figma设计实现这个落地页。」

屏幕开始滚动代码。Cursor的预览窗口里,设计逐渐成型。表单、按钮、响应式布局,连书籍封面的阴影都跟设计稿一致。

十分钟后刷新浏览器,落地页已经能用。

「以前这种页面要让增长团队或产品经理去协调开发资源,可能要一两天。如果想用Webflow或Framer,也得学几个小时。」Felix点击提交按钮,页面跳转到下载确认页,「你看,表单提交后的状态也做好了,PDF下载链接已经接上Google Drive。」

整个流程不到15分钟。

Peter问:「这比直接截图扔给Claude Code好在哪?」

「资源文件。如果用截图,它会不停问你要图标、背景图、字体。用Figma MCP的话,所有素材自动同步,不用来回折腾。」

FigJam的流程图直接变成游戏

接下来Felix做了个更疯的演示。

他打开FigJam,让Figma AI生成一个Flappy Bird游戏的流程图——开始界面、游戏逻辑、计分板、难度设置。流程图画得挺乱,方块重叠,连线交叉。

然后他复制链接,扔给Claude Code:「根据这个Figma流程图,做一个Flappy Bird游戏。」

代码开始生成。几分钟后,浏览器里出现了一只胖乎乎的鸟。点击屏幕,鸟开始扇翅膀,云朵飘过,管道从右侧滑来。

Peter试玩了一把,撞上管道:「这也太敏感了吧。」

Felix调了难度到简单模式,游戏变得温和一些。记分板、设置菜单、历史最高分,流程图里提到的功能都在。

「你觉得它真的读懂了流程图,还是就知道怎么做Flappy Bird?」Peter问。

「100%它本来就知道怎么做。」Felix很坦率,「但重点是,设计师如果收到产品经理的流程图,懒得细看,直接扔给Claude Code也能出东西。在大公司,流程图是必需品,工程师要看,团队要对齐。现在流程图还能直接变成原型。」

代码反向输出回Figma

最后一个演示是Figma两天前刚发布的新功能:把代码变回设计稿。

Felix打开Growth Analyzer——那个花了48小时做的落地页分析工具——在本地运行。然后告诉Claude Code:「把这个导出到Figma。」

几秒钟后,Figma里出现了一个新文件。整个界面完整还原:按钮、表单、图标、配色。Felix点击一个按钮组件,颜色、圆角、阴影参数全在。

「关键是它们都是矢量图,不是截图。SVG格式,可以改颜色、调样式,就像正常设计组件一样。」

Peter有点困惑:「但你改完还得再扔回Claude Code才能上线,这不是绕了一圈?」

Felix笑了:「对,很多人都这么说。大家真正想要的是直接从Figma设计生成全栈应用——前端、后端、数据库一起出来,而不是来回倒腾。」

设计师还没有足够焦虑

聊到最后,Peter问了一个直接的问题:「如果你是设计师,看到这些演示会不会害怕?」

Felix的回答出人意料:「很多设计师还不够焦虑。」

他调出一组数据。ADPList每月有5.5万次导师预约,涉及大量职业咨询。过去6个月,关于Claude Code、Cursor这类深度AI工具的讨论,只增长了10-20%。

「大部分设计师还在用Figma,工作流没太大变化。下班后也不会去学Claude Code。」

为什么?

「一是Figma太强势了,大家过度依赖它。二是终端界面、IDE这些东西对设计师来说太吓人。门槛太高。」

Felix自己这三个半月做的所有项目——个人网站、地球可视化、增长分析工具——没有一个是从Figma开始的。

「我直接在Claude Code里迭代。连Auto Layout都不用学了。」

Peter表示认同:「说句可能得罪设计师的话,我打开有些Figma文件,里面20个不同的设计探索,比终端命令还乱。终端至少我输同样的命令就能得到同样结果,Figma里我都不知道该看哪个版本。」

Felix的观点更激进:「设计已经太标准化了。设计系统、Auto Layout、组件库,创意空间越来越小。你看以前还有WeWork、Wing这些大胆的设计,现在都是模板化的界面。」

他顿了顿:「我觉得设计师应该从这些约束里解放出来。」

Claude Code为什么比Cursor好

整个演示过程中,Felix一直在Cursor里调用Claude Code,而不是直接用Cursor的AI。

「Claude Code的输出质量明显更高。我试过Gemini AI Studio、Cursor自己的Codex,从审美角度讲,Claude Code就是赢。从Markdown到代码,质量都更稳定。」

他补充说,同样是用Opus 4.6模型,在Cursor和Claude Code里跑出来的结果都不一样。

「我不知道背后的技术原理,但确实不同。」

Peter提到有人说Cursor在重构代码时更强,Felix同意,但补充:「对我来说,从零到一做产品,Claude Code的品味更符合我的预期。」

技能文件:让AI按你的规矩做事

演示到最后,Felix展示了一个叫「UX Reviewer」的技能文件。

他让Claude Code给自己的增长分析工具截图,然后用这个技能文件做设计评审。几秒钟后,AI列出了高层次的结构问题、关键修复建议、交互改进方向。

「技能文件就是一套指令模板。你可以自己写,也可以让Claude Code帮你生成。」

Felix的技能库里还有一个「病毒式推特写作」技能,参考了Nikita Beer的推文风格,加上他自己的语气。

「我的推文不是100%由AI写的,但技能文件给了起点。写PRD、文档、设计评审,都可以用技能文件。」

唯一的问题是,Claude Code不太会主动识别该用哪个技能。Felix每次都得明确说:「用UX Reviewer技能来评审。」

「我以为只有我有这个问题,后来发现很多人都得手动指定技能。」

工业设计师的耐心

聊天快结束时,Felix提到一个冷门话题:工业设计。

「我最早学的是工业设计,不是软件设计。」

他说起硅谷设计师们追捧的Jony Ive——那个设计法拉利的传奇人物。

「软件设计师永远不会去设计法拉利,因为硬件和工业设计完全是另一个维度。我有个朋友在哥本哈根做工业设计,他们会考虑笔按下去的声音是不是够奢华,材料成本,制造工艺。因为硬件做出来就没法撤回,必须一次做对。」

「软件设计师可以随时回到Figma改颜色、调间距,很随意。但工业设计师带来的那种意图感,是软件设计里很少见的。」

Peter接话:「所以数字设计师会被AI干掉,但工业设计师不会?」

Felix笑了:「我不知道。」

50分钟的演示结束,Felix关掉屏幕共享。

他说希望看到这期节目的设计师能感到兴奋,而不只是焦虑。

但数字摆在那里:15分钟 vs. 2天,12小时 vs. 数周,三个半月 vs. 零编程经验。

兴奋和焦虑,可能本来就是同一件事。