一、核心秘籍：高分提示词（Prompt）公式
指挥 AI 写代码，指令越清晰，产出的网页越完美。请牢记并使用以下“四要素公式”：
1. 设定角色 (Role)
“你现在是一位资深的前端网页开发工程师...”
2. 明确任务 (Task)
“帮我写一个单文件的 HTML 随机点名器网页...”
3. 细节规则 (Rules)
“背景必须是深灰色，包含开始和停止按钮，名字要大号加粗显示...”
4. 输出限制 (Output)
“只输出代码，不要解释，CSS和JS都要写在同一个HTML文件里...”
二、详细实战：开发“炫酷随机点名器”
1 发送精准指令
打开豆包客户端，将下方按照“四要素公式”组合好的提示词，完整复制并发送：
复制以下提示词
你现在是一位资深的前端开发工程师。请帮我写一个“炫酷随机点名器”的网页。
要求如下：
1. 页面风格为科技感暗黑风，背景颜色为深灰色，卡片带有一点透明玻璃质感。
2. 界面正中间需要一个大号字体（字体居中、加粗）显示名字的区域。
3. 界面底部有且只有一个按钮。初始状态为“开始点名”，点击后名字开始快速随机切换，此时按钮文字变为“停！”；再次点击按钮，滚动停止，锁定最终选中的名字并用显眼的颜色（如橙色）高亮显示，同时按钮文字变回“开始点名”。
4. 提供一个包含 10 个常见名字的初始数组进行随机。
输出限制：
代码必须全部写在一个 HTML 文件里（CSS 和 JS 都要内联），确保我双击文件就能直接运行。
要求如下：
1. 页面风格为科技感暗黑风，背景颜色为深灰色，卡片带有一点透明玻璃质感。
2. 界面正中间需要一个大号字体（字体居中、加粗）显示名字的区域。
3. 界面底部有且只有一个按钮。初始状态为“开始点名”，点击后名字开始快速随机切换，此时按钮文字变为“停！”；再次点击按钮，滚动停止，锁定最终选中的名字并用显眼的颜色（如橙色）高亮显示，同时按钮文字变回“开始点名”。
4. 提供一个包含 10 个常见名字的初始数组进行随机。
输出限制：
代码必须全部写在一个 HTML 文件里（CSS 和 JS 都要内联），确保我双击文件就能直接运行。
2 生成、保存与预览
-
提取代码：等待 AI 生成完毕，点击代码块右上角的“复制”图标。
-
建立文件：在电脑桌面上新建一个文本文档，将代码粘贴进去。
-
修改后缀：将文件名重命名为
点名器.html。（如果看不到 .txt 后缀，需先在文件资源管理器的“查看”选项中勾选“文件扩展名”） -
运行测试：双击该 HTML 文件在浏览器中打开，点击按钮测试点名功能是否正常运行。
三、深度交互：定制你的专属神器
第一版代码虽然能跑，但还不够个性化。现在，我们需要学会如何向 AI 提出**“追问和修改指令”**。请在豆包中继续对话，完成以下三个挑战：
挑战 1：替换班级真实名单
在代码中找到存放名字的数组（通常叫 names 或类似名称），或者直接让 AI 帮你替换。
💬 对 AI 说：“在这个代码基础上，帮我把里面随机的名字替换成：张三、李四、王五、赵六、孙七、周八。重新输出完整代码。”
挑战 2：增加弹窗提示
让抽中的人更有仪式感。
💬 对 AI 说：“在这个代码基础上，增加一个功能：当点名停止时，屏幕中间弹出一个提示框，写着‘恭喜 [被抽中的名字] 中奖！’。”
挑战 3：美化按钮
把平淡的按钮变得更具设计感。
💬 对 AI 说：“在这个代码基础上，帮我把底部按钮的背景色改成‘蓝紫渐变色’，并且鼠标悬停时要有放大的动画效果。”
挑战完成后，记得去主页将最终的 HTML 文件提交至云端！
前往提交作业