Claude Code 是什么？和 Claude 网页版有什么区别？

请用简单的话解释，假设我是第一次接触 AI 工具。告诉我：
1. Claude Code 能做什么网页版做不到的事？
2. 为什么程序员喜欢用 Claude Code？
3. 我不写代码，Claude Code 对我有什么用？
4. 安装 Claude Code 需要什么条件？

AI超级实习生思维

【核心认知：AI 是超级实习生】

特点：
- 学历逆天：读过整个互联网，知识广博
- 干活极快：你说一句话，它几秒交活
- 但缺乏经验：会犯蠢错，会"幻觉"（一本正经胡说八道）
- 不背锅：AI 写的代码出 bug，责任在你

你和 AI 的关系：
- 你负责：想清楚要做什么、检查交付质量、做最终决定
- AI 负责：干活、出方案、处理细节

作业：列出你目前最想让这个"实习生"帮你做的 3 件事。

📷

实操截图占位

Day 0 · 建议放实际操作界面截图
尺寸：1200×800 或 16:10

Key Takeaway

Claude Code 的核心价值不是"聊天更聪明"，而是"直接帮你做事"——写文件、改代码、运行命令。把它当实习生管理，你当老板，它干活。

为什么这样做更好？

网页版 AI 每次都要复制粘贴，Claude Code 直接操作文件，效率提升 10 倍。更重要的是思维转变：从"搜索答案"到"分配任务"。

Claude 全家桶速览

• Claude.ai：网页版，通用任务、研究、写作、文件创建
• Claude Code：终端 AI 编程助手，直接操作代码库、运行命令、管理项目
• Claude Cowork：桌面端，复杂多步骤任务、研究报告、文档生成
• Claude for Excel/PowerPoint：表格分析和幻灯片创建
• Claude for Chrome：网页研究、邮件管理、浏览器自动化

安装 Claude Code：VSCode 插件 + CLI

3 分钟装好，开启你的 AI 工作流。

Claude Code 有两种安装方式：VSCode 插件（图形界面，适合新手）和命令行工具 CLI（更强大，适合进阶）。今天先装插件版，5 分钟就能用。

💡 大白话：VSCode 插件就像给手机装 App——点几下就装好，有按钮有菜单。CLI 像写短信发指令——需要记命令，但功能更全面。

"VSCode 插件是 Claude Code 的"新手村"，装好就能开始体验 AI 直接编辑文件。"

今天的一步动作

安装 VSCode + Claude Code 插件，完成第一次"Hello World"对话。

下载安装 VSCode：code.visualstudio.com，下载对应系统版本，全程"下一步"。

打开 VSCode，点击左侧 Extensions（四个方块图标），搜索 "Claude Code"。

找到 Anthropic 官方的 Claude Code 扩展，点击 Install。

安装后左侧会出现 Claude 图标（紫色菱形），点击它，按提示登录 Anthropic 账号。

继续安装三个必备插件（见下方插件清单）：Live Server、Prettier、GitLens。

在 Claude Code 面板输入 "你好，我是做外贸的，今天第一次用 Claude Code"，开始对话。

测试：让 Claude Code 创建一个 hello.txt 文件，确认它能直接操作文件。

安装检查清单

【Claude Code 安装步骤】

1. 安装 VSCode：https://code.visualstudio.com/
2. 打开 VSCode → 左侧 Extensions → 搜索 "Claude Code"
3. 安装 Anthropic 官方扩展
4. 点击左侧 Claude 图标 → 登录账号
5. 输入测试消息确认连接正常

【安装后测试】
在 Claude Code 面板输入：
"请创建一个 hello.txt 文件，里面写一句问候语。"

如果 Claude 成功创建文件，说明安装完成。

三个必备插件

【VSCode 必备插件清单】

1️⃣ Live Server（作者：Ritwick Dey）
   作用：右键 HTML 文件 → "Open with Live Server"，自动在浏览器打开，保存文件后自动刷新
   为什么重要：不用手动刷新浏览器，实时看到修改效果

2️⃣ Prettier - Code: formatter（作者：Prettier）
   作用：自动格式化代码，让代码整齐美观
   为什么重要：AI 生成的代码有时格式混乱，Prettier 一键整理
   设置：安装后按 Ctrl/Cmd+Shift+P → "Format Document" 试试

3️⃣ GitLens（作者：GitKraken）
   作用：在代码旁边显示谁改了什么、什么时候改的
   为什么重要：以后团队协作或自己回溯修改时很有用

安装方法：Extensions 面板搜索名称 → Install，全部免费。

📷

实操截图占位

Day 1 · 建议放实际操作界面截图
尺寸：1200×800 或 16:10

Key Takeaway

VSCode + Claude Code 插件 + Live Server + Prettier = 最友好的入门组合。装好就能让 AI 直接帮你创建、编辑、预览文件。

为什么这样做更好？

不用记命令，不用开终端，有图形界面和按钮，对非程序员最友好。Live Server 让你保存即刷新，Prettier 让代码始终整洁。

Claude Code 两种形态 + 插件生态

• VSCode 插件：图形界面，点按钮操作，适合新手和非程序员
• CLI 命令行：终端里输入命令，功能更全面，适合进阶用户
• Live Server：保存文件自动刷新浏览器，实时预览
• Prettier：自动格式化代码，保持整洁
• GitLens：代码历史追踪，团队协作必备

第一次实战：让 Claude Code 创建你的第一个网页

不写一行代码，3 分钟做出一个能打开的网页。

Claude Code 最震撼的能力：你描述需求，它直接生成文件。今天让它帮你创建一个简单的 HTML 网页——不需要懂代码，只需要会说话。

💡 大白话：就像你跟装修师傅说"我要一个白色墙面、放张桌子、挂幅画"——你不用会刷墙，描述清楚就行。Claude Code 就是那个师傅。

"描述需求 → Claude Code 生成代码 → 浏览器打开看效果。"

今天的一步动作

让 Claude Code 创建一个"公司产品展示页"，然后在浏览器里打开它。

在 VSCode 里打开一个文件夹（桌面新建 "my-first-site"）。

在 Claude Code 面板复制发送下面的 prompt。

观察 Claude 如何创建 index.html 文件——你会看到文件出现在左侧文件栏。

右键点击 index.html → "Open with Live Server"（需先安装 Live Server 插件）。

浏览器自动打开，你应该能看到你的第一个网页。截图保存！

第一个网页 prompt

请帮我创建一个公司产品展示页，保存为 index.html。

内容要求：
- 大标题：公司名（写"XX Trading Co., Ltd"占位）
- 副标题：主营产品一行描述，如"专注工业配件出口"
- 一段公司介绍（3-4句话，突出优势：品质、交期、服务）
- 3 个核心产品标签（圆角小按钮样式，如"五金配件 / 电子元件 / 包装材料"）
- 底部：公司邮箱 + 电话占位

设计要求：
- 深色背景（#0f0f0f），浅色文字
- 内容居中，最大宽度 600px
- 有高级感，字体大小适中
- 在手机上也好看

请生成完整的 HTML 代码，并解释你用了哪些技术。

Key Takeaway

Claude Code 让"做网页"从编程技能变成"描述能力"——你说清楚要什么，它帮你实现。

为什么这样做更好？

传统方式学做网页要先学 HTML/CSS，至少要几周。用 Claude Code，今天 3 分钟就能看到成果。

HTML 一句话理解

• HTML = 网页的骨架（标题、段落、图片放在哪里）
• CSS = 网页的颜值（颜色、字体、大小、位置）
• JS = 网页的交互（点击、动画、表单验证）
• Claude Code 帮你写这三样，你负责描述需求

Prompt 三要素：背景 + 任务 + 规则

给 Claude Code 下指令，和给实习生布置任务是一样的。

很多人跟 AI 说话太模糊："帮我做个好看点的页面"。结果 AI 做的和你想的完全不一样。问题不是 AI 笨，是你的指令不够具体。Prompt 三要素（背景+任务+规则）是基础，更高级的是 SPEC 思维——像给实习生下任务书一样，精确到可验收。

💡 大白话：你跟厨师说"做顿好吃的"，他可能做川菜你做不了。但你说"做一道不辣的清蒸鱼，给小孩吃"，结果就准了。SPEC 就是点菜时的详细要求——主料、口味、忌口、上菜时间。

"模糊的指令让 AI 猜，具体的指令让 AI 干。SPEC 思维让 AI 一次做对。"

今天的一步动作

用"三要素版"prompt 让 Claude Code 修改昨天的网页，对比效果。学习 SPEC 写作。

理解"歧义是最贵的 Bug"：需求里的每一个歧义，最终都会变成返工成本。

打开昨天的 index.html，看看当前效果。

在 Claude Code 面板用"模糊版"提问："把页面改好看一点"。观察 AI 的猜测。

再用"三要素版"提问（复制下面的 prompt）。

对比两次修改结果——第二次一定更贴近你的需求。

学习 SPEC 五要素：产品定位、核心功能、交互逻辑、视觉风格、技术红线。

模糊版（对比用）

把页面改好看一点。

三要素版（正式用）

【背景】这是我的公司介绍页，用于给客户展示专业形象。

【任务】修改 index.html 的设计，让它看起来更专业、更有科技感。

