你正在 中阶版 · ⚡ 代码俱乐部 · ← 回到学院 · 中阶版主页 · 总入口

← 八个项目 · 项目 03 of 8

项目 03 · 你的第一个 AI 网页

不只是"会跑的网页" —— 是把 AI 装进去的网页。访客输入一个问题，你的网页用你设计的 prompt调出 AI 回答 —— 这才是 2025 年"做一个网站"的真正含义。

这一节和"普通建站教程"什么不一样？ 普通教程让你做一个静态展示页（自我介绍、爱好列表）。我们让你做一个能"用"的东西 —— 因为 AI 时代，做静态网页有 AI 自动生成，但设计一个让 AI 有用的网页，需要你想清楚 3 件事：UI 怎么排、prompt 怎么写、如何把两者粘起来。这一项是程序员/设计师未来三年最值钱的能力。

需要什么？

怎么算"成"？

做完后你的网页满足三件事：① 在浏览器里能打开 ② 访客输入一段话，能拿到一段 AI 生成的回答 ③ 这个 AI 的"人设"是你写的（不是默认 AI）。把链接发给 3 个真人，他们用了。

动手前 · 先理解 3 个概念

① HTML + CSS + JavaScript —— "前端三件套"

HTML 是骨架（哪里有一个输入框、哪里有一个按钮）。CSS 是皮肤（颜色、字号、布局）。JavaScript 是脑子（按按钮发生什么事）。

这三个文件放在一起，就是一个"前端"网页。我们这一节用一个 .html 文件把三件事写在一起 —— 没有"配置"、没有"安装"，浏览器双击就能跑。

② Prompt + System prompt —— "AI 的人设"

你的网页要做的事：访客打字 → 你的代码把"访客的话"和"你预先写好的 system prompt"拼在一起 → 发给 AI → 显示 AI 的回答。

System prompt 是 AI 的"说明书"：你是谁、回答用什么口气、不答什么类型的问题。这是这个网页的"灵魂" —— 同样的 HTML 配不同的 system prompt，能做出 100 种不同的 AI 网页。

→ 想深入？看 概念地基 · 提示词工程

③ API —— "网页和 AI 之间的电话线"

访客的浏览器怎么"问" AI？答案是：你的 JavaScript 用 fetch() 给一个 AI 服务（比如通义千问）发一个 HTTP 请求 —— 就像打电话。AI 接到，回一段文字 → 你显示出来。

问题：直接调付费 AI 的 API 需要 API key（一串密码）—— 不能写在网页里（别人会偷）。所以这一节我们用"复制 prompt → 跳到 Qwen 网页粘贴"这种最简单的方式 —— 0 风险、0 门槛、效果一模一样。下一项目（04）我们才用本地 Ollama API。

步骤 1 · 装 VS Code，建第一个文件

到 code.visualstudio.com 下载 VS Code（免费）。打开后新建一个文件夹叫 my-first-ai-page。在里面新建文件 index.html。

步骤 2 · 写一个最小的 AI 网页

把下面的代码复制到 index.html。不要慌 —— 看起来 80 行其实是 7 个小块，每块 5-10 行。下面把它一块一块拆开讲，每块都附"这段干啥"的解释和"试改一下"的小练习。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>爷爷的菜谱小助手</title>

第 1 块 · HTML 文档的"出生证明"

所有网页都从这几行开头，告诉浏览器："这是一个网页，用中文，文字编码是 UTF-8（能显示中文），标题叫『爷爷的菜谱小助手』"。

<!DOCTYPE html> = "我是 HTML5"。lang="zh-CN" = "我是简体中文"。<title> 里写的字会显示在浏览器标签页上。

👉 试改：把 <title> 里的字换成你的助手名字（比如"奶奶的家常菜助手"），保存刷新，看浏览器标签页变没变。

