从第一句对话，到自己的公开网址

准备Codex，从网站链接开始

使用自己的ChatGPT账号，进入桌面应用当前提供的Codex体验。官方快速入门说明了登录、选择文件夹与进入Codex开发的方式；按当前界面操作。已有Pro账号按账号显示的功能与用量使用，本实验不需要另配API密钥。登录和账号确认在官方界面完成。

OpenAI官方快速入门

准备一个练习文件夹和浏览器。让Codex说明缺少哪些权限或工具。浏览器操作能力以当前环境为准；不可用时，由你打开预览并反馈实际现象。练习目录只放本次作品。

体验与准备本地副本

你的决定

你想把这个画册变成什么？先体验，再选一个值得改的小地方。

实际操作

打开画册，试一次搜索和语言切换。把下面这段话发给Codex；需要你选择文件夹或同意文件访问时，按它说明处理。让它获取本站的starter.zip，在你自己的练习文件夹准备副本，启动预览并返回地址。无需自己打开终端。

复制给Codex

我想试着做一个像这样的个人画册：
https://moss-codex-session-1.winl.ai/

你先帮我看看这个网站，拿到可以编辑的源码，带我把自己的副本跑起来。我不熟悉这些操作，下一步需要我做什么，你告诉我。先别改内容，也别发布。

预期结果

得到自己的项目目录和可打开的本地预览。可编辑画册在demo目录；网站根目录是教学材料，别把两者混淆。

验收: 本地画册能显示9幅画，和参考页明显对应；Codex能说出它操作的目录。打开公开网址不代表本地副本已启动。

读懂项目，记录原版行为

你的决定

先弄清楚哪里是内容、哪里是交互，再决定改哪里。

实际操作

让Codex只读项目并解释四个部分。随后在本地画册依次执行下方检查表。改动前保存一份可恢复副本或Git记录，让Codex说明记录保存在何处。

复制给Codex

先带我认一下这个项目吧。页面结构、样式、画作内容和搜索分别在哪个文件？标题为什么能切换中英文？用我能听懂的话解释，先不要改。然后帮我留一个改动前可以恢复的版本。

预期结果

能找到index.html、styles.css、script.js和assets；保存基线和恢复点。九幅插画来自随附原创SVG，不是本课现场生成图。

验收: 全部9幅 → 全部搜索whale为1幅 → 回家的远路+whale为0幅 → 切回全部仍保留搜索词且为1幅。清空后恢复9幅。打开并关闭一幅画的详情。

提出一个小改动，先看计划

你的决定

给画册取一个你愿意分享的虚构名字。示例为中文“绕远一点”、英文“The Scenic Route”，也可以自己换。

实际操作

继续同一对话，说出想法，再看Codex的理解和计划。核对是否只改双语大标题及必要文案，是否保留插画和交互。发现多余改动就直接缩小。

复制给Codex

我想给画册换个名字：中文叫“绕远一点”，英文叫“The Scenic Route”。就改主页大标题，九幅画、搜索、筛选和详情我都想保留。你先说说准备怎么改，先别动手。

预期结果

一个说明改动文件和检查方式的小计划。它应考虑data-en/data-zh语言属性，而不只改当前可见文字。

验收: 计划准确复述两个标题；没有新登录、数据库、AI接口或无关框架迁移。你能说清楚同意哪个方案。

实施，查看改动差异

你的决定

方案是否符合你想要的范围？确认后再实施。

实际操作

让Codex完成这一次标题改动并打开预览。请它展示差异：哪个文件、原来什么、现在什么、为什么需要。你先看作品，再看解释。

复制给Codex

这个方案可以，帮我改吧。改好后打开给我试一下，也让我看看原来和现在有什么差别。告诉我改了哪些文件，没检查的地方也说清楚。

预期结果

自己的本地画册显示新标题，并得到实际文件差异。修改只在自己的副本内，公开参考不会自动更新。

验收: 英文标题正确 → 切中文正确 → 再切英文仍正确。九幅SVG未被替换。若很多无关文件改变，先问原因。

按一张检查表验收

你的决定

你是否愿意接受这一版？由实际行为判断。

实际操作

逐项操作下方清单。可让Codex协助浏览器检查，也要自己试至少一次。没有可用浏览器工具时，由你操作并告诉它实际结果。让它记录通过、失败和未检查，不把未运行写成通过。

复制给Codex

