快速实现：利用ai将创意转化为原型的四个步骤
- Rifx.Online
- Generative AI , AI Applications , Software Development
- 05 Mar, 2025
来自冰冷纽约的问候！
如果你可以将一个想法进行探索设计选项，并在仅仅一个小时内创建一个可工作的原型，那会怎样？
如果这个原型不仅仅是Figma中的一个基本设计，而是一个更先进的、由代码驱动的原型呢？
如果你只需要最基本的编码技能就能实现这一切，那又会怎样？
在今天的通讯中，我将一步一步带你完成我所做的一个实验：
- 起草产品需求文档
- 生成线框图
- 生成原型
- 进行修订
让我们开始吧！
结果
在我们深入之前，这里是结果的简要演示：
原型的简要演示
第一步：起草需求
我让Claude生成一个简单的产品需求文档：
- 专注于用户可以进行的核心流程：
- 写笔记。
- 浏览其他用户的笔记。
- 通过点赞、转发和评论与笔记互动。
- 查看用户资料。
- 按类别对笔记进行排序。
这个产品需求文档将用于一个实验，使用AI工具生成线框图。
这是Claude的回复：
Claude的回复
生成的需求相当详细，但比我需要的要复杂得多。
所以我下一步是简化需求并进行一些调整。
💡 提示
利用 Claude 或 ChatGPT 生成提示是有帮助的。也就是说，通常最好不要直接将提示复制粘贴到其他 AI工具 中。
相反，只选择相关部分并简化它们以适应您的特定需求。
这让您对提示有更多控制，并通过省略无关细节来节省 token。
第2步：生成线框图
我本可以跳过这一步，但我想探索一些设计选项，以便在直接进入原型设计之前对设计有更多的控制。
此外，我本可以继续使用Claude来构思线框图，但它的响应更适合简单的概念验证任务，而不是创建可用的设计。
所以我使用了UX Pilot，这是我在去年10月的一份通讯中提到过的工具。
我将简化的产品需求文档按页面拆分，然后逐页输入到UX Pilot中。
例如，这是我对主页设计的提示：
该应用程序使博主能够直接与他们的受众撰写、发布、浏览和互动分享的笔记。
然后我使用UX Pilot的Figma插件生成了3个设计选项：
来自UX Pilot的主页设计选项
采用相同的方法，我为添加/编辑帖子页面生成了3个设计选项：
来自UX Pilot的添加/编辑帖子页面设计选项
最后是个人资料页面：
来自UX Pilot的个人资料页面设计选项
然后我选择了我喜欢的设计并进行了小的修订。
💡 提示
我选择使用 UX Pilot 的 Figma 插件，而不是它的网页平台，尽管该平台提供了更多功能——例如根据提示创建整个用户流程的一组屏幕，并将线框图导出到 Figma 进行编辑。
然而，这些功能被限制在付费墙后。这就是为什么我将提示逐页拆分，并在插件中为每一页单独生成线框图。
第3步：生成原型
Claude 可以处理一些基本的原型工作，但我需要一个专门为此类任务设计的 AI工具。
我选择了 Bolt 进行这个实验（关于 V0 的内容我会另找时间讨论）。
什么是 Bolt？
Bolt 是一个 AI 驱动的工具，可以将文本提示转换为全栈应用程序。
它基于 StackBlitz，这是一个基于浏览器的开发平台，因此我不需要在本地计算机上进行设置。
它处理各种杂项任务，例如：
- 安装和运行 npm 工具和库
- 运行 Node.js 服务器
- 从聊天中部署到生产环境
- 通过 URL 分享我的工作
我在其浏览器环境中安装库和依赖的体验非常好。
相比之下，以前在我的本地计算机上构建 SEO 描述工具 和 Doc-to-Slides 工具 时，我不得不经历一个繁琐的安装过程。
第一次尝试
我让Bolt使用那些修订过的线框图作为参考来创建一个原型。
给Bolt的提示
它使用NativeScript构建了移动应用，并让我用手机扫描二维码以访问预览。
Bolt让我扫描代码
为了简化和更方便访问，我让Bolt创建这个应用的网页版本。
于是它改变了方向，使用React和Vite重新生成了一个网页应用。
这是它生成的几个页面的第一次尝试：
Bolt创建的第一个主页
Bolt创建的第一个添加/编辑帖子页面
第4步：进行修订
Bolt的第一次尝试是一个不错的开始，但它缺少了一些细节，与我的提示存在视觉不一致，并且没有互动性。
所以我使用自然语言请求具体的改进：
请求修复小设计缺陷：
- 添加浮动按钮。
- 修复标签栏。
- 修订布局和组件。
请求添加某些交互行为：
- 当用户点击“喜欢”图标时，它应该切换到启用状态。
- 当用户点击浮动的“+”图标时，应该从底部滑出一个添加/编辑抽屉。点击“x”图标应该关闭抽屉。
我不得不逐一修订这些小细节，但这个过程相当简单，并不像预期的那么繁琐。
这是我在线框图中拍摄标签栏快照并请求Bolt修复视觉不一致的一个例子：
后续修订提示
💡 提示
Bolt每天提供20万免费代币。
根据项目的复杂性和迭代次数，您可能能够使用这些代币完成整个项目，或者在仅仅几个命令中耗尽它们。
除非您不在乎费用，否则了解如何高效使用代币是不可避免且重要的。
一些代币优化策略：
- 从详细的初始提示开始，以减少修订的需要。
- 事先指定应用程序的部署方式，无论是作为网页应用还是原生移动应用。
- 使用快照引用被证明非常有效。
- 如果可能，将相似的指令批次合并为一条消息。
另一个提示：即使您达到代币限制，您仍然可以通过使用其代码编辑器继续工作。
就我而言，在达到限制后，我仍然能够在代码编辑器中完成原型，得到了Claude的帮助。
我相信代币策略（成本管理）是一个日益重要但被忽视的话题。
感谢阅读。
Xinran
