今天，我与 Magic Patterns 的联合创始人兼首席执行官 Alex Danalovich joined。Magic Patterns 是一款 AI 设计工具，能在几分钟内将你的想法转化为真正的交互式代码原型。我们将深入探讨 Magic Patterns 的工作原理，聆听他作为非设计师的创业起源故事，并回顾一些初创公司网站的设计优化案例，帮助它们摆脱那种仅凭感觉编码（vibecoded）的粗糙感。

Alex，感谢你的到来。“谢谢 Aaron，感谢你邀请我。我已经关注这个节目很久了。”“很高兴你能来。也许我们可以从介绍 Magic Patterns 是什么，以及你构建它的目标开始？”

“是的，Magic Patterns 是一款 AI 设计工具。产品经理、创始人和专业设计师都使用它来可视化地传达他们的想法，无论是通过原型、交互式模型还是可直接用于生产的代码导出。既然你不是设计背景出身，能谈谈构建这款产品的灵感来源吗？”

“确实如此。我们的独特之处在于我们是非设计师，我和联合创始人都是前端工程师出身。实际上，当我们加入 Y Combinator (YC) 批次时，我们的 YC 合伙人建议我们做一件非常擅长的事。问他：‘你们真正了解的是什么？’对我们来说，那就是将 Figma 模型转换为代码。Magic Patterns 就这样诞生了，它正是我们一直渴望拥有的产品。”

“我一直觉得自己不太擅长 Figma。作为创始人，我必须做大量的前端工程工作，同时也得做很多设计工作。我在想，有没有一种工具对像我这样的非设计师来说更直观、更容易上手？当时正是许多提示词转设计或提示词转原型工具涌现的早期阶段，你们也是最早做这一类的之一。”

“当我们于 2013 年 10 月推出时，我们肯定是先驱之一。当时市场上唯一类似我们的工具是 Vzero。回想起来，那甚至是在 Chat 功能普及之前。那时的模型非常糟糕，根本没有聊天交互的功能。没有来回对话，只是简单的提示词输入得到设计结果，再一个提示词得到一个新设计。没有与代理进行任何实际的互动。”

“你们申请 YC 时最初的想法不同，能讲讲你们的起源故事吗？比如如何结识联合创始人、在 YC 的经历，以及最终是什么促使你们构建这个产品？”

“是的。我和联合创始人最初申请 YC 时带来的项目是一个文本消息分析器，旨在分析群聊中的高频词汇或最有趣的消息。我们当时已经有了收入，我想这也是我们能进入 YC 的原因。但进去后，我们的 YC 合伙人告诉我们：‘嘿，这是你的公司。想法还可以，但我强烈建议你们做一件自己非常擅长的事。’对我们来说，那又是前端工程和通过代码实现 Figma 模型。”

“在随后的所有转型中，我们主要专注于此。你们花了多长时间才最终确定 Magic Patterns 这个想法？”

“大约花了9个月的时间。我们一直在围绕它打转。起初，我们在做一个组件库编辑器，类似于加强版的 Storybook。我们还开发了一个 Chrome 扩展程序，允许你将本地主机内容即时发布到互联网上，作为一种反馈工具，这后来成为了 Magic Patterns 的一个功能。在所有这些过程中，我学到的最重要的一点是 Paul Graham (PG) 的经典建议：找到10个真正热爱你产品的用户。”

“那些转型都没有带来这样的结果。我们没有那‘10个真正热爱我们的用户’，这里的‘爱’定义为付费并持续使用。然而，一旦我们推出了最终成为 Magic Patterns 的产品，这10个用户很快就出现了。”

“在感觉每6个月设计工具都在大幅升级的世界里，你们如何保持差异化？作为最早的提示词转设计产品之一，你们是如何找到受众并保持领先的，尤其是随着模型的不断改进？”

“我之前在视频中说过的话再次适用：客户是我们的信仰。我们每天都与他们交流，并适应新的工作流。例如，我们在大约一年前作为内部黑客松项目发布了一个 MCP（模型上下文协议）。起初我们以为它不会有什么大发展，但现在 MCP 的使用量彻底爆炸了。它已成为人们与 Magic Patterns 交互的主要方式之一。”

“因此，在 AI 领域，你必须不断地‘重生’你的公司以适应新的工作流。我很想看一个演示。你能向我们展示它是如何工作的吗？”

“好的，让我们开始吧。我想先展示一下我们在内部如何使用它。”

“你们总是在‘吃自己的狗粮’（使用自家产品），对吧？”

“我们痴迷于‘吃自己的狗粮’，但我们从不强迫这样做。因为如果是被迫的，你就得不到真实的反馈。产品必须足够好，让你真正想要使用它并选择它作为你的工具。”

“正是如此。并且要注意那些你没有选择使用的时刻。因此，我们一直在‘吃自己的狗粮’，为我们自己的产品创建加载指示器。你知道《机器人总动员》中的 WALL-E 和 EVE，或者如果你玩过视频游戏《传送门》，我们当时就在思考加载指示器可能呈现的样子。有趣的是，这里的一切都在全局聊天中。”