我来试一下。你帮我列出这次要检查的地方，先保留原来的预期。检查结果按实际记录，没法操作的就告诉我，我自己点。尤其帮我看看切换语言以后标题会不会变回去。

预期结果

一份预期与实际可比较的验收记录，包含截图或清楚的操作记录。

验收: 标题、9→1→0→1、清空搜索、详情开关、语言切换、键盘与窄窗口均按下表检查。反例是理解规则的一部分。

定位问题，演练一次恢复

你的决定

有真实问题就调查；没有问题就直接通过，不制造缺陷。恢复演练只在自己的副本做。

实际操作

出现问题时，像下面一样描述现场现象。随后请Codex演练只恢复本次标题改动，确认恢复后跑同一清单；再由你决定保留原版或重新应用新标题。

复制给Codex

我切成中文以后，大标题又变回原来的了。我希望它显示“绕远一点”。你看看为什么，先解释原因，再做一个小修正。其它功能别重写。

在副本中演练恢复

我想练习一下恢复原来的标题。只撤回这次标题改动，其它内容保留。你先说说准备用哪个保存版本、会恢复哪里，再动手。之后让我再检查一次原来的行为。

预期结果

上面的对话是假设示例，仅在真的发生时使用。修复应解释原因和证据；恢复应限定到本次改动。

验收: 恢复后标题与基线对应，九幅画与交互仍可用。重新应用新标题时，两种语言再次通过检查。

连接Vercel，发布自己的版本

你的决定

你准备公开哪些内容，用哪个个人项目？确认是自己的练习副本。

实际操作

先让Codex打开Vercel官网并带你注册或登录；已有账号直接登录。验证码、条款和账号确认由你本人完成。核对当前计划适用性、配额和潜在费用，不需要为了本实验购买域名。接着让Codex检查可用的发布工具，按实际环境连接或使用官方CLI。浏览器已登录不代表发布工具已授权。

复制给Codex

我想把这个画册发给别人看。你帮我打开Vercel，带我准备好发布账号和连接。需要我登录、收验证码或确认授权时告诉我。先看看要发哪个文件夹、哪个账号和项目，别覆盖教学网站，也先别发布。

核对目标后，继续对话

目标没问题，就把刚才验收过的这版画册发布到我的项目吧。完成后把正式网址给我，帮我在那个网址检查标题、搜索、筛选和详情。

这些示例不是无限授权；按实际环境完成需要的登录与访问确认。本次本地静态练习不强制新建Git仓库，让Codex采用当前可用的正式发布方式。

预期结果

Codex能说明实际发布方式、登录状态、账号或团队、你自己的项目名和发布目录。本实验只发布demo内的画册文件，不必把整套教材发布到学员项目。

验收: 先看待发布文件与目标；你确认后再用下面的请求发布。完成后打开返回的公开网址，在新网址重跑标题和9→1→0→1检查。

独立再做一轮，留下交付记录

你的决定

选一个你真想改的内容。本次建议：为海盐天文台写一段新的双语小记，让详情在中英文下分别显示对应文案。

实际操作

当前画册的部分详情描述仍是英文，这是练习中的实际局限。先查看海盐天文台现有描述，再自己写两种文案。让Codex提方案，检查必要的数据字段和详情语言逻辑；保留所有作品ID、SVG、搜索和筛选。用刚才的方法检查，再决定是否更新你自己的线上项目。

复制给Codex

我想让海盐天文台的详情更像自己的作品。我先写了两段小记：[你的中文]、[你的英文]。你帮我看看怎么让它切换语言时显示对应文字，先说方案。画和其它作品先别动。

预期结果

一次由你定义并验收的内容改动，以及素材、修改文件、检查结果、已知问题和下次任务的简短记录。

验收: 天文台详情中英文分别正确，关闭再打开仍正确；其它作品和筛选不受影响。交付记录写清本地目录、项目名、实际生产网址和未完成项，不含凭证。

给两节课程接上自己的域名与HTTPS

先完成第一节的Vercel发布，再做这一段。示例域名winl.ai已经购买；两节课程沿用原Vercel项目名作为子域名前缀，各自连接到对应项目。这两个示例地址已于2026年11月12日完成DNS与HTTPS验证；下面保留从准备到验收的完整流程。你的练习项目请使用自己的域名和Vercel项目。

1. 让Codex先检查你登录的页面

