设计师用Cursor做精美原型

• 本期主持人是 Claire Vo（《How I AI》播客主理人，自称"产品负责人 + AI 狂热爱好者"），嘉宾是 Elizabeth Lin——一位设计师，而不是软件工程师。Claire 强调这个角度的特别之处：Elizabeth 教设计师用 Cursor（一款基于 AI 的编程工具，本来是给程序员写代码用的）"不是用来 code，代码只是个副产品（byproduct），真正教的是怎么做出更好的设计"。→ 详细
• Elizabeth 说用 Cursor 工作让她想起以前在 Neopets（一个老牌养宠物的网站）上做网页的日子——她最近做了好多"特别好玩、带点混乱、活蹦乱跳小 GIF"的 prototype（原型，指能点能动、像真 app 一样体验的 demo）网站，比如有个会跟着鼠标走、还带闪光的小光标。这让她意识到"像 Cursor 这样的工具其实可以非常有创意"。→ 详细
• 本期会覆盖三大演示：用 prompt（给 AI 的指令）探索不同设计美学、把交互和声音融进原型、以及把一个超丑的 dashboard（数据看板）变好看。→ 详细

• Elizabeth 展示了一个 demo：Cursor 提议"咱们来做三维立体的卡片吧"，而她喂给它的是韩国女团 aespa 一张 MV 的截图，说"从这个里面找灵感吧"。她观察到画面"有点赛博朋克（cyberpunk，一种高科技+低生活的未来都市风）的感觉，用了很多紫色和蓝色"，于是顺着这个方向跟 AI 一起迭代。→ 详细
• 她把这个做成了一个作品集（portfolio），目的是展示"创意性地探索其实有多容易"——做了个带好几种"混乱模式"的界面，玩得特别开心。她坦白"第一版做出来并不怎么好看，但 AI 做的很多决定真的给了我启发"，让她能在此基础上推进出满意的东西。→ 详细
• 她也特意做了个更"保守"的例子，聚焦"当今设计师普遍认可的好设计"长什么样，来证明她两头都能做。→ 详细

• Elizabeth 演示从"一个特别无聊、特别平淡、连 CSS 都没有的主页"开始。她说面对白纸常常难下手，所以她的第一个 prompt 是一个她特别爱用的固定句式："你能熟练实现哪些设计美学和设计流派？把这些风格列出来并向我描述一下（What design aesthetics and movements are you comfortable implementing? List the styles and describe them to me.）"→ 详细
• 她强调这个流程有意思的地方在于"你其实并不是带着一个想往设计里放什么美学的想法进来的，你反而是在用 prompt 让 Cursor 给你一些它能用的设计风格点子"——即把 AI 当灵感发生器，而非单纯执行者。→ 详细
• 她观察到一个规律：AI 最得心应手的是"网上特别流行的风格"，比如蒸汽波（vapor wave）就很在行，但对更偏艺术、更冷门的流派（如达达主义 Dadaism）就没那么擅长——因为训练数据里前者多、后者少。→ 详细

• Claire 点出一个对非设计背景的人也很有用的副作用：Cursor 会把一种风格（比如 cyberpunk）拆解成一串描述性的词——"霓虹配色、反乌托邦元素、故障（glitch）效果"。Claire 说"这些是我作为有设计背景的人都未必想得到的词，但它直接把这套语言喂给你"。→ 详细
• Elizabeth 由此特别鼓励大家"多跟 LLM（大语言模型）对话，因为你永远不知道能从中学到什么，而且你会慢慢学会更好地用它的语言来沟通"——有时你也搞不清它说的"赛博朋克"到底指什么，把那些具体细节扒出来很有帮助。→ 详细

▲ 她让 AI 报"会哪些设计风格"后挑出的 Y2K 粉色原型集（含 Confetti button、Mac piano、Typography experiments）——风格是显式"点的菜"，不是 AI 默认。

• Claire 挑了两种反差极大的风格：Brutalist（粗野主义，"因为这名字听着就特无聊"）和 Y2K（千禧年代复古风）。Elizabeth 输入 prompt："你能不能把这个主页重新设计成 Brutalist 加 Y2K 的风格？"她总跟学生说"结果可能会因人而异，有时候特别酷，有时候没那么酷，但好处是你随时可以撤销（undo）"。→ 详细
• 生成结果让她惊喜："它做了一些特别狂野、特别搞笑的东西，老实说如果是我从零设计根本不会想到。"比如一个一闪一闪、模仿命令行（command line）的打字机动画——她说"哪怕我 CSS 还算挺溜的，从零实现这个也得花好一阵子"。→ 详细
• 她也吐槽这些工具的通病："它们特别喜欢加随机的 hover（鼠标悬停）效果，还有这种随机的发光（glow），这个发光真的有点用力过猛"，但她觉得稍微迭代一下就能变得有意思。→ 详细