“因此，我们可以进行任何更新并同时进行多次修改。例如，我可以选择这两个元素，说：‘给我一个新的加载指示器样式，融合云代码图标和 Grokbot 的灵感。’同样有趣的是，当然你可以使用 MCP。让我们演示一下这个功能。我将进入 Cursor 编辑器，通过我们的 MCP，我可以直接提示：‘添加一个 Ask AI 版本的我的代理。’”

“有趣的是，我们看到许多企业使用这一点，因为他们拥有大量上下文信息，比如在 Cursor 或云代码中的 PRD（产品需求文档）和会议记录。他们可以利用自己已有的所有技能，然后立即将其放置在这个可视化画布上以更好地进行沟通。”

“这很有趣。所以在 Magic Patterns 中，你拥有这个强大的画布，当它是最佳工具时，你可以直接在那里工作；而当你想在代码或 Cursor 等其他应用中工作时，你可以通过 MCP 直接从那里拉取内容。”

“完全正确。同样酷的是，我们有这么多客户来找我们说：‘我正在使用 Cursor 和云代码，但它们只给了我本地主机。’”

我无法分享 >> 我不能把我的原型分享给任何人。说，哦，好吧，我们为您有一个解决方案。对。 >> 是的。是的。所以，这里酷的地方在于实际上我们可以看到我的同事在这里，以及来自那个我们发出的光标提示的光标代理，对吧？所以，他们同时工作，我们可以继续在这里打开它。 >> 我们可以看到这就像那个asy版本的云代码，对吧？嗯，有点在玩弄，哦，如果用不同的颜色会是什么样子呢？现在，显然，这非常像云代码风格。我们只是在这里获得灵感来制作我们自己的加载指示器。并且它生成了整个页面展示它所完成的工作。 >> 是的，完全正确。所以，就像我们鼓励用户做的一件事以及我们看到用户自己做过的事情是解释那种选择 >> 和不同的状态。所以，嗯，作为这里的另一个例子，如果你看看这个，我们在思考，好吧，在不同的屏幕尺寸下看起来是什么样？如果它是爪代码的话又会是什么样子呢？有点在玩弄，它应该更像头盔还是像枕头，对吧？再次只是头脑风暴和探索。

这是我们看到用户在我们这样的工具中获得最大价值的地方。是的。我的意思是，我认为在灵感和创意阶段最有价值的事情之一就是能够发出一大堆不同的变体。而且很多时候，嗯，很难管理这些，它们都在不同的标签页里等等。看起来 Magic Patterns 能够给你一堆漂亮的标签 >> 和选项，并且有点枚举了所有内容就像这里有一堆颜色选项，这里是身体选项，这里有不同的代理选项。在一个非常统一集中化的方式中做这些真的很酷，实际上进行微调并探索，找到你喜欢的东西，然后能够更快地进入流程的下一步。 >> 完全同意。因为我认为软件开发的改变特别是过去一年里，最后阶段被压缩得如此厉害。现在太容易了。每个人都在谈论这个，对吧？工程师们只是以光速移动。有太多PR需要审查。因此，结果我们可以花更多时间实际上进行头脑风暴，思考要构建什么和不构建什么，并使用像 Magic OS 这样的东西来真正可视化并深入思考 >> 不同的想法和概念、错误状态、加载状态，嗯当多个代理在文件上工作时会发生什么。这里实际上我觉得这个很酷，我们在思考好吧很多人使用MCP来使用我们的产品他们可能通过光标或爪代码或codeex使用它并思考那会是什么样子并通过魔法OS

我们实际上头脑风暴这种像LED风格的设计 >> 所以整个页面是一个画布吗？是的。所以，这全部是一个画布。嗯，很酷的是我们也把它几乎看作像一块艺术板，对吧？在那里你可以带入任何你的上下文，无论是图片还是PRD或文档。再次有趣的是我们没有被单个线程阻塞在这里，对吧？所以历史上，当你使用许多这些设计工具和原型工具时，你基本上必须等待AI代理完成，对吧？但是在任何一个上面，我们有很多很多线程在这里。所以我可以回到我们在画布上创建第一个设计时最初做的事情 >> 我知道你已经在总体上在画布之间来回切换[笑声]嗯作为一个界面，只是谈谈你的想法和你发现的关于处于那个前沿的情况什么时候有意义以及什么时候没有意义。 >> 完全同意。所以我会实际展示我们长期拥有画布的地方。你刚才看到的有点像2.0版 >> 但我们已经有一个画布了 >> 大约两年了。我们学到的以及实际上我们在招聘，顺便说一下，我们正在招聘一个设计师。我们要招聘设计师的原因之一是我们遇到的一个问题就是思考最初的入职体验以及几乎这种渐进式披露，即用户什么时候知道他们可以使用画布而不是仅仅是一个单一的聊天线程。我们得到的一个初步学习是像画布并不一定适合每个人。实际上这个

