理解代码 · 独立开发

我刚安装好 Claude Code。请帮我：
1. 检查我的开发环境是否完整
2. 告诉我 VSCode 里最常用的 5 个快捷键
3. 给我讲清楚"终端"是什么，为什么编程离不开它

用中文回答，尽量不用术语，用比喻让我理解。

【在项目根目录创建 CLAUDE.md，Claude Code 每次启动会自动读取】

## 项目概述
这是一个 [描述项目类型] 项目，使用 [技术栈]。

## 常用命令
- npm run dev：启动开发服务器
- npm run build：构建生产版本
- npm test：运行测试

## 代码规范
- 命名约定：文件名用小写+连字符，变量用 camelCase
- 缩进：2 个空格
- 不要修改 /legacy 目录下的文件

## 架构说明
- src/：源代码
- public/：静态资源
- dist/：构建输出（自动生成，不要手动修改）

## 注意事项
- 数据库 schema 变更需要单独的 migration 文件

请帮我创建一个最简单的 HTML 网页，保存为 index.html。

要求：
- 标题：我的第一个网页
- 内容：一句简短的公司介绍（我叫XX，正在学习AI辅助编程）
- 背景色用柔和的浅色
- 文字居中显示

请生成完整的、可以直接运行的 HTML 代码，并解释每一部分是做什么的。

我正在学习 HTML 基础。请帮我：

1. 用表格列出最常用的 10 个 HTML 标签、它们的用途、和一个简单例子
2. 解释什么是"嵌套"（为什么标签要包在标签里面）
3. 给我的 index.html 添加：一个图片、一个超链接、一个无序列表（ul/li）
4. 每一步都告诉我"这是什么"和"为什么加在这里"

注意：我要的是教学，不只是代码。

请帮我给 index.html 添加 CSS 样式，要求：

1. 整体背景用非常浅的灰色（#f5f5f5）
2. 标题用深黑色、大字号（32px以上）、有适当的下边距
3. 正文用深灰色、行高舒适（1.6倍）
4. 内容区域限制最大宽度（max-width: 600px），在屏幕中间居中
5. 给内容区加白色背景、圆角（12px）、轻微阴影
6. 所有元素之间有足够的呼吸感（padding/margin）

请用内联 style 标签的方式添加 CSS，并解释每个样式的作用。

请帮我做一个"盒模型实验室"页面：

1. 创建 3 个彩色方块（div），每个都有不同的 padding/margin/border 组合
2. 每个方块里显示文字，说明这个方块的 padding/margin/border 分别是多少
3. 给每个方块加 hover 效果（鼠标放上去变色）
4. 整体布局美观，有标题说明这是"CSS 盒模型演示"

目的是让我直观看到 padding、margin、border 的区别。

请帮我给网页添加一个响应式导航栏：

【桌面端】
- Logo 在左，导航链接在右
- 链接水平排列，间距均匀
- 整体高度 60px，白色背景，底部有细阴影

【手机端（屏幕宽度小于768px）】
- 只显示 Logo 和一个汉堡菜单按钮（三条横线）
- 点击汉堡菜单，导航链接从上方滑下来
- 再次点击，链接收起

请用 Flexbox 实现，并解释 justify-content 和 align-items 在这里的作用。

请帮我创建一个响应式公司介绍页（index.html），保存到项目根目录。

内容：
- 顶部：公司名（大字）+ 主营产品标签
- 中间：一段公司简介（3-4句话，突出工厂优势、主营产品、服务范围）
- 下方：3个核心优势标签（圆角小按钮样式，如"品质保障 / 快速交期 / OEM定制"）
- 底部：公司邮箱 + 电话占位 + 官网链接按钮
- 右上角或底部："用 AI 辅助编程制作"的小标签

设计要求：
- 深色背景（#0f0f0f），浅色文字，有高级感
- 整体居中，最大宽度 600px
- 有适当的动画效果（淡入、hover 效果）
- 在手机上也好看

请生成完整的、可直接运行的代码。

我正在学习 Claude Code 的命令。请帮我：

1. 列出 Claude Code 最常用的 10 个命令/快捷键
2. 每个命令用一句话说明用途
3. 给每个命令举一个具体的例子（用我当前的项目文件）
4. 告诉我什么时候用聊天模式，什么时候用命令模式，什么时候用 /plan 规划模式

格式：表格，中文。

【Claude Code 核心命令】

/help          → 显示所有可用命令
/edit          → 精准修改指定代码
/explain       → 解释代码作用
/test          → 生成测试用例
/debug         → 诊断并修复问题
/find          → 在项目中搜索
/shell         → 运行终端命令
/clear         → 清空对话上下文
/compact       → 压缩历史，释放空间
/cost          → 查看 token 消耗和费用
/plan          → 进入规划模式，只讨论不执行
/model         → 切换使用的 AI 模型
/pr_comments   → 拉取 GitHub PR 评论
/git           → 执行 git 命令或生成 commit message