【规则】
1. 保持深色背景，但加入微妙的渐变效果（从 #0f0f0f 到 #1a1a2e）
2. 标题用更大的字号（48px），加细字重（font-weight: 300）
3. 核心优势标签用圆角 pill 形状，hover 时有颜色变化
4. 添加一个"Request a Quote"按钮，橙色渐变，点击弹出询盘表单
5. 整体加淡入动画（页面加载时内容逐渐显示）
6. 不要改变文字内容

请直接修改 index.html 文件。

SPEC五要素检查清单

【写任务书（SPEC）的五个要素】

1. 产品定位：这是什么？给谁用？解决什么问题？
2. 核心功能：要做什么？有几个功能点？
3. 交互逻辑：用户怎么操作？流程是什么？
4. 视觉风格：什么风格？什么配色？有什么动效？
5. 技术红线：不做什么？不调什么 API？数据存在哪里？

【反例】"做一个改变图片大小的网页"→ 歧义：裁剪？压缩？改分辨率？
【正例】"做一个网页，用户上传图片后，可以拖动裁剪框选择区域，点击确认后下载裁剪好的图片"→ 零歧义

记住：歧义是最贵的 Bug。花 5 分钟写清楚需求，省 30 分钟来回修改。

Key Takeaway

背景让 AI 理解你的场景，任务让 AI 知道做什么，规则让 AI 知道边界。三要素是基础，SPEC 五要素是进阶。核心原则：歧义是最贵的 Bug。

为什么这样做更好？

模糊的"改好看"没有标准，AI 只能按平均值做。SPEC 思维让你像管理者一样给 AI 下任务书，一次做对，减少返工。

Prompt 三要素 → SPEC 五要素

• 三要素：背景（我是谁）+ 任务（做什么）+ 规则（边界条件）
• SPEC五要素：定位 + 功能 + 交互 + 视觉 + 红线
• 核心原则：歧义是最贵的 Bug，返工是最大的浪费
• 进阶技巧：和 AI 讨论需求，让 AI 帮你完善 SPEC

Claude Code 核心命令速查

从"聊天"升级到"精准控制"。

Claude Code 除了自然语言对话，还有一些专门的命令让你更精准地控制它。/edit 修改文件、/test 生成测试、/debug 找 bug、/explain 解释代码——掌握这几个，效率翻倍。

💡 大白话：平时你跟助理说"帮我把那份文件改一下"。但有时候你需要精确指令："把第三段的数字改成 2025"——命令模式就是这种精确指令。

"命令模式让你从"问答"变成"指挥"，AI 直接执行操作。"

今天的一步动作

练习用 /edit 命令让 Claude Code 精准修改网页中的某个元素。

在 Claude Code 面板输入："/help"，看看有哪些可用命令。

重点学习六个高频命令：/edit（修改代码）、/explain（解释代码）、/debug（调试）、/clear（清空上下文）、/compact（压缩对话）、/plan（规划模式）。

选中你的 index.html 里的一段代码，输入："/explain 这段代码是做什么的？"

尝试 /edit："/edit 把标题颜色从白色改成金色 #FFD700""

长对话后输入 /cost 查看 token 消耗，体验 /compact 压缩上下文。

观察 Claude 如何定位代码、如何应用修改。

命令速查表

【Claude Code 常用命令】

/help                → 显示所有可用命令
/edit <描述>         → 精准修改指定代码
/explain <代码>      → 解释这段代码的作用
/test <功能>         → 为指定功能生成测试
/debug <问题描述>    → 诊断并修复问题
/find <关键词>       → 在项目中搜索
/shell <命令>        → 运行终端命令（谨慎使用）
/clear               → 清空当前对话上下文，从零开始
/compact             → 压缩对话历史，保留关键内容（长对话后用）
/cost                → 查看当前对话消耗的 token 和费用
/model               → 切换使用的模型
/plan                → 进入规划模式，Claude Code 只讨论不执行
/git                 → 执行 git 命令或生成 commit message

【练习】
1. /explain index.html 中 <style> 标签的作用
2. /edit 给所有按钮添加 hover 效果
3. /find 项目中所有颜色值

Key Takeaway

/edit 是最常用的命令——描述你要改什么，AI 直接改代码，不需要你手动找位置。

为什么这样做更好？

手动改代码容易找错位置，尤其是大文件。/edit 让 AI 精准定位、一键修改。

命令 vs 聊天 vs 规划模式

• 聊天模式：探索性提问、不确定要改什么、需要讨论方案
• 命令模式：明确知道要改什么、需要精准定位、重复性操作
• /plan 规划模式：大型重构前确认方案，Claude 只分析不执行任何操作
• /edit 适合：改颜色、改文字、加样式、调整布局
• /explain 适合：学习代码、理解别人的项目
• /compact 适合：长对话后压缩历史，释放上下文空间

Claude Projects + Artifacts：内容工厂实战

不只聊天，用 Projects 和 Artifacts 建立你的 AI 内容工厂。

Claude Projects 像一个训练好的专属员工——你写好 Instructions（SOP手册），上传参考文件，它每次输出都符合你的标准。Artifacts 则能生成可预览、可下载、可发布的独立文件（如 HTML 落地页）。两者组合 = 一个 24 小时在线的内容工厂。

💡 大白话：普通聊天像每次找新临时工——每次都要重新交代背景和要求。Projects 像培养了一个长期助理——他熟悉你的喜好、记得你的规则、看过你的参考资料。Artifacts 像助理直接交给你一份排版好的成品文件。

"Projects = 专属员工（记住偏好），Artifacts = 成品交付（可预览可发布）。"

今天的一步动作

在 Claude.ai 创建一个 Project，写一份 Instructions，让它帮你生成一个产品落地页。

打开 Claude.ai → 侧边栏 → Projects → Create Project。

命名项目："产品落地页生成器"。

在 Instructions 中写入：你的行业、产品类型、设计风格偏好、CTA 链接、输出格式要求。

上传 1-2 个你认为写得好的产品描述作为参考文件。

在 Project 聊天中输入："帮我生成一个[你的产品]落地页 HTML"，观察 Artifacts 输出。

点击 Artifacts 右上角的下载按钮，保存 HTML 文件到本地。

用 Live Server 打开，预览效果。

Project Instructions 模板

【Product Landing Page Generator】

## 角色
你是专业的外贸产品文案和前端设计师，擅长制作高转化率的产品落地页。

## 背景
我是深圳 B2B 出口商，主营 [你的产品类别，如工业配件/电子元器件/机械设备]。客户是欧美批发商。

## 输出格式
1. 每次生成一个完整的 HTML 落地页
2. 使用 Artifacts 输出，确保可预览
3. 页面结构：Hero → 痛点 → 解决方案 → 社会证明 → CTA

## 设计风格
- 深色背景（#0a0a0a），现代科技感
- 主色：深蓝 #1e3a5f，强调色：橙 #ff6b35
- 字体：系统默认，标题加粗
- 响应式，手机电脑都能看

## CTA 信息
- 主按钮："获取报价"
- 邮箱：contact@example.com

## 规则
- 每次生成前，先确认产品信息是否完整
- 使用中文生成内容，但保留英文产品名方便国际化
- 图片使用 placeholder 占位

生成落地页 prompt

请帮我生成一个产品落地页（Landing Page）：

【产品信息】
- 产品名：[你的产品名]
- 核心卖点：[卖点1 / 卖点2 / 卖点3 / 卖点4]
- 目标受众：[目标客户群体]
- MOQ：100 units（Sample order available）

【页面结构要求】
1. Hero 区：大标题 + 产品图占位 + CTA
2. 痛点区：3 个用户痛点
3. 解决方案：4 个核心功能
4. 社会证明：3 条客户评价占位
5. FAQ：5 个常见问题
6. 底部 CTA

请用 Artifacts 生成完整的 HTML 代码。

Key Takeaway

Projects + Artifacts 的核心价值是"标准化产出"——你配置一次 Instructions，后续每次输入产品信息，就能得到风格一致的落地页。这是"内容工厂"的雏形。

为什么这样做更好？

普通聊天每次都要重新交代背景。Projects 让 AI 记住你的规则，Artifacts 让产出可直接使用——从"聊天"升级到"生产线"。

Projects vs 普通聊天

• 普通聊天：每次重新交代背景，输出风格不稳定
• Projects：持久化 Instructions + 参考文件 + Memory，输出一致
• Artifacts：生成可预览、可下载、可发布的独立文件
• 组合使用：Project 定标准 → 聊天输入需求 → Artifacts 交成品

实战：生成一个完整的公司介绍页

综合运用本周所学，让 Claude Code 帮你做一个能发给客户的页面。

今天综合运用安装、prompt 三要素、命令、插件，让 Claude Code 生成一个完整的公司介绍页面。这个页面可以直接发给客户看，或者作为你的"电子名片"。

💡 大白话：就像学完炒菜、切菜、调味，今天做一桌完整的菜——公司介绍页就是你的"招牌菜"。

"一个好的公司介绍页 = 专业形象 + 清晰信息 + 联系方式。"

今天的一步动作

用 Claude Code 创建一个公司介绍页，包含：公司名、产品、优势、联系方式。

在 VSCode 里新建一个文件夹 "company-page"。

在 Claude Code 面板用三要素格式发送需求（复制下面的 prompt）。

Claude 生成后，用 Live Server 预览效果。

不满意的地方用 /edit 精准修改。

截图保存，这就是你的第一个"作品"。

公司介绍页 prompt