新产品我们已经发布，我们故意称它为操作系统因为它是一个所有上下文的操作系统。所以当然像界面是画布，对吧？我们在这里看到我们的图片你可以带入文档然后制作设计但它不是传统意义上的画布比如Figma在一边有一堆工具。 >> 是的。所以它更像是你拥有像画布一样的艺术板你可以进入并定制它们。嗯，你还谈到了前端以及能够看到实际体验你正在制作的设计的样子而不仅仅是拥有这些静态文件。也许你可以向我们展示一些关于这方面的内容吗？ >> 酷。所以是的，让我们在这里做另一个例子。有一件事对我们来说真的非常有趣是我们到处举办我们称之为魔法模式聚会的活动。我一直在想我想从这些聚会给我们的用户寄明信片。所以，让我们从头开始。所以，我们继续添加一些上下文。所以我基本上有这些图片我已经拉取了以及所有这些描述来自我们要举办的活动。所以，作为一个例子我刚刚在科利亚实际上主持了我称之为魔法模式Medí的活动我们在那里遇到了一些强力用户。我了解到魔法模式在大学里被教授这太酷了。我也有这个提示，对吧？嗯如果我们在上面打开它这是一个我刚刚想出来的像橡胶印章旅行笔记字段海报的提示。所以很酷的是我可以继续告诉我们的代理参考我的画布上的提示然后为每个城市和图像制作明信片。 >> 酷所以你有Medí的图片新加坡你自由女神像所以纽约然后多伦多。 >> 呃完全正确注意代理已经拥有画布上的所有上下文，对吧？它自动知道文件系统中实际有什么这里艺术板上是什么它可以继续然后进行它的更新。所以很酷的是我们看到它一次性生成了所有四张明信片我们可以继续在这里看到这个更大的版本我的提示基本上告诉它制作像它所拥有的图像的印章。现在因为我们在画布上我可以继续抓住我对我们新加坡活动的描述。在这里我有种

这是我们在5月17日举办聚会时的一些随机笔记。我可以直接选择这两项，比如：“现在设计一张明信片，内容需参考描述并感谢用户出席。”完成后，我们当然可以专门针对新加坡站点进行迭代。然后一次性将所有更改应用到所有城市，无需重新制作。

团队中哪些人实际在使用 Magic Patterns 创建这些明信片？因为这似乎不一定需要设计师参与，对吧？是的。我们的运营团队和销售团队都在使用 Magic Patterns。例如，我们负责市场拓展的人员正在利用该工具制作明信片发送给用户。

历史上，这类工作通常由不懂 Figma 的人外包出去。我认为我们工具的特殊之处在于极大地实现了设计民主化。你也可以导出到 Figma，因此它能与其他工具良好协作。

我们的工具与竞品的一大不同在于我们是模型无关且功能无关的。我们鼓励用户导出到 Figma 以获得高保真精度，或导出到你选择的代码代理。例如，Cloud Design 仅支持 Anthropic 模型且只能导出到 Cloud Code，缺乏与 Figma 的集成。而我们的工具集成了你能想到的各种平台。

提示工程显然非常重要，你建议人们如何改进提示以获得更好的结果？我认为关键在于利用工具提供的功能。我观察到越来越多的 AI 赋能团队在大型公司涌现，他们在做什么？他们利用技能代理、MD（模型定义）等功能。

当然，Magic Patterns 也有“技能”功能，你可以添加你的设计系统并引入组件。我始终建议的第一步是花10分钟导入你现有的上下文，这将在长期为你节省数小时。

你见过用 Magic Patterns 创建的 coolest（最酷）的东西是什么？一个非常有趣的作品是《过山车大亨》主题公园主题，而且是一个巧克力公园。这很疯狂，因为起初模型表现很差，提示表单只会返回下拉菜单。但现在人们甚至能构建完整的视频游戏体验。

这并非常见用例，但它展示了当输入输出为代码时的可能性。这个作品是为了什么而创建的？主要是为了好玩，探索浏览器中的可能性，并思考组件如何帮助在此类工具中进行设计。

在《过山车大亨》巧克力工厂主题公园中，轨道是一个组件，巧克力棒旋转游乐设施是一个组件，游客行走的路径也是组件。当给 AI 这些约束条件时，它能否在一次性或两次提示中结合上下文输出整个主题公园？

太酷了。你甚至能深入其中，看到所有小人在走动。（笑声）是的，这很惊人。这是浏览器中的 WebGL 渲染。我们通过称为“3D主题公园”的设计系统来实现这一点，我可以更新它以引入最新组件。

更新非常简单，只需提示“没有树，只有棒棒糖和更多的巧克力河”。这让你对 Magic Patterns 的可能性有了什么新认识？它似乎远超制作明信片或网站设计。

我认为这表明历史上设计一直是2D的。四年前，软件团队在设计师、工程师和产品经理之间反复沟通确切交互方式非常困难。而现在人们能一次性生成3D主题公园，这预示着未来人们可以使用组件设计高保真的完整交互。

