# Claude Code 建站启动包

> 把下面的内容复制给 Claude Code，它就能帮你从零建一个网站。

---

## 第一步：复制这段 prompt 给 Claude Code

```
我要做一个个人展示网站，目标是向不了解我的人介绍我是谁、我做了什么。

请帮我：
1. 在当前目录创建项目（纯 HTML + CSS + JS，不要框架）
2. 设计风格：深色主题，现代感，适合技术/创意类展示
3. 至少包含这些页面：首页（自我介绍 + 作品展示）、关于页、联系方式
4. 导航栏固定在顶部，页面间跳转流畅
5. 加一些交互细节：滚动动画、hover 效果，让网站不呆板
6. 移动端适配，手机上也要好看
7. 所有外部依赖（字体、图标、JS库）尽量本地化，国内能正常访问

先帮我规划目录结构和页面架构，我确认后再开始写代码。
```

---

## 第二步：在项目根目录创建 CLAUDE.md

在项目文件夹里创建一个 `CLAUDE.md` 文件，把下面的内容粘进去：

```markdown
# 我的网站

## 项目信息
- 这是一个 [个人展示/产品介绍/作品集] 网站
- 目标用户：[你的目标用户描述]
- 技术栈：纯 HTML + CSS + JS，无框架

## 设计规范
- 深色主题，背景色 #090909
- 强调色：[选一个你喜欢的颜色，比如琥珀 #F5A623 或绿色 #2DD4A8]
- 正文字体：系统默认 sans-serif
- 代码/标签字体：等宽字体
- 卡片背景用半透明 rgba，增加层次感

## 目录结构
```
my-site/
├── index.html        # 首页
├── about.html        # 关于页
├── style.css         # 共享样式
├── shared.js         # 共享交互逻辑
└── images/           # 图片素材
```

## 页面规范
- 每个页面共享同一套导航栏和页脚
- 导航栏固定顶部，滚动时有背景模糊效果
- 所有页面滚动时有 reveal 动画
- 代码块右上角有复制按钮
- 移动端导航自动适配

## 约束
- 不要用 React/Vue/Angular 等框架
- 不要用 CDN 引入外部资源（国内访问不稳定）
- 图片用 JPG 格式（除非需要透明背景）
- CSS 变量统一管理颜色，方便全局调整
- CLAUDE.md 不超过 200 行，保持精炼
```

---

## 第三步：开始对话

CLAUDE.md 创建好后，直接告诉 Claude Code 你想做什么：

```
帮我做一个作品集网站，展示我做的 [小程序/网页/游戏/设计]，
风格参考 claude-code-intro.com 那种深色终端美学。
```

或者更具体：

```
我要做一个英语教学网站，包含 [课程介绍/在线练习/学习资源] 三个板块，
要好看、好用、手机上也好用。
```

---

## 常见问题

**Q: Claude Code 生成的代码有问题怎么办？**
直接把报错信息或截图发给它，它会自动修复。比如："这个按钮在手机上显示不全，帮我修一下。"

**Q: 想改颜色/字体/布局怎么描述？**
越具体越好。比如："把标题颜色从蓝色改成琥珀色 #F5A623"，而不是"换个颜色"。

**Q: 网站做好了怎么上线？**
参考经验分享页（experience.html）的"网站上线"章节，GitHub Pages 免费部署，国内域名加 150 元/年。

**Q: 想加新功能但不会描述怎么办？**
说清楚"谁在什么场景下需要什么"。比如："我想让访客在手机上左右滑动切换作品图片"。