📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Anthropic Just Dropped Their Own Design Tool... (Claude Design)

Brock Mesarich | AI for Non Techies12:53

Transcription

好的,那么 Enthropic 公司刚刚发布了新的 Claw 设计功能,我将在本视频中对其进行详细介绍。在继续之前,我不会只是坐在这里吹捧它,说它能取代 Figma,取代 Lovable。我将非常简单地介绍这个产品是什么,它不是什么。所以,到本视频结束时,您将知道它是否适合您。正如您在这里看到的,这是我构思的一个设计。我基本上给了它我想要重新创建的品牌风格指南,它在短短几分钟内就生成了这个令人惊叹的演示文稿。

好的。所以,如果您没有与世隔绝,并且一直在使用 Twitter,您可能已经看到人们一直在谈论 Anthropic 的这款新设计工具,据说它即将发布。是的,它今天已经上线了。这一切都由昨天发布的全新 Claude Opus 4.7 模型提供支持。

简而言之,它的工作原理是这样的。我们可以输入一个句子或特定的提示,然后得到一个完成的视觉效果。所以,我们基本上用简单的英语写出我们想要的东西。Claude 为我们构建了这个特定的设计,然后我们可以通过告诉它要更改什么来编辑它。这是一种对话式的方式,我们可以设计演示文稿、幻灯片、登陆页面,甚至只是品牌指南。

所以,正如我所说,这是由 Claude Opus 4.7 提供支持的,这是一个新模型。这是为 Pro Max 团队和企业用户提供的研究预览版。所以,如果您使用的是免费套餐,您可能看不到它,但如果您每月支付 20 美元,它应该会在今天结束前向您推出。

这是我们的界面外观的示例。有这个设计。他们实际上在这里选择了特定的设计模式,不同的颜色,我们可以创建原型、幻灯片、登陆页面、单页网站,所有这些不同的东西,我们现在可以直接在这个产品中生成。

所以,废话不多说,让我向您展示它确切的样子以及您现在如何开始使用它。

首先,可以在 Claude 网页应用程序上访问它。所以,如果您搜索 claude.ai,AI。您应该能在您的帐户中看到它。现在,我们在左侧边栏上有一个按钮。如果您看不到边栏,请单击此处。在最底部,我们有一个名为“设计”的新工具。我可以打开它。

从这里,我们将看到几个不同的东西。您可以看到我所有最近的设计。在左侧,您可以看到我们的特定原型。如果我单击“示例”在这里,我们有具体的示例,以便让我们了解我们可以在 Claw 设计工具中直接做什么,我们甚至可以单击“使用此提示”,它将开始启动我们想要重新创建的那个特定设计的副本。

好的。所以,一旦我们进入实际的设计项目,它看起来会非常像我们之前见过的 lovable bolt 或 replet 任何这些编码工具。在左侧,我们基本上有我们的聊天模式,以及我们可以看到所有正在进行的事情。这是我的提示。想象一下,您正在为未来的操作系统创建壁纸。等等。基本上,这就是我的提示,它正在进行这个过程。看起来它实际上正在编写代码,并且很快就会在右侧显示原型。

此外,我们可以从一个特定的草图开始。所以,如果我单击这个,它现在将带我们到一个画布,我们可以在这里写下我们的不同想法。我们甚至可以在这个画布上写字。所以,如果我们是一个有创造力的人,并且我们想能够写下一个设计,将其可视化,然后我们可以直接在这个工具中将其变成一个可工作的原型。

如果我单击“设计文件”,您可以看到我们所有的文件都直接在此设计项目中。这是它创建的设计。所以,我们这里有一个很酷的小背景壁纸,我们可以添加到我们的登陆页面,无论我们正在创建什么。我们甚至有液态金属。我的意思是,这很酷。我们有一个霓虹灯网格。所以,它生成了五种不同的未来背景版本,我们可以开始使用。这很酷。显然,这只是我们给它的第一个提示。所以,如果我们愿意,我们可以来回修改它。

回到我们在 Claw Design 中的主仪表板,我们在这里有几个不同的选项。我们可以从头开始生成原型。正如您所看到的,我们只需给它起一个名字。我们将选择我们特定的设计系统,我已经创建了。我将向您展示如何根据您预先存在的品牌指南或您的徽标创建设计系统。所有这些不同的偏好,然后可以反映在您在 Claude Design 中进行的任何设计中。

