Claude3.7生成高保真原型UI 2.0

摘要：Claude 3.7模型发布后，写代码能力又上了一个新的台阶。我们完全可以借助AI工具的结合，完成我们APP原型设计的很多工作。这篇文章，我们看看作者分享的经验和方法。

Claude 3.7模型发布后，写代码能力又上了一个新的台阶。我们完全可以借助AI工具的结合，完成我们APP原型设计的很多工作。这篇文章，我们看看作者分享的经验和方法。

“客户要的App原型图明天就要交稿，但设计师请假了？”
“又要改需求，这下得重新设计十几个界面，熬夜吗？”
“小项目没预算请专业设计师，自己画的原型丑到不忍直视怎么办？”

如果以上场景你似曾相识，那这篇文章可能会让你惊喜万分——因为强大的Claude 3.7模型正悄悄改变着UI/UX设计的游戏规则。无需设计背景，无需Figma技能，只需一段提示词，就能生成足以让人惊艳的高保真原型UI，甚至可以直接导入Figma进行深度编辑！

一、一段提示词，生成完整App原型

传统的App原型设计需要专业的设计技能、复杂的工具操作和大量的时间投入。而现在，借助Cursor+Claude 3.7的组合，一段精心设计的提示词就能完成这一切。

提示词模板

我想开发一个类似外卖APP「饿了么」，APP叫「死了么」，用于养老的，每天问一句，以防独自一个人死在家里没人发现。APP也有骑手，哪里有人死了就去接单收尸。注意这是专门为独居90后的年轻人设计的。风格要求清新好看、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 页面中，而不是跳转链接。
– 真实感增强：
– 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
– 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
– 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

开头第一段就是你想法的描述。

提示词by @花叔