00:00:00AI 设计工具正在快速发展,
00:00:01虽然许多工具都承诺会彻底改变你的工作流程,
00:00:04但真正能兑现承诺的却寥寥无几。我花了大量时间测试不同的工具,
00:00:09将真正有用的工具从那些华而不实的工具中区分出来。在这个视频中,
00:00:13我将分享那些对我的设计流程产生真正影响的工具。这些工具涵盖从规划、
00:00:17资源生成到动画和设计转换等各个方面。有些是免费的,
00:00:21有些是付费的,
00:00:22还有一些拥有同样好用的免费替代品。首先介绍一个真正强大且必不可少的规划工具,
00:00:27它能将你混乱的想法转化为结构化的技术蓝图。这是 Builder Methods 推出的产品,
00:00:34叫做 Design OS。它可以说是你流程中缺失的那一块拼图。你可以从 GitHub 上访问开源代码库,
00:00:41从那里下载并使用。Design OS 专门设计用于模拟软件开发工作流程。你充当利益相关者的角色,
00:00:48而 Design OS 则负责产品规划、
00:00:50设计系统和需求规格说明。最后,
00:00:52它会确认你的软件设计方案,
00:00:54之后你就可以导出它。这个工具适合技术型和非技术型开发者。它兼容所有流行的 AI 工具,
00:01:00如 Claude Code、
00:01:02Cursor 和 Copilot。
00:01:05安装过程很简单。只需复制 git clone 命令,
00:01:08将其粘贴到你的项目文件夹中,
00:01:10然后将默认名称更改为你的实际项目名称。安装完成后,
00:01:14项目将可以访问一系列专门的命令和设计技能。当你导航到 localhost 3000 时,
00:01:20所有步骤会逐一列出,
00:01:21这样你就不会对先执行哪个命令感到困惑。
00:01:24它会向你提出一系列问题,
00:01:26以识别项目构思的每个细节。它会在过程中不断完善计划,
00:01:30提供大纲,
00:01:31在中途征求你的批准,
00:01:33并以针对 AI 模型优化的方式记录所有内容。这是一个耗时的过程,
00:01:38所以你必须保持耐心,
00:01:40忍受不断的提问,
00:01:41才能为你的网站获得最佳结果。一旦你完成所有部分,
00:01:45计划就可以导出了。导出的计划包含使用说明以及数据模型、
00:01:49示例数据和文档。它还包括 TypeScript 类型、
00:01:54CSS 令牌和所有必要的设计文件。你可以在这里找到关于如何使用导出文件来构建应用的说明,
00:02:01无论你选择增量方法还是一次性提示方法。总的来说,
00:02:05这是一个非常有趣的工具,
00:02:07它让设计的规划部分变得更加轻松顺畅。高质量的资源是任何优秀网站的基础,
00:02:12如果你正在寻找一种快速生成专业产品视觉效果的方法,
00:02:17VSCOM 是你需要了解的工具。
00:02:19它具有令人印象深刻的能力,
00:02:21可以使用提示词生成令人惊叹的视觉图像,
00:02:24利用草图创建渲染图,
00:02:26甚至为你建模。它配备了许多出色的工具,
00:02:29还能提供动画效果。使用时,
00:02:31你只需提供草图和描述,
00:02:32AI 就会根据你的输入生成视觉效果。你可以用它做很多事情,
00:02:37包括编辑单个元素,
00:02:38使用 AI 修改它们,
00:02:40并以 4K 质量下载结果用于你的首屏视觉效果。
00:02:43VSCOM 是一个付费工具,
00:02:45但你可以免费开始使用。免费套餐很慷慨,
00:02:48提供了实用的功能,
00:02:50而月度计划则提供更多功能。如果你经常需要在不同领域对产品进行建模,
00:02:54这是一个很好的选择。但如果你不想使用付费工具,
00:02:58可以使用一个被低估的 Google 项目,
00:03:01叫做 Mixed Board。这个工具仍处于实验阶段,
00:03:05所以目前是免费的。这个工具让你可以创建情绪板,
00:03:08并利用 Nano Banana 强大的功能为你的网站生成图像。你可以使用提示词修改图像,
00:03:15它会完全按照你的要求生成新图像。你还可以上传示例图像,
00:03:19它会利用其功能生成匹配的视觉效果。你可以创建任意数量的生成内容,
00:03:24甚至可以构建完整的演示文稿来可视化你的产品概念,
00:03:27所有这些都使用 Nano Banana 完成。如果你不喜欢某张图像,
00:03:32可以重新生成,
00:03:33要求模型创建类似的图像,
00:03:35复制图像,
00:03:36甚至对其进行标注以给模型提供更多指导。然后它会根据你的规格生成所有细节。这相当令人难以置信,
00:03:43因为你可以获取这些资源并下载它们直接在你的网站上使用。在着手设计自己的网站之前,
00:03:49分析竞争对手的网站结构总是更好的做法。为此,
00:03:52我使用了一个名为 GoFullPage 的扩展程序,
00:03:56它可以捕获任何网站的整页截图。这让我能够下载完整的网站截图作为参考。然后我将这些截图提供给 Claude,
00:04:04配合一个专门设计用于提取 UI 元素的提示词。这个提示词指示 Claude 从图像中识别所有约束条件、
00:04:11对象位置和 UI 主题细节。当我用这个专门的提示词向 Claude 提供截图时,
00:04:17它全面提取了所有 UI 样式细节。一旦我获得了提取的样式指南,
00:04:22我就将它们提供给项目文件夹中的 Claude Code,
00:04:26该文件夹包含我下载用于使用的资源。然后 Claude 生成了整个网站,
00:04:31应用了它从竞争对手分析中提取的所有样式和设计指南。
00:04:35动效是保持用户留存的关键,
00:04:37为此你可以使用 AI 驱动的 Figma 插件,
00:04:40只需点击几下就能为从 logo 到完整界面的所有内容添加动画。Magic Animator 是一个非常酷且强大的网站,
00:04:48它使用 AI 为你的所有设计添加动画。它可以为从 logo 到社交媒体帖子再到用户界面的所有内容添加动画,
00:04:55在你的应用程序中创建微交互,
00:04:57帮助保持用户留存和兴趣。Magic Animator 作为 Figma 插件提供,
00:05:02允许你轻松地为 UI 设计添加动画。当你运行插件时,
00:05:05它会自动检测 UI 中的图层,
00:05:07并为你生成四种动画供你选择。然后你可以将选择的动画导出为 Lottie 文件,
00:05:13这是一种专门用于添加动画的 JSON 格式。现在 Magic Animator 是一个付费工具,
00:05:19但如果你在寻找类似的替代品,
00:05:21可以使用 Lottie Files,
00:05:23它也作为 Figma 插件提供。它允许你在网站设计中实现动画,
00:05:27并以多种格式导出,
00:05:29包括各种类型的 Lottie JSON 文件。你甚至可以将动画文件提供给 Claude Code,
00:05:35它会为你将动画应用到 UI 上。如果你不想从头开始在 Figma 上设计,
00:05:40可以使用 HTML to Design 插件将任何 HTML 网站转换为完全可编辑的 Figma 设计。它提供免费和付费计划,
00:05:48在免费计划中,
00:05:49你每 30 天可以获得最多 10 次导入。最酷的部分是,
00:05:53你可以将它用作 MCP,
00:05:55直接在 Figma 设计中访问 AI 代理的设计功能。为此,
00:05:59你需要将它连接到你的 AI 工具(如 Claude 或 Cursor),
00:06:03并按照设置指南配置 MCP。
00:06:05每当你想生成一个设计时,
00:06:07只需提示你的 AI 代理并使用关键词发送到 Figma 或发送到 HTML 进行设计。这会生成一个包含设计的 JSON 文件,
00:06:15并在你批准后将其发送到 Figma。然后你可以在 Figma 中查看设计,
00:06:20并与你最喜欢的 AI 工具协作,
00:06:22创建令人惊艳的设计,
00:06:24随时编辑任何你不喜欢的地方。现在让我们来谈谈 Automata。在教导数百万人如何使用 AI 构建之后,
00:06:31我们开始自己实施这些工作流程。我们发现我们能够比以往更快地构建更好的产品。我们帮助将你的想法变为现实,
00:06:38无论是应用程序还是网站。也许你在观看我们的视频时会想,
00:06:42我有一个很棒的想法,
00:06:43但我没有技术团队来构建它。这正是我们的用武之地。把我们想象成你的技术副驾驶。我们将直接应用我们教授给数百万人的相同工作流程到你的项目中,
00:06:52将概念转化为真正可用的解决方案,
00:06:54而无需承受招聘或管理开发团队的烦恼。
00:06:57准备好将你的想法加速变为现实了吗?请通过 hello@automata.dev 与我们联系。本期视频到这里就结束了。如果你想支持我们的频道并帮助我们继续制作这样的视频,
00:07:08你可以使用下方的超级感谢按钮来支持。一如既往,
00:07:11感谢观看,
00:07:12我们下期视频再见。