接下来,我们甚至可以生成一个幻灯片。再次,您可以看到我创建的这个“非技术设计系统”AI。这正是我用来生成这个幻灯片的,我用一个简单的提示就完成了。

在我向您展示如何导入或创建特定的设计系统或风格指南之前,让我们快速谈谈这里的一些关键功能,这些功能确实使其成为一个有趣工具。所以,我们有多模态 AI 输入。所以,这基本上意味着我们可以给 Claude 多种不同的输入,例如文本提示、特定图像、PowerPoint 文档、特定代码库,甚至网页捕获。它可以从网站上提取不同的信息。一旦我们提供了这些特定的输入,它就可以学习我们的设计系统。所以,正如我所说,我们可以指向我们的代码库或我们已经存在于 Claude Code 中的设计文件。然后,每个输出都将使用我们的颜色、字体和特定组件。所以,如果您以前使用过 Claude,您可以将这些视为设计技能。这样,每当我们生成幻灯片、网站和文档时,它们看起来都像是由同一个品牌创建的。这是因为我们直接在这里指定了我们特定的设计系统。而且它非常强大。

所以,让我向您展示如何做到这一点。为了生成设计系统,我们将回到我们的主仪表板。然后,我们将单击“设计系统”。您可以在我的帐户中看到几个不同的东西。所以,我们有“非技术 AI”设计系统,这是您在上面看到的那个特定 PowerPoint 的。然后,在底部,我们可以创建一个新的。所以,让我向您展示如何做到这一点。

现在我们将看到几个不同的东西。我们可以写下我们公司的名称。我们甚至可以链接我们在 GitHub 上的代码。所以,如果您有一个存储在 GitHub 上的特定代码库,我们可以拉取该信息以复制完全相同的设计风格。我们还可以链接我们计算机上的代码。所以,如果我们有任何想要上传的不同文件,我们可以这样做。我们甚至可以上传 Figma 文件。我们可以添加我们使用的任何字体、徽标或特定资产。

所以,让我开始并给这个设计系统起个名字。所以,我将称之为“非技术 AI”。您可以随意命名。这基本上只是您设计系统模板的名称。然后,如果我有任何 GitHub 存储库,我可以链接它。但是,我将获取一些我想要引用的文件。

好的。所以,我想复制的是这个。这是我的技能仪表板。这是我在 Claude Co-work 中创建的一个特定技能。它会自动添加我所有的技能。我真的很喜欢这个仪表板的外观。所以,我将要做的是,我将找到其中一个文件夹中的这个现有 HTML 文件。我正在 co-work 中工作。我将其命名为“技能仪表板”。所以,我将要做的是,我将把它拖到 Claw Design 中。所以,我将把它拖到这里。就这样,我们现在链接了“技能仪表板”文件夹。我可以添加多个文件夹或文件。但我认为现在这样就可以了。我将在这里说我想复制我上传的这个风格。我真的很喜欢 Anthropic 的设计风格。所以,让我们尝试用类似的排版和颜色来重新创建它。所以,我们将指定所有这些信息。然后,我将单击“继续生成”。单击“生成”。显然,这需要大约 15 分钟来设置。

好的。所以,回到这里,这确实花了大约 10-12 分钟。基本上,有几件事需要审查。所以,例如,这里的品牌图标。它基本上问我它看起来是否好,或者是否需要改进。我认为看起来不错。所以,让我们继续。另外,品牌徽标。您可以看到它正在询问我所有的这些不同偏好。我们可以来回修改。如果我们不喜欢它们的外观,我可以单击“需要改进”,描述我们想要的,它会进行更改,直到完全符合我们的要求。所以,例如,这是它为这个特定设计系统生成的幻灯片模板。我认为它看起来非常棒。这太酷了。老实说,我认为到目前为止这是一个很棒的工具。玩起来很有趣,我期待看到,你知道,你们对此有什么看法。

一旦所有这些都确认了,我们可以单击我们幻灯片中的所有这些。您可以看到我们行动号召的外观示例。这个。如果有什么我们想改变的,我们可以回到这些单独的组件并更改它们。然后,如果我单击“设计文件”,我们可以看到我们所有的特定资产。我们可以看到我们的截图。基本上,我们在此文件夹中创建的每一个文件。

