体验最新的 AI 工具：用于原型设计和构建简单网站
测试最新的 AI 工具：用于原型设计和构建简单网站
从产品设计的角度比较 v0、Cursor、Lovable 和 Bolt.new 这几款工具，看它们如何用于重新设计我们公司的网站。
在我们为 CodeYam 开发新的着陆页时，我们认为这是一个测试一些最受关注的 AI 工具来进行软件项目原型设计的好机会。这些工具承诺简化网站创建，但它们在实际任务中的表现如何呢？
作为一名拥有超过十年行业经验的产品和网页设计师，AI 简化这项工作的想法既令人兴奋又有点令人生畏。我典型的（AI 之前）流程包括在 Figma 中进行原型设计，与团队一起审查设计，然后将它们交给开发人员，通过代码将它们变为现实。这通常会导致多个反馈循环和修改，这可能非常耗时。我特别想看看 AI 如何处理这个过程，以及它是否可以简化从设计到开发的过渡，减少来回沟通，使协作和实施更加顺畅。
为了保持比较的公平性，我在所有平台上使用了相同的基本提示，并使其非常简单，以测试每个工具在极少信息的情况下表现如何：
"我需要一个为我们正在构建的产品制作的着陆页。这是一个名为 'CodeYam' 的软件模拟器。这是我们目前的网站。你能否创建一些类似但更专业的东西？"
我还包括了我们现有网站的屏幕截图，以了解每个工具如何在最少的额外输入下解释和增强我们的设计。
包含在提示中的我们当前的 CodeYam 网站的屏幕截图。
AI 网站构建器：我的实践经验
Cursor
💡 最适合想要更深入的 GitHub 集成的技术用户。
- 需要下载 Cursor 应用程序并将其连接到 GitHub。
- 其中技术性最强的一个——需要运行命令和管理 GitHub 交互。
- 通过外部链接提供预览。
- 输出非常基本——它主要重新排列了我们现有的组件，而不是提出新的内容。
- 由于设置过程，对于简单的网站来说，使用起来最困难。
Cursor 的界面。
Cursor 的输出。
v0 by Vercel
💡 最佳用户体验和功能丰富的界面。
- 就 UI 而言，我最喜欢的一个——美观且易于使用。
- 允许保存历史记录并轻松访问不同的项目。
- 在聊天过程中进行实时预览，并能很好地适应变化。
- 可共享的预览链接使反馈收集无缝衔接。
- 提供预先存在的应用程序、组件和启动器的库（尽管我没有在我的测试中使用这些）。它确实有助于预先了解我可以从这个平台获得什么结果。
v0 的界面。
v0 的工作状态。
Lovable
💡 最适合生成高质量的内容和信息传递。
- 简单的界面，只有一个聊天窗口和一个预览窗口。虽然我很欣赏它的简单性，但我发现自己希望对过程有更多的控制权。
- 它以最少的输入就能很好地处理消息传递和内容生成，这给我留下了最深刻的印象。
Lovable 的界面。
Lovable 的输出。
Bolt.new
💡 最容易使用，但结果最不令人印象深刻。
- 非常简单的 UI，没有干扰。与 Lovable 非常相似，但结果更基本。
- 在设计和内容方面，输出是最基本和最不令人印象深刻的。
- 在我们聊天时提供了实时预览。
- 在内容改进或设计增强方面没有提供太多。
Bolt 的界面。
Bolt 的输出。
总体体会
- 除了 Cursor，所有工具都非常直观，不需要技术知识。
- 输出通常很简单且看起来很专业，但没有一个是具有突破性的。我想知道如果提示更具体，结果是否会有所不同。
- 没有 AI 幻觉（我很高兴！），所有生成的内容都是合乎逻辑且结构化的。
- 所有平台都允许代码检查，使开发人员可以轻松地进行调整和改进。
最终结论
- Cursor 给人的感觉是最“真实”的开发人员工具，直接与 GitHub 集成，让我可以了解整个过程。但是，对于简单的着陆页来说，这有点过头了。
- v0 by Vercel 因其可用性和精致的界面而脱颖而出，使其成为我最有可能继续尝试的一个——尽管生成的内容有些通用。
- Lovable 提供了最令人印象深刻的内容，使其成为需要消息传递方面帮助的团队的有力选择。
- Bolt.new 太基础，没有用处，我可能不会再次使用它。
总的来说，如果你想要一个简单但看起来很专业的网站，这些选项中的任何一个都可以帮助你以非常快速、有凝聚力的方式交付一个。但是不要期望独特或花哨的设计。
下一步是什么？
我和团队正在研究消息传递，以及如何最好地传达 CodeYam 可以帮助技术团队更快、更好地交付产品的各种方式。一旦我们就内容达成一致，我将测试这些工具如何处理更复杂的设计要求和集成。
CodeYam 通过软件模拟，使软件团队更容易发现更改是否具有预期的影响，或者是否引入了错误或副作用，从而提高他们对代码更改的信心。这些模拟提供测试覆盖率，帮助团队了解其应用程序的状态和任何更改，并可用于文档、演示和协作。要了解更多信息，请联系我们或加入候补名单。