是的，未来的确会非常精彩。（音乐声）肯定如此。YC 下一批次现在接受申请。你有创业想法吗？请访问 y combinator.com/apply 提交申请。为时不晚，填写申请表会让你的想法更上一层楼。好的，回到视频内容。

你提到见过数千个由“Vibe Coding”生成的设计作品，你可能对此是世界专家。我们要回顾一些网站吗？让我们看看几个网站，这会很有趣。好的。首先看起来是 Ego。标语是：“代理即机器，我们将它们变成人类。”Ego 是一家应用 AI 研究实验室，构建与人类难以区分的个人代理。

好的。你觉得怎么样？首先，我认为人们在落地页方面忽略了一个关键点：真正的衡量指标是转化率。我不知道这个页面是否转化成功，但我的感觉是不太好访问。我不确定行动号召（CTA）在哪里。那个 CTA 是 Ronin 吗？

是的。你觉得他们希望我们做什么？我的初始反应是想继续滚动页面，对吧。关于我们自己的落地页，我们发现一个有趣的现象：所有使用 Vibe Coding 工具的地方都有那个输入框来开始提示。

有一段时间我们移除了它以尝试更具创意，结果转化率彻底崩盘。我们要明白人们为什么这样做，所以我总是鼓励大家思考：你最终想在这里达成什么目标？

好的。里面有个应用，对吧？我想我滚到页面一半了，仍然不清楚这是什么以及面向谁。也许有个等待名单，所以可能还没上线？是的，让我们看看。

现在他们进入了更详细的描述部分：“一个具有个性、记忆和独立思维的语音代理。”这感觉像是那种……

那本该在页面最顶部的，对吧？网站应该从这里开始，因为这是行动号召（CTA），即加入候补名单。但我们得往下滚动相当长一段距离才能到达这里。完全同意。我有点想笑，因为那个主要的加入候补名单的CTA交互做得很生硬。这又是一个可能由AI“氛围编码”（vibe coding）生成的例子，不是吗？

AI代理喜欢添加动画之类的东西。过度使用动画。所以，为什么不直接从这里开始呢？是的。这其实很有趣。我在Creative Market公司做过一些测试，当输入表单直接在页面上可见并展开时，转化率远高于要求用户点击跳转到填写邮箱地址、弹出窗口或找到表单的情况。

所以我会建议，只要有可能，就让文本框保持打开状态，人们可以直接在里面输入内容。这实际上对转化率的影响之大令人震惊。是的。这也是我鼓励大家思考的点：要考虑到人类用户。AI代理再次被奖励去制作有趣的动态和过度动画，但人类不会在你的网站上花费太多时间。

他们通常很匆忙。是的，我们看到到处都是闪烁的光点。我不确定是否有音乐在播放，但看起来好像有一些类似音乐推子之类的东西在运作。所以很难搞清楚到底发生了什么。我喜欢整体的氛围，它有一种深色模式下的红色调，感觉非常像80年代的视频游戏风格。

我觉得这很有趣。但有些内容也很难阅读。比如，右边看起来好像有一个输入框之类的东西，我差点就错过了它，因为我不确定它的存在。是的，这是我常看到的另一种“氛围编码”迹象：你可以看到我的鼠标在这里让我与之交互，但我实际上无法输入任何内容。

所以我就想，这到底是怎么回事？是的。我看到一种模式：有时页面上嵌入了实际的UI元素，它们确实是真实且可交互的。能够这样做很棒。我认为代理现在让这变得简单多了，以前这可难办到了。所以感觉非常具有交互性，你可以直接在页面上试用产品，这超级酷。

但另一方面是，当看起来像那样但实际上具有误导性时：你以为可以交互某样东西，却实际上做不到。是的。我认为重要的是要讨论为什么这很重要？如果网站上有一种“氛围编码”的迹象，为什么这重要呢？

我认为它之所以重要，是因为你会注意到我们被这个试图输入的交互分心了。我们从核心内容上分散了注意力——也就是所谓的行动号召（CTA）。在这个案例中，大概是加入候补名单。是的。如果你往下滚动，你会看到人们的照片。它们符合那种氛围——80年代复古视频游戏的风格，我觉得这很酷。

他们在顶部放了一只眼睛，非常具有挑衅性。这让我有点毛骨悚然。有一只眼睛直视着我，但这很有趣，如果你追求的就是这种氛围，它会变得令人难忘。但直到我们滚动到页面一半时，我才搞清楚这是什么。

所以我认为需要更多关于它是什么的信息以及你想让人们采取什么行动。即使右上角的那个按钮，上面只写着“Ronin”，对吧？我不知道什么是Ronin。公司叫Ego。这里说Ronin将于九月发布。Ronin是产品吗？还是模型？我不清楚这是什么，所以我最终感到非常困惑。

顺便说一句，这是另一种“氛围编码”的迹象：这里写着“滚动”。我会自然地往下滚。我不认为人类会有必要特意放上提示去滚动，因为人们自然会这么做；相反，我经常看到代理试图不断催促用户去做某事。嗯。我们要再看看另一个吗？好的。我们来看看Sentient OS，你的Mac Sentient。端侧大语言模型理解你的一切生活，然后主动通过电脑操作帮你完成工作。