• Claire 问那个页面的基础框架（outline）是不是也用 Cursor 做的。Elizabeth 坦白这个框架是她提前做好的，"因为做框架这部分稍微棘手，从零开始恰恰是 Cursor 比较不擅长的地方，用 v0 和 Lovable 这类工具反而更容易"。她有编程背景，所以能事先把项目底子搭好。→ 详细
• 她给新手的具体路线："先用 v0 把那种基础的黑白 prototype 跑起来，然后再把它拉进 Cursor 里做样式（styling）"——即用对工具做对的事，Cursor 专攻打磨视觉而非从零起项目。→ 详细

• Elizabeth 总结自己的偏好："与其一上来就带着一个想法，我通常更喜欢反过来——先从一个比较宏观的层面出发，看看你能从零创造出什么，然后我再把它接过来，如果觉得哪儿特别酷就继续迭代。"→ 详细
• Claire 产生强烈共鸣：作为"真的在 Y2K 那个年代写过代码的人"，这正是当年她会觉得超级炫酷、要专门学特殊 CSS/HTML 技巧才能做出来的东西；她也提到自己玩过 Webring 风格的个人网页设计，感叹"AI 正在让这种纯属个人的设计空间重新变得唾手可得，真的特别让人振奋"。→ 详细

• Elizabeth 说现在"没有什么比回到这个页面、看看它生成了什么更有意思的了，我永远猜不到会发生什么"。她试过类似的 prompt，"有时候它做出来的东西完全不同，所以反复用同一个 prompt、看每次能得到什么，特别好玩"。→ 详细
• 现场她们决定"用同一个 prompt 再跑一次看这次什么样"。结果"走了一条完全不同的路线"——比上一版简约得多。两人发现自己反而想把上一版那个发光效果要回来，于是调出之前的截图做对比："有些地方相似，但风格其实差别很大"。→ 详细

• 当被问到不喜欢结果怎么办，Elizabeth 说她会重新 prompt，或者"用设计师的思维在这基础上继续迭代"。关键习惯是："我只要不喜欢什么，就一定会还原到 checkpoint（restore checkpoint，存档点，相当于一键回退到 AI 改动之前的版本）"。→ 详细
• 她给出的原因很实在："你顺着一条自己不喜欢的路越走越深，之后就越难爬出来。"所以她"用还原 checkpoint 用得相当随性"。→ 详细
• 但她补充一个配套技巧：多截图。因为每次重跑结果都不同，"万一你又想把那个发光效果找回来"，截图能让你回看之前长什么样。→ 详细

• Elizabeth 展示了她最早做的原型之一——一架能弹的钢琴。她说"像这样的东西用现有原型工具（比如 Figma）非常非常难做，因为你基本没法把声音和各种操作动作挂钩起来；但用 Cursor 这种、或者说直接写真实代码的方式，接入声音超级超级简单"。→ 详细
• 她"一般用一条 prompt 就能生成一架能弹的钢琴"（坦言"有点运气成分，有时候不灵，有时候就成了"）。做出来的钢琴可以立刻上手互动，她甚至给它编了一段"发布用的曲子"，还能调音色、改 waveform（波形）——切到方波（square waveform）时声音会变得"很刺耳"。→ 详细
• 这个例子的意义在于：它直观展示了"用代码能做的事情有多少是平时用传统设计工具做不到的"，或者就算能做也得花长得多的时间。→ 详细

• 重新演示时，Elizabeth 强调一个习惯："永远记住不停地开新对话（new chat），因为你永远不知道它会从之前的内容里调用什么 context（上下文）。"她的 prompt 是："给一个数字钢琴创建一个新 prototype，风格仿照老版 macOS"——她发现 AI 做这种风格"相当在行，因为它真的懂这是什么"。→ 详细
• 关键招数是她建了一条 Cursor rule（给 Cursor 的常驻规则，每次都会自动生效），搭出一个"原型 playground"——这样她在同一个 repository（代码仓库）里做新原型时不用每次重新搭环境。→ 详细
• 这条 rule "特别简单"。她说"很多人的 rule 写得超级超级长，但我的基本上就是：如果我让你创建一个新 prototype，就复制这个文件夹，然后把它加到我的主页上"。果然生成后，新钢琴被自动放到了主页上。点击能弹（用键盘按键还弹不出来），Claire 直呼"这太厉害了"，还说不知道该不该告诉爱做游戏的孩子们"还能做带声音的游戏"。→ 详细

