ICES 你好，冰天雪地的纽约给你报到啦！ICES

如果你能有一个想法，并探索不同的设计方案，再在短短一小时内制作出一个可以工作的原型，所有这一切只需一小时，那该有多好。

如果那个原型不仅仅是在 Figma 上的基本设计，而是一个更高级的原型，具有代码功能，那岂不是更好？

而且如果你只需要一些基本的编码技能就能实现这一切，那该有多好？

今天在新闻简报里，我会一步步带你了解我做的实验。

• 编写需求
• 画草图
• 做原型
• 修改

咱们开始吧！

这就是结果。

在我们开始之前，这里先给大家简单演示一下。

简短演示

我让克劳德编写了一份简单的產品需求说明书。

    专注于用户可以执行的核心流程：- 写笔记。  
    - 查看其他用户的笔记。  
    - 通过点赞、转发和评论笔记进行互动。  
    - 查看用户资料。  
    - 按类别分类笔记。此PRD将用于用AI工具来进行线框图实验。

这是 Claude 的回复：

克劳德的回复如下

生成的需求虽然很详细，但比我需要的复杂多了。

所以我下一步就是简化要求，并做了一些小调整。

利用Claude或ChatGPT来生成提示语是有帮助的。不过，一般来说，通常最好是不要直接将这些提示复制粘贴到其他AI工具中。

相反地，只选相关的部分，并简化以适应你具体的需要。

这让你有更多的控制权来调整提示，并通过省略无关细节来节省空间。

步骤 2：生成原型

其实我可以跳过这一步，但我想要看看不同的设计选择，在直接进入原型设计前，我想先多掌握一些设计上的主动权。

除此之外，我可以继续让 Claude 帮我构思线框图，但它的回答更适合简单的概念验证任务，而不是设计出实际可用的界面。

所以我用过UX Pilot，这个工具我在去年十月的通讯里也提到过。

我将简化的PRD按页面拆分，然后一页一页地发给了UX Pilot。

比如，这是我的首页设计提示：

该应用程序让博主可以撰写、发布笔记，浏览他人分享的内容，并直接与他们的受众互动。**主页组件**：- 导航标签：  - 关注  - 发现  - 类别筛选栏  - 笔记卡片展示：  - 作者名和头像  - 笔记预览  - 互动数据  - ，时间戳

于是，我使用 UX Pilot 的 Figma 插件来生成了三个设计方案：

UX Pilot提供的首页设计

使用同样的方法，我为发帖/编辑页面生成了3个设计方案如下：

来自 UX Pilot 的帖子页面设计选项的添加和编辑

最后来看看你的主页

UX Pilot的个人资料页面设计选项

然后我选择了我更喜欢的设计，并对其做了一些小的调整。

我选择使用UX Pilot的Figma插件，而非其网页平台，尽管该平台提供更多功能——比如，可以根据提示创建整个用户流程所需的屏幕，并将线框图导出至Figma以供编辑。

然而，那些功能是需要付费的。因此，我逐页分析并为插件中的每个页面单独制作了线框图。

克劳德能应付一些基本的原型工作，但相比之下，我需要一个专门为此类任务设计的AI工具，而不是像克劳德这样的。

我选择了Bolt来做这个实验（以后再聊V0）。

Bolt 是一个基于 AI 的工具，能将文本提示变成全栈应用。

它是基于StackBlitz，一个基于浏览器的开发平台，所以我无需在我的本地电脑上设置任何东西。

它可以处理各种任务，比如比如说：等等

• 安装并运行 npm 工具，,
• 运行 Node.js 服务，
• 从聊天中部署到生产环境，
• 通过链接分享我的项目。

在浏览器环境中安装库和依赖项的经历相当愉快。

相比之前，我在我的本地电脑上构建SEO描述工具（https://designwithai.substack.com/p/how-i-built-an-seo-tool-with-ai）和文档转演示文稿工具（https://designwithai.substack.com/p/how-i-built-a-tool-from-scratch-with-ai）时，不得不经历繁琐的安装步骤。

我让波特按照修改后的线框图做一个原型来。

Bolt的提示

它使用了 NativeScript 来构建移动应用程序，并让我用手机扫描二维码来查看预览版。

巴特让我扫描一下那个代码

为了简单和方便，我请Bolt把这个应用改成网页版。

于是它转向，用 React 和 Vite 重新构建了一个 Web 应用。

以下是由它的第一次尝试生成的几页：

博特的第一个网站

Bolt的第一个添加或编辑帖子的页面

步骤 4：做出调整

博尔特的第一次尝试还算可以，但有些细节不够，在视觉上与我的提示有些不符，而且不够互动。

所以我用自然语言请求了一些具体的改进。

让它解决一些小的设计bug

• 添加浮动按钮。
• 修复底部标签栏（Tab Bar）。
• 调整布局和组件。

让它增加一些交互行为，比如。

• 当用户点击“赞”图标时，它应该切换到启用状态（即心形图标）。
• 当用户点击浮动的“+”图标时，底部应滑出一个添加/编辑抽屉。点击“x”图标即可关闭抽屉。

我不得不一一修改了那些小细节，但这个过程比较直接，不像预期的那样麻烦。

这里是我截取一个线框图中的标签栏快照，并让Bolt修复视觉不一致的一个示例：

修订后的跟进提醒

Bolt 每天赠送 20 万免费代币。

根据项目的复杂性以及你进行迭代的次数，可能用它们完成整个项目，或者在几条命令后就耗尽了它们。

除非你不在乎费用，否则学会高效使用币是非常重要的。

几个 token 优化的策略：

• 从一个详细的初始提示开始，以减少修改的需求。
• 一开始就要明确应用是部署为网页应用还是原生移动应用。
• 使用快照引用已被证明非常有效的方法。
• 尽可能将相似的指令批次合并成一条消息。

另一个提示：即使代币用完了，你也可以继续用代码编辑器工作。

我遇到了这种情况，一达到限制，我依然能在代码编辑器里把原型项目做完，在克劳德的帮助下。

我认为，代币策略（成本控制）是一个常被忽视但越来越重要的话题。

以后我会在designwithai.co上再聊这个话题。

谢谢你的阅读。

辛然

📮 加入我，在 Design with AI，这是一本探索人工智能在设计领域潜力的数字杂志。订阅后，你每周都会收到实用的文章，帮助你更好地、更快地、更聪明地用AI进行设计。你还将加入一个拥有1.6k+人工智能爱好者的社区，这些爱好者来自谷歌、亚马逊等公司。

⏳距离我们的AI课程新一期《AI for Product Designers》只剩10天了！真让人激动。