做“浩哥的 AI 笔记”，我既要让网页能用，也想让它像自己的作品：别人打开后，知道我是谁、做过什么、接下来能看什么。
这篇把过程串起来：先说清内容，给 AI 设计参考，打开页面逐轮修改，最后再上线。 遇到问题不用提前学完所有知识，把当前情况和想要的结果告诉 AI，继续问就行。
先说清楚，你的网站给谁看
不要一上来只说“帮我做一个好看的网站”。先准备几段自己的内容：你是谁、想展示什么、希望访客做什么。
拿我这个个人站来说，展示的是 AI 建站、漫剧和游戏探索，不需要摆一排空功能。可以这样开始：
我想做一个个人网站，分享自己的 AI 作品和实践过程。访客先看到我是谁，再看到作品和介绍，最后能找到我的社交账号。请先根据我提供的真实内容安排首页结构，缺的内容问我，不要编造项目、评价和数据。先给我一版可以打开的网页。
出来以后，先看信息顺不顺：第一次来的朋友，能不能看懂你做什么？哪个作品最值得放在前面？先把这个顺序理清，再改颜色和装饰。
这次设计，用到了什么 skill
我这次让 Codex 协助设计时，使用了环境里已有的 frontend-design skill。你可以把 skill 理解成一份可重复使用的工作指南：先想清楚页面用途、配色、字体和布局，再实现页面，最后打开预览检查。
它能提供设计方法，具体风格还需要你给参考、提反馈。读者的工具里不一定有同名 skill，先让 AI 确认是否可用；这里没有“一装就能去 AI 味”的保证。
在已经安装并可用的 Codex 环境中，可以明确写：
请使用 $frontend-design，先根据我的内容确定页面结构和视觉方向，再制作本地预览，完成后检查电脑和手机效果。
Codex 支持用 $ 提及 skill，使用方式可查 OpenAI 官方说明。没有这个 skill，也可以把下面的具体设计要求直接告诉 AI。
参考模板，要告诉 AI 学什么、舍去什么
我做过参考 Bento Folio 的首页试版。它本来用于个人作品集首页，里面的自我介绍、时钟和作品卡片，都有各自的用途。轮到文章页，就要按阅读需要重新安排。
给 AI 参考时，我会把要求分成三件事：
- 让它看具体页面。 提供模板链接，最好有真实预览截图；链接无法读取时，用截图补充，不让它只凭模板名称猜。
- 说清喜欢的地方。 比如灰白背景、橙色按钮、衬线标题、宽松间距。避免只说“照这个做”。
- 说明当前做什么页面。 首页需要介绍自己，文章页需要标题、日期、目录和正文。参考同一个设计，也不必放同样的模块。
可以直接这样问：
请使用 $frontend-design，参考我提供的 Bento Folio 链接和截图，制作一篇教程文章页。参考它的灰白橙配色、字体层次和留白。页面以文章标题、日期、目录和连续正文为主，不放首页自我介绍、时钟和重复的推广卡片。先说明会采用哪些设计、舍去哪些模块，再做本地预览，检查手机阅读效果。
如果做的是首页，就把“文章页”改成“个人首页”，再把自己的介绍和作品内容给它。先用一个主要参考把方向定下来，保留现版、另做预览，方便比较。
制作过程中，我保留了不同的首页试版，最后换成了 Bento 版。
“去 AI 味”，我会从这些地方改
这里说的“AI 味”，是套到谁身上都差不多的模板感。我的做法是把模糊评价拆成能指出位置的修改。
先把内容换成自己的。 首页放真实作品、自己的头像和自然介绍。“探索无限可能”这类话，换成你具体做了什么。没有的客户评价、成绩和数字，不要用来撑版面。
再让视觉统一。 修改前的蓝白首页使用浅灰白背景、深蓝文字和钴蓝强调色，标题与正文用同一套字体区分大小。图标也经历过修改，后来采用同一图标库里的游戏和影像图标，统一线型、大小和颜色。
最后删掉没有作用的装饰。 不必因为主题是 AI，就堆电路、荧光和机器人。本站头像修改时去掉过电路与荧光装饰，后来选择了更鲜明的 Q 版形象。渐变、圆角、卡片都可以用，关键是是否适合这页内容，不是把它们全部禁掉。
如果只做局部调整，可以这样反馈：
这一版还有些模板感。先只改三处：把空泛的介绍换成我提供的真实经历；把混用的图标统一；去掉没有信息作用的发光和装饰。保留现有蓝白配色和作品内容，不增加新模块。改完分别检查电脑和手机效果。
一轮只挑两三处不满意的地方，修改后打开看看。比如“手机标题换行太碎”“头像太抢眼”“按钮和背景分不清”，都比“再高级一点”更容易让 AI 知道该改什么。
一次真实修改：首页从蓝白版改成 Bento 版
用首页的变化举例，更容易看出“给 AI 一个参考”之后，具体改了什么。
修改前：蓝白配色，左边介绍，右边展示最近做成的项目。
蓝白旧版首页。点击图片可查看原尺寸。
这样的修改要求，可以这样告诉 AI：
参考 Bento Folio 模板，用自己的介绍、作品和社交入口，做一版灰白橙的卡片式个人首页。保留真实内容，另存一份预览，和原版比较。
这里给 AI 的信息包括参考对象、视觉方向、要展示的内容，以及“先做预览”的交付方式。比“把网站改得更高级”更容易落实。
修改后：灰白背景、橙色按钮，介绍、经验、创作近况和社交入口分别放进卡片。
改成 Bento 布局后的首页。点击图片可查看原尺寸。
这次调整不仅换了配色，也重新组织了信息：把人物介绍、近况和可点击入口分开摆放，让 AI 按参考的布局特点重新安排自己的内容。
网页满意后，再进入下面的上线过程。这里采用适合个人介绍页、作品集等静态网站的路线；有登录、数据库或支付功能，要先让 AI 检查后端怎么部署。
让 AI 帮你整理可上传的文件
网页能在自己电脑上打开，还不代表已经准备好上线。我的起步路线是先上传静态成品，所以这一步可以这样问：
请帮我整理一份可以直接上传到 Cloudflare Pages 的网页文件。首页 index.html 放在最外层，带齐图片和样式，不要放密钥、内部文档和开发依赖。整理好后，告诉我上传哪个文件夹，以及怎么检查它有没有缺东西。
你要做的，就是确认 AI 指出的文件夹存在，打开网页看看，图片、文字、按钮没有明显问题。
跟着 AI，把网页和域名连起来
我用的是 Cloudflare Pages 后台上传静态文件。过程可以理解成两件事：先把网页放到网上，再给它接上自己的域名。
从左侧 Compute 进入 Workers & Pages，右上角是 Create application，下面是已有的 haomakes 项目。点击图片可放大。
先登录 Cloudflare，让 AI 带你找到 Pages 上传入口，上传刚才的文件。部署后会得到一个 pages.dev 临时网址。先打开它，确认是自己的网页。
临时网址正常后，再问：
临时网址已经能打开了。现在我要把自己的域名绑定到这个 Pages 项目。请根据我当前的后台页面，一次告诉我一个操作，并说明完成后怎么判断成功。如果涉及已有 DNS 记录，先确认用途再改。
域名买在哪里、是否已接入 Cloudflare，各人情况不同。把实际页面给 AI 看，让它按你的情况指导。根域名绑定 Pages，需要先按 Cloudflare 要求接入域名，并在 Pages 的自定义域名里完成绑定。
登录、验证码和购买由自己完成，不要把密码、验证码或密钥发给 AI。截图可以保留当前步骤，遮掉账号和其他项目的信息。
绑定后，可以到项目的 Custom domains 查看状态。下面这张本站后台截图中，主域和 www 都显示 Active，右侧为 SSL enabled。
主域和 www 均为 Active，右侧显示 SSL enabled。点击图片可放大。
这一步的结果很明确：用自己的 HTTPS 域名，能打开刚才的网页，而且没有安全警告。 域名状态还在等待时，先看提示，不要因为没立刻生效就反复修改。
卡住了，就把具体问题交给 AI
不用把所有错误都提前学一遍。出现问题时，把“做到哪里、出现什么、希望怎样”一起告诉 AI：
我已经上传成功，临时网址能打开，但自己的域名打不开。当前页面显示的是【粘贴报错或附脱敏截图】。请根据这些信息排查，先解释可能的问题和检查方法，不要让我一次改很多设置。
网页缺图，就发缺图位置和相关文件；按钮没反应，就说清楚点了哪个按钮、发生了什么。只说“不行”很难定位，具体画面和报错更有用。
AI 的回答也要看结果验证。每次改一处，再打开页面试一下；没有解决，就把新结果告诉它继续查。
最后，自己打开看一遍
上线以后，我建议换到手机，再用电脑无痕窗口检查：
- 自己的域名能打开，HTTPS 没有安全警告。
- 图片和文字正常，手机上也能看清。
- 主要按钮和链接能用，有表单就测试一次提交。
可以打开上线检查清单，照着勾选。不知道怎么检查某项，也可以直接问 AI：“请带我验证这一项，并告诉我怎样算通过。”
至于 www 跳转、访问统计、Google 收录，可以在页面正常访问之后，再分别让 AI 协助处理。我的网站已经配置了主域、www、HTTPS 和 GA4；Search Console 已验证并提交索引请求，尚未确认收录。
以后修改网页，仍可在原 Pages 项目上传新版本；我后来用过的 Wrangler，是更新方式的补充，第一次上线不用跟着学。需要时再看排错与后续更新参考。
你需要抓住的是：告诉 AI 目标，把当前情况给它，每次做完看结果。 具体界面变了、遇到报错了，都可以沿着这个方式继续问。
参考资料：Cloudflare 上传文件、绑定域名。静态资源请求按当前官方规则免费；域名注册和续费另计。