• Claire 问她作为有工程背景的人，会不会回头研究"它到底怎么实现的"。Elizabeth 认为"对底下发生的事有个基本认知挺重要"，她常问 AI"你是用什么来产生这些声音的？用这个 library（代码库/工具包），我能拿哪些选项来做实验？"→ 详细
• 这类对话能让你看到可能性："原来只要我想，我真能让它听起来像小提琴，或者做出更鲜活的声音。"但她不钻研所有细枝末节，因为"我个人更喜欢这一块——比起搞懂更深层的运作原理，我更喜欢看到它呈现出来的样子"。→ 详细

• Claire 问怎么把原型从"好玩的点子"推进到"工作中真正能用"。Elizabeth 说她教设计师时第一步是先让大家对"用 Cursor"这件事本身兴奋起来，所以才从钢琴这类简单又能跑的项目入手。→ 详细
• 到了实战那面就得做些"稍微枯燥"的事：怎么用上 design system（设计系统，一套统一的组件和规范），怎么把现有的 sidebar（侧边栏）复刻进原型。她把这比作"当年设计师从 Sketch 转到 Figma、得把设计库迁过去那会儿"。→ 详细
• 她的建议：前期把你的 component（组件，如按钮、卡片等可复用的 UI 模块）或至少一部分，"以一种对设计师友好的方式搬进代码"，是很值的——因为这样团队里任何人都能用这些组件做原型。→ 详细

• 作为带设计团队的人，Elizabeth 直面焦虑："很多人特别担心 AI 会抢走他们的工作。我一直跟团队说：好玩的部分根本不是把按钮和表单摆到页面上，真正有意思的是当用户按下按钮、它给用户带来一个惊喜瞬间（a moment of joy）的时候。"→ 详细
• 她由此抬出三件 AI 让设计师如虎添翼的事：声音设计（sound design）——"大家在应用里用得太少了，它能带来愉悦感、强化品牌，你完全可以做一个有品牌特色的声音"；Motion（动效）——AI 能帮你"把东西打磨得更精致、更有质感"；交互性（interactivity）。钢琴正是把这三样融在一起的绝佳例子。→ 详细
• 她注意到趋势："越来越多人在网站里加这种小小的'叮''哔'音效了，有了 Cursor 这类工具，希望以后会越来越普遍。"→ 详细

• Elizabeth 展示了她让 Cursor"不附带任何别的信息、直接做的一个个人理财 dashboard"。她说"一般你让这些 LLM 凭空做任何东西，出来的效果都不会太好。有些人看到会觉得哇好厉害，但作为设计师我会觉得：其实挺丑的"。→ 详细
• 具体丑在哪：drop shadow（投影，元素下方那种阴影）一大堆、配色乱七八糟、字体排版不行、布局莫名其妙（"为什么这个东西在圆圈上面，我也搞不懂"）。这成了"从难看到惊艳"演示的起点。→ 详细
• Claire 借此引出一个对所有管理者都通用的点："设计经理有时候特别擅长、有时候又特别不擅长把自己想要的东西讲清楚，所以不管用不用 AI，你的 prompt 技巧用在跟真人沟通上同样管用。"→ 详细

▲ 救活"难看 dashboard"的关键一句 prompt："去掉所有 drop shadow（投影），让组件更现代，做成 Robinhood/CashApp/Stripe 那样。"——点名讨厌的东西 + 给对标产品。

• Elizabeth 的第一条 prompt 一上来先消歧义："我们来弄这个理财 dashboard"（因为项目里有好几个子项目，必须说具体）。然后因为她"特别讨厌 drop shadow"，明确让 AI 把所有 drop shadow 都去掉，再说"把组件做得更现代一点"。→ 详细
• 关键招数：让它参考公认设计得好的理财产品——"做得像 Robinhood、Cash App 或 Stripe 之类的"。用大牌产品名当对标，比自己干讲省事得多。→ 详细
• 她个人偏好短 prompt："我知道有一整派人特别推崇写长 prompt，但我更喜欢偏对话式一点的方式，虽然很多时候 agent 会输出一大堆我根本不看的字。"→ 详细

• Claire 问她既然这么讨厌 drop shadow，有没有设一条"永远不要用投影"的 rule。Elizabeth 说那条没有，但她确实有一条 rule 是**"不要用 title case（每个词首字母都大写）"**，因为 title case 更让她抓狂——她老写"请、请用 sentence case（只有句首字母大写）；别动不动把所有东西都搞成标题、全大写，没必要"。→ 详细
• 她当场反思"也许我真该再加一条专门管 drop shadow 的 rule"——这说明：凡是你每次都要纠正的毛病，就该固化成一条常驻 rule，而不是每次手动重复。→ 详细