【背景】我是深圳 B2B 出口商，主营 [你的产品类别]，客户是 [目标市场] 批发商。

【任务】帮我创建一个公司介绍页，保存为 index.html。

【规则】
1. 页面结构：
   - 顶部：公司名大字 + 一句话 slogan
   - 中间：3 个核心优势（每个配图标+说明）
   - 下方：3 个主要产品（图片占位区+名称+简介）
   - 底部：联系邮箱 + WhatsApp + 地址
2. 设计风格：
   - 深色背景，现代科技感
   - 主色：深蓝 #1e3a5f，强调色：橙 #ff6b35
   - 内容最大宽度 900px，居中
   - 有适当的动画效果（淡入、hover）
3. 响应式：手机和电脑都能正常显示

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

📷

实操截图占位

Day 6 · 建议放实际操作界面截图
尺寸：1200×800 或 16:10

Key Takeaway

项目驱动学习是最好的方式。你今天做了一个真正能发给客户看的页面，比看 10 个教程都有效。

为什么这样做更好？

传统课程第一周还在讲理论。你用 Claude Code 第一周就有了一个能展示的作品。

公司介绍页必备元素

• 你是谁：公司名 + 一句话定位
• 你做什么：核心产品/服务
• 为什么选你：3 个差异化优势
• 怎么联系你：邮箱、电话、社媒

休息日：回顾你的一周

你这一周已经让 AI 帮你做了两个网页。

第 2 周

建站实战：从页面到网站

HTML/CSS核心、产品页/表单/交互动画、响应式设计、多页面结构。

理解 HTML：网页的积木

看懂 Claude Code 给你写的代码，学会"搭积木"思维。

HTML 是网页的积木——每个标签就是一块积木（标题积木、段落积木、图片积木、按钮积木）。你不需要记住所有积木的名字，只需要理解"积木可以套在一起"（嵌套），以及"每块积木有它的功能"。这就是"搭积木思维"：复杂网页 = 简单积木的组合。Claude Code 是你的积木工厂，你说要什么，它切出对应的积木。

💡 大白话：HTML 就像乐高积木。单看一块积木很简单（一个方块、一个长条），但把它们按规则叠在一起，就能搭出城堡、飞船、机器人。复杂的网页也是这么搭出来的——大容器套小容器，小容器里放文字和图片。

"网页 = 积木的组合。复杂来自简单元素的叠加，不是魔法。"

今天的一步动作

让 Claude Code 解释你公司介绍页的 HTML "积木结构"，然后自己换几块"积木"试试。

打开你的公司介绍页 index.html。

在 Claude Code 面板输入："/explain 这个 HTML 文件的整体结构，用乐高积木做比喻让我理解""

重点理解这几个"积木块"：html（最外包装）、head（说明书）、body（实体内容）、div（大盒子）、h1（大标题积木）、p（段落积木）、a（链接积木）、img（图片积木）。

自己尝试修改网页里的文字内容（比如把公司名改成别的），保存后看效果——这就像换了一块积木的颜色。

让 Claude Code 给你的页面加一张图片（用网上的图片链接）——加一块新积木。

思考：搭积木思维的核心是"组合"而不是"从零创造"。你做网页时，也是在组合 Claude Code 给你的积木。

HTML 积木结构学习

我正在学习 HTML 的"搭积木"思维。请帮我：

1. 用乐高积木做比喻，解释这些"积木块"的作用：
   - <html> = 整个积木作品的底板
   - <head> = 贴在底板背面的说明书（用户看不到）
   - <body> = 底板上面实际搭出来的作品
   - <div> = 一个大收纳盒，可以把小积木装在一起
   - <h1> = 最大的标题积木
   - <p> = 一行文字积木
   - <a> = 带弹簧的积木，按一下跳到别的地方
   - <img> = 贴画积木，直接贴一张图

2. 解释"嵌套"——为什么大盒子里可以装小盒子

3. 给我的 index.html 添加一个图片和一个超链接

注意：我要的是搭积木思维的教学，不只是代码。

积木思维：从简单到复杂

【搭积木思维】

核心认知：
- 复杂网页 ≠ 复杂代码
- 复杂网页 = 简单积木 × 大量组合

示例：
一个产品页 =
  导航积木（logo + 菜单链接）
  + Hero积木（大标题 + 副标题 + 按钮）
  + 产品卡片积木 × 6（图 + 名 + 价）
  + 页脚积木（联系信息 + 版权）

你不需要会造积木，只需要：
1. 知道有哪些积木类型（让 Claude Code 告诉你）
2. 知道怎么组合它们（描述你的布局需求）
3. 知道怎么换颜色和大小（CSS 调样式）

Claude Code = 积木工厂 + 组装助手

Key Takeaway

HTML 的核心是"搭积木思维"——大盒子套小盒子，简单元素组合成复杂页面。你不需要会造积木，只需要会描述"我要搭什么"。

为什么这样做更好？

传统教学让你背 100 个标签。积木思维让你理解"网页 = 组合"——这才是本质。掌握这个思维，任何新技术你都能快速上手，因为都是在"搭积木"。

搭积木思维：从 HTML 到一切

• HTML 积木：<div>大盒子、<h1>标题、<p>段落、<a>链接、<img>图片、<button>按钮
• 嵌套规则：大积木可以装小积木，小积木不能装大积木
• 组合逻辑：复杂页面 = 几种基础积木的重复排列
• 通用思维：Next.js组件、小程序页面、App界面——本质都是搭积木
• 你的角色：设计师（决定搭什么）+ 监工（检查搭得对不对），不是工人（亲自搭）

理解 CSS：让页面有颜值

学会和 Claude Code 描述"好看"的标准。

CSS 是网页的化妆师——决定颜色、字体、大小、间距、位置。你不需要记住所有属性，只需要知道"我能描述什么"，然后让 Claude Code 实现。

💡 大白话：HTML 是素颜的人，CSS 是化妆和穿搭。同一个人，化妆前后完全不同。

"CSS 的核心就三个：颜色、大小、位置。"

今天的一步动作

让 Claude Code 给你的公司介绍页换一套配色方案，然后自己改一个颜色值试试。

问 Claude Code："请给我的公司介绍页换一套配色，主色用深绿色，强调色用金色，要有高级感。"

观察 Claude 如何添加 CSS（可能是 style 标签内联，也可能是单独 .css 文件）。

尝试修改一个颜色值（比如把 gold 改成 red），保存后看效果。

让 Claude Code 教你 CSS 的盒模型概念（margin、padding、border）。

学会用浏览器的"检查元素"功能（右键 → 检查），实时调试样式。

CSS 美化指令

请帮我给公司介绍页添加/修改 CSS 样式，要求：

1. 整体背景用深绿色渐变（#0a1628 → #1a3a2f）
2. 标题用金色（#FFD700），大字号（42px），字重 300
3. 正文用浅灰色（#e0e0e0），行高 1.6 倍
4. 内容区域限制最大宽度 800px，居中
5. 卡片式布局：白色半透明背景、圆角 16px、轻微阴影
6. 所有按钮用金色边框，hover 时背景变金色、文字变深
7. 添加过渡动画（transition: all 0.3s ease）

请直接修改 index.html 中的样式部分。

📷

实操截图占位

Day 9 · 建议放实际操作界面截图
尺寸：1200×800 或 16:10

Key Takeaway

CSS 的核心是"属性-值"对应关系。颜色（color/background）、大小（width/height/font-size）、位置（margin/padding/display）。

为什么这样做更好？

传统教学先讲 CSS 选择器优先级、继承、层叠——对新人是灾难。你直接做出好看的效果，再慢慢理解原理。

CSS 核心三板斧

• 颜色：color（文字颜色）、background（背景色）、border-color（边框色）
• 大小：width/height（宽高）、font-size（字号）、padding/margin（间距）
• 位置：display（显示方式）、position（定位）、flex（弹性布局）
• 效果：border-radius（圆角）、box-shadow（阴影）、transition（过渡动画）

实战：做一个产品展示页

从公司介绍升级到产品详情，让页面更有商业价值。

公司介绍页是"我是谁"，产品展示页是"我卖什么"。今天让 Claude Code 帮你做一个产品详情页——包含产品图片、参数、卖点、价格、行动按钮。这个页面可以直接发给客户询价。

💡 大白话：公司介绍页像餐厅门面，产品页像菜单——客户看了菜单才知道点什么。

"一个好的产品页 = 清晰的产品信息 + 突出的卖点 + 明确的行动号召。"

今天的一步动作

用 Claude Code 创建一个产品详情页，选一个你真实在卖的产品。

选一个你正在卖的产品，整理出：产品名、核心参数、3 个卖点、价格区间。

在 Claude Code 面板用三要素格式发送需求。

Claude 生成后，用 Live Server 预览。

检查：信息是否完整？卖点是否突出？有没有明显的"询盘"按钮？

用 /edit 调整不满意的地方。

产品详情页 prompt

【背景】我要做一个产品详情页，发给客户询价用。产品是 [你的产品，如工业不锈钢球阀 / 包装袋 / 电子元件]。

【任务】创建 product.html，包含：
1. 产品大图区域（图片占位，用占位图服务如 via.placeholder.com）
2. 产品名称 + 一句话卖点（如"ANSI认证，适用于石油天然气管道"）
3. 3 个核心参数（材质等级、压力等级、认证标准）
4. 5 个 Bullet Point 卖点
5. 价格区间（标注"起批量 500 件"）
6. 两个 CTA 按钮："索取样品" + "获取报价"
7. 底部：公司名 + 联系方式

