如何用 Stitch 加 Codex 快速搭建第一版网站
目标：先用 Stitch 做出高保真前端原型，再把这个原型交给 Codex，改造成可维护、可继续迭代的真实网站。
这份资料适合想快速做出第一版网站的人。你不需要一开始就把所有功能想完整，可以先用 Stitch 把视觉、模块和交互状态跑出来，再让 Codex 负责整理代码结构、组件拆分和工程化落地。
1. 适合谁
- 想快速做出一个网站第一版，但还不知道页面应该长什么样。
- 已经有大概想法，想先让 AI 帮你搭出高保真原型。
- 想把原型变成一个后续能维护、能改版、能上线的真实网站。
2. 使用顺序
- 先把「Stitch 提示词」发给 Stitch，让它生成高保真前端原型。
- 看原型是否符合你的主题、页面结构和交互方向。
- 把满意的原型交给 Codex。
- 再把「Codex 提示词」发给 Codex，让它把原型改造成真实网站。
- 最后用 Codex 继续迭代内容、样式、路由、部署和细节。
3. Stitch 和 Codex 怎么分工
- Stitch：负责快速生成视觉原型、模块布局、卡片样式和交互状态。
- Codex：负责把原型整理成真实项目，包括组件化、数据结构、交互逻辑、移动端适配和部署。
4. 可直接复制的执行提示词
Stitch 提示词
请帮我设计一个中文的 2026 世界杯 AI 资料库网站原型，网站名称叫「世界杯资料库｜绿茵神算」。
整体目标：
这是一个给球迷查看世界杯赛程、AI 赛前预测、赛后复盘、历史命中率和单场分析报告的网站。页面要像一个专业的数据看板，不要做成普通新闻站，也不要做成博彩网站。必须强调「AI 娱乐参考，只用于看球交流，不用于投注或任何资金决策」。
视觉风格：
使用深绿色、黑绿色作为主背景，整体像夜间足球场和数据控制台。背景带细网格线，类似球场战术板。文字用白色和浅灰色，重点数字用霓虹绿、黄色、粉红色突出。卡片使用半透明玻璃质感，边框细，圆角 8px 左右。按钮使用绿色到黄色的渐变，重要按钮更亮。整体感觉要高级、克制、数据密集、适合长期查看。
页面顶部：
做一个固定顶部提示栏，左侧显示「绿茵神算」品牌名，旁边写：
AI 娱乐参考，只用于看球交流，不用于投注或任何资金决策。
右侧放按钮：
加入会员群、联系站长、会员编号、退出。
右侧还要有一个悬浮小按钮「会员群」。
首屏 Hero：
不要做营销大图，要直接进入数据看板。
左侧有一个 AI 小徽章、英文小标题「2026 WORLD CUP」、大标题「世界杯资料库」。
副标题写：
先看接下来四场，再看上一批赛果。想看原因，就点开详细分析。
右侧放两个大统计卡：
1. 85% 胜平负命中，34 / 40 含变化
2. 25% 比分命中，10 / 40 含变化
首屏下面做页面入口导航：
做 6 个横向入口卡片：
00 查看总览
01 接下来四场
02 过去四场
03 单场分析
04 今日情报
05 历史复盘
点击后跳转到对应页面区块。
模块 00：今日总览
做一个宽卡片，标题「今日总览」。
说明：先看状态，再看单场。具体原因请进分析报告。
内容包括：
当前四场已定档
总览页会集中展示定档时间、胜平负战绩、比分脚本记录和最近复盘。未来具体比分不会在这里直接露出。
右侧放小统计：85% 胜平负、10/40 比分脚本。
放一个按钮「查看总览」。
模块 01：接下来四场预测
标题「接下来四场预测」。
做 4 张比赛预测卡，桌面端两列，移动端一列。
每张卡包含：
比赛时间
对阵标题，例如「阿根廷 vs 奥地利」
状态标签「未赛预测」
左队国旗、队名、缩写
右队国旗、队名、缩写
中间是 AI 胜平负概率面板：
主胜、平局、客胜三行，每行有百分比和进度条。
下面有「模型倾向」「赛前判断」「比赛形态」「进球窗口」「风险理解」。
底部按钮「查看详细分析报告」。
示例比赛：
阿根廷 vs 奥地利：阿根廷胜 66%，平局 22%，奥地利胜 12%
法国 vs 伊拉克：法国胜 70%，平局 20%，伊拉克胜 10%
挪威 vs 塞内加尔：挪威胜 44%，平局 28%，塞内加尔胜 28%
约旦 vs 阿尔及利亚：约旦胜 22%，平局 28%，阿尔及利亚胜 50%
模块 02：过去四场预测与赛果
标题「过去四场预测与赛果」。
做 4 张赛后复盘卡。
每张卡包含：
比赛时间、对阵、状态「赛后复盘」、双方国旗、实际比分。
显示：
最大把握比分
变化比分
实际比分
标签：胜平负命中、比分命中、比分未中、方向命中、未命中等。
底部有「查看详细复盘」。
模块 03：单场分析
标题「单场分析」。
做一个比赛列表入口区。
上面列出 4 场未赛预测，下面列出 4 场赛后复盘。
每个入口卡片包含：
状态标签、比赛名称、小组、北京时间。
点击后跳转到详细分析报告区。
模块 04：详细分析报告
标题「详细分析报告」。
上方做 4 个横向比赛切换按钮：
01 阿根廷 vs 奥地利
02 法国 vs 伊拉克
03 挪威 vs 塞内加尔
04 约旦 vs 阿尔及利亚
下方是报告详情卡。
内容结构：
小组、比赛编号、比赛名称、大号对阵标题、信心等级。
时间信息：北京时间、官方时间、球场。
中间展示主队、客队、国旗、赛果概率。
右侧或下方展示总进球形态：
0-1球、2球、3球、4球以上，每个都有百分比和进度条。
报告内部要有这些板块：
赛前判断框架
主线判断
比赛形态与总进球倾向
比分脚本优先级
开放观察
关键原因
风险提醒
复盘口径
加一个「开始生成报告」按钮，点击后模拟生成进度：
正在读取双方资料
正在对比近期状态
正在整理总进球倾向
正在复核比分脚本与风险
分析报告已生成
模块 05：今日情报台
标题「今日情报台」。
做成情报公告板样式。
包含：
最新赛果复盘与下一批定稿
上一批方向按含变化 4/4，新四场改为数据驱动副方向。
下面分两列：
左侧「已赛校准」
右侧「接下来重点」
每条情报用小卡片展示比赛、比分、复盘结论和模型调整。
模块 06：历史复盘
标题「历史复盘」。
顶部有筛选按钮：
全部 40
方向命中 34
比分命中 10
未中 6
下面是历史比赛列表，每一行包含：
序号、比赛名称、北京时间、小组赛、预测比分、实际比分、命中标签。
点击某条后展开详细复盘，展开内容包含：
命中的地方
错的地方
模型调整
列表要适合很多数据，视觉上要紧凑清晰。
模块 07：联系站长
标题「联系站长」。
说明后续通知、账号问题、进群和赛后复盘反馈可以通过这里联系。
做联系方式卡片：
QQ群、QQ、微信、备用微信，每个都有复制按钮。
放一个购买会员账号按钮。
右侧放QQ群二维码占位图。
下面做「赞助支持」区域，放微信赞助和支付宝赞助二维码占位图。
注意：二维码和联系方式先用占位内容，不要生成真实收款码。
模块 08：资料来源
标题「资料来源」。
做成来源列表，每条来源包含来源名称、用途说明和链接样式。
示例来源：
ESPN 2026 世界杯赛程与最新赛果
Guardian 赛后报道
SBS 赛后集锦
这些来源用于确认赛程、赛果、球队状态和复盘口径。
交互要求：
1. 顶部导航点击后平滑滚动到对应模块。
2. 单场分析入口点击后跳到详细报告。
3. 详细报告上方比赛按钮可以切换不同比赛。
4. 历史复盘筛选按钮可以切换列表状态。
5. 历史复盘列表点击后可以展开详情。
6. 复制按钮点击后显示「已复制」反馈。
7. 加入会员群按钮可以打开二维码弹窗。
8. 开始生成报告按钮要有模拟进度动画。
响应式要求：
桌面端最大宽度约 1200px，内容居中。
预测卡桌面两列，移动端一列。
顶部按钮在移动端可以换行或横向滚动。
历史列表在移动端保持紧凑，不要文字溢出。
大数字和标题在手机上自动缩小。
文案语气：
专业、克制、像 AI 数据分析报告。
不要出现夸张承诺，不要写稳赚、稳赢、必胜。
所有预测相关内容都要表达为「概率」「倾向」「脚本」「娱乐参考」。
页面底部必须再次提示：
本站内容仅供娱乐参考和球迷交流，不构成任何投注、赌博、赌球、理财或收益建议。
请先生成一个高保真的前端原型页面，重点把视觉风格、模块结构、卡片布局和交互状态做出来。数据可以用示例数据。Codex 提示词
请基于 Stitch 生成的原型，把它改造成可维护的真实网站：数据抽成结构化数组，比赛卡、复盘卡、报告区、历史列表都组件化；实现筛选、切换、复制、弹窗、报告生成动画和移动端适配；保留深绿色球场数据看板风格，并确保所有预测内容都有娱乐参考和风险提示。5. 使用提醒
这套流程里的世界杯资料库只是示例。你可以把主题换成自己的资料库、产品页、课程页、工具站或个人主页，核心方法不变：
- 先用 Stitch 做出页面原型。
- 再让 Codex 把原型改造成可维护项目。
- 最后继续用 Codex 补数据、拆组件、改样式和部署。