用 AI 做一张活动邀请页

想邀请朋友来读书、看电影或参加生日聚会，但一大段通知不容易找到时间和地点？这次把通知做成一张网页。你负责提供信息，Codex 帮你排出来。

1. 先打开邀请页看看

这份练习用的是虚构的“周末读书会”，日期和地点都用于演示，不是真实活动。

打开邀请页示例

我们会先做一版，再调整时间、地点的位置。先不用做报名、付款或发送邀请，完成这张能打开的页面就够了。

2. 打开 Codex，给邀请页准备一个文件夹

还不能在桌面版 Codex 里聊天？先看打开软件，发第一条消息。

1. 在电脑桌面新建文件夹，叫 我的活动邀请页。
2. 回到桌面应用，进入 Codex，打开或添加刚才的文件夹作为本地项目。“项目”就是把这次练习的文件和聊天放在一起。
3. 新建对话；如果让你选择运行位置，选 Local（本地），把文件放在这台电脑里。
4. 发一句：“请告诉我现在选中的文件夹，先不要创建文件。”确认回答是刚才的文件夹，再继续。

3. 这次不用安装其他东西

不需要插件、配置文件或额外软件。待会儿的 index.html 是一个网页文件，用浏览器双击打开即可。你不用去写里面的代码。

4. 复制通知，让它做出第一版

把下面这段话粘贴到 Codex 的聊天框，直接发送：

帮我做一张活动邀请页，保存到当前文件夹，文件名叫 index.html。
我不会写代码，希望双击文件就能用浏览器打开，不用安装其他工具。

这是虚构练习，请标明“虚构活动 · 练习示例”。
活动：周末读书会
日期：2026 年 10 月 18 日
时间：14:00 到 15:30
地点：示例书屋二楼，这是虚构地点
介绍：带一本喜欢的书，不需要准备讲稿，分享一段你喜欢的文字。
安排：14:00 认识一下；14:15 分享文字；15:00 自由交流。
需要带：一本书和水杯。

我想要暖白色背景、深绿色文字，加一点橙色。
开头放活动标题和介绍，下面放时间、地点和安排。
加一个“看看活动安排”按钮，点击后移动到安排那一段。
不要做报名表、付款、地图或发送消息。
直接创建文件，完成后告诉我在哪个文件夹、怎样打开。

等它完成，打开桌面上的 我的活动邀请页，找到 index.html，双击。如果打开后是一堆代码，右键文件，在“打开方式”里选择 Safari、Chrome 或 Edge。

先看看标题、日期、地点有没有写错。下面是把活动信息放在安排区域的示例布局：

把最重要的信息移上来

如果朋友打开页面还得往下找时间，就在原来的对话继续发：

请把活动时间和地点移到标题介绍下面，让人打开页面就容易找到。
“看看活动安排”按钮保留，三个活动安排也保留。
手机上也要完整显示，不能让日期和地点跑到屏幕外。
请修改刚才的 index.html，其他内容先不动。

等它改完，回到浏览器刷新。时间和地点应该移到上面了，按钮仍然能跳到活动安排。你做出来的图案和颜色可能不同，重点看信息有没有放对。

5. 发给别人之前，自己检查一遍

• 对着原始通知核对日期、时间、地点，不只看页面好不好看。
• 点“看看活动安排”，看看页面有没有移动到对应位置。
• 拉窄浏览器窗口，检查文字有没有被截掉。手机布局可以参考下面的样子。

卡在哪里	下一步怎么做
只有聊天里的代码，没有网页文件	发：“请把页面直接保存到当前文件夹，不要只贴代码，并告诉我保存位置。”
日期或地点被它改了	发：“请只使用我给的活动信息，不要补写地址。日期是……，地点是……。”
按钮点了没反应	发：“我点‘看看活动安排’后，页面没有移动。请修这个按钮，文字和颜色保留。”
刷新后还是旧页面	确认打开的是它刚才修改的文件，不是本站示例

6. 换成自己的活动，保存作品

在原来的对话里，把真正的活动名称、时间、地点和安排发给它，并说“只替换这些信息，布局保持不变”。真实活动准备对外使用时，再让它移除“虚构活动”的标记。

下载邀请页示例，解压后双击 index.html 看最终版，before.html 看修改前的布局。

电脑里的文件还不是一个公开网址。如果只是想给朋友看，可以先截图；要让朋友通过链接打开，需要再把页面发布到网上。

操作入口参考官方开始指南和本地项目说明。

继续做一个待办清单 · 回到新手路线