【规则】
- 设计风格：简约现代，白底黑字，橙色强调
- 布局：单栏长页，从上到下信息流
- 字体：标题用粗体，正文用常规字重
- 有适当的间距和留白
- 响应式：手机上也好看

请生成完整代码。

Key Takeaway

产品页的核心是"信息层级"——最重要的信息（产品名+卖点）最显眼，次要信息（详细参数）次之。

为什么这样做更好？

一个专业的产品页，比发 10 封邮件介绍产品更有效。客户一眼就能看到关键信息。

产品页转化 checklist

• 首屏能看到产品名 + 主图 + 核心卖点
• 有明确的价格或价格区间
• 有清晰的行动按钮（"获取报价""索取样品"）
• 有社会证明（客户评价、认证标志、合作品牌）
• 联系方式在底部随时可见

实战：做一个询价表单页

让客户能直接给你发询盘，而不只是看页面。

产品页是"展示"，表单页是"互动"。今天做一个客户询价表单——客户填完姓名、公司、邮箱、感兴趣的产品、数量，点击提交。虽然还不能真的发邮件（需要后端），但你可以看到表单的结构和样式。

💡 大白话：产品页像商店橱窗，表单页像收银台——客户看了橱窗里的东西，到收银台告诉你他要买什么。

"表单是网页和用户的"对话接口"——用户输入信息，你接收信息。"

今天的一步动作

让 Claude Code 创建一个询价表单页，包含：姓名、公司、邮箱、产品、数量、留言。

在 Claude Code 面板发送需求（复制下面的 prompt）。

Claude 生成后，用 Live Server 打开，填写测试数据。

检查：表单是否美观？必填项是否清晰？提交按钮是否醒目？

了解：form 标签、input 标签、label 标签的基本作用。

（进阶）让 Claude Code 添加表单验证：邮箱格式检查、必填项提示。

询价表单 prompt

【任务】创建一个询价表单页 inquiry.html，用于收集客户询盘信息。

表单字段：
1. 姓名（必填）
2. 公司名称（必填）
3. 邮箱（必填，需要格式验证）
4. 感兴趣的产品（下拉选择：[产品A]/[产品B]/[产品C]/其他）
5. 预计采购量（下拉选择：<1000件/1000-5000件/5000-10000件/>10000件）
6. 留言（多行文本框，可选）
7. 提交按钮

【设计要求】
- 整体深色背景，表单卡片用白色半透明
- 输入框聚焦时有橙色边框高亮
- 必填项用红色星号标注
- 提交按钮用橙色渐变，醒目
- 表单验证：邮箱格式错误时显示红色提示
- 响应式布局

请生成完整代码。

Key Takeaway

表单是 B2B 网站的核心转化组件。一个好的表单能显著提升询盘率。

为什么这样做更好？

没有表单的网站只能"展示"，有表单的网站才能"收集线索"。

表单设计原则

• 字段越少越好——每多一个字段，转化率下降约 10%
• 必填项明确标注，选填项可以去掉标记
• 输入框要有 placeholder 提示（如"example@company.com"）
• 错误提示要具体（"邮箱格式不正确"而不是"输入有误"）

添加交互：按钮、动画、反馈

让页面从"静态展示"变成"有生命力"。

静态页面像海报，只能看。有交互的页面像 APP，能响应用户的操作。今天用 Claude Code 给你的页面添加一些简单的交互效果：按钮点击反馈、滚动动画、hover 效果。

💡 大白话：静态页面像博物馆的画，只能看。交互页面像游乐场的设施，你能按按钮、拉杠杆，它有反应。

"交互 = 用户做某事 → 页面有反应。"

今天的一步动作

让 Claude Code 给你的产品页添加 3 个交互效果。

在 Claude Code 面板发送："给我的 product.html 添加以下交互效果"。

① 按钮点击时有缩放效果（scale 0.95 → 1）

② 页面滚动时，内容淡入显示（scroll reveal）

③ 鼠标悬停在产品卡片上时，卡片轻微上浮并加阴影

观察 Claude 如何在 HTML 中嵌入 JavaScript 实现这些效果。

不需要理解 JS 代码，只需要知道"这段代码实现了什么效果"。

添加交互 prompt

请给我的 product.html 添加以下交互效果：

1. 【按钮点击反馈】
   所有按钮点击时，瞬间缩小到 0.95 倍，然后弹回 1 倍
   过渡时间 0.15 秒

2. 【滚动淡入】
   页面滚动到某个元素时，该元素从下方 30px 淡入显示
   淡入时间 0.6 秒，有轻微延迟错开（stagger）

3. 【卡片 Hover】
   产品卡片鼠标悬停时：
   - 向上移动 8px
   - 阴影加深
   - 过渡时间 0.3 秒

4. 【加载动画】
   页面加载时，所有内容依次淡入，不是一次性全部出现

请用内联 <script> 标签添加 JavaScript 实现，并告诉我每段代码是做什么的。

Key Takeaway

交互效果不需要你自己写代码——描述你要什么效果，Claude Code 帮你实现。

为什么这样做更好？

有交互动画的页面，用户停留时间平均增加 40%，转化率提升 20%。

常见交互效果清单

• Hover 效果：鼠标放上去变色、放大、上浮
• 点击反馈：按钮按下时缩小、变色
• 滚动动画：内容进入视口时淡入、滑入
• 加载动画：骨架屏、转圈圈、进度条

响应式设计：手机电脑都能看

让你的页面在任何设备上都好看。

响应式设计 = 一个网页自动适应不同屏幕大小。在电脑上左右分栏，在手机上上下堆叠。今天让 Claude Code 帮你检查并优化页面的响应式表现。

💡 大白话：就像水倒入不同容器自动填满形状。响应式网页不是为每个设备做单独版本，而是一份代码适配所有屏幕。

"响应式 = 一套代码，适配所有设备。"

今天的一步动作

用手机打开你的产品页，记录问题，然后让 Claude Code 修复。

用手机浏览器打开你的产品页（或电脑按 F12 → 手机模式）。

记录问题：文字是否太小？按钮是否点不到？图片是否溢出？

在 Claude Code 面板描述问题，让它修复。

重点了解：@media 查询（根据屏幕宽度应用不同样式）。

测试三种宽度：桌面（>1024px）、平板（768px）、手机（<768px）。

响应式修复 prompt

请检查并优化我的 product.html 的响应式设计：

【当前问题】
1. 手机上文字太小，需要 16px 以上
2. 手机上按钮太窄，不容易点击（至少 44px 高）
3. 产品图片在手机上宽度溢出屏幕
4. 两列布局在手机上应该变成单列

【要求】
1. 添加 @media 查询，在屏幕宽度小于 768px 时应用手机样式
2. 手机上：
   - 所有内边距减小
   - 字号适当增大
   - 按钮全宽显示
   - 图片最大宽度 100%
3. 保持桌面端样式不变

请直接修改文件。

Key Takeaway

@media 查询是响应式的核心——"当屏幕宽度小于 X 时，应用这些样式"。

为什么这样做更好？

60% 的 B2B 采购决策始于移动设备搜索。如果你的页面在手机上不好看，你就丢了 60% 的潜在客户。

响应式断点标准

• 手机：< 768px，单列布局，大按钮，大字号
• 平板：768px - 1024px，可双列，适中字号
• 桌面：> 1024px，多列布局，充分利用宽屏
• 测试方法：Chrome F12 → 设备工具栏 → 切换尺寸

休息日：回顾你的页面作品

你已经有了公司介绍页、产品页、询价页三个作品。

第 3 周

完整网站 + 自动化上线

5页官网实战、SEO优化、Skills封装、小工具开发、GitHub Pages部署。

网站结构：多个页面怎么组织

从"散落的页面"到"有导航的网站"。

单独的 HTML 文件像散落的纸张，有导航和结构的才叫"网站"。今天学习如何把公司介绍页、产品页、询价页组织成一个完整的网站——有首页、导航栏、页脚，页面之间可以互相跳转。

💡 大白话：单独的页面像杂志的单页，网站像整本杂志——有封面、目录、内页、封底，还有页码让你翻。

"网站 = 多个页面 + 统一导航 + 一致的设计风格。"

今天的一步动作

用 Claude Code 创建一个多页面网站的框架，把之前的页面连接起来。

在 VSCode 里新建文件夹 "my-website"，把之前的 3 个 HTML 文件复制进去。

在 Claude Code 面板发送："帮我创建一个统一的首页 index.html，包含导航到其他三个页面的链接"。

让 Claude Code 给所有页面添加统一的导航栏和页脚。

检查：每个页面都能通过导航跳转到其他页面吗？

统一三个页面的配色和字体，让它们看起来是一个网站的。

网站框架 prompt

【背景】我已经有 3 个 HTML 页面：index.html（公司介绍）、product.html（产品）、inquiry.html（询价表单）。它们各自独立，没有统一结构。

【任务】帮我创建一个完整的多页面网站框架：

1. 新建首页 index.html（替代原来的公司介绍页作为入口）：
   - Hero 区域：大标题 + 一句话 + CTA 按钮
   - 服务/产品预览区（3 个卡片，点击跳到 product.html）
   - 公司简介精简版
   - 客户评价占位区
   - CTA：引导到 inquiry.html