这很有趣。这里有一张打开笔记本电脑的图片。哇哦，当你滚动时它会合上盖子。等一下，退回去一下。噢。所以中间有很多东西在运作。当你往下滚动一点时，它说：“在你睡觉的时候，你的Mac理解你的一切生活。”

我注意到一件事：我非常难以完美地匹配滚动节奏。我从没见过任何独角兽公司做这种“劫持滚动”（scroll jacking）的行为。是的。他们为什么不做任何追踪滚动的操作呢？因为这样转化率很低，而且令人沮丧。

另一个我看到AI代理经常做的事情是：如果我错过了（笑声），再次查看那些拥有数百万页面浏览量的顶级财富500强公司网站，它们绝对不会劫持滚动。是的。令人沮丧的是，你习惯了在网站上移动时的精确度——当你滚动时。

当你进入一个网站而它的精度不同，即使你停止触摸鼠标或触控板它还在继续滚动，这会搞乱体验并感觉不自然。所以请大家停止劫持滚动吧。这很简单：保持正常的滚动，因为这里有一些很酷的东西正在发生。比如我们一开始是笔记本电脑屏幕打开的，很多东西在往里输入。

盖子合上了，我想它是在告诉你所有这些发生在你睡觉的时候。盖子是关着的，然后你醒来面对完成的工作，它就醒了过来并展示它做了哪些事情。所以视觉和体验方面——我喜欢这个的一点是，它实际上在强化它所试图传达的概念。

当谈到睡觉时，盖子合上，电脑……

睡着了，然后就像醒了一样，它在你睡觉时完成所有工作。所以当你醒来，“砰”，笔记本电脑又回来了，我们所有的任务都已完成并展示给我们看。我认为动画最好的版本不是为了动画而动画，而是能够强化你想要传达的观点并以静态无法做到的方式沟通内容的动画。

完全同意。这确实帮助我理解这个产品是做什么的。但我总觉得，当你试图过于创意时，这在产品展示页或视频里很棒，但在着陆页就不太合适。你的着陆页首要任务是让我点击那个按钮下载 Mac OS 版本对吧？顺便说一下这个按钮，这种发光效果又是 vibe coding 的味道。嘿，它确实吸引了我的注意力。但我注意到 AI 代理们喜欢过度使用这种渐变和巨大的投影阴影。虽然它吸引了我的注意，但如果你不想这样做就要小心这一点。

是的。那我们页面下方还有什么？食谱。我觉得有趣的是，这又是主要的 CTA 对吧？我滚动完整个页面，你真的想让我点击这个按钮或者甚至进行 Homebrew 安装吗？但它太小了。就像我在 100% 缩放下几乎看不见它，对吧？还有这种悬停效果。这让我想到 GitHub，我几乎读不清那些字（笑声）。是的，真的很难看清对吧？免费在定价页面上之所以巨大是有原因的。下载免费版。没错。

我发誓，也许是因为角度问题，但这并不重要。我现在根本看不见“免费”这个词。如果你有什么重要的信息要传达，就不应该取决于用户观看的角度。它应该是显而易见的。没错。我想对于这种在本地机器上运行的产品，隐私和信任是非常重要的问题。他们如何处理数据？我猜他们有 FAQ 试图回答这些问题，但这实际上是 AI 应用和 LLMs 新世界中的一个有趣问题。它们需要大量数据和上下文才能变得有价值，尤其是像这种将在你本地运行并 presumably 访问电脑上所有内容的产品。

因此需要为这类产品的信任、隐私和安全建立新的标准。我的观点是，那些真正投入其中并超越常规让用户对数据访问、使用方式、保留政策以及安全性感到安心的产品，那些主动处理这些问题的人我认为更有可能成功让用户下载尝试并口耳相传。完全同意。作为曾向 YC 申请一个开源文本消息分析器的人，该程序在本地读取你的 IME 消息，我完全同意。

那么当你开发那个产品时，你认为必须做哪些事情来获得人们的信任并让他们授权访问所有短信？着陆页上的英雄区域强调完全开源且仅在设备上运行。没错。传达互联网完全不接触它，这是我们学到的人们真正关心的东西对吧？他们在这里也提到了“在设备上的 LLM”。但有趣的是，“和”这个词真的有必要吗？我觉得很有趣，他们在加粗这些词。另一个 AI 写作的迹象是你可以去维基百科查一下，当随机单词被加粗时对吧？但传达最重要的事情就是它在设备上运行。

另一件让我发笑的是这个字体。让我们看看是什么字体，Space Grotesque 总是那个……哦，Instrument Serif 是另一个（笑声）。Claude Code 喜欢 Instrument Serif，这很有趣。这让我想起 em dash（长破折号）对吧？你仍然可以在写作中使用它，但不幸的是人们看到后会说“哦，他用了 AI 对吧？”Instrument Serif、Space Grotesque。

