当前位置：首页 > news >正文

AI编程：使用Trae + Claude生成原型图，提示词分享

news 来源：原创 2025/5/15 10:56:29

最近在学习AI编程相关的东西，看到了有人分享的提示词，做了两个APP原型图，分享给大家。

成果
第一个是依据B站的 @探索者-子默的视频，照着生成的AI改写原型图

在这里插入图片描述

第二个是我修改了一下提示词让AI生成做视频解析链接的APP原型图。

在这里插入图片描述
整体来说效果不错，微微的调整一下就可以直接拿来做产品原型。
这下独立开发者有福了。

提示词分享给大家：

### 原型界面图设计我需要打造一个实用的「短视频免费下载的小程序」的工具，这个工具的核心需求如下：#### 一、产品需求1. **解析用户黏贴的连接**- 解析用户黏贴的连接，后端服务进行解析- 返回下载的视频地址，并在页面上能播放- 展示视频标题- 展示视频封面- 用户可以点击按钮进行下载，下载封面，复制标题- 还可以复制下载视频地址、下载封面地址2. **我的个人相关功能**- 我的tab能可以登录，可以显示登录的昵称和头像- 用户可以分享、有邀请任务---#### 二、页面功能模块1. **首页**页面功能点：**banner**- 循环播放banner图片**输入区**- 输入框（用户黏贴的连接信息）- 输入框右侧有一个黏贴按钮，能黏贴用户复制的连接信息- 有一个解析按钮在输入框下面，呼吸效果**展示文档信息**- 展示使用教程**底部导航栏：**- 首页 tab- 我的 tab2. **解析结果页**解析完成之后跳入此页页面功能点：**视频信息展示：**- 在上面分三个小的tab视频tab、封面tab、标题tab**视频tab**- 播放视频区域- 视频标题- 下载按钮- 复制视频连接按钮**封面tab**- 封面展示- 下载按钮- 复制封面地址按钮**标题tab**- 标题展示在编辑框- 复制按钮3. **我的页**页面功能点：- 头像(不登录展示默认的头像)- 昵称(不登录展示游客)- 下面有不同的项目，有邀请任务、使用教程、历史纪录、设置- 下面一行字介绍目前的版本号的---### 一、设计与实现要求1. **需求分析与交互流程梳理**根据产品目标，提炼核心功能点，明确各页面之间的交互路径。2. **界面结构规划**制定合理的页面布局方案，确保模块划分清晰、信息架构有逻辑性。3. **视觉与UI设计**参照iOS设计规范，结合现代化审美进行界面设计。使用提供的图片风格作为视觉参考，确保界面美观统一。4. **可交互原型开发**使用 HTML + Tailwind CSS 实现界面效果，尽量通过现有类名构建样式，减少自定义 CSS。图标建议引用 FontAwesome 或其他开源图标库，增强界面真实感。5. **页面组织方式**- 每个页面单独成文件（如：index.html, history.html, rewrite.html 等）- index.html 作为主展示页，采用 iframe 嵌入其他页面进行预览展示- 各 iframe 之间请保留一定垂直间距，避免内容重叠，提升可读性和展示体验- 可以多行进行排列页面，确保直观。---### 二、效果增强建议- 所有界面按 iPhone 16 Pro Max 尺寸设计，含圆角边框，模拟真实设备视图- 使用 Unsplash、Pexels 等图库中的真实图片代替占位图，确保视觉效果贴近实用场景- 顶部添加微信小程序样式的状态栏，底部固定导航栏，符合小程序设计习惯---请严格参照上述标准，完成具有开发指导意义的 HTML 原型页面，确保最终交付的代码具备实际落地能力。

生成原型用到的组件：