2. 给所有页面添加统一的：
   - 顶部导航栏（Logo + 首页/产品/询价 链接）
   - 页脚（公司信息 + 联系方式 + 版权）

3. 统一设计风格：
   - 所有页面用相同的颜色、字体、按钮样式
   - 导航栏固定在顶部，滚动时始终可见
   - 当前页面在导航中高亮显示

请生成所有需要的新文件和修改建议。

Key Takeaway

网站的核心是"一致性"——导航、配色、字体、按钮样式在所有页面保持统一。

为什么这样做更好？

散落的页面像草稿，完整的网站像产品。客户看到一个完整的网站，对你的信任度会大幅提升。

网站必备结构

• 首页（index.html）：门面，引导用户深入
• 产品/服务页：详细介绍你卖什么
• 关于我们：建立信任
• 联系我们/询价：转化入口
• 统一的导航 + 页脚：让用户随时知道自己在哪、能去哪

实战：生成一个完整的公司官网

让 Claude Code 帮你做一个 5 页完整网站。

今天综合运用 Week 2-3 的所有技能，让 Claude Code 生成一个完整的 5 页公司官网：首页、关于我们、产品中心、新闻动态、联系我们。这是本周的核心项目。

💡 大白话：就像盖房子——昨天搭了框架，今天砌墙、装修、装门窗，做出一套能住的房子。

"一个完整的公司官网 = 专业形象 + 清晰信息 + 顺畅体验。"

今天的一步动作

用 Claude Code 生成一个 5 页公司官网，包含导航、内容、表单。

在 Claude Code 面板发送完整需求（复制下面的 prompt）。

Claude 会生成多个 HTML 文件，耐心等待。

用 Live Server 预览首页，检查导航是否正常。

逐个页面检查：内容、样式、链接是否正确。

用 /edit 调整不满意的地方。

公司官网 prompt

【背景】我是深圳 B2B 出口商，需要一套完整的公司官网。

【任务】创建一个 5 页面的企业官网：

1. index.html（首页）：
   - Hero：大标题"[你的公司 Slogan]" + CTA
   - 产品分类预览（3 个卡片）
   - 核心优势（4 个图标+文字）
   - 合作客户 Logo 占位区
   - 页脚引导到联系页

2. about.html（关于我们）：
   - 公司故事
   - 团队/工厂照片占位
   - 资质认证
   - 发展历程时间线

3. products.html（产品中心）：
   - 产品分类导航
   - 产品网格（6 个产品卡片，含图片占位+名称+简介）
   - 每个产品有点击跳转到详情的占位

4. news.html（新闻动态）：
   - 3 篇新闻/文章卡片（标题+摘要+日期）
   - 占位内容即可

5. contact.html（联系我们）：
   - 联系表单（姓名/公司/邮箱/留言）
   - 公司地址、电话、邮箱
   - 地图占位区

【设计要求】
- 现代简约风格，白底深色文字，橙色强调色 #ff6b35
- 响应式，手机和电脑都能看
- 所有页面共享统一的导航栏和页脚
- 有适当的动画和 hover 效果
- 导航栏滚动时固定顶部，背景变半透明毛玻璃

请生成所有文件的完整代码。

Key Takeaway

项目驱动学习是最好的方式。你做了一个真正能上线的公司官网，比看 50 个教程都有效。

为什么这样做更好？

传统建站要么花几万找外包，要么自己学几个月。用 Claude Code，一天就能做出专业级官网。

企业官网 checklist

• 首页首屏 3 秒内传达核心业务
• 导航清晰，用户 2 次点击内找到任何内容
• 有明确的询盘/联系入口
• 手机端体验不打折扣
• 加载速度快（图片优化、代码简洁）

优化与打磨：让网站更专业

好的网站是改出来的，不是一次生成的。

Claude Code 第一次生成的网站是"能用"，但不是"完美"。今天学习如何给 AI 提修改意见，让它迭代优化——调配色、改布局、加细节。

💡 大白话：就像写报告——第一版只是草稿，改三遍才像样。AI 生成的网站也一样，第一版是 60 分，改几轮才能到 90 分。

"好网站是迭代出来的，不是一次生成的。"

今天的一步动作

列出你官网的 3 个不满意之处，用 /edit 让 Claude Code 逐一修复。

打开你的官网首页，仔细审视。

列出 3 个最不满意的地方（如：颜色太刺眼、某个区域太空、按钮不够醒目）。

逐个用 /edit 命令让 Claude Code 修改。

每改完一处，预览确认效果。

让 Claude Code 检查所有页面的链接是否有效。

迭代优化 prompt

请帮我优化官网的以下问题：

1. 【配色调整】
   当前橙色 #ff6b35 太刺眼，换成更柔和的珊瑚橙 #e85d4e
   同时调整所有 hover 效果的颜色

2. 【布局优化】
   首页 Hero 区域太空，添加一个抽象几何图形背景（CSS 实现，不要用图片）
   产品卡片增加价格标签

3. 【细节打磨】
   所有按钮统一圆角（8px）
   添加平滑滚动效果（点击导航链接时平滑滚动到对应区域）
   页脚添加社交媒体图标占位（3 个即可）

4. 【性能优化】
   确保图片有懒加载属性
   CSS 和 JS 尽量内联，减少文件请求

请逐项修改，每改完一项告诉我改了什么。

Key Takeaway

迭代的关键是"具体"——不要说"好看一点"，要说"把标题加大到 48px，颜色改成 #333"。

为什么这样做更好？

AI 生成第一版的目的是"快速验证"，迭代打磨的目的是"接近完美"。

迭代优化技巧

• 一次只改 1-2 个地方，改完确认再继续
• 用截图标注问题，比文字描述更直观
• 提供参考案例："做成类似苹果官网的风格"
• 保存每版代码（git commit），改坏了可以回退

SEO 基础：让客户能在 Google 找到你

做网站不是给自己看，是给客户看。

SEO（搜索引擎优化）= 让 Google、百度能看懂你的网站，在搜索结果中排名更靠前。基础 SEO 是"手工"的：给每个页面写 title、description、alt。进阶 SEO 是"自动化"的：用 Claude Code 批量生成几十个页面的 SEO 标签、自动写产品描述、批量检查链接。今天先掌握基础，再了解"SEO 自动化"的思维。

💡 大白话：基础 SEO 像手工给每瓶酒贴标签——一瓶一瓶贴。SEO 自动化像用机器贴标签——一次贴 100 瓶。基础你必须会，但想做大站，必须学会"批量操作"。

"基础 SEO 让搜索引擎"看懂"你，自动化 SEO 让搜索引擎"大量收录"你。"

今天的一步动作

让 Claude Code 给你的官网添加基础 SEO，然后尝试"批量生成"10 个产品的 SEO 描述。

问 Claude Code："请给我的所有 HTML 文件添加基础的 SEO 标签"。

重点了解：title 标签（页面标题）、meta description（页面描述）、语义化标签（header、nav、main、footer）。

让 Claude Code 给每个页面写独特的 title 和 description。

检查：图片是否有 alt 属性？链接是否有描述性文字？

进阶练习：给 Claude Code 一个产品列表，让它"批量生成"每个产品的 title + description + keywords（模拟自动化 SEO）。

了解 robots.txt 和 sitemap.xml 的作用（可选）。

SEO 优化 prompt

请帮我给官网的所有 HTML 文件添加 SEO 优化：

1. 【每个页面的 title 和 meta description】
   - 首页：title="深圳 B2B 出口商 | [主营产品关键词]" description="专注高品质 B2B 产品出口，服务欧美批发商..."
   - 关于页、产品页、联系页各自有独特的 title

2. 【语义化标签】
   用 <header>, <nav>, <main>, <section>, <footer> 替换部分 <div>

3. 【图片优化】
   所有 <img> 添加 alt 属性（描述图片内容）

4. 【结构化数据】
   在首页添加 Organization 结构化数据（JSON-LD）

5. 【其他】
   - 添加 viewport meta 标签（确保移动端适配）
   - 添加 charset UTF-8
   - 添加 favicon 占位链接

请修改所有文件。

批量 SEO 生成 prompt

【SEO 自动化练习】

请帮我为以下产品批量生成 SEO 内容：

产品列表：
1. 工业不锈钢球阀（机械类）
2. 可降解包装袋（包装类）
3. USB Type-C 连接器（电子类）
4. 纯棉坯布（纺织类）
5. 铝合金型材（原材料类）

为每个产品生成：
- SEO Title（50-60 字符，包含核心关键词）
- Meta Description（150-160 字符，有卖点、有行动号召）
- 3 个 Target Keywords
- 一段 100 字的产品描述（适合放产品页首屏）

要求：
- 标题用数字或具体数据（如"DN200"或"MOQ 500"）增加点击率
- description 包含"批发""定制""工厂"等 B2B 关键词
- 语言：英文（面向海外客户）

输出格式：表格

Key Takeaway

基础 SEO 是"手工标签"（title/description/alt），进阶是"批量自动化"（用 AI 一次性生成 100 个页面的 SEO 内容）。两者都要会。

为什么这样做更好？

手工 SEO 适合 5-10 个页面的网站。如果你的产品成千上万，必须学会"让 AI 批量生成 SEO 内容"——这才是规模化获客的秘诀。

SEO 进阶路径

