第03课：Claude编程助手
第03课：Claude编程助手
Artifacts让你在对话中直接看到代码效果
主讲：Angel Zhang & Charlie Cao
本节学习目标
- 掌握Claude在编程方面的独特优势
- 学会用Artifacts直接预览代码效果
- 理解Claude与ChatGPT在编程上的差异
- 能够根据需求选择最合适的AI编程助手
一、Claude编程的独特优势
| 优势 | 说明 |
|---|---|
| Artifacts实时预览 | 代码效果直接在对话中展示 |
| 长代码更强 | 单次可输出更长的完整代码 |
| 逻辑更严谨 | 复杂逻辑的处理更准确 |
| 分析能力 | 读懂大段代码·找问题 |
二、Artifacts编程
HTML/CSS/JS 实时预览
"请用HTML+CSS+JavaScript创建一个倒计时计时器，
- 可以设置分钟数
- 点击开始后倒计时
- 时间到了弹出提醒
- 界面简洁美观，深色主题"
Claude会生成代码并直接在Artifacts中运行，你可以实时交互！
React组件
"用React创建一个待办事项组件：
- 可以添加任务
- 可以标记完成
- 可以删除
- 有过滤功能（全部/未完成/已完成）
- 数据存在localStorage中
- UI简洁现代"
三、Claude vs ChatGPT编程对比
| 维度 | ChatGPT | Claude |
|---|---|---|
| 代码运行 | 服务端运行Python | Artifacts预览前端 |
| 代码长度 | 较短拆分 | 一次性完整输出 |
| 前端开发 | 好 | 更好（Artifacts） |
| Python脚本 | 更好（Code Interpreter） | 好 |
| 逻辑复杂度 | 好 | 略好 |
| 代码解释 | 好 | 好 |
| 调试能力 | 好 | 好 |
选择建议
- 做前端/可视化 → Claude（Artifacts实时预览）
- 跑Python脚本 → ChatGPT（Code Interpreter）
- 复杂项目 → 两个都用
四、Claude编程最佳实践
渐进式开发
第1轮："先做出基础功能"
第2轮："添加样式美化"
第3轮："添加XX功能"
第4轮："修复XX问题"
让Claude复审代码
"请review以下代码，找出：
1. 可能的Bug
2. 性能问题
3. 安全隐患
4. 代码风格改进建议
[粘贴代码]"
五、实用项目示例
个人简历网页
"用HTML+CSS创建一个现代风格的个人简历网页：
- 响应式设计（手机和电脑都好看）
- 包含：头像·姓名·简介·工作经历·技能·联系方式
- 深蓝色为主色调
- 有悬停动画效果"
计算器小工具
"用HTML+CSS+JavaScript做一个计算器：
- 可以做加减乘除
- 支持小数计算
- 有清除和退格功能
- 界面像iPhone计算器"
数据可视化
"用D3.js或Chart.js做一个交互式图表：
数据：[粘贴数据]
要求：柱状图+折线图组合，鼠标悬停显示详情"
本课作业
- 用Claude创建一个"个人简历网页"Artifact
- 通过3轮对话逐步完善它
- 将同样的需求分别给ChatGPT和Claude，对比结果
下一课，我们学习Cursor——程序员最爱的AI代码编辑器。