「原型设计」DeepSeek-Chat-V3 在手机原型APP方面的实践🧣
视频操作实践：DeepSeek-Chat-V3 在手机原型APP方面的实践
今天我想和大家分享一下我在使用DeepSeek-Chat-V3版本时的一些发现和体验。最近我看到硅基支点博主的文章，他发布了DeepSeek-Chat-V3版本，并且用它生成了两个圆形图。我发现这两个图已经非常接近Claude-3.7版本了，这让我很感兴趣。
复现与优化
于是，我用DeepSeek版本去复现了博主的原型图。复现之后，我把提示词完善了一下，最终生成了八个页面。一开始，这个版本只能生成两个界面。后来我在提示词里增加了内容，让它生成四个界面。再后来，我又增加了提示词，它就生成了八个页面。我把这八个页面分两排展示，每排四个页面。但在展示过程中，我发现它的样式展示得不太好。于是我把代码复制到Trae里面重新调整了一下， 使用 Live Serve 打开，这才实现了我们想要的效果。
Trae 的 DeepSeek-Chat-V3 模型的应用
现在，我看到Trae里面 集成了 DeepSeek-Chat-V3模型。我用这个V3模型重新构建了一下，生成了一个包含首页和详情页的UI HTML文件。我要八个页面，每一行四个页面，排成两行。但当我完成这些操作后，我发现这个版本好像没有完全继承DeepSeek模型的功能。它虽然能生成页面，但样式并没有完全实现。
问题与建议
我觉得这可能是因为DeepSeek-Chat-V3模型在集成过程中还存在一些问题。所以，我建议大家在制作原型时，还是直接使用DeepSeek来完成代码填充。因为V3模型在Trae里还不完善，但在DeepSeek里已经很完善了。我们可以用DeepSeek快速达成我们想要的效果。
提示词来源@硅基支点
#角色
你是一位资深设计资深前端开发工程师
#设计风格
优雅的极简主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
强调色：按APP类型选择;
#技术规格
1、单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2、图标:引用在线矢量图标库内的图标(任何图标都不要带有背景色块、底板、外框）
3、图片: 使用开源图片网站链接的形式引入
4、样式必须引入 tailwindcss CDN来完成
5、不要显示状态栏以及时间、信号等信息
6、不要显示非移动端元素，如滚动条
7、所有文字只可以使用黑色或白色
#任务
这是一个旅游攻略软件， 可分享旅游风景攻略 模拟产品经理输出详细功能设计、信息架构设计，结合{设计风格}和{技术规格}输出一套UI设计方案。 生成一个Ul.html文件，放入首页和详情页，横向排列。
我增加的提示词：
1、继续完成其他的几个页面的原型开发
2、非常好，使用免费的无版权的图片完成空白照片的填充，同时总结上面的代码，完成一横排四个页面的展示，完成全部页面的展示，在一份代码当中。
3、在上面的基础上面，请在增加四个页面，在一份代码当中实现展示，分为两排，一排四个页面。
我优化后的提示词版本样式：
以下是优化后的完整提示词，整合了所有新增需求和修改点，方便您保存并用于后续设计工作：
# 角色设定
您是一位资深UI/UX设计师兼前端开发专家，专注于移动端旅游类应用设计
# 设计风格要求
-
视觉美学
- 极简主义设计语言，保持60%以上留白率
- 柔和渐变色系（主色：#667eea → #764ba2）
- 8px基准网格系统
- 12px统一圆角规范
- 微交互动画时长300ms
-
界面元素
- 模块化卡片设计（阴影：0 4px 12px rgba(0,0,0,0.08)）
- 无框线图标（仅使用Font Awesome纯线条图标）
- 图片占位符自动适应（object-cover）
- 文字对比度≥4.5:1（仅使用#000/#FFF）
-
动效规范
- 卡片悬停放大102%
- 标签切换底部指示条动画
- 页面转场滑动效果
# 技术规格
-
框架规范
<!-- 必须包含 --> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -
设备适配
- 视窗尺寸：375×812px（iPhone 13比例）
- 设备边框：12px纯色边框+40px圆角
- 隐藏状态栏和滚动条
-
资源规范
- 图片：仅使用Unsplash无版权素材（尺寸≥800px）
- 图标：纯矢量无背景（禁止使用带底板的图标集）
# 核心功能需求
需实现8个完整页面，分两排展示（每排4个）：
第一排：基础功能页
-
首页
- 分类导航栏（推荐/国内/国外等6个标签）
- 热门攻略卡片（带渐变遮罩的文字层）
- 瀑布流内容列表（图片+标题+元信息）
-
发现页
- 专题合集（2×2网格布局）
- LBS附近推荐（带距离信息）
- 搜索入口（置于顶部栏）
-
发布页
- 内容类型选择（图文/轨迹）
- 草稿箱管理（含时间戳）
- 多图上传预览区
-
个人中心
- 用户信息卡（头像+等级+社交数据）
- 功能入口网格（4列布局）
- 足迹地图（横向滚动画廊）
第二排：扩展功能页
5. 攻略详情页
- 封面图全屏宽度
- 结构化内容（段落/小贴士/景点卡片）
- 浮动操作按钮（收藏/分享）
-
搜索页
- 语义化搜索框（带占位提示）
- 结果分类（攻略/地点/用户）
- 关键词高亮处理
-
消息中心
- 消息类型筛选Tab
- 对话列表（头像+预览+时间）
- 未读标记系统
-
设置页
- 账户安全模块
- 隐私控制开关
- 缓存清理指示器
# 交付要求
- 单HTML文件实现所有页面
- 横向排列分为两排（每排4个手机框架）
- 严格遵循W3C标准验证
- 备注关键交互逻辑的CSS实现
# 示例代码结构
<div class="phone-container">
<!-- 第一排 -->
<div class="phone-row">
<div class="phone-frame">首页</div>
<div class="phone-frame">发现</div>
<div class="phone-frame">发布</div>
<div class="phone-frame">我的</div>
</div>
<!-- 第二排 -->
<div class="phone-row">
<div class="phone-frame">详情</div>
<div class="phone-frame">搜索</div>
<div class="phone-frame">消息</div>
<div class="phone-frame">设置</div>
</div>
</div>
# 特别说明
- 所有图片必须使用
<img src="https://images.unsplash.com/xxx">格式 - 禁止出现任何背景色块图标（仅使用
<i class="fas fa-xxx">） - 文字颜色严格限定
text-black/text-white - 需要模拟手机物理边框效果
该提示词已整合所有迭代需求，包含：
- 新增的4个页面（详情/搜索/消息/设置）
- 两排布局展示要求
- 强化后的设计系统规范
- 更详细的技术实现说明
建议保存为旅游APP设计规范.md文件以便随时调用。如需调整任何细节，可基于此版本继续优化。