• Level 1 基础：每个页面手工写 title + description + alt
• Level 2 批量：用 AI 一次生成 100 个产品的 SEO 内容
• Level 3 结构化：添加 JSON-LD 结构化数据，让搜索引擎理解你的业务类型
• Level 4 技术：sitemap.xml、robots.txt、页面加载速度优化
• Level 5 内容：持续产出行业相关内容，获取自然外链

用 Claude Code 生成简单的小程序/App 原型

不只是网页，让 Claude Code 帮你做更酷的东西。

部署上线：GitHub Pages 免费托管

让你的网站有一个真正的网址，任何人都能访问。

网站做好了但放在电脑里，没人能看到。今天把它部署到 GitHub Pages——免费的静态网站托管服务，给你一个真正的网址（https://你的用户名.github.io/项目名）。

💡 大白话：就像画了一幅画，之前只有你能看。现在把它挂到画廊里，全世界都能看。

"部署 = 从"本地文件"变成"在线网站"。"

今天的一步动作

把网站推送到 GitHub，开启 GitHub Pages，获得一个在线网址。

创建新仓库，命名为 my-company-website，设为 Public。

在 VSCode 终端运行：git init → git add . → git commit -m "first" → git push。

在仓库 Settings → Pages 中，选择分支 main，文件夹 /root。

等待 2-5 分钟，访问 https://你的用户名.github.io/my-company-website/。

把链接发给朋友或客户，让他们试用。

GitHub Pages 部署步骤

【部署到 GitHub Pages 完整步骤】

1. 注册/登录 GitHub：github.com
2. 创建新仓库：
   - 仓库名：my-company-website
   - 设为 Public（Private 无法免费托管）
   - 不要勾选 README

3. 在 VSCode 终端执行：
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/你的用户名/my-company-website.git
   git push -u origin main

4. 打开仓库页面 → Settings → Pages
5. Source 选择 "Deploy from a branch"
6. Branch 选择 "main"，文件夹选 "/root"
7. 保存，等待 2-5 分钟
8. 访问 https://你的用户名.github.io/my-company-website/

【更新网站】
每次修改后执行：git add . && git commit -m "update" && git push

Key Takeaway

GitHub Pages 是最简单的免费部署方案。push 代码 → 自动部署 → 获得网址。

为什么这样做更好？

很多人代码写完了就放在电脑里，从来没上线过。今天你的作品第一次有了真正的网址。

部署注意事项

• 仓库必须是 Public 才能免费使用 GitHub Pages
• HTML 文件名区分大小写，index.html 必须小写
• 每次 push 后需要等 2-5 分钟才能看到更新
• 可以绑定自定义域名（需要购买域名）

休息日：回顾你的网站作品

你已经有一个能访问的在线网站了。

第 4 周

进阶技巧 + 系统化工作流

Projects内容工厂、自训练反馈循环、落地页快速建造、模板改造、团队共享。

Skills + MCP + 自训练：让AI越用越聪明

Week 4 主题：从"会用"到"用好"——建立你的AI增强回路。

Claude 有三大进阶能力：Skills（把重复工作流打包成可复用指令）、MCP（连接外部工具的"USB-C"协议）、自训练反馈循环（用数据驱动AI输出质量提升）。掌握这三招，你的AI会从"新手实习生"变成"资深专家"。

💡 大白话：Skills 像把拿手菜谱写成卡片，以后随时照着做。MCP 像给实习生配了车钥匙、门禁卡、仓库权限——能接触更多资源。自训练循环像每次做完菜记录"盐多了/火大了"，下次自动改进。

"Skills 封装流程、MCP 连接工具、自训练循环持续优化——三者组合让AI产出质量指数级提升。"

今天的一步动作

创建一个 Skill，配置一个 MCP Server，建立你的第一个自训练反馈循环。

Skills 实战：在 Claude.ai Settings → Skills 中创建一个新 Skill，把你常用的"生成产品落地页"流程封装进去。

测试 Skill：在新对话中输入 "use my landing page skill"，看是否能一键生成标准格式的落地页。

了解 MCP：Claude Code 连接外部工具的"USB-C"标准协议。常见类型：github-mcp（操作仓库）、postgres-mcp（查数据库）、puppeteer-mcp（控制浏览器）。

自训练反馈循环：建立一个追踪表格，记录每次AI产出的"好结果"和"坏结果"，把 top 10% 的成功模式写入 Project Instructions。

学习 @mentions 精准引用：在 Claude Code 里输入 "修复 @index.html 里的标题颜色"，观察它如何精确定位。

试用 /plan 规划模式：输入 "/plan 我想重构整个网站的 CSS 结构"，Claude 只分析不执行，帮你确认方案。

创建 Skill 模板

【Skills：可复用指令封装】

创建方法：
1. Claude.ai → Settings → Capabilities → Skills → Manage
2. 点击 "Add New"
3. 填写名称、描述、Instructions

【示例：产品落地页 Skill】

名称：Product Landing Page Generator
描述：一键生成外贸产品落地页

Instructions：
---
你是专业的外贸产品落地页设计师。

每次用户输入产品信息，执行以下流程：
1. 确认产品名、卖点、目标受众、价格
2. 生成包含以下结构的 HTML：
   - Hero（大标题 + CTA）
   - 痛点区（3个用户痛点）
   - 解决方案（4个核心功能）
   - 社会证明（3条评价占位）
   - FAQ（5个问题）
   - 底部CTA
3. 使用 Artifacts 输出
4. 风格：深色背景，橙蓝配色，响应式

成功模式（do more of this）：
- 标题用数字或数据开头（"提升50%效率"）
- CTA 按钮用动词开头（"立即获取报价"）
- 痛点描述具体场景

失败模式（avoid this）：
- 不要夸大功能
- 不要漏掉CTA
- 不要生成非响应式布局
---

调用方式：在任何对话中说 "use the landing page skill for [产品名]"

自训练反馈循环 SOP

【自训练反馈循环：让AI越用越聪明】

核心原理：用真实数据驱动prompt迭代，而不是靠直觉。

四步循环：
1. 追踪：记录每次AI产出的结果和使用场景
2. 分析：按效果排序，找出 top 10% 和 bottom 90%
3. 反馈：把 top 10% 的成功模式写入 Instructions（"do more of this"）
   把 bottom 90% 的失败模式也写入（"avoid this"）
4. 迭代：用更新后的 Instructions 再产出，质量自动提升

【追踪表格模板】
| 日期 | 任务 | 产出 | 效果(1-10) | 成功点 | 失败点 |

【示例反馈写入】
"根据最近10次产出分析，以下模式效果最好（do more）：
- 标题用数字开头
- 痛点描述具体场景
- CTA用橙色渐变按钮

以下模式效果差（avoid）：
- 使用紫色配色
- 生成超过3个CTA
- 社会证明少于2条"

MCP Server 配置示例

【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 吗？"测试。

📷

实操截图占位

Day 22 · 建议放实际操作界面截图
尺寸：1200×800 或 16:10

Key Takeaway

Skills 封装重复流程 → MCP 连接外部工具 → 自训练循环持续优化。这三招是"AI进阶用户"和"AI新手"的分水岭。

为什么这样做更好？

普通用户每次重新写 prompt，产出质量不稳定。进阶用户用 Skills 标准化、用 MCP 扩展能力、用数据反馈持续优化——产出质量随时间递增。

进阶三件套：Skills + MCP + 自训练

• Skills：把重复工作流打包成可复用指令，任何对话都能调用
• MCP：Model Context Protocol，连接GitHub/数据库/浏览器等外部工具
• 自训练循环：追踪结果 → 分析好坏 → 反馈到Instructions → 质量递增
• @mentions：精准引用文件/文件夹，减少AI猜错上下文

实战：给客户做一个定制页面

用 Claude Code 快速响应客户的定制需求。

客户突然说"能不能给我做个产品展示页？"以前你要找设计师、找程序员，至少要一周。现在用 Claude Code，30 分钟就能出一个初稿。

💡 大白话：就像你学会了用微波炉——客户说"我饿了"，你 3 分钟就能做出一份热饭。

"Claude Code 让你从"做不到"变成"马上做"。"

今天的一步动作

模拟一个真实场景：客户要一个"新品发布页"，30 分钟内用 Claude Code 做出来。

设定场景：客户要推广一款新品，需要一个专门的落地页。

收集需求：产品名、核心卖点、目标受众、CTA（行动号召）。

在 Claude Code 面板用三要素格式发送需求。

15 分钟后预览初稿，记录需要调整的地方。

再用 15 分钟迭代优化，交付给客户。

客户定制页 prompt

【背景】客户要推广一款新品[你的产品名]，需要一个专门的落地页（landing page）。

【产品信息】
- 产品名：[你的产品名]
- 核心卖点：[卖点1 / 卖点2 / 卖点3 / 卖点4]
- 目标受众：[目标客户群体]
- CTA："Request a Quote - MOQ 100 Units"

【页面结构】
1. Hero 区：大标题 + 产品图占位 + CTA 按钮
2. 痛点区：3 个用户痛点（[痛点1]、[痛点2]、[痛点3]）
3. 解决方案区：4 个核心优势（对应卖点）
4. 社会证明区：客户评价占位（3 条）
5. 价格区：[你的定价策略] + "Contact for Quote"
6. FAQ 区：5 个常见问题
7. 底部 CTA：再次强调预订