• 第一轮 prompt 后 dashboard 已有改进：背景加了线条让图表位置更清晰、加了灰底、去掉了 drop shadow 还给每个元素加了小边框。但她发现还有问题（字体仍怪、背景没铺满整宽），于是只挑"最让她膈应"的那一个先改——背景没填满整个页面。→ 详细
• Claire 总结出她的迭代风格：每次只盯一两个关键点，而不是"把所有问题都修了，这是我列的全部问题清单"。Elizabeth 给出原因："如果我一口气给它列一长串待办，它会忘掉最后那三条……所以我尽量一次只让它做一件事。"→ 详细

• 接着 Elizabeth 想简化配色（页面上灰、蓝几种色调有点杂），并让 AI**"参考 Edward Tufte（数据可视化领域的宗师级人物）的作品"**，看它认不认得。Claire 笑称"哦，你真是个地道的设计师"。→ 详细
• 她点出"给参考"为什么有效："它对大部分这类参考都有概念，能帮我省去很多解释的功夫。如果我不说 Edward Tufte，就得自己去解释他那套原则，那会多花不少时间。"——即用一个 AI 已知的专有名词，一次性传递一整套设计原则。→ 详细
• 结果 AI 把配色做得"非常素净（muted），确实挺 Edward Tufte 的"，还顺手把边角改方了——虽不一定是 Elizabeth 本人的风格，但方向对了。→ 详细

• 被反复问到怎么追踪好用的 prompt，Elizabeth 确认"我确实有一个文档专门存这些 prompt，就是从那里面捞出来用的——这条上次效果不错，那这次再试一遍。我真心建议每个人都搞一个这样的文档"。→ 详细
• 她还在琢磨一个更进阶的闭环：如果某个东西视觉效果特别好，就让 Cursor 帮你生成一条 note 或 rule 来描述它——比如"这是个 Y2K 风格的绝佳例子，你以后会怎么向自己描述它？"，然后以后做别的项目时直接引用这条 note。→ 详细
• Claire 帮她把闭环说圆了：先问 AI 都会哪些风格 → 选一个（如 Y2K）跑出特别喜欢的效果（如那个 glow）→ 因为同样的词再输一遍结果会完全不同，所以让 AI 自己记下"怎么复现这个效果"，下次直接调用。Elizabeth 连说"这招真的很聪明"。→ 详细

• 最后一条优化 dashboard 布局的 prompt 是："你能不能改进布局，让它看起来像 Apple 的顶级设计师会点头认可的样子（something a top designer at Apple would approve of）。"她说这条"上次效果挺好"。→ 详细
• Claire 把 Elizabeth 用"别的公司/人当例子"的三种用法漂亮地归了类：① 用 old Mac 那种大家都熟的常见美学/设计系统；② "做得像同领域里那些优秀产品一样"（如 Robinhood/Stripe）；③ 最妙的——"做成某个我尊敬、我觉得品味好的人会认可的样子"，Claire 称之为"一个很妙的心理学小把戏"。→ 详细
• 结果 AI"真的开始用栅格（grid）了，往各个区域里填内容，比一开始更像一个真正的产品了"。Elizabeth 总结：就靠几条 prompt，她已经把那个"偏过时、满是 drop shadow 的版本"，变成了"更有品牌感和个性、遵循视觉设计原则"的东西，"referencing（给参考）真的很有用，因为那是它能听懂的语言"。→ 详细

▲ 改造后的理财看板：克制配色、清晰的柱状/环形/折线图、突出关键数字（$5800 / $3420）。数据可视化是 Cursor 的强项场景——对你的 StockHelp 选股看板直接可借鉴。

• Claire 指出在 Figma 这类工具里做 data visualization（数据可视化）"特别费时间"——光是把图表排好、把假数据填进去、想清楚百分比该是多少就够花时间了；而且鼠标悬停柱状图时的那点交互效果"本来很难做"。→ 详细
• 所以她喜欢这个例子有两个原因：一是展示了"怎么用三条左右的 prompt 把一般般的东西做到非常出色"，二是"数据可视化本身就是特别适合用 Cursor 来做设计的一块阵地"。→ 详细
• 当被问还有哪些"特别难设计、会想伸手用 Cursor"的场景，Elizabeth 的答案是：图表和数据可视化算一个，以及"任何需要用真实数据做原型的东西"。→ 详细