有趣的是这些趋势有时在当下很难察觉。我觉得我们正身处其中，现在就能认出它们，但就像你看到 80 年代设计的厨房时你会说“天哪，这看起来像过时的厨房”，但在 80 年代它可能看起来很现代。这也正是某些东西给人的感觉，现在看起来是当下的，但五到十年后我们回头看时会说“哦是的，那是 2020 年代中期的标志性网站设计”，届时会显得过时。所以我不确定，我鼓励人们抵制代理在设计时吐出的默认选项或默认字体的冲动。

使用对你来说更独特并传达你想要表达的内容的东西，而不是仅仅使用每个人都用的东西。我认为这是创造更具永恒感设计的方法。是的，还有早期建立品牌手册。这是我们公司早期没有做而后悔的一件事：确定什么是品牌、字体以及真正的设计系统。公司应该更早这样做。当然。

好吧，谢谢 Sentient OS。我们再来看一个。好的，Sarah Novice：机构智能和决策基础设施。是的，我真的不知道那是什么意思，但 Sarah Novice 是你的 AI 运营伙伴。它阅读公司产生的每一条记录，找出无人跟踪的运营低效之处，并在问题尚小时发出警告。好吧，我觉得这里的文案可以改进。它非常笼统模糊。我有点想“这是我需要的吗？”我不确定。它能做我公司想要的一切并找出……

效率低下的问题，嗯，这是一种决策基础设施。我不知道那是什么意思。所以我认为更有帮助的是提供更具象的细节或更具体的措辞，说明谁应该使用它以及为什么。因为现在我觉得这太模糊了。>> 这让我觉得很有意思，这里有很多填充内容，对吧？就像在“首屏”区域——在我滚动之前显示的部分——有大量的留白。这是着陆页最重要的部分，即英雄区（hero section），然而我的视线立刻>> 我现在就在看留白。 >> 对吧？嗯，不幸的是，这也是一种典型的“氛围编码”（vibe coding）迹象。 >> 呃，这个 >> 小写全大写。 >> 没错。是的。嗯，再说一遍，好吧，有没有什么本质上的错误？小写全大写并不一定有问题。但当我阅读时，每一个引用的主张——多年的历史、第一天就上线>> 无需安装、没有面试——但我甚至仍然不知道这个产品到底是做什么的。 >> 是的，没错。完全正确。

我甚至没想到它会是某种需要安装的东西。这本来就不是我的假设。所以 >> 是的，没错。完全正确。就像“无需安装”，这意味着什么？我是在处理硬件吗？嗯 >> 对运营的监管。它发现效率低下的地方。有凭据的前瞻性视野。是的，我只需要具体的例子。比如当我们滚动时，他们是否给出了具体例子？从你桌上的问题开始。大型企业、中型市场、私募股权。是的，这是他们针对的人群 >> 这并没有帮助，因为这是在讲他们自己。 这不是关于用户，对吧？用户不关心他们针对谁。用户只关心：我有一个想要解决的问题，Saranovas 能帮我解决这个问题吗？ >> 对吧？这几乎就像现在我必须思考：我是大型企业还是中型市场？我到底是谁？ >> 是的，>> 让我们假设我是次级基金或者延续型基金。我必须看看这个，但我不得不点击来决定我属于哪一类。你让我思考 >> 太费神了。 >> 再次回到你的观点，我真正想看到的是解决方案。 是的。你知道，这是一种我在“氛围编码”网站中看到的趋势，尤其是在 YC（Y Combinator）申请中我们经常看到这一点。我们看到的一件事是，这几乎就像是为公司制作了一份幻灯片演示文稿 >> 用来向投资者推销这家公司。很多时候模型认为初创公司或初创网站的目标受众是投资者，有时确实如此，因为投资者会看这些东西。但这并不是你应该对话的对象，也不是你应该瞄准的目标群体。 你应该谈论你的产品、谁应该使用它、为什么它有价值、它为它们解决了什么问题。还有社会证明，即其他使用该产品的用户以及它如何帮助他们。我认为这些才是真实用户想要寻找的内容，而不是关于他们针对谁的投资演示文稿，以及“这里有四项保证”，而我甚至不知道。我仍然无法弄清楚你们到底是做什么的。 嗯，有一件有趣的事是我注意到了，因为我们刚才谈到了这一点，顶部有一个链接写着“信任与安全”。这通常不会出现在 >> 网站的主导航栏中。嗯，基于我们刚才的讨论——也许公司应该更强调这一点——看到他们这样做并把它放在那里，还有一个常见问题解答（FAQ）：我们收集什么数据？数据存储在哪里？嗯，我不惊讶地看到这会成为一个更常见的模式，我们将在各个 AI 网站上看到这一点。 这些网站试图谈论产品并让人们信任他们将大量敏感信息托付给他们。 >> 完全同意。 >> 总的来说，我觉得风格非常干净。它很清新、很现代。所以从视觉角度来看，我认为看起来很不错。但从文案和 >> 你知道的整体描述来看，以及你是否向你的用户传达了产品是做什么的。我仍然非常困惑它到底是做什么的、谁应该使用它以及为什么。所以我认为在这方面有很大的改进空间。 >> 完全同意。 我会鼓励所有创始人做一件我们在早期做过的事情：去问你的用户，你觉得这个网站怎么样？尽量不要让他们意识到这是你的网站，因为他们会对你太客气而不会告诉你真相。嗯，但你知道的，你需要用户告诉你这是否引起了他们的共鸣。 >> 这是终极测试。 >> 这绝对是终极测试。我们只是两个人，躲在摄像机后面。你知道的，去和你的用户谈谈吧。 >> 好的，让我们再看一个。/shy（Slashy），你的智能收件箱。嗯，首先，他们的标志让我有点困惑。[笑声] 这让我想到了“sashy”（Sashy）。所以，我理解这是巧妙的双关语，Slashy 中有一个斜杠。但嗯，如果我只是看到那个而没有 slashy.com 的上下文，我想我会以为这是 s ashy（Sashy）。嗯，好的。你的智能收件箱 Slashy 以你的语气起草回复、安排会议并处理后续跟进，让你花更少的时间管理电子邮件。好的，酷。所以这就像是一个新的邮件产品。 嗯，他们有一个相当大的演示视频。展示演示很好，但里面发生的事情太多了。演示中的文字太多，让我很难在心理上理清正在发生什么以及我希望从中得到什么启示。 >> 所以我在周四之前看到了 Pi Piper 指标。我看到右下角的一个代理正在发生一些事情，它不断翻转过来，但速度不够慢，我无法弄清楚它在实际输入什么、发生了什么以及产品在这里做什么。 >> 这很公平。我要说的是他们做得好的地方是，我立刻就知道它是什么了。 >> 嗯哼。 >> 我知道这一点，好吧，这有点像 Superhuman（一款知名邮件客户端）。这是一个 Gmail 替代品，对吧？我实际上有这个问题。我自己，我的电子邮件过载了。 嗯，但就像它可能最好只是展示聊天收件箱的某种动画，而不是屏幕录制视频。我 [清嗓子] 会鼓励这位创始人找一家代理公司制作一个很酷的动画，可能会放在这里，实际上可能比这个全屏视频更好。 >> 是的。嗯，几秒钟内起草回复。好的。嗯，我想它正在浏览侧面的这些标签页。而这些的问题在于如果你滚动它们——你会错过其他的。 >> 嗯，而且这些似乎只是按计时器运行的。是的，你可以看到底部有一条线在移动。嗯，这