请帮我用 /edit 修改我的 index.html：

1. 给所有按钮添加圆角（8px）和 hover 效果（背景色加深）
2. 给核心优势标签添加图标前缀（用 emoji 即可：🏭 ⚙️ 🌐）
3. 在页面底部添加一行小字："© 2026 用 AI 辅助编程制作"，文字居中，灰色，字号小
4. 整体添加一个淡入动画（页面加载时内容逐渐显示）

请一步一步修改，每改一步告诉我改了什么。

我是 Git 零基础。请用"游戏存档"的比喻帮我理解：

1. Git 是什么？为什么需要它？
2. git add、git commit、git status 分别对应存档过程的哪一步？
3. 给我一份"每天工作结束时的 Git 流程"清单
4. 如果我把代码改坏了，怎么用 Git 恢复？

用中文，尽量不用术语。

请给我一份"从本地推送到 GitHub"的完整步骤清单：

前置条件：
- 已有 GitHub 账号
- 代码已 push 到 GitHub 仓库

要求：
1. 一步一步的命令清单
2. 每步说明在做什么
3. 常见错误和解决（比如 404、样式不加载）
4. 推送成功后怎么确认

用中文。

我的网页出现了以下问题，请帮我诊断和修复：

【问题描述】
[在这里描述你看到的异常现象，比如"导航栏跑到页面下面了"、"图片不显示"、"文字颜色没变"]

【相关代码】
[把出问题的代码贴在这里]

请：
1. 分析可能的原因
2. 给出修复后的代码
3. 告诉我以后怎么避免这个问题

请帮我 review 以下 HTML/CSS 代码，从以下几个维度给出建议：

1. 代码结构：是否有更好的组织方式？
2. 可维护性：如果我要修改，容易找到对应代码吗？
3. 性能：有没有可以优化的地方？
4. 最佳实践：是否符合现代网页开发规范？
5. 可访问性：视障用户能正常浏览吗？

【我的代码】
[粘贴代码]

请给出具体建议，优先级从高到低排序。

【Claude Code 精准引用语法】

@文件名        → 引用特定文件（如 @index.html）
@文件夹/       → 引用整个目录（如 @src/components/）
@https://...    → 读取网页内容作为上下文
@git:HEAD~3     → 引用最近几次 commit 的变更
@#123           → 引用 GitHub issue 或 PR

【示例】
"修复 @src/api/users.ts 里的 bug，参考 @src/api/auth.ts 里的错误处理模式"

好处：精准定位，Claude 不会"猜错文件"。

请帮我创建一个 script.js 文件，实现以下功能：

1. 页面加载完成后，在控制台打印 "Hello World"
2. 定义一个函数 sayHello(name)，接收一个名字参数，返回 "你好，XX！"
3. 获取当前时间，根据时间段显示不同英文问候语：
   - 6-12点：Good morning
   - 12-18点：Good afternoon
   - 18-24点：Good evening
   - 0-6点：We are here for you
4. 把这个问候语显示在页面顶部

请生成完整的 JS 代码，并在 HTML 中正确引用。解释每段代码的作用。

请帮我给网页添加以下交互功能（用 script.js）：

1. 【语言切换】点击一个按钮，切换产品描述的语言（中文 / English）
   - 默认显示中文描述
   - 点击后切换为英文描述
   - 按钮文字也要相应改变（"English" / "中文"）

2. 【询盘计数器】点击 + 按钮，数字加1（模拟新增询盘），数字不能小于0

3. 【规格展开】点击"View Details"，展开产品的详细规格参数；再次点击，收起

请生成完整的 JS 代码，并解释 querySelector 和 addEventListener 的作用。

请帮我给网页添加一个询盘（RFQ）表单，包含：

【HTML 结构】
- 客户公司名输入框（必填）
- 国家选择框（必填）
- 感兴趣的产品输入框（必填）
- 预计订单量输入框
- 邮箱输入框（必填，需要格式验证）
- 留言文本框（选填）
- 提交按钮

【JS 验证逻辑】
1. 提交时检查所有必填项是否已填
2. 邮箱格式验证：必须包含 @ 和 .
3. 如果有错误，在对应输入框下方显示红色错误提示
4. 如果全部通过，显示绿色成功提示，清空表单

【样式要求】
- 错误状态：输入框边框变红
- 成功状态：显示绿色勾选图标 + "提交成功！我们会尽快联系您"
- 过渡动画平滑

请生成完整代码。

请帮我做一个"客户信息录入"小工具，保存为 customers.html：