打开Cloudflare和Vercel。登录、扫码与验证由你本人完成。确认Codex能看到它实际可以操作的页面；已在另一个浏览器登录，不等于工具已连接。没有浏览器控制能力时，由你按它给出的页面步骤操作，继续在Codex中讨论。

我已经登录Cloudflare和Vercel了。我买好的域名是winl.ai，想给两节课程各接一个地址，前缀沿用原来的Vercel项目名。你先看看能不能看到这两个后台，核对项目和域名，先不要改设置。需要我登录或授权时告诉我。

2. 检查DNS托管，保留已有记录

在Cloudflare选择winl.ai，检查域名是否Active、名称服务器是否已经生效。已正常托管就保留现状。若仍Pending，先核对注册商的名称服务器与Cloudflare分配值；不要重复添加域名或直接迁移DNS。先记录现有网页、邮件和验证记录，再检查两个目标子域名是否已有用途。Cloudflare域名接入说明

先帮我看看winl.ai的DNS是不是已经在Cloudflare生效了。再查一下moss-codex-session-1和moon-tea-session-2这两个名字有没有被使用。把现在的记录和准备改的地方列出来，邮件和其它网站先别动。

3. 在两个Vercel项目中分别添加域名

打开每个项目的Settings → Domains → Add Existing（或当前对应入口），分别添加上表中完整域名，连接到Production。先核对项目名，再读取Vercel为该域名显示的DNS要求。若提示所有权验证，另外记录它要求的TXT名称和值。子域名通常使用CNAME，最终以当前项目页面为准；不要把网页路径/demo/写进域名或DNS值。Vercel添加域名说明

帮我把moss-codex-session-1.winl.ai对应到第一节项目，moon-tea-session-2.winl.ai对应到第二节项目。先核对映射，再在各项目添加域名，把Vercel现在要求的DNS类型、名称、目标值和可能的验证TXT整理成一张表。我想先看清楚再改Cloudflare。

4. 在Cloudflare填入Vercel实际要求的记录

进入winl.ai → DNS → Records。通常第一条Name填moss-codex-session-1，第二条填moon-tea-session-2；每条Content分别使用对应Vercel项目显示的目标值。先采用DNS only（灰云），TTL用Auto。此时Cloudflare负责DNS解析，访问和TLS由Vercel处理。若已有同名冲突记录，先说明影响并保留原值；不要批量删除。Cloudflare代理状态说明

按刚才核对的表，先给我看这两条记录具体要怎么填。如果没有冲突，就按表配置成DNS only，TTL用Auto。原来有记录的地方先说明影响，别覆盖邮件、根域名或其它网站。改完帮我回到两个Vercel项目检查。

5. 等待验证，分别检查HTTPS

DNS生效并通过验证后，Vercel会自动尝试签发证书并续期；通常无需购买或上传SSL证书。分别查看两个项目的域名与证书状态，再打开各自HTTPS地址。DNS only时不需要为了这个站点调整Cloudflare全域的SSL/TLS模式。若后续确实需要橙云代理，先验证Cloudflare边缘证书已就绪，再使用Full (strict)验证Vercel源站证书；不要用Flexible来处理报错，也不要随意改动全域设置。Vercel自动证书 · Cloudflare Full (strict)

两条DNS已经保存了。你分别检查两个域名有没有指向正确课程、HTTPS证书是否匹配、HTTP会不会转到HTTPS。再试中英文、幻灯片、手册和演示里的视频。还没生效就告诉我卡在DNS、域名验证还是证书，不要当作已经完成。

6. 两站都验证后，再统一课程链接

先保留原vercel.app地址作为检查入口。两个新地址都通过后，再请Codex检查两站的课程顶栏、跨课程链接、手册示例地址及下载包，把需要的绝对地址对应替换，保留相对路径与中英文切换。重新发布两个项目，验证第一节↔第二节互跳。根域名winl.ai暂不需要改变；若想用它做课程入口，另行决定首页或重定向目标。

两个域名都验证通过后，帮我把两节课之间的链接和手册里的入口统一到新地址，第一节和第二节都检查。给我看哪些文件会变，再按确认的改动重新发布两个项目。最后验证互相跳转、中英文、下载包和HTTPS，留一份原DNS值和恢复方法。

完成标准：两个域名分别展示正确课程；HTTPS有效且HTTP转HTTPS；中英文与资源可用；跨课程链接正确；记录两个Vercel项目、DNS原值/新值、实际证书状态与未完成项。