这很有趣，但标签页的问题在于，你必须预料到用户看不到被遮挡在其他标签后面的内容。完全正确。你只能假设自己能看到的东西，嗯？有意思的是……等等，让我们刷新一下页面，因为我觉得时刻关注这一点总是好的。假设我们花时间在智能收件箱上……嗯哼？计时器开始了吗？是的，看起来不像。它看起来像是刚刚在我滚动时才开始……这很好。但有趣的是，我有时注意到在某些网站上，计时器可能在用户看到内容之前就已经开始了。所以你甚至没有意识到这一点，但实际上每个人都在浏览片段，尽管你可能认为这是第四重要的内容。

是的，我想当我们第一次看到这部分时，“语音草稿”是被高亮显示的内容。嗯，也许是因为我们只是来回滚动浏览，所以我们开始计时器时并没有真正阅读它们。嗯，我要提到的另一件事是，我无法再次分辨截图中发生了什么。如果我真的想弄清楚 AI 草稿是怎么回事以及正在发生什么，并试图让自己理清头绪、集中注意力，我或许能弄明白。但大多数用户并不是第一次看到某些东西并投入如此深度的审视去观察正在发生的事情。

所以展示产品是很酷的，我在想是否有更聚焦、更简化的方式来传达每个部分正在发生什么，而不是展示实际界面的所有粒度和细节水平。完全正确。好的，所以我们在这里有一些社会认同。“最受忙碌人士喜爱”。我们有来自 Redpoint 的投资人。还有一位内容创作者，嗯……好吧，所以有些人使用这个产品，而且他们又在顶部放了一个安全链接。这里还有社会认同，展示真正在使用它的人……因为你在要求他们把邮箱交给你信任，这是任何人都难以轻易授权访问的最敏感领域之一。所以这是一个有趣的挑战：如何建立这种信任，让人们下载并开始使用它？

是的，社会认同非常重要，对吧？这就是为什么你通常会在首屏看到标志的原因。但我认为创始人应该始终考虑谁被用作社会认同。举个例子，我看到投资人和创始人，我想这适合投资人和……你知道的，这在某种程度上说得通，因为他们都是忙碌的人，有很多邮件。但我立刻想到——即使左边有两位投资人——我想等等，这难道只是针对风险投资人的邮箱吗？

