最近在用 ClaudeCode 尝试开发一个微信小程序，分享一下目前生成产品原型 UI 的 Prompt，佬们可以尝试一下，如果有什么反馈和优化的意见可以讨论一下。
微信小程序高保真 UI 原型构建
请帮我构建微信小程序高保真原型：$ARGUMENTS
按照以下三个阶段进行：产品探讨→设计确定→原型制作。
第一阶段：产品概念探讨（3-4 轮深度对话）
探讨以下维度：
- 核心价值：解决什么核心痛点
- 目标用户：用户画像和使用场景
- 必备功能：3-5 个核心功能模块及优先级
- 用户路径：完整使用流程
- 竞品分析：
- 搜索分析相关竞品
- 总结优缺点
- 确定差异化策略
输出：
- 产品定位说明（200 字以内）
- 核心功能列表（按优先级）
- 竞品分析总结
第二阶段：设计风格确定
基于产品定位，提供 2-3 个设计风格方案供我选择：
设计方案示例格式：
- 方案名称：如 “清新简约风”
- 适用理由：为什么适合您的产品
- 视觉特征：用通俗语言描述视觉感受
- 色彩建议：主色、辅助色的建议和使用场景
- 导航方案：如何处理顶部区域与胶囊按钮的关系
- 参考案例：类似风格的知名产品
输出：确定的设计方向和关键色彩
文档输出
生成设计指导文档：
文件：.claude/mvp/design-guide.md
内容：
- 基于前两阶段讨论结果
- 简洁清晰，作为设计唯一参考
- 包含所有关键设计决策
更新原则：
- 任何调整先更新文档
- 文档始终是最新设计依据
第三阶段：高保真原型制作
重要：严格遵循 design-guide.md 规范。
技术规范
- 框架：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: auto;
background: white;
}
</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 真实图片
- 文案内容：真实中文文案
- 数据展示：3-5 条示例数据
文件输出
1. 生成多个独立 HTML 文件：
home.html // 首页
[feature1].html // 核心功能页（根据实际功能命名）
[feature2].html // 核心功能页
profile.html // 个人中心（如需要）
2. 生成 index.html 汇总展示页：
创建一个 index.html 文件，用于集中展示所有原型页面，便于整体预览和评审。
index.html 模板：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
iframe {
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.page-container {
transition: transform 0.2s;
}
.page-container:hover {
transform: scale(1.02);
}
</style>
</head>
<body class="bg-gray-50 p-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">[产品名称]</h1>
<p class="text-gray-600">微信小程序高保真原型预览</p>
<div class="mt-4 text-sm text-gray-500">
<p>设备尺寸：393×852px (iPhone 16 Pro)</p>
<p>设计风格：[选定的设计风格]</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 根据实际生成的页面添加iframe容器 -->
<!-- 每个页面按照以下格式 -->
<div class="bg-white rounded-lg p-4 page-container">
<h3 class="text-lg font-semibold mb-4 text-center">[页面名称]</h3>
<iframe src="[filename].html" width="393" height="852" class="mx-auto"></iframe>
</div>
</div>
<!-- 设计说明 -->
<div class="mt-12 bg-white rounded-lg p-6">
<h2 class="text-xl font-bold mb-4">设计说明</h2>
<div class="space-y-2 text-gray-600">
<p><strong>产品定位：</strong>[从design-guide.md提取]</p>
<p><strong>核心功能：</strong>[从design-guide.md提取]</p>
<p><strong>设计特色：</strong>[从design-guide.md提取]</p>
</div>
</div>
</div>
</body>
</html>
index.html 要求：
- 使用响应式网格布局，自动适应不同屏幕尺寸
- 每个 iframe 展示一个页面，保持 393×852px 原始尺寸
- 页面标题清晰标注每个页面的功能
- 底部包含设计说明，提取 design-guide.md 的关键信息
- 鼠标悬停时有轻微放大效果，提升交互体验
注意事项：
- index.html 应该最后生成，确保包含所有已创建的页面
- iframe 的 src 路径应与实际文件名完全匹配
- 页面排序按功能重要性：首页 → 核心功能页 → 辅助页面
- 确保所有 HTML 文件在同一目录下，便于 iframe 引用
输出要求
- 首先生成 / 更新
design-guide.md - 基于文档依次生成 5-8 个核心页面 HTML 文件
- 最后生成
index.html汇总展示页 - 确保 index.html 中包含所有已生成的页面
输出顺序：
- design-guide.md → 各功能页面 HTML → index.html
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
