用 Codex 做一张聚会邀请页，时间地点一次说清

约朋友聚会时，时间、地址、带什么常常散在几条消息里。可以让 Codex 做成一张邀请页：打开就能看全，少来回翻聊天记录。下面这张图，就是本例在浏览器里实际打开的样子。

先准备这几行活动信息

电脑上登录能选择工作文件夹的 Codex 客户端，准备 Chrome 或 Edge。新建一个空文件夹，比如“聚会邀请”。这次不用装开发工具，也不接报名系统。

名称：周末桌游小聚
时间：2026年11月7日，14:00—17:00
地点：青禾活动室，青禾路18号二层（虚构示例）
安排：14:00到场，14:30组队，16:30自由聊天
携带：水杯、轻便外套，可带自己的桌游

让 Codex 直接做出能打开的文件

在 Codex 中选择刚建的文件夹，把上面的材料和下面这段话一起发过去：

用这些信息制作一个聚会邀请页，保存为 invitation.html。只用一个HTML文件，样式写在里面，不依赖网络图片和外部服务。把时间、地点、携带事项分清楚，手机窄屏也能看。信息不够就标待确认。不要做报名表、账号或支付。完成后告诉我文件位置和打开方法。

生成后，在文件夹里找到 invitation.html，双击用浏览器打开。若没有自动用浏览器打开，就右键选择“打开方式”，选 Chrome 或 Edge。没有找到文件时，让 Codex 给出完整保存路径，不只看聊天里的预览。

改成自己的活动，再检查一遍

接着告诉它：“把时间改为……，地址改为……，其他内容不变。”刷新页面，逐项核对时间、楼层、携带事项；缩窄窗口，看看三块信息是否能顺着往下看，有没有文字挤出屏幕。

完整示例代码

想直接对照成品，复制下面全部代码，用记事本保存为 50-invitation.html。保存类型选“所有文件”，编码选 UTF-8，确认文件名不是 .html.txt，再用 Chrome 或 Edge 打开。也可以让 Codex 将代码原样保存到工作文件夹。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>周末桌游小聚</title>
<style>
* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #f4f6f8;
    color: #203344;
    font: 17px/1.7 "Microsoft YaHei", sans-serif
}

main {
    max-width: 940px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    border: 1px solid #e1e7ec;
    border-radius: 20px
}

h1 {
    font-size: 34px;
    line-height: 1.4;
    margin: 0 0 18px
}

h2 {
    font-size: 22px;
    margin: 26px 0 12px
}

p {
    margin: 12px 0
}

.muted {
    color: #5b7080
}

.hero {
    font-size: 21px
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.card {
    padding: 22px;
    background: #eef5f4;
    border-radius: 12px
}

label {
    display: block;
    margin: 18px 0 6px;
    font-weight: 600
}

input,
select,
textarea {
    font: inherit;
    padding: 12px;
    border: 1px solid #9aacbb;
    border-radius: 8px;
    max-width: 100%
}

textarea {
    width: 100%;
    min-height: 64px
}

button,
.button {
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    padding: 12px 22px;
    background: #176b5b;
    color: white;
    display: inline-block;
    text-decoration: none
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid #f2b35d;
    outline-offset: 3px
}

.result {
    padding: 22px;
    margin-top: 24px;
    background: #eef5f4;
    border-radius: 12px;
    font-size: 21px
}

.error {
    color: #a02f2f
}

.numbers {
    display: flex;
    gap: 15px;
    flex-wrap: wrap
}

.number {
    padding: 20px;
    min-width: 125px;
    text-align: center;
    background: #eef5f4;
    border-radius: 12px
}

.number strong {
    display: block;
    font-size: 36px
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px
}

th,
td {
    padding: 11px;
    border: 1px solid #d2dce4;
    text-align: left
}

th {
    background: #eaf0f5
}

code {
    background: #edf2f6;
    padding: 2px 5px;
    border-radius: 4px
}

.money {
    font-size: 29px;
    font-weight: 700;
    color: #176b5b
}

ul {
    padding-left: 22px
}

@media(max-width:650px) {
    main {
        margin: 0;
        border-radius: 0;
        padding: 26px 20px
    }

    h1 {
        font-size: 27px
    }

    .grid {
        grid-template-columns: 1fr
    }

    .number {
        min-width: 90px;
        padding: 12px
    }

    table {
        font-size: 13px
    }

    th,
    td {
        padding: 7px
    }
}

body {
    background: #f3ecd9
}

main {
    border-top: 9px solid #c47b3c
}

.card {
    background: #fbf4e7
}

h1 {
    color: #7b4525
}
</style>
<main>
<p class="muted">聚会邀请示例</p>
<h1>周六下午，来玩两局桌游吧</h1>
<p class="hero">不用赶行程，带上好心情，一起坐下来聊聊天。</p>
<div class="grid">
<div class="card">
<h2>什么时候</h2>
<p>2026 年 11 月 7 日<br>周六 14:00—17:00</p>
</div>
<div class="card">
<h2>在哪里</h2>
<p>青禾活动室<br>示例地址：青禾路 18 号二层</p>
</div>
<div class="card">
<h2>带些什么</h2>
<p>水杯、轻便外套<br>有喜欢的桌游也可以带来</p>
</div>
</div>
<h2>怎么安排</h2>
<p>14:00 到场认识朋友，14:30 开始组队，16:30 自由聊天。</p>
<h2>临时找不到地方</h2>
<p>请联系邀请你的朋友，确认实际地址和到场方式。</p>
<p class="muted">这张页面只展示活动信息，不收集报名，不提交个人资料。</p>
</main>
</html>

注意，这还是一份本地文件。只把你电脑上的文件路径发给朋友，他们打不开。需要分享时，可以发送截图或完整HTML文件；若要发一个所有人都能点开的网页链接，那是另一步上线任务。这篇先把一张清楚好用的邀请卡做好。