【设计要求】
- 单页长页，滚动浏览
- 深色背景，科技感
- 橙色强调色 #ff6b35
- 有滚动动画效果
- 响应式

请生成完整代码。

Key Takeaway

Claude Code 的价值不仅是"做网站"，更是"快速响应需求"——从几天缩短到几十分钟。

为什么这样做更好？

在商务场景中，"快速出 demo"的能力往往比"完美交付"更有价值——先占位，再优化。

落地页转化要素

• 首屏 3 秒内传达核心价值
• 痛点-解决方案的叙事结构
• 社会证明（评价、数据、认证）
• 明确的价格和优惠
• 多处 CTA，让用户随时能行动

用 Claude Code 改造现有网站

不是从零做，而是改——这更符合真实工作场景。

真实工作中，更多是"改现有页面"而不是"从零做新页面"。今天练习如何用 Claude Code 快速改造一个现有的网站：换风格、加功能、改布局。

💡 大白话：就像装修房子——比从头盖房子快得多。Claude Code 就是你的装修队。

"改造现有网站比从零做更快，Claude Code 能帮你精准定位要改的地方。"

今天的一步动作

找一个免费的 HTML 模板，用 Claude Code 改造成你的风格。

在网上找一个免费的 HTML 模板（搜索 "free HTML template" 或 "HTML5 免费模板"）。

下载并解压到 VSCode 项目文件夹。

让 Claude Code 分析模板结构："/explain 这个模板的整体结构"。

逐步改造：换公司名、换图片、改配色、改内容。

用 /edit 批量替换文字内容。

改造模板 prompt

【背景】我下载了一个 HTML 模板，需要改造成我的公司网站。

【当前模板信息】
- 模板名：[填写模板名]
- 原始内容：科技公司风格

【改造需求】
1. 公司信息替换：
   - 公司名：深圳鼎火科技
   - Slogan：[你的公司 Slogan]
   - 联系方式：替换为真实信息

2. 风格改造：
   - 主色从蓝色改成深灰 + 橙色
   - 字体换成更现代的字体
   - 去掉不需要的页面板块

3. 内容替换：
   - 所有占位文字换成真实内容
   - 图片换成占位图
   - 添加我的产品信息

4. 功能添加：
   - 添加联系表单
   - 添加 Google Analytics 占位代码

请帮我逐步改造，一次改 2-3 个地方。

Key Takeaway

改造模板是真实工作中最高效的方式——框架已有，只需填充和微调。

为什么这样做更好？

从零做网站需要设计+编码，改造模板只需要"换内容+调样式"，效率提升 5 倍。

优质免费模板来源

• HTML5 UP：简约现代风格，免费商用
• Start Bootstrap：基于 Bootstrap 框架，响应式
• TemplateMo：多种行业模板
• Colorlib：高质量免费模板

团队协作：多人怎么用 Claude Code

不是你一个人用，是整个团队一起提效。

Claude Code 不仅能帮你个人提效，还能作为团队协作工具。今天了解如何在团队中共享 prompt、统一代码风格、协同开发项目。

💡 大白话：就像公司配了统一的办公软件——大家用一样的工具、一样的流程，协作效率才高。

"团队用 Claude Code 的关键是"标准化"——共享 prompt、统一规范、协同迭代。"

今天的一步动作

创建一个团队共享的 prompt 库，整理你这一周常用的高频 prompt。

回顾你这一周用过的所有 prompt，选出 5 个最高频的。

创建一个 "prompts.md" 文件，按场景分类整理。

让 Claude Code 帮你格式化这个 prompt 库。

思考：团队里不同的人（业务、设计、技术）分别需要什么 prompt？

了解 Claude Code 的 Project 功能如何共享给团队成员。

团队 Prompt 库模板

【团队 Claude Code Prompt 库】

## 业务场景

### 写开发信
```
【背景】我是[行业]业务员，主要做[市场]。
【任务】写一封开发信给[客户类型]，介绍[产品]。
【规则】[字数/语气/卖点要求]
```

### 客户跟进
```
【背景】客户[姓名]来自[国家]，上次[互动内容]。
【任务】写一封跟进邮件。
【规则】[语气/时间/目的]
```

## 技术场景

### 生成页面
```
【背景】我需要[页面类型]。
【任务】创建[文件名]，包含[内容要求]。
【规则】[设计风格/响应式/动画要求]
```

### 修改现有页面
```
【文件】[文件名]
【修改】[具体修改内容]
【约束】[不能改什么]
```

Key Takeaway

团队效率的关键是"标准化"——把个人经验变成团队资产，共享给所有人。

为什么这样做更好？

一个人用 Claude Code 提效 3 倍，一个团队标准化使用提效 10 倍。

团队协作最佳实践

• 建立共享的 prompt 库，按场景分类
• 统一代码风格和文件命名规范
• 用 Git 管理代码，方便多人协作
• 定期分享"好用的 prompt"，团队共同进化

问题排查： Claude Code 出错了怎么办

AI 不是万能的，学会自己排查和解决。

教一个朋友：巩固所学的最好方式

把你学会的教给别人，你会发现自己理解得更深了。

你学了一堆技能，但如果不教给别人，你很快就会忘。而且你会发现：你觉得"理所当然"的事，在别人眼里非常厉害。教的过程会迫使你真正理解每个步骤。

💡 大白话：就像你学会了一道菜，做给朋友吃——你发现有些步骤你自己都没注意，但朋友问了，你才意识到"哦对，这一步是关键"。

"教别人迫使你真正理解。而且你会发现，自己觉得"理所当然"的事，别人看来很惊艳。"

今天的一步动作

选一个同事或朋友，准备 5 分钟演示，展示你用 Claude Code 做的网站。

选一个你想教的同事或朋友。

准备演示大纲：① 我之前怎么做网站 ② 现在用 Claude Code 怎么做 ③ 成果展示 ④ 推荐他们尝试。

打开你的在线网站，现场演示："我说一句话，AI 就帮我改好了"。

观察对方的反应和问题——这些问题就是你自己理解不够深的地方。

把演示过程录屏保存，可以作为你的"教学成果"。

5 分钟演示大纲

【演示主题】我用 Claude Code 30 天做出了公司官网

1. 开场（1 分钟）：
   "以前我要做网站，要么花几万找外包，要么学几个月编程。现在我用 AI，30 天做出了这个。"

2. 现场演示（2 分钟）：
   - 展示在线网站
   - 现场说一句话，让 Claude Code 修改页面
   - 刷新浏览器看效果

3. 成果展示（1 分钟）：
   - 网站链接、小工具、页面数量
   - 节省的时间和金钱

4. 邀请尝试（1 分钟）：
   - 推荐他们装 VSCode + Claude Code
   - 分享你的学习资源

Key Takeaway

教别人是最好的学习方式。你会发现自己的盲点，也会建立个人影响力。

为什么这样做更好？

学会一个技能只能让自己受益，教会一群人能让你成为团队里的"AI 专家"。

教学相长的好处

• 发现自己的知识盲区（别人问的问题你可能答不上来）
• 建立个人品牌（团队里的"AI 达人"）
• 巩固记忆（教一遍 = 学三遍）
• 获得反馈（别人的问题帮你改进）

Before vs After：展示你的转变

用具体的对比和数据，证明 AI 带来的价值。

跟老板说"我用 AI 了"没有任何说服力。但说"之前做网站要 2 周，现在 2 天"——这就很有说服力。数字和对比，是最好的证据。

💡 大白话：就像减肥广告——"用了 3 个月瘦了 20 斤"比"这个产品很好"有说服力 100 倍。

""之前做网站要 2 周，现在 2 天"——这种具体的对比，比任何功能介绍都有说服力。"

今天的一步动作

整理一份"Before vs After"对比，记录你用 Claude Code 前后的变化。

列出 5 个具体场景（如：做网页、改设计、写文案、做报价单、整理资料）。

每个场景填写：Before（用 AI 前）→ After（用 AI 后）。

尽量用数字：时间、成本、产出数量。

把对比做成一个简单的表格或信息图。

保存这份对比，以后面试、汇报、展示都能用。

Before vs After 模板

【我的 AI 转变记录】

| 场景 | Before（用 Claude Code 前） | After（用 Claude Code 后） |
|------|---------------------------|--------------------------|
| 做公司官网 | 找外包，2 周，$2000 | 自己用 AI，2 天，$0 |
| 改页面设计 | 发邮件给设计师，等 3 天 | 说一句话，30 秒搞定 |
| 写产品文案 | 自己写 2 小时 | AI 生成 2 分钟，我审核 10 分钟 |
| 做报价单 | 打开 Excel 填 30 分钟 | AI 生成 10 秒 |
| 客户跟进 | 手动整理，经常忘记 | AI 提醒 + 自动生成话术 |

【总结】
- 每周节省时间：约 10 小时
- 每月节省成本：约 $500
- 新增能力：能独立做网站、做工具

Key Takeaway

"之前要 2 周，现在 2 天"——这种具体的对比，比任何功能介绍都有说服力。

为什么这样做更好？

抽象的"效率提升"没人信，具体的数字和对比让人无法反驳。

记录你的 AI 成果

• 时间对比：之前花多久 vs 现在花多久
• 成本对比：之前花多少钱 vs 现在花多少钱
• 能力对比：之前不会什么 vs 现在会什么
• 质量对比：之前产出质量 vs 现在产出质量

