Transcription
我对于设计 B2B SaaS 的看法是，你希望你的设计尽早地接触现实。我一直热衷于原型设计，然后突然这些 AI 编码工具出现了，现在我可以更快地进行原型设计。我可以在生产环境中进行原型设计。所以，请向我们解释一下这个原型游乐场 [音乐] 是什么。它只是一个 Next.js 应用。我们所有的原型都在一个地方。看到别人在做什么真的很有趣，而且你经常会发现很棒的想法。你会想，“哦，我想试试那个。” 代码都在一个地方。它就在一个仓库里，所以我可以轻松地从别人的原型中借鉴很棒的想法，并将它们融入我的原型中。>> 每次有人对 AI 辅助编码有点反感时，我都会说：“你知道我以前为了我的 CSS 必须走双向的上坡路吗？” 做这件事一点也不好玩。我是说，即使只是坐在这里看着这个，我仍然觉得它很神奇。欢迎回到“我是如何使用 AI 的”。我是 Claire Valle，产品负责人和 AI 狂热者，我在这里的使命是帮助你利用这些新工具更好地构建。今天我们有一个以设计师为中心的 [音乐] 节目，嘉宾是 Brian Lovin，Notion AI 的设计师，他将向我们展示他如何为整个 Notion 设计团队设置一个原型游乐场，让他们使用 Claude 代码来构建他们需要的任何原型。这对于那些希望将其设计组织转向代码优先原型模式或学习 Claude 代码的高级技术的人来说是一个很棒的节目。让我们开始吧。本期节目由 WorkOS 提供。>> [音乐] >> AI 已经改变了我们的工作方式。工具正在帮助团队编写更好的代码，分析客户数据，甚至自动处理支持票据。[音乐] 但有一个问题。这些工具只有在能够深入 [音乐] 访问公司系统时才能很好地工作。你的副驾驶需要看到你的整个代码库。你的聊天机器人需要搜索 [音乐] 内部文档。对于企业买家来说，这会引起严重的安保担忧。这就是为什么这些应用程序从第一天起就面临着严格的 IT 审查。要通过，它们需要安全的身份验证、访问控制、审计日志，以及一套完整的企业 [音乐] 功能。从头开始构建所有这些，这是一个巨大的挑战。这就是 WorkOS 的用武之地。WorkOS [音乐] 为你提供企业功能的即插即用 API，这样你的应用程序就可以为企业做好准备，并更快地向上扩展。把它想象成企业功能的 [音乐] Stripe。OpenAI、Perplexity 和 Cursor 已经在利用 WorkOS 来加速发展并满足企业需求。>> [音乐] >> 加入他们以及数百位其他行业领导者，访问 workos.com。今天就开始构建吧。Brian，欢迎来到“我是如何使用 AI 的”。今天我们谈话中最让我兴奋的是，你将向我们展示像 Notion 这样一款设计最出色的产品之一，是如何被像你这样的人使用 Claude 代码等新 AI 工具来设计的。那么，你为什么会改变你的设计方式，这对你来说意味着什么，原型设计、设计和构建事物，特别是对于一个高度重视设计的公司和产品？我对于设计 B2B SaaS 的看法是，你希望你的设计尽早地接触现实。而且，你知道，如果你想象一下从我在餐巾纸上涂鸦到我向客户发布并展示的这个渐变，我们作为设计师的目标是尽快沿着这个渐变向产品方向移动。所以，我想说在我职业生涯的大部分时间里，我一直对编程感兴趣，主要是原型设计层面。我发现当你设计 Figma 中的某些东西，然后你实际在浏览器中尝试它时，你在浏览器中会注意到大量问题。你知道，突然之间你点击东西，你会注意到加载状态，你会注意到，“啊，这个屏幕尺寸下那个不起作用。” 所以，你更早地遇到某种形式的现实，并且最终更快地得到更好的设计。所以，你知道，我一直热衷于原型设计，然后突然这些 AI 编码工具出现了，现在我可以更快地进行原型设计。我可以在生产环境中进行原型设计。我可以在 Notion 中，或者我目前在 Notion 中最常做的事情是，在我们在内部构建的一个小工具“原型游乐场”中进行原型设计。同样，这个想法就是如何尽快地在某种现实环境中，在我们的情况下是浏览器中，获得一些相对真实的东西。我认为这只会让你更快地移动，并最终获得更好的设计。所以，请向我们解释一下这个原型游乐场是什么，以及你是如何设置它的，以及你可能会如何使用它。好的，所以原型游乐场没有什么神奇之处。它只是一个 Next.js 项目。所以，呃，实际上在这里，只是源应用程序，有一个应用程序目录，你会注意到在这里的应用程序目录中，通常在 Next.js 应用中你会看到页面，嗯，我们已经将团队中的每个设计师、项目经理或工程师，无论谁注册并想使用它，都可以命名空间化一个目录。所以，这里是 Brian，然后里面的每个目录都是一个原型。所以，它只是一个 Next.js 应用，但每个页面都是独立的。没有全局布局。没有全局，我不知道，像你必须遵守的结构。所以，在前端看起来是这样的。这就是我们称之为原型游乐场的东西。它只是一个按最近正在处理事物的顺序排列的原型列表。所以，这里有一些来自十二月和十一月的一些。而且它真的很酷，因为将每个人的原型放在一个地方在两个维度上都很有用。一，仅仅从可见性的角度来看，看到别人在做什么真的很有趣，而且你经常会发现很棒的想法。你会想，“哦，我想试试那个。” 然后在另一个维度上，就像如果你发现一个很棒的想法并想尝试它，代码都在一个地方。它就在一个仓库里。所以，我可以轻松地从别人的原型中借鉴很棒的想法，并将它们融入我的原型中。通常是通过告诉 Claude 来做这件事。呃，是的，我认为在原型游乐场出现之前，Notion 有很多设计师在代码中进行原型设计。区别在于我们都在创建自己的存储库，自己的 Next.js 实例，所以很难知道每个人的东西在哪里。每个人都在以不同的方式重建它。或者如果人们试图重现看起来像 Notion 的东西，我们都在从头开始做。所以，总之，原型游乐场，Next.js 应用。我们所有的原型都在一个地方。然后我们有一些共享组件和共享样式。所以，如果你想制作看起来像 Notion 的东西，你可以很快做到。所以，例如，我们这里有一些模板，我可以向你展示，比如 Notion UI 只是一个像 Notion 的侧边栏。实际上，这甚至不太像 Notion。我想在某个时候，我插入了这个新按钮，它显然不存在于产品中。我不认为这些东西有什么作用，但它足够接近了。如果你说，“啊，我需要为 Notion 侧边栏原型化一些东西，” 我可以进来并复制这个模板。然后我们当然会拉入我们的一些颜色、排版、图标，所以再次，只需轻松获得接近 Notion 的风格。是的，我想为人们提一下，几期节目之前我展示了如何为自己构建一个非常相似的 Next.js 应用，其中包含你正在处理的文档、markdown 文档和原型，格式非常相似，就像，“这是我正在处理的只是东西的文件夹。” 非常少的共享组件，非常少的共享样式。我也喜欢这个，因为它很好地实现了团队级别的组织，这样你就可以进去看看你的队友在做什么。我有一个关于运营方面的问题。是你设置的吗？比如这是你的热情项目吗？呃，是工程部为你设置的吗？比如这个是怎么创建的？是的，我和另一位工程师一起设置的。我是说，它只是一个 Next.js 应用，但然后在运营方面，只需要一些批准。它部署在 Vercel 上，所以我们必须经过一点流程才能启动该项目，让几个人成为成员。否则，是的，它并不多。再次，它只是一个相当基础的 Next.js 应用。你可以直接使用 Claude 来帮助我制作一个 Next.js 应用，它只会给你所有默认的，>> 比如 >> 你知道。>> 我喜欢键盘手势。每个人都做同样的键盘手势，就是这样。>> [笑声] >> 我还有一个问题，那就是。现在在这个仓库里工作的人中，有多少人以前在代码中工作，或者这是他们克隆到桌面或部署的第一个仓库。设计团队是否已经很技术娴熟，所以这很自然，还是有些人需要入职？我想是的。我是说，说实话，原型游乐场对我来说仍然很重要。比如我用得最多。你可以看到这里有很多人在创建东西，但如果你去看看，我probably 用得最多。我认为 Notion 大约有五到十个人经常使用它，然后有很多人要么尝试过但没有坚持下来——我们可以深入探讨原因——要么他们就是不感兴趣，要么他们单独进行原型设计，对吧？比如我们仍然有人在 Figma 中进行原型设计。我们仍然有人在自己的代码库中进行原型设计。他们只是喜欢自己的技术栈。也许他们不喜欢 Next.js。也许他们不喜欢 React，所以他们做别的事情。嗯，我认为所有这些都完全没问题。事实上，我最近添加的一个功能是能够链接到外部原型。所以，如果你喜欢使用 V0 或 lovable up 或 Figma make file，无论是什么，你都可以直接链接到这里，实际上，这将在原型游乐场中显示为这样，只是有一个小图标。所以，你可以点击它，它会在新标签页中打开。所以，理论上，这可以是任何原型工具的原型游乐场或仓库。我希望随着时间的推移，我们能让这个东西足够有用，以至于更多人会想在里面进行原型设计，因为它比其他工具更快。我们需要弄清楚如何降低那些不擅长技术的人的入门复杂性。所以，回答你的问题，嗯，我不知道。我想说有些人不擅长技术的人在游乐场中制作了他们的第一个代码原型或 AI 辅助原型。嗯，但我们中大多数人仍然每天使用它的人都有一定的技术背景。明白了。完美。那么，让我们来原型化一些东西吧。我想看看它实际上是如何工作的。我们开始吧。嗯，好的，所以 Next.js 中有几种制作新东西的方法，对吧？比如我们可以在游标中，然后在这里创建一个新文件夹并创建很多 page.tsx 和元数据文件，这很糟糕。我不想这样做。嗯，有两种方法可以解决这个问题。第一种是当你运行本地主机时，你可以点击这个名为“新建”的按钮。然后你给你的原型起一个名字和描述。我将把它命名为“我是如何使用 AI 的”，然后这是为了好玩。我创建它。在幕后，它只是在我的电脑上创建了那些文件。我最喜欢的部分是，原型游乐场没有后端。它只是磁盘上的所有文件，然后我们可以将所有这些推送到 GitHub。所以，这里有一个小的元数据文件。这些文件会被汇总以在主页上渲染视图列表。我们有一个实际的原型文件，里面有一些代码。然后这个很不错，它会自动给你一个在游标中打开它的按钮。所以，现在我可以进来开始原型设计了。通常我的工作流程是直接在终端中快速打开 Claude。我知道这不是使用游标的正确方法，但这就是我做的。这可能甚至不是使用 Claude 代码的正确方法，但我就是这么做的。我们只是对这两个工具一视同仁。我知道。我知道。抱歉，各位。嗯，但这就是我喜欢工作的方式。嗯，事实上，我有一个快捷方式，我可以按下大写锁定 G，然后我可以在我的电脑上并排显示这两个东西。所以，我通常会在这里 Claude，在这里查看更改，然后在这里监控输出。所以，让我们看看。嗯，我想做一个原型，我不知道。我们就来想一个牵强的例子吧，也许你能帮我想一个好的用例。我们可以做一个原型，比如一个小的视频和音频，这可能很复杂。视频和音频，比如我的播客的显示模块。视频和音频，比如你的视频，然后也许是一个音频播放器。让我们看看。我，你知道，它，它已经到了第五步。我认为你可以做到。好的，我们来试试。所以，通常，呃，让我们一步步来，这是我的实际工作流程。有两种方式。一种是你可以输入很多。呃，这不好玩。嗯，我使用一个叫做 monologue 的工具，你可以直接和你的电脑说话。有很多这样的产品。我认为 monologue 很好而且很可爱。嗯，所以我们可以说话，这比输入提示要快得多。你会注意到的第二件事是，在使用 Claude 代码时，我切换到了计划模式。我认为在做任何事情之前先计划一下非常非常重要。无论出于何种原因，你都会获得更好的结果。现在，使用计划模式的关键是实际阅读计划，我认为这就是拥有开发背景的优势所在，因为你可以阅读计划并说：“哦，那部分实际上看起来不太对。” 而如果你没有多少编程经验，可能就很难分辨。但无论哪种情况，我认为在实际编写代码之前先计划并创建一些结构会更好。所以，让我们同时做这两件事。所以，我们在计划模式下，我将调用 monologue，它正在录制。所以，让我们说我想在这个“我是如何使用 AI 的”目录中构建一个新原型。我们是一个播客，我想为播客剧集构建一个详细页面，其中包含视频播放器和音频播放器。页面应该有剧集标题、描述。如果点击播放，会有小小的纸屑从播放器中喷出来，怎么样？然后我们结束它，现在我将删除它，我们计划。所以，我必须在两件事上给你点赞。一，我我也是一个计划模式 {斜杠} 喜欢写你的规范，写你的 PRD 的人，显而易见。我认为第二件事是，在 AI 方面，我仍然是那个阅读代码、阅读输出的人。这实际上是我使用 Claude 代码或观看人们使用 Claude 代码时遇到的挑战之一，如果你不在游标或提供这种我喜欢的三个窗格窗口的东西中进行，你的代码窗口、你的 Claude 窗口、你的输出窗口。因为我看到人们有 17 个 Claude 代码标签，只是接受了很多更改，而我必须阅读。我认为这也是工程开发背景，你可以在瞬间发现那些毫无意义的事情，而不是回去调试。所以，我非常赞同你。是的，这很有帮助。嗯，你知道，对于很多熟悉使用 Claude 代码的人来说，这可能很明显，但也许如果你不熟悉，另一个非常重要的部分是首先获得正确的上下文，对吧？比如我们刚刚输入了一些提示。嗯，但在幕后，我可以向你展示，我们还有一些其他文件在这里帮助我们。所以，我们在项目根目录下有一个 Claude.md 文件，里面有一些关于我们使用的工具的粗略说明，比如我们使用 bun，我们使用 Tailwind。它有一个项目结构的粗略大纲。我们做的另一件事是，每当有人在本地运行项目时，我们都会创建一个 Claude.local.md 文件。这个本地文件不会提交到 Git 仓库，所以它是每个计算机的个人文件。它增加了一些额外的上下文，比如，“嘿，这是我在原型游乐场中的用户名。” 它告诉 Claude 我的目录在哪里。它提供了一些说明，比如，“嘿，你知道，不要到处乱动别人的文件。比如更喜欢在我的目录里工作。” 以及更多关于工作区结构以及单个项目如何构建的信息。所以，这些东西中的一些正在幕后工作。而且当你接受 Claude 代码的某些更改和问题时，我想为各位指出这一点，因为我认为人们对 Claude.md 全局设置相当了解，但我认为人们忘记了实际上有本地范围的版本，你可以实现。所以，部署一个版本给每个人，为你提供使用 Claude 的主规则，然后你可以设置自己的自定义版本，包含你自己的特定偏好，这真的很有用。我认为这是创造一个良好的协作环境的好方法，人们正在使用类似的 AI 工具或代理在仓库中工作。完全同意。是的。好的。我不知道。我们会看看会发生什么，但它会安装某种纸屑。它会有一个播放器，音频播放器。这真的很棒。比如它在计划中做了一个线框图，这太疯狂了。嗯，在这里，我不知道。我们可以为了这个例子的缘故粗略地看一下。嗯，这看起来不错。所以，让我们自动接受编辑。现在，我有一个给各位的建议，因为我认为当你在 Twitter 上花费足够多的时间或观看其他人使用这些编码工具时，人们总是说：“如何让它运行更长时间？” 你知道，他们发现自己不断地卡住，或者代理做错了事情，或者它要求你输入。我的哲学一直是，任何时候 AI 要求你做某事，在你回应之前，尽你所能看看你是否能教会 AI 自己回答这个问题。这是一个很好的例子。哦，哇。那太快了。哦啦啦。好吧，这里。让我们，让我们先等等，看看是否>> 是的，让我们看看是否，看看纸屑是否有效。嗯，实际上，这里有一个例子，我已经教会了 Claude 比如在它完成后总是进行代码检查，对吧？比如，当它构建了很多东西，然后你去看你的浏览器，发现了一些错误，这真的很烦人，对吧？所以，例如，我教会了 Claude，“嘿，检查你的工作。” 一，你可以运行命令，比如，嗯，这是什么？比如 ESLint，对吧？比如查找实际的 TypeScript 错误。第二，你可以让它访问 MCP 工具。所以，Playwright 是一个，Chrome DevTools MCP 是另一个。你可以说，“好吧，实际上，你知道，在安装这个之前，Claude 会对你说，“嘿，我已经实现了你的功能。去看看，告诉我你的想法。”” 记住，我们的规则是，任何时候 Claude 要求你做某事，都要问是否能教会它自己做这件事。所以，我不想每次都看浏览器来判断我是否做对了。所以，我教 Claude，“实际上，你应该自己去打开浏览器。” 所以，它知道如何启动 Chrome，它知道如何导航到这里，它知道如何点击播放按钮，寻找纸屑，确保音频正常工作，所有这些。所以，现在我们能够运行这个任务更长时间，而无需我的输入，并且实际上得到了一个运行良好的东西。我实际上对这个原型印象深刻。它比我想象的要可爱得多，也更健壮，而且纸屑看起来很棒。>> 纸屑看起来很棒，是的。好吧，这里，我将向你展示另一个例子。我认为这就是 MCP 的威力变得疯狂的地方。所以，让我们，让我们实际上清除这个。我们将开始一个新的对话。我将完全撤销所有内容。让我们从头开始。所以，我还在里面构建了一些东西，你知道，我认为，记住，比如，我试图让我的团队的入职流程尽可能简单。是的。所以，Claude 有所谓的斜杠命令。你可以自己构建它们，它们基本上是美化的提示，但它们也可以运行脚本。所以，我们在项目中有一些斜杠命令，可以帮助人们快速上手。所以我有一个叫做“创建原型”的命令。然后，你可以给它一个可选的名字。所以，我们将把它命名为“我是如何使用 AI 的”。这与我们之前在浏览器中点击“新建”按钮所做的事情相同。当然，区别在于我不用点击东西。我有点想设计成这样，我基本上住在终端里。你能快速在你的仓库里展示一下这些命令是如何定义的吗？完美的，谢谢。是的，当然。所以，呃，基本上它是一个美化的提示。它有一个名字、一个描述，然后是一些说明。所以，在我们的案例中，呃，我们说，呃，如何根据用户提供的内容来想出一个名字，告诉它在哪里查找以确定当前用户的用户名，如何创建新事物。它实际上提供了一些示例代码，用于创建页面和元数据文件。我认为我还需要批准这个。所以，它开始了。暂时只留空白。>> 比如 >> 同样，也创建元数据。所以，你知道，AI 在有良好上下文的情况下会更好，但如果你提供它如何做事情的例子，它也会非常好。所以，提供这些代码片段很重要，是为了向它展示成功是什么样的，对吧？如果这只是创建空白文件的说明，它就不会知道要创建什么。所以，在我们的案例中，我们只是向它展示了一个成功的例子。而且我们也许可以简化它。它实际上是一个相当长的命令，但但就这样吧。所以，它创建了这个和一个空白的文本文件。太好了。所以，这只是一种开始方式。你只需输入 {斜杠} 创建一个原型，然后就会创建。但是，也许我们在 Figma 中有一些设计，我们想构建它。这可能行不通，但我们试试看。嗯，所以我们可以连接到 Figma MCP，然后我可以复制这个框架的链接，然后说，“让我们来构建这个 Notion UI。” 所以，之前你可以直接粘贴 Figma URL 的链接并尝试手动调用 Figma MCP，它有时会问一些澄清问题，有时它会构建然后半途而废。我不喜欢这些。所以，我们实际上构建了一个名为 {斜杠} Figma 的命令，它大致做了几件事。第一件事是它实际上检查你是否安装并运行了 MCP 服务器。你知道，对于团队中那些以前从未做过 MCP 事情的人来说，他们可能不知道如何做到这一点。所以，它会检测你是否安装了它，如果它发现没有安装，它就会教你如何做到。所以，它实际上会向用户返回有关如何设置所有这些的说明。然后，它进入阶段 A，从 Figma 中设计或提取设计，然后它会实现它。然后，最重要的事情是我们进入第三阶段，称为验证循环，它将打开浏览器并比较它创建的实现与原始 Figma 文件。我认为我的指示基本上是“继续循环，直到你完成了，比如，两次循环都没有再进行更改。” 哦，是的，这里。“重复直到实现匹配，或者在没有更改的情况下进行三次迭代后停止迭代。” 所以，让我们看看会发生什么。我认为它大约 80% 的时间能做到 80% 正确。但那只是，那只是现在的 AI。我本来要说大约 60%，所以我想我是对的。嗯，实际上，我认为它是 60%，但这个命令和这个循环以及这些说明以及这两种 MCP 的配对实际上让我们达到了 80%。我想为各位指出这一点，因为我发现使用 MCP 最令人沮丧的事情之一，即使作为一个相当高级的用户，就是你必须使用这些像魔法关键词来调用 MCP 和正确的工具和正确的东西。你知道，有时我有很多 MCP 使用相同的工具名称，因为 SaaS 中很多东西都命名相同。比如，每个人都有项目、页面或文档的概念。所以，我喜欢通过斜杠命令强制调用特定的 MCP 的想法，甚至不只是强制调用特定的 MCP，而是强制调用该 MCP 中的特定工具集。超级，超级有用。然后，我将为你提供顶部的说明，教那些对此一无所知的人如何安装这个东西。这对于使用斜杠命令的用户来说是一个很好的用户体验，他们可能不是你。嗯，所以这是人们应该真正，真正考虑的事情。是的，是的。嗯，我也会说，这很有趣，因为我实际上看了很多这些视频，甚至回看 6 个月前的视频，工具的进步速度真是太快了。所以我可以想象，那些，无论出于何种原因，可能在 6 个月后观看此视频的人，会看着我们在这里做的事情说：“哦，多么天真。” 你知道，我们已经走了多远。MCP 不再是一个东西，或者类似的东西，对吧？我现在也有这种感觉，MCP 就像不是最好的东西，但它是我们目前拥有的最好的东西，对吧？比如，它非常缺乏上下文效率。有时它会永远运行，有时它会，是的，它只是会，会撑爆你的上下文窗口。但这是我们目前拥有的最好的。所以，即使只是看着这个，对吧？比如，这是我们构建的设计。这实际上只是粘贴了 Figma 文件的链接。没有其他自定义说明。现在，在右边，它应该是，嗯，我认为我之前遇到了一个问题。是的，这个东西坏了。让我们再次尝试 Chrome DevTools MCP。我想我中途退出了，因为它检测到了窗口冲突。总之，这默认情况下相当不错。然后，从这里开始，我会迭代。你知道，有些事情你可能会注意到，比如，没有悬停状态，有些图片坏了，但这些只是容易的后续任务。嗯，你这样做是从设计的角度来看，但想想有多少工程师坐在那里，将 Figma 原型像素化到前端。而且，你知道，如果你有一个很棒的设计系统，也许这更容易做到，但这不像我们刚才观看的 27 秒来搭建东西。所以，我只是认为，你知道，这些嗯，资产到资产的交接中的摩擦减少，在我整个职业生涯中，20 多年的技术生涯中，一直是最昂贵的实现部分，设计师给你一个设计，然后你必须进入前端，或者前端必须连接到后端。所有那些小部分都可以被平滑处理并更快地完成，然后你可以花时间进行优化、性能、感觉如何、如何工作。我认为这从构建者的角度来看真的很有趣。完全同意。太有趣了。而且，嗯，即使只是坐在这里看着这个，我仍然觉得它很神奇，对吧？比如，现在它正在使用 Chrome DevTools MCP，它像循环并修复了损坏的图片，并且像创建了一个待办事项清单。好的，一切似乎都对了。它有一个底部栏。这些东西显然是错误的，但我们可以通过后续提示来修复它们。但同样，目标是，比如，我们能否在一次提示中获得 80% 的结果？我只是粘贴了一个链接，它就迭代自己，得到了一个大致完整的东西。我知道。而且每次有人对 AI 辅助编码有点反感时，我都会说：“你知道我以前为了我的 CSS 必须走双向的上坡路吗？” 比如，做这件事一点也不好玩。比如，[笑声] 我觉得这只是令人着迷。这太酷了。>> 令人着迷。这太棒了。本期节目由 Orkes 提供，该公司是开源 Conductor 的幕后公司，Conductor 是为现代企业应用程序和代理工作流提供复杂工作流和流程编排的平台。传统的业务流程自动化工具正在崩溃。孤立的低代码平台、过时的流程管理系统和断开连接的 [音乐] API 管理工具不是为当今事件驱动、AI 驱动的云原生世界而设计的。>> [音乐] >> Orkes 改变了这一点。借助 Orkes Conductor，你获得了一个现代化的编排层，它具有高可靠性，支持可视化和代码优先开发，[音乐] 并实时将人类、AI 和系统结合在一起。它不仅仅是关于 [音乐] 任务。它是关于编排一切。API、微服务、数据管道、人工干预操作，甚至 [音乐] 自主代理。因此，轻松构建、测试和调试复杂的工作流。添加人工审批，自动化后端流程，并在企业规模上编排代理 [音乐] 工作流。同时保持企业级的安全性、>> [音乐] >> 合规性和可观察性。无论你是要现代化遗留系统还是扩展下一代 AI 驱动的应用程序，Orkes 都能帮助你快速地从想法变为产品。[音乐] Orkes。编排工作的美好未来。了解更多并开始构建，访问 orkes.io。即 o r k e [音乐] s dot i o。还有其他你认为非常有用的命令吗？是的，是的，我可以给你展示几个。嗯，所以我想稍微向上滚动一点。早期有一个步骤，你可以看到它一遍又一遍地运行一个叫做“bun run Claude skills find icon”的技能。那是什么？嗯，如果你看这里，我们的设计中有许多非常 Notion 特定的图标，对吧？比如我们有这个 AI 面孔，我们有家、收件箱。嗯，我们有项目中的所有图标。问题是 AI 非常不擅长估计图标的名称。或者更确切地说，它使用最明显的名称，这并不总是与代码中的名称匹配。所以，例如，像这个面孔图标，AI 不可能知道我们称它为什么。或者一个常见的例子是，如果你有一个搜索放大镜，对吧？它会假设它叫做搜索图标。实际上，在我们的代码中，它叫做放大镜图标。所以，这种图标幻觉变得非常非常烦人。所以我写了一个小技能叫做“find icon”。这个技能基本上说，任何时候你要实现一个图标，首先去实际查看整个项目，但也寻找同义词或与图标密切相关的词。所以，如果你要查找一个叫做搜索图标的东西，也尝试搜索放大镜图标。它实际上写了一个 TypeScript 脚本来做这个，来遍历我们图标目录中的所有文件，那里有大约 5000 个，对吧？很多。所以，它实际上加载所有这些到上下文中会非常低效。它需要自己编写一个脚本来执行更有效的搜索。所以，在这个循环中，嗯，是的，你可以看到它，比如找到了，查找了“magnifying”并找到了“magnifying glass icon”。它查找了“inbox”，并查找了“gear”和“trash”以正确获取所有这些。现在，这个技能只有在我们团队中的每个人都对它反复出现幻觉感到非常非常沮丧之后才必须存在。嗯，这很可悲，因为它显然错过了这三个。底部三个，它没有正确获取。嗯，但它第一次就获取了这些，这是一个巨大的进步。所以，我的想法是，你知道，我们有手动运行的命令。而技能是 AI 应该自动检测并适时使用的能力。它会根据你给它的描述和标题来知道如何做。所以，在这种情况下，查找图标以及如何搜索图标。当然，最好的部分是让它通过调用实际的编码脚本在你的电脑上以编程方式执行任务。所以，这非常有帮助，为我们节省了大量时间来修复导入和，不，搜索图标不存在。那些烦人的步骤。嗯，我喜欢这个的一点是，一，这正是你对初级设计师或工程师入职时会做的事情。你会解释，你会说，有时我们称之为搜索，但不是真的，它是放大镜。你只需要找到最接近的>> 是的，是的。>> 同义词，并且能够将它描述给代理、技能或工具，然后让它以编程方式为你完成，这非常有用。嗯，我们有一个关于 Claude 技能的“我是如何使用 AI 的”节目，但有一个我们没有详细介绍的部分，我认为这非常重要，那就是 Claude 技能可以与脚本捆绑在一起。是的。>> 所以，将两者结合起来的能力，嗯，你知道，自然语言提示，它在 skill.markdown 中，与一组以脚本形式存在的程序化工具相结合，这是一个非常强大的组合，而且 Claude 非常擅长制作这些。所以，哦，是的，比如所有这些，我没有输入一行代码，对吧？比如这是 100% 的，比如，我只需要解决这个问题，创建一个技能，然后创建那个技能也创建一个脚本，这样你就可以更有效地工作。比如这是 100% 提示的。向我们展示你的最后一个命令，因为我认为这是一个非常有用的命令。好的，这是相当新的。我认为我上周合并了它。回到原型游乐场的根本问题。它仍然是一个 Next.js 应用。它仍然是 React 和 TypeScript 和 Git 和分支，这只是很多概念要扔给一个可能只习惯在 Figma 中进行原型设计的人，或者他们对终端或代码感到畏惧。所以，我正在尝试弄清楚如何让这个东西更容易上手？如何让它更容易入职，但又不至于太简单，对吧？比如我希望人们学会如何使用电脑。我希望人们甚至在潜意识中吸收 Git、分支、拉取请求和合并的概念。所以，我不知道最好的方法，但我的第一个尝试是创建一个叫做“部署”的技能或命令。部署基本上做了两件事。第一件事是它会检查先决条件，并确保你的电脑上安装了 GitHub CLI 工具并且你已通过身份验证。如果不是，它会引导你完成这些步骤，如何做到。然后第二步是它会一步一步地引导你完成将你刚刚创建的原型部署出去，以便你可以与团队中的某个人共享链接。嗯，让我们看看会发生什么。我现在就试试。我将点击“部署”，看看会发生什么。嗯，这里有一些很酷的循环，我认为它们可以为人们节省大量时间。所以，我们可以看到它在这里经过先决条件步骤。它正在检查我是否登录了 GitHub。现在，第一件事，看，它正在检查我是否在一个 Git 分支上。它注意到我不在。我在 main 分支上。而且它不应该这样做，对吧？比如我们永远不想推送到 main。所以，我认为它应该做的是帮助我创建一个新分支。嗯，让我们看看它是否真的能正确做到。它还在尝试查找一些 TypeScript 错误，并且它将运行一些测试。我基本上告诉它做所有这些事情，因为如果你将代码推送到 GitHub，等待所有检查通过，这真的很烦人。如果它们失败，那么你必须回到你的电脑，修复东西。好的，太好了。所以，它创建了一个分支。现在，它正在暂存我们的更改。>> 分支名称。完美的。创建提交。我将给，我喜欢这个。这是一个很棒的主意。我也将给我的，就像学习 Git 的技巧，对于任何还没有使用过它的人来说，我只是喜欢 Git GitHub 桌面应用程序。它就像，它为你提供了所有这些的按钮。你可以看到你的差异。你可以，比如用按钮创建分支。所以，我认为这很棒。如果你对命令行感到畏惧，有一个设计精美的桌面应用程序，你可以使用。这是真的。这是真的。嗯，现在看看这个。所以，它创建了 PR。在说明中，我告诉 Claude，嘿，当你创建 PR 时，在用户的默认浏览器中打开它。所以，现在我们在这里打开了我们的 PR。嗯，这个检查部署到 Vercel 的检查会失败，但没关系，因为我给了它一步。而且所有这些红色看起来很吓人，但它不是。我告诉 Claude 每 30 秒或每 60 秒监控一次 CI，直到所有检查都通过。我告诉它我关心的具体检查。如果任何检查失败，就自己修复，然后推送更改。所以，你知道，如果人们将某些东西推送到 GitHub，并且有 TypeScript 错误，他们会在 GitHub UI 中看到一些错误。他们会截屏。他们会在 Slack 上发给我，说：“为什么我的东西不起作用？” 我想完全避免这种情况。而且，回到我的第一原理，比如，如果 AI 要求你做某事，比如检查 PR 或告诉我 CI 状态，你应该真正考虑如何教 Claude 自己去做。所以，在这里，这个斜杠部署命令，字面上是端到端的。我只是坐着看着它一遍又一遍地检查它的提交状态，它的 CI 状态，确保一切正常。然后当所有这些绿色勾号出现时，脚本就会停止。我认为这很棒。我希望它能降低学习所有这些工具的门槛和恐惧感，但同时，你知道，如果你好奇，你可以只是阅读并理解正在发生的事情。它就像被指示用清晰的英语来沟通它正在做什么。我最喜欢的部分是，这不会是人们认为的。我认为斜杠命令很棒。我认为运行所有先决项目也很棒。我喜欢你直接在浏览器窗口中打开它。这是其中之一，你知道，即使你创建了分支、拉取请求，并说它准备好了。人们会说，“好吧，现在，现在我该做什么？现在我该做什么？” 而只是强制打开浏览器窗口并说，“这就是它在 GitHub 上的位置。” 我的问题是，你是否需要在原型游乐场中进行代码审查，或者你只是>> 嗯，对于原型游乐场，不。我是说，人们总是可以要求的，但不行。我们基本上就是 YOLO 合并。我认为>> 爱死它了。我主要检查的是，我的 PR 是否意外弄坏了别人的原型？是的。>> 但同样，比如，这种情况发生了一两次，那很烦人。所以，我们创建了这个 Claude 本地文件，就像重要的，不要这样做，你知道吗？这似乎解决了问题。所以，是的，很多 YOLO 启用自动合并。当然，它并不完美。我不知道。它似乎在幻觉一些东西。比如它认为这些通过了，即使它们还没有。我不知道。它很接近。所以，我将缩小范围，总结一下我们所讲的内容。你为整个团队创建了一个共享仓库，你可以在其中拥有按名称划分的目录，没有数据库。我们只是使用元数据 JSON 和共享代码将不同的原型放入这个仓库中。你已经设置了全局 Claude 规则以及本地 Claude 规则，加上 Claude 命令和 Claude 技能，以指导人们走上常见的路径。我最喜欢的一个将是 Figma 到代码。太酷了。>> 美丽。太好了。然后我今天从你那里听到的第一条规则是，当被要求做某事时，教 Claude 自己去做。这是不是？是的。所以，你有一个很棒的原型游乐场。你设置了所有这些东西。这个从做事情，比如，也许完全在 Figma 或这些低保真原型模型中，转向真正依赖 Claude 代码、代码原型设计，这个转变是如何改变设计团队的？它是否改变了设计团队的一小部分？你是否觉得整体上组织中的事物正在以某种方式转变？你觉得它如何改变人们的协作方式？我仍然使用 Figma。嗯，我可能仍然花费 60% 到 70% 的时间在 Figma 中。你知道，有些东西你正在制作不需要在浏览器中，不需要编码。你可以看看然后说，是的，这大致是对的，我们应该就这样发布。我发现当你为使用 AI 的东西设计时，情况就不是这样了。所以，例如，如果你正在构建一个聊天机器人，或者在我看来，我从事 Notion AI 的工作，我认为你无法在 Figma 中设计一个好的聊天体验。你可以设计聊天输入框的样子。你可以设计一个小的聊天气泡和一个发送按钮，以及一个用于模型选择器的下拉菜单。我认为所有这些在 Figma 中都很好，但你在 Figma 中无法设计的是，实际使用它的感觉是什么。我可能一开始就应该说，原型游乐场之所以存在，是因为当我开始从事 Notion AI 的工作时，我实际上是在 Figma 中设计对话。你知道，就像用户会说这个，然后 AI 会说那个，然后它会完美地工作并创建一个页面或数据库。而且，你会在 Figma 中模拟这些黄金路径，然后工程师会去构建它，然后它就不会那样工作，对吧？你发送一条消息，AI 卡住了，或者它会问一个后续问题，或者它会做错事，你需要纠正它。而原型游乐场对我来说是一种连接到真实 AI 模型的方式，并开始感受，比如，模型将如何工作，如果我提交这种提示？如果我连接到 Notion MCP 会怎样？它甚至知道如何创建一个页面吗？如果它遇到错误怎么办？哦，对了，我们需要为这个设计一个错误状态。如果模型思考了 2 分钟，用户盯着一个空白的聊天屏幕怎么办？比如，我们应该在中间这段时间做什么来帮助他们确信它正在工作，它正在做正确的事情？有没有办法显示渐进式进度？比如，我发现这些事情在 Figma 中非常非常难以设计。所以，回到回答你的问题，我认为随着越来越多的人设计包含 AI 的应用程序，或者以某种方式包含 AI，
他们将需要一些其他的，比如原生代码优先的工作方式，来真正理解模型能做什么。老实说，这感觉有点糟糕。感觉像是浪费了很多时间，每个月整个行业都得学习，哦，这个模型 4.3.2 Max Pro 有什么新功能？然后一个月后，这一切都变得无关紧要了，因为新东西出来了，然后你就学习那个。嗯，感觉像是在浪费时间。不幸的是，我认为这是必要的，因为模型的性能在每次发布时都在以非常微妙的方式进步。作为设计师，了解模型的能力非常重要，这样我们才能创造出能够恰好处于模型将能够做得很好的边缘的产品体验和设计。真正令人沮丧的是，如果你设计了一个东西，你知道，哦，用户只是会要求一个很酷的网站，它就会变成一个完美的输出网站。模型做不到，对吧？或者它们需要大量的微调和一些中间提示才能做到这一点。设计师必须知道那里发生了什么才能设计出合理且可行的东西。所以，我认为越多的产品整合人工智能，设计师就越需要转向“原型优先”的思维方式，但可能是那种有实际代码在后台的原型优先，在那里你可以整合现代模型，看看它们在哪里会出错，看看它们在哪里做得好，看看它们在哪里做得不好，并真正形成关于哪些模型适合哪些事情的意见。嗯，那种东西。所以说到哪些模型适合哪些事情，你正在使用我目前最喜欢的，我的宝贝，Opus 4.5。Opus >> 为什么，为什么是 Claude，我是说，为什么是 Claude 代码？为什么是光标在这种非光标的配置中？告诉我你是如何得出这是你的工具栈的。我需要多玩玩光标的东西。我实际上认为光标代理模式非常棒。我显然已经尝试过一点了。我只是还没有走那么远。我仍然真正欣赏光标的一点是，我实际上技术上两者都用。比如，如果我有一个文件，这里有一个错误。我仍然真正欣赏能够将鼠标悬停在错误上，然后有一个按钮说“在聊天中修复”。是的。>> 这仍然比复制粘贴到 Claude 代码中要快。所以我实际上两者都用了一点。我只是认为 Claude 代码做得最好。我不知道该如何形容。当你为不同的事情使用不同的模型时，会有一种奇怪的感觉。就像对不同的人来说，它们感觉恰到好处。对我来说，Opus 4.5 在做我想做的事情方面简直是好得离谱。我喜欢它解决问题的方式。我喜欢它的计划方式。我喜欢它的执行方式。我喜欢它与我沟通的方式以及它提出的后续问题。然后，你知道，为什么不在光标中使用 Opus 4.5 而不是在终端 UI 中使用？我不知道。我认为这纯粹是个人偏好。就像有些人看到这个，他们会说，这看起来像给我按钮和 UI 和组件和下拉菜单和类似的东西。而对我来说，我不知道。这感觉很轻松，>> 感觉很好。>> 使用。>> 正如我们 Every 的朋友所说，每个模型都有“口感”。>> [笑声] >> 是的，是的，没错。Claude 代码和 Opus 的口感都很好。好的，然后是我的最后一个问题，因为你似乎是一位专家提示工程师。但是当人工智能不听话，当它不听话，当它编造你，你知道，通过了实际上没有通过的 CI 检查时，你的提示技巧是什么？基本上，我注意到我能做出多好的东西和我有多累之间有直接关系。如果我什么时候觉得，哇，Claude 太糟糕了，它在做错误的事情。我回去重读我说的话，我意识到我根本没说清楚。所以对我来说，写出更好的提示的最佳解决方案是：去睡觉。明天再试。嗯>> [笑声] >> 我不知道这是否是一个敷衍的答案。它实际上并不是写出更好的提示，但是，你知道，你的输出与你提供给它的上下文的好坏直接相关。如果你给它的是困倦、疲惫、懒惰、请修复这个类型的命令，它就会做得不好。我不知道这是否是你的本意，但你给了我非常好的关系和育儿建议，我正在思考。我今天早上试图让我的孩子做某事。我很累。而且很明显，输入不会得到我想要的输出。嗯，这很简单。我是说，去睡一觉。你什么时候需要都可以这样做吗？>> 我喜欢这个。你知道吗？我最喜欢的代理之一，Devon，确实有睡眠功能。你可以让代理进入睡眠状态。也许我们只需要，我们需要代理让我们入睡。嗯，Brian，这太棒了。这是一次深入的探讨，我认为从长远来看，它展示了设计团队，正如你所说，特别是那些将要构建人工智能产品的团队，将如何开始他们的工作。那么，在哪里可以找到你，以及如何在 Notion 中帮助你？你可以在 Twitter 或 X 上找到我，主要是 Brian_Lovin，或者我的网站 brianlovin.com。然后我从事 Notion AI 的工作，我认为它确实是少数几个有用的知识工作代理之一。所以，如果你还没有尝试过，就去试试，并给我反馈。我们一直在努力让它做得更好，让它更快地做更多事情。所以，试试 Notion AI。是的。我们也是播客这里 Notion AI 的忠实粉丝。所以，一定要看看，一定要给出一些反馈。我们会直接发送给 Claude 并放入原型游乐场。Brian，感谢你加入 How I AI。感谢你的邀请。非常感谢 [音乐] 观看。如果你喜欢这个节目，请在 YouTube 上点赞和订阅，或者更好的是，在评论区留下你的想法。你也可以在 Apple Podcasts、Spotify 或你喜欢的播客应用上找到这个播客。请考虑给我们留下评分和评论，这将帮助其他人找到这个节目。你可以在 howiaiipod.com 上看到我们所有的剧集并了解更多关于这个节目。下次见。