分享一个微信小程序原型生成的Prompt

最近在用 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

固定页面模板#

每个功能页面都必须基于以下模板，不要修改状态栏和胶囊按钮部分：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>微信小程序模板</title>
7
    <script src="https://cdn.tailwindcss.com"></script>
8
    <style>
9
        /* 确保容器尺寸固定 */
10
        .wechat-container {
11
            width: 393px;
12
            height: 852px;
13
            position: relative;
14
            overflow: hidden;
15
        }
16

17
        /* 胶囊按钮样式 */
18
        .capsule-button {
19
            background: rgba(0, 0, 0, 0.1);
20
            backdrop-filter: blur(20px);
21
            border: 1px solid rgba(255, 255, 255, 0.2);
22
        }
23

24
        /* 分割线样式 */
25
        .capsule-divider {
26
            background: rgba(255, 255, 255, 0.3);
27
        }
28

29
        /* 内容区域样式 */
30
        .content-area {
31
            height: 808px;
32
            overflow-y: auto;
33
            background: white;
34
        }
35
    </style>
36
</head>
37
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
38
    <div class="wechat-container mx-auto bg-white relative">
39
        <!-- 状态栏 -->
40
        <div class="h-11 bg-white flex items-center justify-between px-4 text-black relative z-10">
41
            <!-- 左侧时间 -->
42
            <div class="text-sm font-medium">1:41</div>
43

44
            <!-- 右侧状态图标 -->
45
            <div class="flex items-center gap-1">
46
                <!-- 5G网络图标 -->
47
                <div class="text-xs font-medium">5G</div>
48
                <!-- 信号强度图标 -->
49
                <div class="flex items-end gap-0.5 ml-1">
50
                    <div class="w-1 h-1 bg-black rounded-full"></div>
51
                    <div class="w-1 h-1.5 bg-black rounded-full"></div>
52
                    <div class="w-1 h-2 bg-black rounded-full"></div>
53
                    <div class="w-1 h-2.5 bg-black rounded-full"></div>
54
                </div>
55
                <!-- 电池图标 -->
56
                <div class="ml-1 flex items-center">
57
                    <div class="w-6 h-3 border border-black rounded-sm relative">
58
                        <div class="absolute inset-0.5 bg-black rounded-sm" style="width: 74%;"></div>
59
                    </div>
60
                    <div class="w-0.5 h-1.5 bg-black rounded-r-sm ml-0.5"></div>
61
                    <span class="text-xs ml-1">37</span>
62
                </div>
63
            </div>
64
        </div>
65

66
        <!-- 内容区域 -->
67
        <div class="relative content-area">
68
            <!-- 微信胶囊按钮 -->
69
            <div class="absolute right-3 top-1 flex capsule-button rounded-full h-7 w-18 z-20">
70
                <!-- 三个点按钮 -->
71
                <div class="w-9 h-7 flex items-center justify-center">
72
                    <div class="flex gap-0.5">
73
                        <div class="w-1 h-1 bg-black rounded-full"></div>
74
                        <div class="w-1 h-1 bg-black rounded-full"></div>
75
                        <div class="w-1 h-1 bg-black rounded-full"></div>
76
                    </div>
77
                </div>
78
                <!-- 分割线 -->
79
                <div class="w-px h-4 capsule-divider self-center"></div>
80
                <!-- 关闭按钮 -->
81
                <div class="w-9 h-7 flex items-center justify-center">
82
                    <div class="w-3.5 h-3.5 border border-black rounded-full"></div>
83
                </div>
84
            </div>
85

86
            <!--
87
            页面内容区域 - 在这里添加具体的页面内容
88
            使用纯 HTML + TailwindCSS 实现
89
            注意：内容区域高度为 808px，支持滚动
90
            -->
91
        </div>
92
    </div>
93
</body>
94
</html>

胶囊按钮适配#

微信胶囊按钮不可移除，设计时：

空间处理：预留安全距离避免遮挡
视觉平衡：选择合适的适配策略
导航设计：考虑与胶囊按钮的协调
交互布局：重要操作避开右上角

内容要求#

图片素材：使用 Unsplash/Pexels 真实图片
文案内容：真实中文文案
数据展示：3-5 条示例数据

文件输出#

1. 生成多个独立 HTML 文件：

1
home.html       // 首页
2
[feature1].html // 核心功能页（根据实际功能命名）
3
[feature2].html // 核心功能页
4
profile.html    // 个人中心（如需要）

2. 生成 index.html 汇总展示页：

创建一个 index.html 文件，用于集中展示所有原型页面，便于整体预览和评审。

index.html 模板：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>[产品名称] - 高保真原型预览</title>
7
    <script src="https://cdn.tailwindcss.com"></script>
8
    <style>
9
        iframe {
10
            border: 1px solid #e5e7eb;
11
            border-radius: 12px;
12
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
13
        }
14
        .page-container {
15
            transition: transform 0.2s;
16
        }
17
        .page-container:hover {
18
            transform: scale(1.02);
19
        }
20
    </style>
21
</head>
22
<body class="bg-gray-50 p-8">
23
    <div class="max-w-7xl mx-auto">
24
        <div class="text-center mb-8">
25
            <h1 class="text-3xl font-bold text-gray-900 mb-2">[产品名称]</h1>
26
            <p class="text-gray-600">微信小程序高保真原型预览</p>
27
            <div class="mt-4 text-sm text-gray-500">
28
                <p>设备尺寸：393×852px (iPhone 16 Pro)</p>
29
                <p>设计风格：[选定的设计风格]</p>
30
            </div>
31
        </div>
32

33
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
34
            <!-- 根据实际生成的页面添加iframe容器 -->
35
            <!-- 每个页面按照以下格式 -->
36
            <div class="bg-white rounded-lg p-4 page-container">
37
                <h3 class="text-lg font-semibold mb-4 text-center">[页面名称]</h3>
38
                <iframe src="[filename].html" width="393" height="852" class="mx-auto"></iframe>
39
            </div>
40
        </div>
41

42
        <!-- 设计说明 -->
43
        <div class="mt-12 bg-white rounded-lg p-6">
44
            <h2 class="text-xl font-bold mb-4">设计说明</h2>
45
            <div class="space-y-2 text-gray-600">
46
                <p><strong>产品定位：</strong>[从design-guide.md提取]</p>
47
                <p><strong>核心功能：</strong>[从design-guide.md提取]</p>
48
                <p><strong>设计特色：</strong>[从design-guide.md提取]</p>
49
            </div>
50
        </div>
51
    </div>
52
</body>
53
</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