<style>
  body { font-family: sans-serif; max-width: 600px; margin: 3rem auto;
         padding: 0 1.5rem; background: #FAF4DF; color: #1F2230; }
  h1 { color: #DC5C44; }
  textarea { width: 100%; min-height: 80px; padding: 0.8rem;
             border: 2px solid #1F2230; border-radius: 8px;
             font-family: inherit; font-size: 1rem; box-sizing: border-box; }
  button { padding: 0.7rem 1.4rem; background: #DC5C44; color: white;
           border: none; border-radius: 999px; font-size: 1rem;
           font-weight: 700; cursor: pointer; margin-top: 0.7rem; }
  button:hover { background: #B43D2C; }
  .output { margin-top: 1.5rem; padding: 1.2rem; background: #FFFCF0;
            border: 2px dashed #1F2230; border-radius: 8px;
            min-height: 80px; white-space: pre-wrap; }
</style>
</head>

第 2 块 · CSS · 网页的"皮肤"

这一段是 CSS。它告诉浏览器"网页长什么样"。每一段都是 选谁 { 怎么改 }。

例如 body { ... background: #FAF4DF; } 意思 = "整个 body（网页的身体），背景色变成 #FAF4DF（这是一种米黄色）"。

h1 { color: #DC5C44; } = "所有的一级标题，文字变成 #DC5C44（红橘色）"。

button { ... border-radius: 999px; } = 按钮的圆角变成 999 像素 → 因为按钮没那么宽，结果就是胶囊形状。

💡 关键技巧：HTML 是骨架（哪里有按钮），CSS 是衣服（按钮长什么样）。改 CSS 不影响"功能"，只改"颜值"。

👉 试改：把 background: #FAF4DF 改成 background: #E0F2FE（淡蓝色）。保存刷新看变化。颜色用这种网站找。

<body>

<h1>🍳 爷爷的菜谱小助手</h1>
<p>问爷爷怎么做某道家常菜 —— 用爷爷的口吻回答。</p>

<textarea id="question" placeholder="例：糖醋排骨怎么做？"></textarea>
<button id="ask">问爷爷 →</button>

<div class="output" id="output">
  （点上面"问爷爷"，会复制一段完整 prompt，然后跳到 Qwen Chat 粘贴。）
</div>

第 3 块 · HTML · 网页的"骨架"和"内容"

这一段是用户实际看到的东西：标题、说明文字、输入框、按钮、显示结果的盒子。

每个东西都有自己的"标签"：<h1>=大标题，<p>=段落，<textarea>=多行输入框，<button>=按钮，<div>=一个空盒子（用来装东西）。

注意每个有 id="..." —— 这是给它一个名字。后面 JavaScript 会用这个名字"找到它"。比如 id="question" 就是给输入框起名 "question"。

👉 试改：把 placeholder="例：糖醋排骨怎么做？" 改成你想给用户的提示。placeholder 是输入框里的"灰色提示字" —— 用户一打字就消失。

<script>
// === 这是你网页的"灵魂" —— 系统提示词 ===
const SYSTEM_PROMPT = `你是一个 70 岁北京爷爷，专门教别人做家常菜。
回答规则：
1. 用爷爷的口吻 —— 朴素、温暖、爱说"嗯......"、"你听我说"
2. 不给精确克数，给"大概多少"+"怎么判断"
3. 重视"看锅"、"听声音"、"闻味道" —— 这才是爷爷真正会的
4. 如果问的是没听过的菜，就说"哎呀这个爷爷我没做过"
5. 答案不超过 200 字`;

第 4 块 · JavaScript · 网页的"灵魂"（system prompt）

<script> 标签里面写的是 JavaScript —— 让网页"动起来"的代码。

// === ... === 这种以 // 开头的是注释 —— 给人看的，浏览器不执行。

const SYSTEM_PROMPT = `...`; = "造一个名字叫 SYSTEM_PROMPT 的盒子，里面装这段长长的字符串"。const 是"常量"（不能再改）。

反引号 `...`（不是普通引号 ' 或 "）是用来包多行字符串的 —— 因为我们的提示词跨好多行。

💡 这就是你网页的"灵魂"：同样的 HTML 配不同的 SYSTEM_PROMPT，可以做出 100 种完全不同的 AI 工具。所以这一段是整个产品的核心。

👉 试改：把"爷爷"改成"奶奶"，"北京"改成"四川"，看 AI 回答的口气会怎么变。

document.getElementById('ask').addEventListener('click', async () => {
  const q = document.getElementById('question').value.trim();
  if (!q) { alert('先写个问题！'); return; }

第 5 块 · 当用户点按钮时…

这段说："找到 id 是 ask 的那个东西（就是按钮），让它『被点击』时，做下面那些事。"

document.getElementById('ask') = "在这个网页里找名字叫 ask 的元素"（前面我们给按钮起的名字）。

.addEventListener('click', ...) = "给它加一个『被点击』时的监听器"。每次有人点这个按钮，括号里那个函数就执行。

const q = ... .value.trim(); = "把输入框（id=question）里用户写的内容拿出来，去掉前后空格，存到名字叫 q 的盒子里"。

if (!q) { alert('先写个问题！'); return; } = "如果 q 是空的，弹个对话框提醒，然后什么也不做"。这就是简单的输入校验。

👉 试改：把 '先写个问题！' 改成 '你想问爷爷什么呢？😊' —— 输出更友好的提醒。

  // 把 system prompt + 用户问题拼起来
  const fullPrompt = SYSTEM_PROMPT + '\n\n用户问：' + q;

  // 复制到剪贴板
  await navigator.clipboard.writeText(fullPrompt);
  document.getElementById('hint').textContent = '已复制 ✓';

第 6 块 · 拼接 prompt + 复制到剪贴板

const fullPrompt = SYSTEM_PROMPT + '\n\n用户问：' + q; = "把系统提示词 + 两个换行 + 『用户问：』 + 用户的问题，全部拼成一段长字符串，存到 fullPrompt"。+ 在字符串之间表示拼接。\n 是换行的意思。

navigator.clipboard.writeText(fullPrompt) = "把这段字符串放到系统剪贴板"（就像你按 Ctrl+C 一样）。

await = "等这件事做完再继续"。因为复制要花一点点时间。

💡 这一招超有用："拼 prompt → 复制到剪贴板"是 2025 年最简单的"AI 网页 + 真 AI"集成方式 —— 不需要 API key、不烧钱、所有人都能用。这种模式有个名字叫 "prompt 跳转"。

  // 显示出来 + 打开 Qwen
  document.getElementById('output').textContent = fullPrompt;
  setTimeout(() => window.open('https://chat.qwen.ai', '_blank'), 600);
});
</script>

</body>
</html>

第 7 块 · 显示 prompt + 打开 Qwen 网页

document.getElementById('output').textContent = fullPrompt; = "把刚才拼好的 fullPrompt，写到 id=output 的那个 div 里"。这样用户能看到自己复制了什么。

setTimeout(() => window.open('https://chat.qwen.ai', '_blank'), 600); = "等 600 毫秒（半秒多一点），然后打开通义千问，在新标签页"。

为什么等 0.6 秒？让用户先看到"已复制 ✓"的提示，知道发生什么了，再跳。要是立刻跳，体验是"莫名其妙"的。

最后那几行 });、</script>、</body>、</html> 就是"关掉前面那些打开的括号和标签"—— 像扣上盒子的盖子。

👉 试改：把 'https://chat.qwen.ai' 改成 'https://kimi.moonshot.cn'，按按钮就改成跳到 Kimi 了。

📋 看 / 复制完整代码（一键到位，方便粘到 VS Code） 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>爷爷的菜谱小助手</title>
<style>
  body { font-family: sans-serif; max-width: 600px; margin: 3rem auto;
         padding: 0 1.5rem; background: #FAF4DF; color: #1F2230; }
  h1 { color: #DC5C44; }
  textarea { width: 100%; min-height: 80px; padding: 0.8rem;
             border: 2px solid #1F2230; border-radius: 8px;
             font-family: inherit; font-size: 1rem; box-sizing: border-box; }
  button { padding: 0.7rem 1.4rem; background: #DC5C44; color: white;
           border: none; border-radius: 999px; font-size: 1rem;
           font-weight: 700; cursor: pointer; margin-top: 0.7rem; }
  button:hover { background: #B43D2C; }
  .output { margin-top: 1.5rem; padding: 1.2rem; background: #FFFCF0;
            border: 2px dashed #1F2230; border-radius: 8px;
            min-height: 80px; white-space: pre-wrap; }
  .copied { color: green; font-size: 0.9rem; margin-left: 0.6rem; }
</style>
</head>
<body>

<h1>🍳 爷爷的菜谱小助手</h1>
<p>问爷爷怎么做某道家常菜 —— 用爷爷的口吻回答。</p>

<textarea id="question" placeholder="例：糖醋排骨怎么做？"></textarea>
<button id="ask">问爷爷 →</button>
<span class="copied" id="hint"></span>

<div class="output" id="output">
  （点上面"问爷爷"，会复制一段完整 prompt，然后跳到 Qwen Chat 粘贴。）
</div>

<script>
const SYSTEM_PROMPT = `你是一个 70 岁北京爷爷，专门教别人做家常菜。
回答规则：
1. 用爷爷的口吻 —— 朴素、温暖、爱说"嗯......"、"你听我说"
2. 不给精确克数，给"大概多少"+"怎么判断"
3. 重视"看锅"、"听声音"、"闻味道" —— 这才是爷爷真正会的
4. 如果问的是没听过的菜，就说"哎呀这个爷爷我没做过"
5. 答案不超过 200 字`;

document.getElementById('ask').addEventListener('click', async () => {
  const q = document.getElementById('question').value.trim();
  if (!q) { alert('先写个问题！'); return; }

  const fullPrompt = SYSTEM_PROMPT + '\n\n用户问：' + q;
  await navigator.clipboard.writeText(fullPrompt);
  document.getElementById('hint').textContent = '已复制 ✓';

  document.getElementById('output').textContent = fullPrompt;
  setTimeout(() => window.open('https://chat.qwen.ai', '_blank'), 600);
});
</script>

</body>
</html>

怎么用上面的"代码走读"组件？顶部的"📃 全部展开 / 🔦 聚光灯模式 / 💡 默认折叠"切换不同看法 —— 第一次过来推荐全部展开（一眼看完全貌）；想要"逐段听讲"就切到聚光灯；已经懂了想刷一遍代码就用默认折叠。

保存。双击 index.html —— 网页在浏览器里打开了。试着输入一句话、按按钮 —— 它复制完整 prompt，然后打开通义千问，你粘贴 → 立刻有 AI 答。

等等，这就是"AI 网页"了？！对。这种"prompt 跳转"模式是 2024-2025 最常见、最实用的轻量 AI 网页模式 —— 不需要 API key、不需要服务器、不需要付费、所有人都能用。 你的整个产品价值都在 SYSTEM_PROMPT 这一段里。这就是"prompt engineering 决定产品"的真实例子。

步骤 3 · 让它变成"你的"东西

现在改 SYSTEM_PROMPT，把"爷爷做菜"换成你最懂的事情。下面是几个不同方向的例子，挑一个最有感觉的（或者写你自己的）：

方向 A · 给"特定的人"做（同理心驱动） 
const SYSTEM_PROMPT = `你是 9 岁孩子小桃的小老师，专门用她能懂的话讲科学问题。
规则：
1. 不要超过 100 字
2. 用小桃身边能见到的东西做比喻（小区、学校、家里）
3. 不用专业词，用"力量"代替"能量"，用"小颗粒"代替"分子"
4. 每个回答以一个新问题结尾，让她想继续
5. 问到不科学的东西（比如算命），就说"这个我不懂诶"`;
方向 B · 把"你独有的知识"装进去（热爱驱动） 
const SYSTEM_PROMPT = `你是 12 岁观鸟小专家玛雅的助手。
你只用玛雅笔记本里记的细节回答（不要从网上找通用答案）。

玛雅观察的鸟（节选）：
- 麻雀：总是 7 只一群在小区树荫下找东西，最大的总是先吃
- 画眉：叫的时候身体抖，像在唱歌；只早上叫
- 斑鸠：叫声温柔，"咕咕"的；总是两只一起出现
- ...（再列 10 条玛雅独有的观察）

回答规则：
1. 只回答这些鸟相关的问题
2. 用玛雅的语气，像一个 12 岁但很懂的孩子
3. 不知道就说"这个我没观察过"，不要瞎编`;
方向 C · 严格控制"什么算好"（审美驱动） 
const SYSTEM_PROMPT = `你是一个微小说写作助手。

【硬性要求】
- 字数严格在 100-150 字之间
- 必须有一个具体的物件作为"线索"
- 最后一句必须有反转或留白

【绝对禁止】
- 用"美丽"、"难过"、"开心"这种抽象词，要写动作和细节
- 用"突然"、"忽然"开头
- 大团圆结局

【示例好的开头】
- "她推开门，桌上的茶还热着，但屋里没人。"

请按用户给的题目，写一篇完全符合要求的微小说。`;

把你选的 prompt 复制粘贴替换掉原来的 SYSTEM_PROMPT，顺便改一下页面顶部的 <h1> 和 <title>。保存，刷新浏览器 —— 你的 AI 网页有"灵魂"了。

步骤 4 · 上线 —— 让全世界能用

  1. 到 GitHub 注册（免费）
  2. 新建仓库，名字 my-first-ai-page，勾 Public
  3. 把 index.html 上传上去（"Add file" → "Upload files"）
  4. Settings → Pages → Source 选 main → Save
  5. 等两分钟，会得到一个 https://yourname.github.io/my-first-ai-page/ 的地址

这个地址全世界都能打开。把它发给 3 个真人，看他们用了之后给你什么反馈。

动手 · 在沙盒里改 system prompt 看效果

动手 改 system prompt → 立刻看 AI 的"人设"变化
任务：下面是简化版网页（点按钮模拟一个 AI 回答 —— 真版本要去 Qwen Chat）。改 SYSTEM_PROMPT 里的内容（比如把"爷爷"改成"奶奶"、把"北京"改成"四川"、把"做菜"改成"修自行车"），然后点按钮看输出怎么变。这就是你调试 system prompt 的过程。

这一项你学到的 5 件事

  1. "前端"不是火箭科学 —— 一个 .html 文件 + 浏览器双击 = 一个能跑的网页。
  2. system prompt 是产品的灵魂 —— 同样的 HTML 套不同的 prompt，可以做出 100 种不同的 AI 工具。
  3. "剪贴板 + 跳转"是最简单也最实用的 AI 集成方式 —— 不需要 API key、不需要付费、零部署成本。
  4. GitHub Pages 完全免费 —— 个人项目永远不需要花钱"上线"。
  5. 这个模式可以拓展：项目 04 把"剪贴板跳转"升级为"网页直接调本地 Ollama API" —— 完整闭环 AI 网页。
小测 "AI 网页"和"普通网页"的核心差别？
下面哪一个最准确？
  • AI 网页用的代码更复杂。
  • AI 网页一定要付费 API。
  • AI 网页有一段"灵魂 prompt" —— 它决定网页"做什么"，比 HTML/CSS 更重要。
  • AI 网页只能用付费的服务器。
核心：普通网页的"产品价值"在 HTML 内容里。AI 网页的"产品价值"在 system prompt 里 —— HTML 只是把它包装得能用而已。 所以 2025 年做"AI 网页"的核心能力是写好 prompt，不是写好 CSS。 但你也要懂 HTML/CSS/JS 才能把 prompt 装进去给真人用 —— 这一项练的就是这两件事的"接口"。

← 上一个 下一个：让网页直接调 AI（不用跳转）→