最近在用ClaudeCode尝试开发一个微信小程序，个分享一下目前自用的生成产品原型UI的Prompt，佬们可以尝试一下，如果有什么反馈和优化的意见可以讨论一下。
2025/07/21
最近在看房，就拿Prompt尝试一个用于看房记录的小程序原型UI，放在了github pages上。
发现一个小Bug，ClaudeCode貌似无法很好的理解tabbar，需要在Prompt中引导。
这个原型基本就是我一直喊"对对对"，然后CC一口气喷出来的。
现实情况就是，在尝试之前，只有一个模糊的想法。
通过原型，以及对于原型数轮的讨论与修改，获取一个功能更加完善、逻辑更加合理的原型，再由CC总结文档，通过Prompt二次生成是否是一个更好的做法。
这里的考虑就是，虽然经过迭代，原型必然会更加符合我们的要求，但是可能在反复迭代的过程中导致CC丢失上下文，无法很好的遵循design-guide指令。
而通过一个完善的原型倒推出一个用于构建原型在产品构思方面的Prompt，再结合原有的Prompt一口气生成一套原型，可能在风格一致性会更好。
微信小程序高保真UI原型构建
请帮我构建微信小程序高保真原型：$ARGUMENTS
按照以下三个阶段进行：产品探讨→设计确定→原型制作。
第一阶段：产品概念探讨（3-4轮深度对话）
探讨以下维度：
- 核心价值：解决什么核心痛点
- 目标用户：用户画像和使用场景
- 必备功能：3-5个核心功能模块及优先级
- 用户路径：完整使用流程
- 竞品分析：
- 搜索分析相关竞品
- 总结优缺点
- 确定差异化策略
输出：
- 产品定位说明（200字以内）
- 核心功能列表（按优先级）
- 竞品分析总结
第二阶段：设计风格确定
基于产品定位，提供2-3个设计风格方案供我选择：
设计方案示例格式：
- 方案名称：如"清新简约风"
- 适用理由：为什么适合您的产品
- 视觉特征：用通俗语言描述视觉感受
- 色彩建议：主色、辅助色的建议和使用场景
- 导航方案：如何处理顶部区域与胶囊按钮的关系
- 参考案例：类似风格的知名产品
输出：确定的设计方向和关键色彩
文档输出
生成设计指导文档：
文件：.claude/mvp/design-guide.md
内容：
- 基于前两阶段讨论结果
- 简洁清晰，作为设计唯一参考
- 包含所有关键设计决策
更新原则：
- 任何调整先更新文档
- 文档始终是最新设计依据
第三阶段：高保真原型制作
重要：严格遵循 design-guide.md 规范。
3.1 功能页面原型制作
技术规范
- 框架：HTML + Tailwind CSS
- 设备尺寸：393×852px（iPhone 16 Pro）
- 内容区域：393×808px
固定页面模板
每个功能页面都必须基于以下模板，不要修改状态栏和胶囊按钮部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信小程序模板</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 确保容器尺寸固定 */
.wechat-container {
width: 393px;
height: 852px;
position: relative;
overflow: hidden;
}
/* 胶囊按钮样式 */
.capsule-button {
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* 分割线样式 */
.capsule-divider {
background: rgba(255, 255, 255, 0.3);
}
/* 内容区域样式 */
.content-area {
height: 808px;
overflow-y: scroll;
background: white;
scroll-behavior: smooth;
}
/* 隐藏滚动条 */
.content-area::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="wechat-container mx-auto bg-white relative">
<!-- 状态栏 -->
<div class="h-11 bg-white flex items-center justify-between px-4 text-black relative z-10">
<!-- 左侧时间 -->
<div class="text-sm font-medium">1:41</div>
<!-- 右侧状态图标 -->
<div class="flex items-center gap-1">
<!-- 5G网络图标 -->
<div class="text-xs font-medium">5G</div>
<!-- 信号强度图标 -->
<div class="flex items-end gap-0.5 ml-1">
<div class="w-1 h-1 bg-black rounded-full"></div>
<div class="w-1 h-1.5 bg-black rounded-full"></div>
<div class="w-1 h-2 bg-black rounded-full"></div>
<div class="w-1 h-2.5 bg-black rounded-full"></div>
</div>
<!-- 电池图标 -->
<div class="ml-1 flex items-center">
<div class="w-6 h-3 border border-black rounded-sm relative">
<div class="absolute inset-0.5 bg-black rounded-sm" style="width: 74%;"></div>
</div>
<div class="w-0.5 h-1.5 bg-black rounded-r-sm ml-0.5"></div>
<span class="text-xs ml-1">37</span>
</div>
</div>
</div>
<!-- 内容区域 -->
<div class="relative content-area">
<!-- 微信胶囊按钮 -->
<div class="absolute right-3 top-1 flex capsule-button rounded-full h-7 w-18 z-20">
<!-- 三个点按钮 -->
<div class="w-9 h-7 flex items-center justify-center">
<div class="flex gap-0.5">
<div class="w-1 h-1 bg-black rounded-full"></div>
<div class="w-1 h-1 bg-black rounded-full"></div>
<div class="w-1 h-1 bg-black rounded-full"></div>
</div>
</div>
<!-- 分割线 -->
<div class="w-px h-4 capsule-divider self-center"></div>
<!-- 关闭按钮 -->
<div class="w-9 h-7 flex items-center justify-center">
<div class="w-3.5 h-3.5 border border-black rounded-full"></div>
</div>
</div>
<!--
页面内容区域 - 在这里添加具体的页面内容
使用纯 HTML + TailwindCSS 实现
注意：内容区域高度为 808px，支持滚动
-->
</div>
</div>
</body>
</html>
胶囊按钮适配
微信胶囊按钮不可移除，设计时：
- 空间处理：预留安全距离避免遮挡
- 视觉平衡：选择合适的适配策略
- 导航设计：考虑与胶囊按钮的协调
- 交互布局：重要操作避开右上角
内容要求
- 真实性原则：使用与项目相关的真实内容，图片来源于Unsplash/Pexels/Pixabay/StockSnap.io，文案和数据真实可信，避免占位符内容
- 适量展示：数据展示适量（通常3-5条），确保原型既能展现功能又保持简洁
输出要求
生成5-8个核心功能页面HTML文件：
home.html // 首页
[feature1].html // 核心功能页（根据实际功能命名）
[feature2].html // 核心功能页
profile.html // 个人中心（如需要）
3.2 汇总展示页制作
基于3.1阶段生成的功能页面，创建index.html文件，用于在桌面端以良好排版预览所有微信小程序原型页面。
index.html汇总展示页设计原则
核心目标：
在桌面端以良好排版预览所有微信小程序原型页面
布局原则：
- 页面按逻辑流程排列（如：首页→功能页→个人页）
- 确保每个393×852px页面都清晰可见
- 合理利用桌面端屏幕空间，避免过度拥挤或过于分散
视觉组织：
- 项目标题和基本信息
- 页面预览网格（自适应列数）
- 每个页面下方标注页面名称
- 底部设计说明区域
技术要求：
- 使用Tailwind CSS实现响应式网格，根据屏幕宽度自动调整列数
- 保持393×852px原始比例显示
- iframe添加适当边框和阴影效果
- 适当间距确保阅读舒适度
- 包含项目信息和从design-guide.md提取的设计说明
文件输出
第三阶段输出顺序：
- 3.1阶段：design-guide.md → 各功能页面HTML文件
- 3.2阶段：index.html汇总展示页
