使用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