// field report
一个英语专业大学生的 AI 编程实践
从第一行代码到网站上线的完整路径
作为一个英语专业的学生，我并没有系统学过前端开发。但我想做一个网站来推广 Claude Code，向不了解它的人展示"Claude Code 能做什么"。问题来了：我不会写代码，怎么办？
答案就是——用 Claude Code 来做 Claude Code 的推广网站。这本身就是一个最好的案例。
Claude Code 不是一个简单的代码补全工具，而是一个能理解需求、规划架构、编写代码、调试修复的全能 Agent。你用自然语言告诉它你想做什么，它就能帮你做出来。
"传统方式：学 HTML → 学 CSS → 学 JS → 学框架 → 写代码 → 调试 → 部署（数月）。Claude Code 方式：描述需求 → AI 生成代码 → 验证效果 → 迭代优化（数天）。"
核心优势：你不需要成为专家，但你需要知道"什么是好的"。审美判断力和产品思维比编码能力更重要。
四步完成安装，零门槛上手
从 nodejs.org 下载 LTS 版本，安装后终端输入 node -v 验证
终端执行 npm install -g @anthropic-ai/claude-code
官方 API 直接登录；国产模型配合 CC Switch 工具接入
cd 到项目目录，输入 claude 启动
建议在项目根目录创建 CLAUDE.md 文件，写明项目信息和约束。这是 Claude Code 的"记忆文件"，它会自动读取并遵循其中的规则。但不要超过 200 行——超过 80 行后开始出现信息遗漏。
好的架构是成功的一半——先和 Claude Code 对齐结构，再动手写代码
采用扁平结构，四个页面各一个 HTML 文件，共享样式和脚本：
claude-code-intro/
├── index.html # 首页：为什么要用
├── install.html # 安装页：怎么安装
├── usage.html # 使用页：怎么用好
├── skills.html # 进阶页：Skill 推荐
├── experience.html # 实战页：开发经验
├── style.css # 共享样式（四页统一）
├── shared.js # 共享交互逻辑
├── particles.js # Three.js 粒子背景
├── three.min.js # Three.js 本地副本
└── images/ # 截图和素材
设计风格采用"编辑终端美学"——深色背景 + 琥珀强调色 + 终端绿 + 奶白文字。所有颜色通过 CSS 变量统一管理：
--bg: #090909 /* 深黑背景 */
--accent: #F5A623 /* 琥珀强调 */
--success: #2DD4A8 /* 终端绿 */
--ink: #F2EDE8 /* 奶白文字 */
每个环节都会遇到问题——关键是怎么解决
问题：游戏截图 game.png 有 5MB，加载好几秒。
解决：PNG 转 JPG（391KB），压缩率超过 90%。照片类图片 JPG 压缩效果远好于 PNG。
问题：Three.js 通过 CDN 引入，国内无法访问。
解决：下载到本地（603KB），script 标签加 defer 避免阻塞渲染。国内用户为主的网站，所有外部依赖都应本地化。
问题：JS 交互在某些页面不工作。
解决：检查脚本加载顺序，确保 script 在对应 HTML 之后，或使用 DOMContentLoaded。四页共享 shared.js，HTML 结构必须一致。
问题：桌面端效果好，手机布局错乱。
解决：用 clamp() 做流式排版，CSS Grid auto-fill + minmax 做自适应网格，粒子背景在移动端自动降级。
每个页面有明确目标，板块围绕目标组织
Hero 终端打字动画 + 手机预览卡片，给访客震撼。作品展示区用真实案例建立"Claude Code 很强"的认知。
按平台分流（Mac/Windows × 有无翻墙），步骤可视化高亮编号，止步于"能跑起来"。
CLAUDE.md 四层体系金字塔组件，全局模板可直接复用。核心论点：约束先行比 Prompt 技巧重要。
实习生类比解释 Prompt vs Skill vs MCP，五个推荐 Skill 大字锚点 + 终端安装演示 + zip 下载。
交互是让网站"活起来"的关键
滚动驱动动画 — IntersectionObserver 实现元素进入视口时的 reveal 动画，展示区使用交错动画依次出现。
终端打字动画 — 首页 Hero 模拟终端输入 prompt，逐字符显示带闪烁光标。完成后滑入手机预览卡片，时序精确到毫秒。
自定义光标 — 每页不同颜色的发光光标球，lerp 平滑跟随。悬停标题时标题颜色过渡到光标色。移动端自动隐藏。
解码动画 — Hero 标题以字符乱码 → 逐个解码浮现。首页立即触发，其他页面滚动触发。
Tab 切换与代码复制 — Mac/Windows 切换用 data-tab 模式，代码块右上角 Copy 按钮一键复制。
按钮涟漪与计数器 — 按钮点击涟漪扩散效果，统计数字滚动递增动画。
2200 个粒子漂浮，鼠标力场交互，近距自动连线
选择 Three.js 而非 Canvas 2D，因为 WebGL 渲染性能更好，能轻松处理 2000+ 粒子的实时计算。
核心实现：Float32Array 存储 2200 个粒子坐标，每帧更新漂浮 + 鼠标推开 + 弹性回拉 + 连线。每页独立色调。
// 每页独立色调
'index.html': { core: 0xf5a623, glow: 0x2dd4a8 } // 琥珀+绿
'install.html': { core: 0xffbd2e, glow: 0xf5a623 } // 黄+琥珀
'usage.html': { core: 0x2dd4a8, glow: 0xf5a623 } // 绿+琥珀
'skills.html': { core: 0xf5a623, glow: 0x60a5fa } // 琥珀+蓝
性能优化：像素比限制 ≤2、滚动最低 15% 可见度、移动端自动降级、加载失败静默跳过。
半透明穿透设计：卡片背景用 rgba 半透明值，粒子透过内容区域隐约可见，营造深度感。
两条路径：国外免费 vs 国内稳定
创建 GitHub 仓库 → Settings → Pages → 选择 master 分支。推送代码即自动部署。
优点：完全免费，自动部署，版本控制。
缺点：需要翻墙才能访问。
阿里云/腾讯云购买 .cn 域名（约 20-30 元/年）+ DNS 解析专业版（约 10 元/月），仍通过 GitHub Pages 部署。
优点：代码在 GitHub 管理，用户通过国内域名访问，速度快且稳定。
成本：约 150 元/年，两条路都走最稳。
上线不是终点——优化闭环只需三步
Step 1：发现问题（自己浏览或收集用户反馈）
Step 2：让 Claude Code 修改（描述问题，直接改代码）
Step 3：推送到 GitHub（git push，网站自动更新）
# 优化闭环
发现体验问题 → 告诉 Claude Code → 它改代码 → git push → 网站更新
# 就这么简单
从首次上线到稳定版本，6 天经历了多轮迭代：新增 Skills 页面 → 补充模型链接 → 粒子背景全站应用 → 图片压缩 5MB→391KB → Hero 手机预览卡片。每次只改一个点，持续交付。
约束先行 — CLAUDE.md 写得好，AI 才能稳定产出高质量代码。
审美判断力 — 你不需要会写，但需要知道什么是好的。
迭代优于一次性 — 先做 MVP，再逐步优化，每次只改一个点。
本地化思维 — 国内用户为主的项目，所有外部依赖都要考虑降级。
"这个网站本身就是 Claude Code 能力的最佳证明。一个不会写代码的英语专业学生，用 6 天时间做出了一个完整的推广展示站。如果你也有想法，现在就开始。"
复制里面的 prompt 给 Claude Code，一句话就能开始建站