【上半部分：录入表单】
- 公司名称（文本输入）
- 联系人姓名（文本输入）
- 国家（下拉选择：中国、美国、德国、日本、其他）
- 邮箱（邮箱输入，需验证格式）
- 感兴趣的产品（文本输入）
- 预算范围（下拉选择：<1万、1-5万、5-10万、>10万）
- 备注（多行文本）
- 提交按钮

【下半部分：客户列表】
- 以表格形式展示所有录入的客户
- 每行有删除按钮
- 表格有表头， zebra 条纹样式

【功能要求】
1. 提交后表单清空，客户添加到列表顶部
2. 用 localStorage 保存数据，刷新不丢失
3. 删除时确认"确定删除吗？"
4. 列表为空时显示提示"暂无客户，请添加"

请生成完整代码。

请帮我做一个"实时汇率看板"，保存为 exchange.html：

【功能】
1. 页面加载时，从免费 API 获取以下汇率（以人民币为基准）：
   - 美元 USD
   - 欧元 EUR
   - 日元 JPY
   - 英镑 GBP

2. 用卡片形式展示每种货币：
   - 货币名称 + 国旗 emoji
   - 当前汇率（保留4位小数）
   - 最后更新时间

3. 加一个"刷新"按钮，点击重新获取数据
4. 加载中显示骨架屏或 loading 动画
5. 如果 API 失败，显示"数据获取失败，请稍后重试"

【样式】
- 深色背景，卡片式布局
- 响应式：手机上一列，桌面四列
- 有适当的动画效果

可用的免费 API：https://api.exchangerate-api.com/v4/latest/CNY

请生成完整代码。

请帮我升级昨天的汇率看板，添加以下功能：

1. 【金额换算】
   - 顶部有一个输入框，输入人民币金额
   - 输入时实时计算并显示各种货币的对应金额
   - 支持小数点

2. 【货币筛选】
   - 用户可以选择显示哪些货币（复选框）
   - 默认显示美元、欧元、日元、英镑
   - 选择保存在 localStorage

3. 【历史记录】
   - 记录最近 5 次查询的金额
   - 点击历史记录可以快速填充

4. 【UI 优化】
   - 输入框获得焦点时有高亮效果
   - 换算结果有数字动画（从0滚动到目标值）
   - 整体风格现代、专业

请生成完整代码。

我想用 HTML/CSS/JS 做一个实用小工具，解决以下工作痛点：

【场景】
[描述你的工作场景，比如"我是外贸业务员，每天需要整理客户询盘、查询汇率、记录跟进状态"]

【痛点】
[描述最痛苦的1-2个环节]

【想法】
[你初步想到的功能，比如"做一个客户跟进看板"]

请帮我：
1. 分析这个想法的可行性
2. 列出 MVP（最小可行产品）应该包含哪些功能
3. 给出技术实现方案（HTML结构、CSS框架、JS逻辑）
4. 预估每个功能的开发难度（1-5星）
5. 建议开发顺序

用中文，尽量不用术语。

请帮我创建一个"外贸询盘整理器"（inquiry-manager/index.html）：

【页面结构】
- 顶部：标题 + 统计卡片（总询盘数、待跟进数、本周新增）
- 左侧（占40%）：录入表单
- 右侧（占60%）：询盘列表

【表单字段】
- 客户公司名称
- 联系人
- 国家（下拉选择）
- 产品兴趣
- 预算范围
- 紧急程度（高/中/低，用不同颜色）
- 备注
- 提交按钮

【列表展示】
- 卡片式布局，每行显示一个询盘
- 显示所有关键信息
- 跟进状态（新询盘/已联系/已报价/已成交/已放弃），可点击切换
- 删除按钮
- 按紧急程度和提交时间排序（紧急的在前）

【数据】
- 用 localStorage 保存
- 提交时间自动记录

请生成完整代码。

请帮我美化询盘整理器，并添加响应式支持：

【设计系统】
- 主色：深蓝色（#1e3a5f）
- 强调色：橙色（#ff6b35）用于按钮和重要元素
- 背景：浅灰（#f8f9fa）
- 卡片：白色，圆角 12px，阴影
- 字体：系统默认，标题加粗

【响应式规则】
- 桌面（>768px）：左右分栏，左侧固定宽度 380px
- 平板（768px）：左右分栏，比例 1:1
- 手机（<768px）：上下堆叠，表单在上，列表在下

【交互优化】
- 提交按钮有 loading 状态
- 新询盘添加时有淡入动画
- 状态切换时有颜色过渡动画
- 删除前有确认弹窗（用自定义样式，不用浏览器默认 alert）

请生成完整的 CSS 和 JS 修改。

请帮我测试以下代码，找出所有可能的问题：