我确实忘记提到的一件事是,我们可以随时更改我们想要使用的模型。我们将使用 Claude Opus 4.7,因为它是他们最新、最棒的模型,专门用于视觉任务。

接下来,让我用我们创建的这个特定设计系统来创建一个登陆页面。所以,我将在这里输入这个提示。

好的。所以,我喜欢这个设计系统。请为我的学校社区创建一个登陆页面。它将被称为“非技术 AI”。行动号召将是加入我的学校社区,以获取我每天使用的所有 Claude 技能,以及深入了解如何使用 Claude Code 和 Claude Co-work,如果您经营自己的企业。所以,就像 Lovable 一样,我可以使用类似 Whisperflow 的东西给它一个这样的氛围提示。然后它将开始构建我们的计划。所以,让我们在它为我们生成登陆页面后回来。

在我们等待响应的同时,我想快速谈谈这个。所以,我们可以将这些信息导出到任何地方。所以,您可以将 Claude 视为一个设计系统,正如您在此信息图中看到的。它是将所有这些其他工具结合在一起的东西。所以,我们在其中设计的任何内容都可以在 Canva 中进行编辑。我们可以将其生成为实际的 PowerPoint 演示文稿。我们可以为其提供一个特定的 URL 以在网上查看。我们可以将其交给 Claude Code。所有这些不同的东西。将 Claude Design 视为连接所有这些不同设计工具的东西。

好的。所以,大约 2 分钟后,我们现在有了一个看起来很棒的登陆页面。所以,让我打开它在一个新标签页中,这样我们就可以看到当有人实际访问它时它会是什么样子。我的意思是,这真的很扎实。它遵循了我们给它的确切设计偏好。这看起来真的很好。老实说,我对此感到非常兴奋。它不是什么惊天动地的事情,但从一次性提示来看,对于登陆页面来说,这相当扎实。显然,我们可以继续来回修改,根据需要进行批评,但我将向您展示如何导出它并回答您在看到这个之后可能有的问题。

所以,我们可以与队友共享。所以,正如您所看到的,我们可以选择权限级别。所以,队友可以查看,他们可以评论,他们甚至可以编辑。所以,如果您团队中有几个人,您希望他们能够进行协作,您可以直接在这个设计工具中做到这一点。

现在,我们可以将其复制为模板。这样,每当我们创建登陆页面时,它都可以采用这种确切的风格。我们还可以以几种不同的方式导出它们。我们可以将其导出为 PDF、PowerPoint,我们可以将其发送到 Canva,将其导出为独立的 HTML 文件,或者我们可以将其交给 Claude Code。所以,让我点击这个。从这里,我们所要做的就是复制这个命令。然后它将在 Claude Code 中接续我们之前的工作。

好的。我需要设定一些预期,因为我不想让这个视频只是吹捧这个产品。它不会取代 Lovable 或 Cursor。让我来解释一下原因。所以,首先,这个新的 Claw 设计工具做什么?它构建视觉原型和模型。它可以生成幻灯片和单页网站,就像我刚才向您展示的,登陆页面设计,看起来真实的静态网站,我们可以将文件交给您的团队。但它不会做什么?它不会构建一个完整的、可工作的 Web 应用程序。它不会内置数据库。它不处理登录和付款。所以,回答您的问题,如果您问的是,这不会取代 Lovable、Bolt、Cursor、Replet,所有这些编码平台,因为它不是一个完整的编码平台。它更像是一个设计工具。

所以,在玩了整个上午之后,没有废话。我认为这是一个很棒的工具。它显然处于预览模式。我认为它有一些很好的用例,但它不会完全取代 Lovable 或 Figma 的需求。

在我们离开之前,我只想让您知道,我有一个学校社区,我深入研究了如何使用 Claude Code、Claude Co-work,以及现在的 Claude Design。所以,如果您想要我在本视频中展示的任何资源,它们将在我的学校社区中,以及我每天用来经营我的业务的 50 多个 Claude 技能。

话虽如此,各位,非常感谢您坚持到视频的最后。我期待在下一个视频中见到您。订阅以免费获取更多此类内容。干杯。