▲ 用 Cursor 接 Notion 数据库做的"My bookshelf"（12 books，带书封/评分/分类）——把 Notion 当唯一数据源，上面套一层好看 UI，自制 Goodreads。

• Elizabeth 最近做了很多"由 Notion 数据库驱动的小应用"，她说"用 Cursor 去对接 Notion 数据库真的特别酷、特别强大"。具体成果：一个小书架，背后是 Notion 数据库在撑着，会展示她最近读过的书。→ 详细
• 这个原型的愿景是自制一个属于自己的 Goodreads（一个记录读书、给书打分的社交网站）——"我的梦想就是有一个属于自己的 Goodreads"。因为整个由 Notion 数据库驱动，她"用 Cursor 很轻松就做出来了"。→ 详细
• Claire 一语点破这个模式的精髓："把 Notion 当作信息的唯一可信源（source of truth），然后在它之上给自己搭一套漂亮的 UI。" Elizabeth 设想等把所有书录进去后，就能看出"我读得最多的是哪类书、给书打高分的频率、最常读哪些作者"——一个她想继续迭代的个人项目，而"搭它真的超级超级简单，就是因为有 Cursor"。→ 详细

Q1：有没有哪些设计的小活儿，是你到现在还特别喜欢亲手做的？

• Elizabeth 说"这些大多跟更偏平面设计（graphic design）的东西有关"。她特别喜欢"给朋友随手做张海报"，还说"把朋友的脸 P 进各种各样的情境里，这种事还是特别有意思，是这些 AI 工具替代不了的——因为做这件事的过程本身就太好玩了，我永远不想这份乐趣被夺走"。→ 详细

Q2：当一切都从同样的数据里生成，设计师怎样才能继续注入创造力、得到新风格？

• 她认为"设计师一直以来其实都是从非常相近的来源里找灵感"，所以最关键的是拓宽你的灵感来源，并能跟这些模型对话、帮它们理解你到底被什么打动。具体做法是"丢一些特别随机的东西给它，比如某个 K-pop 的 MV，或者它平时不太会借鉴的艺术作品，看看它能从里面提取出什么"——这对生成更不一样的东西"非常有帮助"。→ 详细
• 她点名一个同质化陷阱："现在很多人会卡在'我们必须拿 shadcn 当起点'——shadcn（一套很多人默认在用的现成 UI 组件库，做出来容易撞脸）拿来做个符合设计规范、过得去的东西不错，但它不太有创造力。"Claire 接话"市场上缺一个'混乱风'的原型工具，现在所有东西都太'端庄'了"，建议这可以是 Elizabeth 的下一个 prototype。→ 详细

Q3（招牌问题）：当 AI 净做丑东西、就是不听话时，你怎么逼它做出你想要的？

• 她说最抓狂的是做动画时"它老想把动效做得特别特别夸张"。她的办法是一遍遍重复同一个 prompt 加码施压："我会说'再含蓄一点'，然后'不行，再含蓄点'，然后'拜托，再再含蓄一点'。"她觉得"有时候那种较劲的劲儿是有用的"。→ 详细
• 要是加码也没用，她的终极建议是直接重来："行吧，到这份上了，干脆重启，看看从头开始能得到什么。反正一开始走到这一步也没花多久，重来也无妨。"→ 详细
• Claire 回送一个梗当彩蛋：上一期某位嘉宾的招数是让 AI**"含蓄一千倍（a thousand times more subtle）"**，建议 Elizabeth 下次试试。→ 详细

收尾金句串联

• Claire 在结尾把全期复盘了一遍："我们用 Cursor 征集设计风格做了个稍微混乱的个人网站；你让我们看到包括声音在内的交互现在真的很容易实现；你又把一个设计'从难看做到了惊艳（from yuck to yum）'；还演示了怎么用 Notion 和 Cursor 这些易上手的工具给自己搭一个有数据库支撑的产品。"→ 详细

Elizabeth Lin（本期嘉宾，设计师）

• 社媒：全网一般都叫 "Lil Elizabeth"（"I'm usually everywhere on the internet as Lil Elizabeth"）。→ 详细
• 课程：她正在教一门叫 《Prototyping with Cursor》（用 Cursor 做原型） 的课。→ 详细
• 网站：designisapart.com（课程入口）。→ 详细

播客本身《How I AI》（主持人 Claire Vo）

• 官网：howiaipod.com（可看所有往期内容、了解更多）。→ 详细
• 收听渠道：YouTube、Apple Podcasts、Spotify 或常用播客 App；欢迎点赞、订阅、留言、打分写评价。→ 详细