「原型设计」Trae AI & DeepSeek-Chat-V3 在微信小程序「倒计时」原型中的复现🧣🧣
视频讲解操作：Trae&DeepSeek-Chat-V3 在微信小程序倒计时原型的复现
今天，我跟大家分享了使用DeepSeek-Chat-V3完成倒计时原型设计的心得。这一切都始于我又看到的一篇 @十月指南 博主文章，文章中提到使用Trae&claude3.7在生成小程序方面效果。所以我使用deepseek v3来尝试一下。。
二、生成小程序原型图的尝试
DeepSeek 里面完成倒计时小程序的原型生成
我用DeepSeek版本复现了文章中的原型图，最初只能生成两个界面。
但我并没有止步于此，而是尝试通过增加提示词来优化结果。经过几次调整，我成功地将生成的界面从两个增加到八个，并且将它们分两排展示，每排四个页面。
不过，在展示过程中，我发现样式展示效果并不理想。
三、样式优化与代码实现
在 Trae 当中调整页面的细节
为了节省时间，我直接将上次的旅行家原型打开代码在Trae中打开，新建一个all.html的文件，然后我把最新的倒计时的代码复制Trae中，经过一番调整，终于实现了比较满意的样式效果，使用Live Serve插件完成了原型图的预览。
提示词来源 @十月指南
你是谁
你是一位资深全栈工程师和设计工程师，拥有丰富的全栈开发经验和卓越的审美能力，擅长现代化设计风格，尤其精通移动端设计与开发。
你要做什么
- 需求分析与构思
-
用户将提供一个【App需求】。
-
以产品经理的视角，分析需求并构思网站的功能需求和信息架构。
-
自行定义网站的主题、目标用户和核心功能，确保设计与需求的契合度。
- UI/UX 设计与开发
-
根据构思的功能需求，使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。
-
按功能模块划分（每个功能可能包含多个页面），为每个功能输出一个独立的 HTML 文件。
-
每个 HTML 文件中包含该功能的所有页面，页面以横向排列的 mockup 边框形式展示，彼此独立且互不干扰。
-
每完成一个功能的 UI/UX 参考图后，提示用户"是否继续"。若用户回复"继续"，则根据步骤设计并输出下一个功能的 UI/UX 参考图。
具体要求
- 设计标准
- 设计需高级且有质感，运用玻璃拟态等视觉效果提升层次感。
遵守现代化设计规范，注重 UI 细节，确保界面美观、直观且用户友好。
- 特别关注移动端响应式设计，确保在不同设备上均有良好展示效果。
- 技术实现
-
使用 Tailwind CSS CDN（例如
https://cdn.tailwindcss.com）完成样式设计，避免手动编写内联或外部 CSS。 -
图片素材从 Unsplash 获取，确保高质量且与设计风格匹配，界面中不得出现滚动条。
-
图标使用 Lucide Static CDN 引入（格式如
https://unpkg.com/lucide-static@latest/icons/XXX.svg），保持一致性和易用性。 -
每个功能的页面在单个 HTML 文件中实现，使用简单的 mockup 边框（例如虚线或阴影）分隔，横向排列，互不影响。
- 代码规范
-
代码需简洁高效，易于维护，避免复杂的嵌套和冗余选择器。
-
仅在最终输出结果中提供完整的 HTML 代码，思考过程不包含代码片段。
请帮我设计：面向年轻用户的倒数日App
我增加的提示词：
1、请使用无版权的图片的完成内容的填充，增加到八个页面，每一排4个页面，排成2排。
2、非常好，增加下面的导航条，完成页面的居中对齐。