是的，也许他们确实 targeting 创始人和风险投资人……我不确定。或者这是面向普通消费者的？他们说针对忙碌的人。所以也许这是一种类似 Prosumer 或 Superhuman 的产品，并以你的风格写作。好的，这很酷，因为它展示了正在进行的编辑……实际上匹配了风格。就像那个视图一样。太棒了。这真的很棒，这是我之前提到的那种动画。顺便说一句，你可以在 Magic Patterns 中设计这种东西，但这真的很棒……我完全明白它在这里的作用。

通过 iMessage 管理你的收件箱。再次出现这些标签页，从第三个开始……那是“审核和批准”。嗯，但同上。这也很酷。对我来说有趣的是，这正是引起我共鸣的地方……哦天哪，你有太多收件箱的问题，无论是短信、WhatsApp、Gmail 还是 Slack……它正在整合这些。这真的引起了共鸣，是的，如果这一点被推到顶部就好了，因为用户欣赏它。

是的，这是一个问题。我有太多收件箱了……如果我既是创始人又是投资人，这会让我产生共鸣并对这个产品感兴趣。还有一件我认为很棒的事情是着陆页的长度。我是从 PostHog 团队那里学到这一点的。PostHog 的人有一个巨大的页脚，以传达他们是一家大公司……对吧？所以我总是鼓励大家思考一下，仅仅因为着陆页非常长这一事实所传达的“元信息”是什么。我想……这家公司已经存在一段时间了。是的，它在页面底部的间距做得很好，突出了它想要传达的主要观点……试图建立信任，而且看起来设计得非常专业精美……这也有助于建立那种信任，这真的很重要。

总的来说，我认为这个做得很好。太好了，谢谢 Slashy。作为一名具有前端工程背景的人，你是如何提高设计能力和提升设计品味的？嗯……我尝试做的一件事是看美好的事物。举个例子，旧金山这里有一个马蒂斯展览。或者只是消费那些你在审美上喜欢的东西。一本很好的书是《日常设计》（The Design of Everyday Things）。

再次强调，始终考虑人和用户。我认为硅谷有一个巨大的误解，认为设计就是像素完美的圆角边框……事实并非如此。它是思考用户体验，当然还有拥有高保真且美丽的 UI 界面，对吧？是的。你是怎么做到的呢？在你日常构建 Magic Patterns 以及领导公司时，有哪些事情是你做的，试图把用户放在中心位置并始终在脑海中保持用户的呼声？

嗯……我们做的一些事情是，公司里的每个人都做客户支持。所以每个人都在支持收件箱里与用户交谈……每天看到他们的挫败感，比如因为他们找不到分享按钮——因为我们要两个 CTA 颜色完全相同……两个主要按钮，对吧？然后紧接着，因为工程师在那里，他们会去修复它，因为他们亲身体验了用户的问题。而且还要保持非常高的标准……如果看起来不对劲或者感觉不对，我们鼓励所有团队成员去解决它。花时间在额外的 20% 上……不要只满足于“氛围编码”（vibecoded）的输出，而不把它提升到下一个水平。

你是如何平衡这一点的？因为显然这样做听起来很棒……权衡是现在这将需要花费更多时间。

发布产品需要多久？如何在快速上线与追求极致卓越之间取得平衡，而不是仅仅满足于“还行”的水平呢？嗯，这主要在于权衡取舍。如果不这样做，你可能会拥有大量用户访问你的网站，但他们随后就会离开。因为他们无法理解产品，他们的工作流程受阻了。所以你必须坚信这样做是值得的。而我们对此有着极大的信心，认为深思熟虑并花时间打磨某件事是重要的。

人们常说：“如果设计得好，那肯定花了很长时间才发布吧？他们太慢了。”但在实践中并非如此。考虑到编写代码的速度已经大大加快，你仍然可以非常快速地完成工作。嗯，这确实很有趣。这些权衡取舍不再必然存在了，尽管历史上它们曾必须存在。那么 Magic Patterns 接下来有什么计划？你们的路线图是什么？你认为设计未来的发展方向在哪里？

嗯，这周我们发布了 Magic OS，这是我们画布的新版本。它就像 Pinterest 和 Figma 的“孩子”。你可以与它对话，通过提示来生成设计，并导入你的产品需求文档（PRD）和上下文信息。关于设计的未来，有一件事是确定的：它正在飞速发展。任何自认为确切知道会发生什么的人，可能只是在凭空猜测。但有一点肯定是真实的：代码作为一种媒介将长期存在，因为显然前沿实验室和每个人都在致力于让编码代理变得非常出色，而这正是生产和面向用户的终极媒介。

嗯，这很有趣。正如你所说，代码只是另一种媒介。产品被创建和用户体验产品的途径有很多中不同的方式，而这只是一种新出现的媒介，拥有新的工具来构建以前不可能实现的事物。看到一切都被提升到一个新的水平，许多曾经看似永远无法实现的梦想成为可能，这真的令人兴奋。很高兴你能来分享你们如何通过 Magic Patterns 实现这一切，非常感谢你的参与。

嗯，非常谢谢。好了，这就是本期《设计评论》的全部内容，我们下期再见。（音乐）