一、全文速览图
我听一个在 AI 大厂上班的朋友爆料，他入职整整半年，只写了 3 行代码。
一位常年和苹果合作的大佬最近也直言，我现在只拿 Figma 画个草图，剩下 90% 的时间，全在教 AI 做事。AI 都在替他们打工，怎么到了我手里，画风就变了……
我平时用 Codex、WorkBuddy 搞图做视频，一句话生成出来的效果确实惊艳，可剩下的时间全是在改细节，而且越改越丑，图片直接糊掉。
问题到底出在哪？
直到我刷了 240 万人订阅的硅谷顶流播客 YC 的最新一期。
节目里，Shopify 设计负责人（前 Apple、Google 合作大佬）Marvin 直接公开了他们团队的真实工作流。
一个动效，他死磕了 91 轮提示词，最后靠一个妙招解决。
我看完脑子嗡了一下，原来还能这么干？
我把这 1 小时的播客里最值钱的 3 个高阶实操和全套工具，全给扒出来了，大家直接用！
二、设计师角色大转变
以前设计师像是画布上的手艺人，现在的设计师更像是编辑。
Marvin 展示了之前在 Molly 工作室为品牌巨头 Collins 设计官网时的 Figma 源文件。
密密麻麻几百个画板，每一个间距、颜色、桌面端与移动端的适配都必须在 Figma 里被反复确认到像素级完美，然后才能交给前端工程师。
原因很简单：在过去，用代码去测试一个想法的试错成本太高了。
但在今天的 Shopify 设计工作室，这套流程已经被淘汰。
Figma 成了草稿本，当你脑子里有个想法，先在 Figma 里拿最简单的几何形状画个草图，直接喂给 AI，让它生成一个能在真机上点、能滑、能跑的 Demo。
只有当遇到用文字跟 AI 解释不清的布局或交互卡点时，才会临时切回 Figma 画两笔示意图，再喂给 AI。
原型干掉了产品需求文档，老板读十页需求文档未必拍板，但在 Shopify，CEO Tobi 当场摸到一个能直接交互的原型，感觉对了立马通过，团队转头就立项整活儿。
设计师角色大转变，以前设计师大半力气花在做出来高保真视觉稿，现在两人的小分队就能干完过去一群人的活，设计师的核心竞争力变成了审美把关与拆解任务。
三、实操如何用 AI 搞定高级动效
我之前用 AI 写过前端动效，功能是能跑通，但质感是真稀烂，完全没有那种丝滑的高级感。
在视频前半段，Marvin 演示了他是如何利用跨工具协作，把脑海里的丝滑交互变成现实的。
这其中的 3 个核心实操技巧，每一个都能直接复用到你的日常工作流里。
技巧 1 文字说不清的动作节奏，直接画草图
Marvin 周末用 Codex 做了一个 2 行 3 列的草地视频小页面，点开放大、往下拉关闭。Codex 做出来了，但有个致命毛病动效不可打断。
就像电梯门正在关，你狂按开门它却假装没看见，非得等上一张卡片完全落回原位，再去点别的才有反应。
怎么跟 AI 描述当上一张卡片收起动画进行到一半时如果用户点击另一张？
写着写着自己都懵了。
Marvin 干脆打开 Figma 画了红蓝方块，点红的升起 → 往下滑半路点蓝的 → 蓝的马上接管升起。
截图直接丢给 Codex，AI 一眼看懂，当场修好。
技巧 2 先把骨架搭对，再补细节
Marvin 把自己拍的草地视频丢给 Codex：变成网页着色器，像素级还原，色号一模一样。
AI 答应得比谁都痛快：“No problem，I got you。”
结果跑出来一堆像塑料的绒球，假到不行，没有立体感。
他没有去写更长的提示词，而是让另一个 AI 当诊断师，他截了张翻车图连同原视频一起丢给 ChatGPT，为什么那个 AI 就是不懂我要什么？
ChatGPT 提醒他，得告诉它光从哪来、影子怎么投，最好把画面拆成 6 块一步步来。
然后给 AI 一张地形图， 原来 AI 一直以为地面是平的，其实草地底下是一个个小土丘。
他让 ChatGPT 把草地底下的高低结构画成一张等高线高度地图喂回给 Codex。
有了高低起伏的地形骨架，几十万根草叶一根根长在上面，真实感瞬间拉满。
技巧 3 说不清楚的感觉别描述，做成实时调参
草有了，但草叶长短只差零点几，看起来像被推子剃过一样齐。
另一个复刻 LoveFrom 物理碰撞轮播图的项目更夸张，为了调出拖拽松手时把左右两张卡片撞开的能量感，他前后写了 91 轮提示词，总感觉心里有数，但在聊天框里根本描述不出来。
要是工程师接到这个活，我估计得疯。
他装上了朋友 Josh Puckett 开发的开源小工具 DialKit，把草叶多长、地形多深、风力多大、回弹阻尼，全都变成页面右上角的滑块，可以实时调整参数。
DialKit 这种面板的作用，就是把界面参数、状态、数值直接摆在你眼前，还能开关图层 / 干扰项。你一关掉表层草地，底层地形歪没歪，一眼就看见了。
四、审美体检，克制与减法
访谈后半段现场点评了观众投稿的官网，总结了设计的三个万能法则
1. 一页只能有一个主角
用户打开页面，眼睛得先看哪儿、下一步点哪儿，页面得替他决定。
Endstack 那种一打开像电脑桌面，侧边栏、聊天记录、一排同色按钮全在抢戏，等于没主角。
最想让人做的事，就做大、放最显眼，别的都往后靠。
2. 别拿花里胡哨的动效遮丑
AI 现在做动效太便宜了，于是 SkillSync 每个格子里弄个小圆点跑来跑去，看着很忙，但用户啥也没看懂。
动效是帮人理解的，不是证明你看我会动。
3. AI 加东西不要钱，能删才是真本事
谁都想把所有功能塞首页，最后页面变成杂物间。
Mintlify 看着干净高级，不是因为加得多，是因为有人敢删，留白，先讲重点，想细看再往下翻。
设计师值钱的地方就在这儿，不是往上堆，是敢往下砍。
五、干货时间
最后，我把这期播客里用到的两大宝藏工具分享给大家。
DialKit 实时调参面板：https://www.dialkit.dev/
由设计师 Josh Puckett 开发的参数实时微调工具包，它能直接把代码里的弹簧物理参数、颜色、间距、Shader 变量变成页面上的可视化滑块和曲线面板，彻底告别在聊天框里求 AI 改数值。
Blossom Carousel 原生物理拖拽轮播库：https://www.blossom-carousel.com/
Marvin 强烈安利的免费开源轮播组件库，由前 Molly 合作工程师 Jesper Vos 开发，已被 Collins、ElevenLabs、Granola 等顶级审美网站采用。大家觉得今天的内容对您有帮助的话，欢迎关注我们