改造前
原版：复制 + 跳转
- 孩子写完 HTML 网页
- 双击打开
- 问"糖醋排骨怎么做"
- 点"问爷爷"
- 网页复制 prompt 到剪贴板
- 跳到 Qwen Chat（新标签）
- 孩子手动 Ctrl+V 粘贴
- 看 Qwen 答 —— 在另一个网站
问题：体验断成两半。孩子在 Qwen 主页可能被别的内容吸引 → 不回来薪火。
改造后
新版：点一下就跑
- 孩子写完 HTML 网页（多 1 行 SDK 引入）
- 双击打开
- 问"糖醋排骨怎么做"
- 点"问爷爷"
- AI 回答直接出现在自己网页里
- 看完想改 prompt → 立刻改 → 立刻再问
孩子的注意力一直在自己的产品上，循环更紧。
↓ 这就是改造后的"爷爷的菜谱小助手"（在你眼前直接能问）
🍳 爷爷的菜谱小助手
问爷爷怎么做某道家常菜。AI 直接答。
第一次 5-10 秒，之后秒答
（按按钮，AI 直接在这里答 —— 没有跳转、没有粘贴）
📝 完整代码（孩子可以照搬）
这是孩子在自己 index.html 里写的完整代码 —— 比"复制 + 跳转"版本更短：
<!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; }
h1 { color: #DC5C44; }
textarea { width: 100%; min-height: 80px; padding: .8rem; border: 2px solid #1F2230; border-radius: 8px; box-sizing: border-box; }
button { padding: .7rem 1.4rem; background: #DC5C44; color: white; border: none; border-radius: 999px; font-weight: 700; cursor: pointer; margin-top: .7rem; }
.out { 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>
<body>
<h1>🍳 爷爷的菜谱小助手</h1>
<textarea id="question" placeholder="例：糖醋排骨怎么做？"></textarea>
<button id="ask">▶ 问爷爷</button>
<div class="out" id="output"></div>
<!-- ★ 唯一的新增：引入薪火 SDK -->
<script src="https://kindling-edu.com/kindling-ai-sdk.js"></script>
<script>
const SYSTEM_PROMPT = `你是一个 70 岁北京爷爷，专门教别人做家常菜。
- 用爷爷口吻，朴素、温暖
- 不给精确克数，给"大概"+"怎么判断"
- 重视看锅、听声音、闻味道
- 答案不超过 200 字`;
document.getElementById('ask').addEventListener('click', async () => {
const q = document.getElementById('question').value.trim();
if (!q) { alert('先写问题！'); return; }
const out = document.getElementById('output');
out.textContent = '思考中...';
// ★ 一行调用 AI，流式答案直接出
await kindlingAI.chat({
system: SYSTEM_PROMPT,
user: q,
stream: true,
onToken: t => {
if (out.textContent === '思考中...') out.textContent = '';
out.textContent += t;
},
});
});
</script>
</body>
</html>
比改造前的版本少 15 行（不需要 fetch + JSON 包 + headers + 错误处理 —— 全在 SDK 里）。
给老师 / 家长的话：
- 孩子完全不用注册任何 AI 平台
- 课程里所有现有项目页（中阶 8 个 + 进阶 12 个 + 萌芽很多）都可以加这一行 SDK
- 后端 worker 是我们部署的，孩子用免费额度（限速防滥用）
- 见 RESEARCH.md + ARCHITECTURE.md + worker/README.md 了解技术细节