按钮 / 卡片：两张关键帧就能说清
视频先看过程；真正交给 AI 时，截下面两张：
把鼠标移到这里
个人网站作品卡片
移入放大并加深阴影，移出恢复
给首页作品卡片增加悬停效果：鼠标移入时，在 0.25 秒内放大到 1.04 倍并加深阴影；鼠标移出后恢复。保留现有内容和布局。
给法：常态一张 + 触发态一张，再说清对象、触发和速度。
一 · 导入0:00–2:00
用一句话做一个网站
不用会写代码——写代码的是 AI，你负责说清楚要什么
做了个人网站的学长，拿到的 offer 明显更高——今天你也做一个，这是你作品集的第一件作品
学长的网站（现场演示）： demo.zexuan604.com
二 · 这节课练什么2:00–5:00
学完这节，你能做到——
把真实自我介绍交给 AI 做成网站；再学会给参考、改风格和描述动效
举手看看
自己做过个人主页的？
知道 HTML 但没写过的？
三 · 提示词怎么写5:00–8:00
你只需要一句话
第一句话：“我需要做一个个人网站，下面是我的信息。”——后面直接粘贴你早上填写的真实自我介绍，有图片也一起发过去
⚠️ 红线：信息必须真实，但只放愿意公开的内容。住址、证件和私人联系方式等敏感信息不要放。
四 · 现场共创并发车8:00–16:00
直接使用早上填写的真实资料
发车路径：新建任务 → 选"使用现有文件夹"（挑一个你找得到的文件夹，比如桌面新建"我的网站"）。不要点"新建项目"——很多人起完名字就找不到它存哪了。
现场动作：找一位学员，把他早上填写的真实自我介绍粘贴到第一句话后面，直接发送。
等待生成时只讲两件事
项目：装网站文件的工作区，对应本地文件夹；文件会持续保留。
任务：项目里的一段独立对话，可以包含多轮消息；一个项目里可以开多个任务。
一句话：项目管文件，任务管对话。换任务，文件还在；旧对话不会完整自动跟过来。
五 · 找参考、上下文和改风格16:00–19:00
风格说不清，就给一张图
觉得丑？去找一张参考图，三个地方选一个：
只说这一句："根据这个截图，帮我修改我的个人网站"
一张参考图足够发起第一轮修改；结果不对，再指出具体哪里需要调整。
顺手普及上下文：上下文就是 AI 在当前任务里能看到并参考的信息。文件放进项目后，要明确告诉 AI 文件名和用途，不等于它已经自动看完。新建任务时，要重新说明目标、当前进度和不能改变的内容。
六 · 改动效19:00–21:00
先看案例，再判断参考怎么给
主课只看两个：一个能用前后状态说清，一个必须看连续变化。
鼠标柔光：视频看过程，截图交给 AI
截两个不同位置，让 AI 看见柔光“从哪里移到哪里”：
让导航文字附近出现一个跟随鼠标移动的柔光区域。鼠标靠近哪个菜单，就突出哪个菜单；移动要平滑，离开导航后柔光淡出。
给法：不要只丢视频。把两张位置截图交给 GPT / Claude，问“这是什么效果、应该怎么描述”，再把截图和文字一起交给 Codex。
第三步 · 问 AI
1 · 截图拿去问把说不清的效果发给网页端 GPT / Claude。
点击图片放大
2 · 拿到可执行描述让它把视觉、交互和技术要求说清楚。
点击图片放大
截图也说不清，就先让网页端 AI 帮你“翻译”
像光斑跟随鼠标、滚动视差这类连续效果，单张截图看不出它怎么动。先把满意的效果截下来，打开网页端 GPT 或 Claude，不要直接把截图丢给 Codex。
问它两句：“这是什么效果？我要做出这样的效果，应该怎么描述？”
然后把它给出的那段描述，原样复制给 Codex。
然后把它给出的那段描述，原样复制给 Codex。
判断口诀：前后变化能说清，就给关键帧；截图仍然说不清，就先去问网页端 AI，再把描述交给 Codex。
七 · 轮到你21:00–22:00
轮到你说
"如果你想要首页背景是深色渐变、鼠标划过卡片会轻微放大，你会怎么跟 AI 说？"
说清位置、触发、变化和速度即可。
八 · 总结收口22:00–24:00
今天就三个动作
先记住三个概念：项目管文件，任务管对话，上下文管这一次 AI 能参考什么。
01
给信息
统一提示词 + 真实自我介绍
02
给参考
视觉风格一张图，交互状态两张关键帧
03
问 AI
说不清的效果，先问"这是什么、该怎么描述"
网站在哪？文件在项目文件夹；左上角功能区 → 站点看到的是本地预览；正式发布后，别人才可以通过网址访问。
完成前验收：页面能打开、真实信息无误、图片和按钮正常、手机尺寸没有明显错位。
记不住没关系——这三个动作，SOP 里每一步都有截图，回去照着做就行。