AI原型设计革命：Claude-3.7-Sonnet，产品经理新助手？| APP原型实例展示 | 3D数字人漫游炫酷来袭！

3,744 0 0

使用Claude-3.7-Sonnet生成原型图：产品经理的新助手？

1. Claude-3.7-Sonnet在原型设计中的应用：它能取代产品经理吗？

最近，很多人都在尝试使用 Claude-3.7-Sonnet 生成漂亮的原型图，甚至有人认为它可以取代产品经理的部分工作。这引发了我们的思考：Claude-3.7-Sonnet 在原型设计方面究竟表现如何？它真的能成为产品经理的得力助手吗？

1.1 实例一：番茄钟APP原型设计

提示词设计： 为了生成一个 番茄钟APP 的原型，我们需要精心设计提示词，让 Claude-3.7-Sonnet 能够理解我们的需求。以下是一个示例提示词：

设计风格

优雅的极简主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
强调色：按APP类型选择;

技术规格

1、单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2、图标:引用在线矢量图标库内的图标(任何图标都不要带有背景色块、底板、外框）
3、图片: 使用开源图片网站链接的形式引入
4、样式必须引入 tailwindcss CDN来完成
5、不要显示状态栏以及时间、信号等信息
6、不要显示非移动端元素，如滚动条
7、所有文字只可以使用黑色或白色

任务

这是一个【番茄钟】APP模拟产品经理输出详细功能设计、信息架构设计，结合{设计风格}和{技术规格}输出一套UI设计方案。生成一个Ul.html文件，放入所有页面，横向排列。

关键点：

设计风格： 描述清晰的设计风格，例如“优雅的极简主义”、“清新柔和的渐变配色”等。
技术规格： 详细的技术规格，例如页面尺寸、图标来源、样式框架等。
任务描述： 明确的任务描述，例如“模拟产品经理输出详细功能设计”等。

生成效果： 使用以上提示词，可以通过 Claude-3.7-Sonnet 生成一个包含多个页面的 HTML 文件，横向排列展示 番茄钟APP 的 UI 设计方案。

1.2 实例二：类似即刻的社区APP原型设计

提示词设计： 如果我们想要创建一个类似即刻的社区APP原型，可以参考以下提示词：

我想开发一个类似即刻的社区APP，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML原型实现：使用HTML+ Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的HTML文件存放，例如 home.html、profile.html、settings.html等。 – index.html作为主入口，不直接写入所有界面的HTML代码，而是使用iframe的方式嵌入这些HTML片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
– 真实感增强： – 界面尺寸应模拟 iPhone15Pro，并让界面圆角化，使其更像真实的手机界面。 – 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
– 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的HTML代码，并确保其可用于实际开发。

关键点：

用户体验分析： 强调 用户体验，让 Claude-3.7-Sonnet 能够理解 APP 的核心功能和用户需求。
产品界面规划： 模拟 产品经理 的工作，定义关键界面和信息架构。
高保真 UI 设计： 模拟 UI设计师 的工作，设计贴近真实 iOS/Android 设计规范的界面。
HTML原型实现： 使用 HTML 和 CSS框架 生成原型，并拆分代码文件，保持结构清晰。

生成效果： 通过以上提示词，可以生成一个类似即刻的社区APP的高保真原型图，包含多个独立 HTML 文件，并通过 iframe 嵌入到主页面中。

2. Claude-3.7-Sonnet的炫酷应用：3D数字人漫游

除了生成APP原型，Claude-3.7-Sonnet 还可以应用于更炫酷的场景，例如 3D数字人漫游。

2.1 实例三：3D数字人漫游场景

实现方式： 利用 Threejs 框架，Claude-3.7-Sonnet 可以直接生成在 3D 场景中漫游的 数字人，并支持 移动端 和手柄操作。

体验地址：https://artificial-playground-demo.netlify.app/

代码地址：https://bolt.new/~/sb1-px1vllor

关键点：

Threejs支持： Claude-3.7-Sonnet 对 Threejs 框架的支持非常好，可以轻松生成 3D 场景。
移动端和手柄操作： 生成的 3D 场景支持 移动端 和手柄操作，用户体验良好。

3. 总结与感悟

Claude-3.7-Sonnet 在原型设计方面表现出色，可以帮助产品经理快速生成高质量的原型图。它不仅可以模拟 UI设计师 的工作，设计美观的界面，还可以模拟 产品经理 的工作，分析用户需求和规划产品界面。此外，Claude-3.7-Sonnet 还可以应用于更炫酷的场景，例如 3D数字人漫游。

我认为：Claude-3.7-Sonnet 就像一把双刃剑，用好了可以事半功倍，用不好可能会适得其反。它虽然可以帮助我们快速生成原型，但不能完全取代产品经理和UI设计师的工作。我们需要保持学习和思考，才能更好地利用 AI 工具，提高工作效率和产品质量。
原文:https://mp.weixin.qq.com/s/zaEMlwz5ejgEhRfsKXf87A