30天技能盘点：你现在的能力地图

看清自己会什么、不会什么、下一步学什么。

30 天结束，你已经掌握了很多技能。但更重要的是：你知道自己到了什么水平，下一步往哪走。今天做一个全面的技能盘点。

💡 大白话：就像游戏里的技能树——你知道已经点亮了哪些技能，下一步可以解锁什么。

"技能地图让你看清自己的位置，知道下一步该往哪走。"

今天的一步动作

列出你这 30 天掌握的所有技能，按熟练度分级。

列出至少 15 个你学会的技能（从安装到部署）。

给每个技能评星（1-5 星，5 星 = 很熟练）。

思考：这些技能组合起来，你还能做什么新东西？

列出 3 个"想学会但还没学会"的技能。

写一个"30 天学习总结"，发 LinkedIn 动态或LinkedIn。

技能盘点 prompt

我完成了 30 天 Claude Code 基础训练，请帮我整理一份"技能地图"：

【我已掌握的技能】
- Claude Code 安装与配置
- 用 AI 生成和修改网页
- Prompt 三要素（背景+任务+规则）
- Claude Code 核心命令（/edit, /explain, /debug）
- HTML 基础标签和结构
- CSS 基础样式（颜色、字体、布局）
- 响应式设计
- 表单设计
- 交互动画
- SEO 基础
- GitHub Pages 部署
- 代码审查和迭代优化

【请帮我】
1. 把这些技能按"基础→进阶"分层
2. 画出技能之间的依赖关系
3. 推荐接下来 3 个适合我做的项目
4. 给出一个从"入门"到"熟练"的进阶路径

用中文，格式清晰。

Key Takeaway

"技能地图"让你看清自己的位置。你知道自己会什么、不会什么、下一步学什么——这是持续进步的基础。

为什么这样做更好？

很多人学了一堆技能，但不知道自己到了什么水平。技能地图让你有方向感。

30 天技能清单（参考）

• Claude Code 安装、配置、基本操作
• Prompt 工程（三要素、迭代优化）
• HTML/CSS 基础（看懂、能改、会描述）
• 响应式设计（手机+电脑适配）
• 网站部署（GitHub Pages）
• 代码审查和问题排查

冲过终点线 + 解锁 VIP 进阶

30 天是起点，VIP 进阶课带你从"会用"到"精通"。

30 天基础课结束，你已经能独立使用 Claude Code 做网页、做网站、做小工具。但如果你想深入学习编程——理解代码逻辑、独立修改复杂功能、做出更强大的工具——VIP 进阶课在等你。

💡 大白话：30 天基础课就像考到了驾照——你能开车了。VIP 进阶课就像赛车培训——教你漂移、超车、极限驾驶。

"基础课让你"能开车"，VIP 课让你"会赛车"。"

今天的一步动作

回顾 30 天旅程，解锁 VIP 进阶课，规划未来 60 天目标。

回顾你 30 天的所有作品：公司介绍页、产品页、表单页、完整官网、小工具。

选一个你最满意的作品，截图保存作为"毕业作品"。

访问 /claude-vip 了解进阶课程内容。

给自己定一个"60 天目标"：接下来两个月要做出什么项目？

在社交媒体分享你的 30 天学习成果。

未来 60 天规划

【我的 AI 进阶路线图】

第 1 个月（基础巩固）：
- 用 Claude Code 再做 2 个不同类型的网站
- 学习 JavaScript 基础（变量、函数、条件）
- 尝试做一个小工具（如计算器、待办清单）

第 2 个月（进阶探索）：
- 学习 API 调用（获取实时数据）
- 做一个有后端功能的小应用
- 了解自动化工具（Zapier、Make）

长期目标：
- 能独立搭建并维护一个完整网站
- 能用 AI 搭建工作流，自动化日常任务
- 能教团队其他人使用 Claude Code

Key Takeaway

30 天你学会了"用 AI 做网页"。进阶课要学的是"理解代码、独立开发、构建复杂工具"。未来已来。

为什么这样做更好？

传统编程学习路径是"3 个月入门，1 年能干活"。你用 AI 把路径压缩到了 30 天。这就是 AI 时代的红利。

基础版 vs VIP 进阶

• 基础版：用 AI 生成网页，了解概念，产出页面/网站
• VIP 进阶：系统学习 HTML/CSS/JS，理解代码，独立修改和开发
• 基础版：适合快速上手、做简单网站
• VIP 进阶：适合深度定制、做复杂工具、长期发展

持续更新

AI 资源中心

除了 30 天训练计划，这里还有工具、模板和最新实践。

PRO

🔐

AI 辅助编程进阶

30 天从"不会编程"到"用 AI 搭出自己的小工具"。VSCode + Claude Code + HTML/CSS/JS 实战。

解锁进阶 →

📋

Prompt 模板库

外贸开发信、客户跟进、产品描述、竞品分析等高频场景的即拿即用模板。

即将上线

🧰

丁火工具箱

趋势雷达、海报工坊、命理分析、财富地图……数据驱动的实用工具集。

进入工具箱 →

常见问题

这个计划和网上其他AI教程有什么不同？

三个核心不同：① 量大管饱——每天30-60分钟，概念+实操+模板一次性给够；② 思维优先——不只教操作，更教"AI超级实习生"管理思维和"搭积木"系统思维；③ 产出导向——30天结束你有一个完整上线的官网，不是只学了零散功能。

我需要会编程吗？

Month 1 完全不需要编程基础。Week 1-2 你只需描述需求，Claude Code 帮你写代码。Week 3 开始涉及 HTML/CSS 概念，但目的是"看懂+会改"，不是从零写。核心是"描述能力"和"验收能力"，不是编程能力。Month 2 才会系统学习编程。

Claude Code 和网页版 Claude 有什么区别？

网页版 Claude 只能"说"——输出文字，你要手动复制粘贴。Claude Code 能"做"——直接创建/修改文件、运行命令、管理项目。就像打电话叫外卖 vs 住家保姆进厨房做饭。我们 Month 1 教的是"指挥保姆"，不是"打电话"。

Claude Code 在中国大陆能用吗？

Claude Code 需要 Anthropic 账号和网络条件。但本计划的方法通用——VSCode + Copilot、Cursor、Trae 等 AI 编程工具都能跟着做。核心是用自然语言驱动 AI 产出，不是绑定特定工具。工具会变，思维不会。

每天真的要30-60分钟吗？

是的，Month 1 designed for "量大管饱"。每天包含：① 概念学习（5-10分钟）② 实操练习（15-30分钟）③ 思考/笔记（10-20分钟）。如果你想快速过一遍，每天15分钟也能完成。但如果你想深入理解，60分钟都能填满。

什么是 Prompt 三要素和 SPEC 思维？

三要素：背景（我是谁、做什么行业）+ 任务（具体要做什么）+ 规则（颜色、尺寸、约束）。SPEC 思维是进阶——像给实习生下"任务书"，包含产品定位、核心功能、交互逻辑、视觉风格、技术红线。核心原则：歧义是最贵的 Bug，花5分钟写清楚需求，省30分钟返工。

Month 1 和 Month 2、Month 3 的关系是什么？

Month 1（本页）：AI思维 + 无代码建站——你当老板，AI当实习生，产出商业网站。Month 2（VIP）：编程基础——系统学习 HTML/CSS/JS，看懂并独立修改代码。Month 3（即将推出）：融合实战——用 Month 1 的思维 + Month 2 的技能，做复杂工具和自动化系统。

学完之后我能做什么？

Month 1 结束：你能独立搭建并部署一个企业官网（公司介绍+产品页+询价表单），能用 AI 快速生成产品落地页，能改造现有模板。对做外贸的你来说：不用找外包、不用等设计师，客户要个页面，你30分钟出初稿。

AI思维 + Claude 入门

AI思维 + Claude生态入门

Claude Code 是什么？从"聊天"到"做事"

安装 Claude Code：VSCode 插件 + CLI

第一次实战：让 Claude Code 创建你的第一个网页

Prompt 三要素：背景 + 任务 + 规则

Claude Code 核心命令速查

Claude Projects + Artifacts：内容工厂实战

实战：生成一个完整的公司介绍页

休息日：回顾你的一周

建站实战：从页面到网站

理解 HTML：网页的积木

理解 CSS：让页面有颜值

实战：做一个产品展示页

实战：做一个询价表单页

添加交互：按钮、动画、反馈

响应式设计：手机电脑都能看

休息日：回顾你的页面作品

完整网站 + 自动化上线

网站结构：多个页面怎么组织

实战：生成一个完整的公司官网

优化与打磨：让网站更专业

SEO 基础：让客户能在 Google 找到你

用 Claude Code 生成简单的小程序/App 原型

部署上线：GitHub Pages 免费托管

休息日：回顾你的网站作品

进阶技巧 + 系统化工作流

Skills + MCP + 自训练：让AI越用越聪明

实战：给客户做一个定制页面

用 Claude Code 改造现有网站

团队协作：多人怎么用 Claude Code

问题排查： Claude Code 出错了怎么办

教一个朋友：巩固所学的最好方式

Before vs After：展示你的转变

30天技能盘点：你现在的能力地图

冲过终点线 + 解锁 VIP 进阶

恭喜，你做到了！

AI 资源中心

AI 辅助编程进阶

Prompt 模板库

丁火工具箱

常见问题