【测试维度】
1. 功能测试：每个按钮、每个输入框是否正常工作？
2. 边界测试：输入为空、超长文本、特殊字符时会怎样？
3. 数据测试：localStorage 满了会怎样？数据格式变了会怎样？
4. 兼容性：在 Safari、Chrome、手机上是否正常？
5. 体验问题：有没有让用户困惑的地方？

【代码】
[粘贴你的完整代码]

请给出：
1. 发现的问题清单（严重程度：高/中/低）
2. 每个问题的修复建议
3. 我没有考虑到的边界情况

请给我一份"部署到 GitHub Pages"的完整步骤清单：

前置条件：
- 已有 GitHub 账号
- 代码已 push 到 GitHub 仓库

要求：
1. 一步一步的操作指南（配截图说明文字）
2. 如何设置自定义域名（可选）
3. 部署后怎么更新（改了代码怎么重新部署）
4. 常见错误和解决（比如 404、样式不加载）
5. 怎么让百度/Google 收录（SEO 基础）

用中文，面向非技术人员。

我正在收集用户反馈，请帮我设计一份"产品反馈问卷"，针对我的询盘整理器工具：

要求：
1. 总共 5-7 个问题
2. 混合选择题和开放式问题
3. 问题要具体，能指导后续改进
4. 语气友好，让用户愿意回答
5. 包含 NPS 评分（0-10分，你有多大可能推荐这个工具给朋友）

输出格式：可以直接复制到问卷星/腾讯问卷的文本。

根据用户反馈，请帮我给询盘整理器添加以下改进：

【反馈1】[描述反馈，比如"手机上看列表太窄了，希望全屏显示"]
【实现方案】
[你的方案或让 AI 建议]

【反馈2】[描述反馈]
【实现方案】

【反馈3】[描述反馈]
【实现方案】

要求：
1. 每个改进单独实现、单独测试
2. 保持代码整洁，不要引入新的 bug
3. 完成后给出更新日志（changelog）

【当前代码】
[粘贴代码]

我完成了30天AI辅助编程学习，请帮我整理一份"技能地图"：

【我学会的技能】（请补充我可能遗漏的）
- HTML 结构搭建
- CSS 样式美化
- Flexbox 布局
- JavaScript 基础（变量、函数、条件）
- DOM 操作
- 事件处理
- API 调用（fetch）
- localStorage 数据持久化
- Git 版本控制
- GitHub 托管
- Claude Code 使用
- 响应式设计
- 表单验证
- Debug 调试
- 代码审查

【请帮我】
1. 把这些技能按"基础→进阶→高级"分层
2. 画出技能之间的依赖关系（比如先学 HTML 才能学 CSS）
3. 推荐接下来 3 个适合我做的项目（结合外贸工作场景）
4. 给出从"入门"到"能独立做项目"的完整路径图

用中文，格式清晰。

我已完成30天AI辅助编程入门。请给我一份"接下来 90 天的进阶路线图"：

【方向选择】（我对外贸工作自动化感兴趣）

要求：
1. 按月划分目标（第2个月、第3个月）
2. 每个月推荐 2-3 个具体项目
3. 每个项目说明：做什么、学什么新技术、预计难度
4. 推荐学习资源（中文优先，免费优先）
5. 最后给一个"终极愿景"：坚持半年后我能达到什么水平？

进阶方向参考：
- MCP / API 集成
- 自动化工作流
- 简单的后端（Node.js/数据库）
- 小程序开发
- AI Agent 构建

用中文，语气鼓励。

【Claude Code MCP 配置】

在 ~/.claude/settings.json 中添加：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "你的token"
      }
    }
  }
}

常见 MCP Server：
- github-mcp：读写 issues、PR、comment
- postgres-mcp / sqlite-mcp：查询数据库
- puppeteer-mcp / playwright-mcp：控制浏览器做测试
- filesystem-mcp：更精细的文件操作
- slack-mcp：发 Slack 消息

配置后重启 Claude Code，输入"你能访问 GitHub 吗？"测试。

【创建自定义 Skill：代码审查】

1. 确定要封装的工作流：每次写完功能要做代码审查
2. 写 SKILL.md（放在 ~/.claude/skills/ 或项目 .claude/skills/）：

# Code Review Skill

## 触发条件
当用户说 "review this"、"审阅这个"、"check this code"

## 执行流程
1. 读取指定文件或 diff
2. 检查：命名规范、错误处理、安全问题、性能隐患
3. 输出：问题列表（按严重程度排序）+ 改进建议

## 输出格式
用 Markdown 列表，每条包含：问题描述、影响、建议修改方式

## 示例
输入：review this → 加载此 Skill → 执行审查流程 → 输出报告