Claude Code 全流程实战：安装 | Next.js 模板 | 动态 Bento 落地页 | 部署上线

这一节课主要涉及内容：从 Claude Code 的安装、登录与 VS Code 插件集成，到利用 Next.js 模板快速生成并优化 Bento 风格落地页，再到本地预览、视觉调优与线上部署的完整实战流程。

去 B 站观看

---

本课内容

• 什么是 Claude Code
  • https://docs.anthropic.com/en/docs/claude-code/setup
  • https://support.anthropic.com/en/articles/9797557-usage-limit-best-practices
  • macOS / Linux
  • Claude Pro 以上 / 第三方
• Claude Code 安装
  • https://www.anthropic.com/claude-code
  • 终端
    • 确认 Nodejs 版本：node -v
    • 安装 Claude Cli：npm install -g @anthropic-ai/claude-code
    • 进入项目目录（不要在根目录操作）
    • 运行 claude
    • 运行 /login
  • IDE
    • 安装插件：https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code
    • 命令行绑定：/ide
• Claude Code 实战
  • 使用 Next.js 模版初始化：npx create-next-app@latest
  • 在线读取 Claude Code 官方文档，并生成页面
  • 多轮对话调整细节
  • Vercel 发布

本视频内容

• 0:00 工具简介与安装前提
• 0:50 套餐定价与支付注意
• 1:31 CLI 安装与登录流程
• 2:40 VS Code 插件与 IDE 集成
• 4:11 Next.js 项目初始化演示
• 5:29 本地运行与模板预览
• 6:05 Bento Landing Page 需求拆解
• 8:05 动态背景与图标动画优化
• 12:25 视觉细节微调与调试实录
• 13:40 构建部署与错误处理

📚 完整课程与资源：https://justincourse.com
👍 订阅频道，解锁更多 AI 实战教程！

---

相关资源

• Demo: https://claude-code-tutorial.justincourse.site/
• Repo: https://github.com/justincourses/claude-code-tutorial

账号注册

• Claude Code 官方：https://www.anthropic.com/claude-code
• 第三方 Claude Code 注册：https://s.zhaikr.com/tzgc