旧版课程3：补齐原理读懂代码

这是一套从零到一的全栈 AI 编程内功课，系统串起工具、前端、后端、数据库和调试。

这页其实是在教你“用 AI 做产品”的整套底层能力，从环境工具、前端三件套，到 Next.js / Tailwind / shadcn，再到数据库、Supabase、DevTools 和“怎么正确用 AI”。

下面按模块帮你结构化整理一遍，方便你回顾、做笔记或拆成学习计划。

一、Cursor 与 AI 编程工具体系

1. Cursor 基础

内容重点是把 Cursor 当作“AI 驱动的 VS Code”来用，而不是一个普通编辑器。

• 账号与安装：到官网注册（支持国内邮箱）、下载对应系统安装包，首次启动可导入 VS Code 配置（主题、字体、缩进、部分插件）。
• 界面四大区域：

• 侧边栏：文件管理、搜索、Git
• 编辑区：写代码、查看代码
• 终端：底部命令行
• AI 聊天面板：和 AI 对话、让 AI 改代码

强调“写代码 = 文件导航 + 编辑区 + AI 聊天 + 终端”。

• 常见侧边栏用法：

Explorer 管理项目结构；Search 用关键词全局搜索代码；Git 看改动、提交记录（Changes、M/U 标记）。

• 编辑区技巧：

• 多光标编辑：Alt/⌥ + 点击
• 快速注释：Ctrl+/ 或 ⌘+/
• 自动补全：Tab 接受、局部接受（Partial Accepts）、智能跳转编辑点。

• 终端用法：在编辑器内部运行 ‎⁠node⁠、‎⁠npm⁠、‎⁠git⁠、‎⁠python⁠ 等，不用反复切窗口。

2. Cursor 设置与模型/MCP

• Settings 四块：

• General：导入 VS Code 配置、快捷键、登录信息。
• Models：选择可用模型（Claude、GPT-4.1、Gemini 等），启用/禁用、配置 OpenAI API Key、自定义模型。
• Rules：User Rules（个人偏好，如“和我说中文”）、Project Rules（项目级规则，推荐用项目内规则文档而不是在面板写死）。
• MCP：模型上下文协议（Model Context Protocol），用来让 AI 访问本地/远程工具与数据（文件系统、命令、数据库、外部服务）。

可以添加/管理 MCP 服务器，比如 ‎⁠context7⁠，增强上下文和工具能力。

• Network：提醒科学上网及模式选择（tun 模式）以避免“地区不支持”。
• GitHub 绑定/解绑流程：通过 Cursor Dashboard 的 OAuth 授权管理，进行 Suspend / Uninstall，然后在本地重新 Connect、Sign out / Sign in 新账号。

3. 必要安装：Node.js 与 Git

为后面 Next.js 项目做准备：

• Node.js：从官网安装，不同系统对应不同安装包，安装后用 ‎⁠node -v⁠ 验证。
• Git：安装后 ‎⁠git --version⁠ 验证，初始配置 ‎⁠user.name⁠ 和 ‎⁠user.email⁠。

4. AI 对话模式与工作流

三种聊天模式：

• Agent：自动改代码、创建文件、批量重构，改动直接应用到工程，适合自动处理和大规模改动。
• Ask：只问答和给建议，不直接写入文件。
• Manual：AI 给补丁，由你手动审阅和应用，适合需要人工把关的场景。

工作流要点：

• 描述需求的规范格式：目标、背景、可能用到的资料（@文档、API）。
• 一窗口一个任务：避免上下文混乱。
• 回滚机制：

• reject / accept 生成代码
• Restore checkpoint 回到对话前状态。

5. Cursor 基本技巧与 @ 命令

• 智能补全：Tab 接受、Esc 关闭、Ctrl/Cmd + → 部分接受。
• ‎⁠@⁠ 引用：

• @Files/@Folder：给 AI 指定要看的文件/目录，可拖拽。
• @Docs：引用项目内或第三方文档（如 Next.js、React 文档）。
• @Git：引用提交历史、帮你生成 changelog 或定位 bug。
• @Cursor Rules：让 AI 遵守项目规则。
• @Web：联网获取资料。

• AI 总结提交：根据改动自动生成 Git 提交描述。
• MCP 使用：通过 MCP 连接工具（文件、数据库、浏览器等），让 AI 具备“操作环境”的能力。

6. 超越 Cursor 的工具

• AugmentCode：Agent 做得更重，结合 Claude 和 o1，在编程比赛中表现很好。适合作为 Cursor 的补充（大改用 AugmentCode，微调用 Cursor）。
• Claude Code：

• 安装：‎⁠npm install -g @anthropic-ai/claude-code⁠，命令 ‎⁠claude code⁠。
• 终端 AI 助手，能理解整个代码库、跨文件重构和自动测试。
• 使用方式类似与 AI 对话的“实习生”：你描述需求，它自动查文档、写代码、测代码。
• 建议用包月而不是按 token 计费。

二、Terminal（终端）基础

1. 概念与常用命令

• 文件系统导航：‎⁠pwd⁠ / ‎⁠ls⁠ / ‎⁠cd⁠ / ‎⁠mkdir⁠ / ‎⁠rmdir⁠
• 文件操作：‎⁠touch⁠ / ‎⁠cat⁠ / ‎⁠cp⁠ / ‎⁠mv⁠ / ‎⁠rm⁠
• 常用工具：‎⁠grep⁠、‎⁠find⁠、‎⁠ps⁠、‎⁠top⁠、‎⁠chmod⁠
• 快捷键：Ctrl+C（终止）、Ctrl+D（EOF/退出）、Ctrl+Z（暂停）、Ctrl+R （搜索历史）、Tab 自动补全。

2. 入门练习

• 创建、进入、删除目录的完整流程（‎⁠basic_practice⁠ 示例）。

3. 常见符号与基础 FAQ

解释 ‎⁠#!/bin/bash⁠、‎⁠$HOME⁠、‎⁠$(date ...)⁠、‎⁠$?⁠ 等含义，通过 ‎⁠man⁠ 查看命令帮助。

三、AI 编程工具分类与整体地图

1. 三大类工具

• 纯 Web 工具：v0.dev、bolt.new、Replit，适合快速试验和 MVP。
• IDE 类：Cursor、Windsurf、TRAE、CodeBuddy、Zed——统一特征是“有编辑区 + 侧栏 + 终端 + AI 聊天”。
• CLI 类：Claude Code、Codex CLI、Cursor CLI、Droid、Warp、Gemini CLI——黑底终端界面，靠命令与对话驱动。

推荐学习路径：

网页工具 → IDE → CLI；

做“严肃产品”建议用 Cursor/Windsurf；熟练后尽量用 CLI 工具效率更高。

2. IDE 类工具速通

强调它们界面本质相同：文件导航区、编辑区、AI 聊天区、终端区，学会一个，其它几分钟即可上手。

3. CLI 工具速通

• CLI = Command Line Interface，类似“黑客电影里的窗口”，优势是控制力强、效率高、资源占用小，是“老手标配”。
• 典型工作流（以 Claude Code 为例）：

• ‎⁠cd⁠ 到项目根目录，运行 ‎⁠claude⁠。
• 用自然语言描述任务，而不是发“命令式”短语。
• AI 生成修改计划，创建/编辑文件，可能运行 ‎⁠npm run dev⁠ / ‎⁠npm test⁠。
• 你负责审核和持续对话（“再加一个搜索框”、“换图标”）。

• 斜杠命令（/）：

• ‎⁠/help⁠ 查看命令列表。
• ‎⁠/clear⁠ 清空对话。
• ‎⁠/compact⁠ 压缩对话上下文，释放 token。
• ‎⁠/init⁠ 初始化项目配置（生成项目说明文档，如 ‎⁠CLAUDE.md⁠）。
• ‎⁠/mcp⁠ 管理 MCP 服务器。

四、HTML 内功（结构）

目标是把 HTML 当成“搭积木”来理解，而不是硬背标签。

1. HTML 是什么

• HTML = 超文本标记语言。
• 职责分离：

• HTML：结构/内容
• CSS：样式/表现
• JS：行为/交互

2. 标签基本结构

• 标准：‎⁠<标签名>内容</标签名>⁠
• 自闭合：‎⁠<img>⁠、‎⁠<br>⁠、‎⁠<hr>⁠、‎⁠<input>⁠ 等。

3. 常用标签

• 标题：‎⁠<h1>⁠ ~ ‎⁠<h6>⁠
• 文本与容器：

• ‎⁠<p>⁠ 段落
• ‎⁠<span>⁠ 行内容器
• ‎⁠<div>⁠ 块级容器
• ‎⁠<strong>⁠、‎⁠<em>⁠、‎⁠<u>⁠、‎⁠<br>⁠

• 链接：‎⁠<a href="...">⁠
• 图片：‎⁠<img src="..." alt="..." width height>⁠
• 列表：‎⁠<ul>/<ol>/<li>⁠
• 表格：‎⁠<table>/<tr>/<th>/<td>⁠
• 表单：‎⁠<form>⁠ + ‎⁠<input>⁠（type text/password/email/number/radio/checkbox/date） + ‎⁠<select>/<option>⁠ + ‎⁠<button>⁠ 等。
• 语义化标签：‎⁠<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>⁠——让结构更清晰，对 SEO 和可访问性友好。

4. 属性

• 公共属性：‎⁠id⁠、‎⁠class⁠、‎⁠style⁠、‎⁠title⁠
• 专用属性：‎⁠href⁠、‎⁠src⁠、‎⁠type⁠、‎⁠placeholder⁠、‎⁠value⁠ 等。

5. HTML 文档骨架

• ‎⁠<!DOCTYPE html>⁠ + ‎⁠<html lang="zh-CN">⁠ + ‎⁠<head>⁠（‎⁠meta charset⁠、‎⁠viewport⁠、‎⁠title⁠）+ ‎⁠<body>⁠。

6. 代码习惯与错误

• 缩进、注释、正确嵌套（行内不能包含块级）、属性值加引号、小写标签名等。
• 练习：用 CodePen 写简单页面、引入现成 CSS 库（如 Simple.css）快速做出好看页面。

五、CSS 内功（表现）

CSS 被比喻为“装修队”，负责让页面变成“彩色电影”。

1. 使用方式

• 内联：‎⁠style="..."⁠（不推荐长期使用）。
• ‎⁠<style>⁠ 内部样式。
• 外部文件：‎⁠<link rel="stylesheet" href="style.css">⁠（最佳实践）。

2. CSS 语法

• 结构：‎⁠选择器 { 属性: 值; 属性: 值; }⁠
• 选择器类型：

• 元素：‎⁠p⁠, ‎⁠h1⁠
• 类：‎⁠.class⁠
• ID：‎⁠#id⁠
• 组合/层级：‎⁠div p⁠, ‎⁠.card h2⁠

• 盒模型：

• 内容 + ‎⁠padding⁠ + ‎⁠border⁠ + ‎⁠margin⁠
• ‎⁠box-sizing: border-box⁠ 简化宽度计算。

3. 常用属性

• 颜色：关键字、‎⁠#hex⁠、‎⁠rgb/rgba⁠。
• 字体：‎⁠font-size⁠、‎⁠font-weight⁠、‎⁠font-family⁠、‎⁠line-height⁠、‎⁠letter-spacing⁠、‎⁠text-align⁠、‎⁠text-decoration⁠。
• 背景：‎⁠background-color⁠、‎⁠background-image⁠、‎⁠background-position⁠、‎⁠background-size⁠、渐变等。
• 边框：‎⁠border⁠、‎⁠border-radius⁠。
• 布局（Flexbox）：

• ‎⁠display: flex⁠
• ‎⁠flex-direction⁠、‎⁠justify-content⁠、‎⁠align-items⁠、‎⁠flex-wrap⁠、‎⁠gap⁠
• 常见模式：水平/垂直居中、导航栏、三列布局、卡片网格等。

• 动效与交互：‎⁠:hover⁠、‎⁠transition⁠、‎⁠transform⁠（如 ‎⁠translateY⁠ 浮动卡片）。

4. 实例

• 个人卡片组件：

• 白底圆角卡片 + 阴影 + 悬停浮起效果。

• 响应式布局：‎⁠max-width⁠ + ‎⁠margin: 0 auto⁠。

六、JavaScript / TypeScript 内功（行为）

1. JavaScript 基础

• 三者分工：HTML（结构）/CSS（样式）/JS（行为）。
• 变量：‎⁠let⁠（可变）、‎⁠const⁠（常量）、‎⁠var⁠（不推荐）。
• 类型：Number、String、Boolean、Array、Object。
• ‎⁠console.log⁠ 调试。
• 函数：普通函数、带参数和返回值。
• 条件：‎⁠if / else if / else⁠。
• 循环：‎⁠for⁠、数组的 ‎⁠forEach⁠。
• DOM 操作：

• 获取元素：‎⁠getElementById⁠、‎⁠querySelector(All)⁠。
• 修改内容：‎⁠textContent⁠、‎⁠innerHTML⁠。
• 修改样式：‎⁠element.style.xx⁠、‎⁠classList.add/remove/toggle⁠。

• 事件监听：‎⁠addEventListener⁠（click、input、submit 等）。
• 定时器：‎⁠setTimeout⁠、‎⁠setInterval⁠。
• 数组常用方法：‎⁠push/pop/shift/unshift/indexOf/forEach/filter/map⁠。
• 对象属性与方法。
• 箭头函数简写。

2. TypeScript 简介

• 为 JS 加类型：变量、参数、返回值、接口 interface。
• 带来提前报错、更好的 IDE 提示和更稳健的工程。

3. 综合案例：Todo List

• HTML + CSS + JS 分区。
• 管理 ‎⁠todos⁠ 数组，支持添加、删除、标记完成、统计。
• 可进一步加入 localStorage 持久化等。

七、Tailwind CSS 内功（原子化样式）

1. Tailwind 思想

• 不再写传统 CSS 类，而是写语义明确的原子类组合，如 ‎⁠bg-blue-500 text-white px-6 py-3 rounded-lg⁠。
• 使用 Tailwind Playground 快速试验（play.tailwindcss.com）。

2. 命名规则与常用模式

• 颜色：‎⁠text-gray-900⁠、‎⁠bg-blue-500⁠ 等（颜色 + 深浅）。
• 间距：‎⁠p-4⁠、‎⁠px-6⁠、‎⁠mt-4⁠ 等。
• 字体：‎⁠text-xl⁠、‎⁠font-bold⁠、‎⁠text-center⁠。
• 边框和圆角：‎⁠border⁠、‎⁠border-gray-200⁠、‎⁠rounded-lg⁠、‎⁠rounded-full⁠。
• 宽高：‎⁠w-32⁠、‎⁠w-full⁠、‎⁠w-1/2⁠、‎⁠max-w-lg⁠ 等。
• Flex 布局：‎⁠flex⁠、‎⁠flex-col⁠、‎⁠justify-center⁠、‎⁠items-center⁠、‎⁠flex-wrap⁠、‎⁠gap-x⁠。
• 阴影：‎⁠shadow-sm⁠ ~ ‎⁠shadow-xl⁠。
• 悬停：‎⁠hover:⁠ 前缀。
• 响应式：‎⁠sm:/md:/lg:/xl:⁠ 前缀，在不同屏宽用不同类。

3. 完整示例：产品卡片

• 使用 Tailwind 组合出类似苹果风官网卡片，强调结构与类名组合；响应式网格布局、卡片样式、按钮样式等。

八、Next.js（非常关键）

1. Next.js 角色与关系

• 比喻：Node.js 是地基，npm 是工具店，Next.js 是预制设计方案。
• Node.js 提供运行环境，npm 安装依赖，Next.js 整合路由、渲染、数据获取、API 路由等。

2. 入门步骤

• 用 ‎⁠npx create-next-app@latest⁠ 创建项目。
• 认识项目结构：重点是 ‎⁠app/⁠（App Router）、‎⁠page.tsx⁠、‎⁠layout.tsx⁠、‎⁠public/⁠ 静态资源。
• 运行 ‎⁠npm run dev⁠，访问 ‎⁠http://localhost:3000⁠。

3. 路由与文件系统

• ‎⁠app/page.tsx⁠ 映射 ‎⁠/⁠。
• ‎⁠app/about/page.tsx⁠ 映射 ‎⁠/about⁠。
• 嵌套路由通过文件夹嵌套。
• 动态路由：‎⁠app/blog/[id]/page.tsx⁠ 对应 ‎⁠/blog/123⁠。

4. 组件类型

• Server Components（默认）：运行在服务器，适合数据获取、SEO。
• Client Components：加 ‎⁠"use client"⁠，可用 hooks、处理交互。

5. Layout 与共享结构

• ‎⁠layout.tsx⁠ 用来定义全局结构（head、body、导航、主题等），通过 ‎⁠children⁠ 渲染具体页面。

6. 数据获取与缓存策略

• Server 组件可直接 ‎⁠fetch⁠，使用 ‎⁠next: { revalidate: 60 }⁠ 控制 ISR。
• Client 组件使用 ‎⁠useEffect⁠ + fetch 或 SWR。
• 支持多种渲染策略：SSG、SSR、ISR。

7. ‎⁠public/⁠ 目录

• 存放静态资源，如图片，页面中通过 ‎⁠/xxx.png⁠ 引用。

8. 元数据与 SEO

• ‎⁠generateMetadata⁠ 用于为动态页面生成 ‎⁠title⁠、‎⁠description⁠、Open Graph 等，用于搜索引擎与分享卡片。

9. “20 小时精通 Next.js” 部分

系统讲了大量 Next.js 核心概念（页面、API 路由、布局、Server/Client Components、数据获取、dynamic/ISR、环境变量、渲染策略、dynamic import 等），以及清晰的类比（餐厅、快递等），整体是教你如何从“文件 = 路由”、“组件 = 房间”、“布局 = 房子结构”的角度理解 Next.js。

九、shadcn/ui（组件层）

1. 核心思想

• 不是典型“封装好、你不能改”的组件库，而是一套你可以复制进项目、完全掌控源码的组件集合（Open Code）。
• 基于 Tailwind + Radix Primitives + Lucide 图标。

2. 使用流程

• 在 Next.js 项目中 ‎⁠npx shadcn@latest init⁠。
• 用 CLI 安装组件（如 ‎⁠card⁠），生成到 ‎⁠components/ui/card.tsx⁠。
• 在页面中直接 import 使用，按需修改源码。

3. 主题与暗色模式

• 安装 ‎⁠next-themes⁠，包装 ‎⁠ThemeProvider⁠，在 layout 中包裹 ‎⁠children⁠。
• 创建 ‎⁠ThemeToggle⁠ 组件（light/dark/system 按钮）。
• 在主题编辑器（tweakcn 或官方 themes）选择主题，复制 CSS 覆盖 ‎⁠globals.css⁠ 中的对应区域。

十、数据库内功：PostgreSQL + Neon

1. 两类数据库

• 关系型（SQL）：PostgreSQL、MySQL、SQLite —— 表格结构、强一致性。
• 非关系型（NoSQL）：MongoDB、Redis、Firebase 等 —— 结构灵活、性能极高、适合分布式场景。

2. PostgreSQL 基本结构

• 服务器 → 数据库 → 表 → 行/列，‎⁠schema⁠ 决定表结构。

3. Neon

• Serverless PostgreSQL：托管 PG 服务，适合现代应用。
• 在 Neon 控制台创建项目，生成连接串，配置到 ‎⁠.env⁠（开发/生产分离）。

4. SQL 基础操作

• ‎⁠CREATE TABLE⁠：设计表结构、主键、外键、约束。
• ‎⁠INSERT⁠、‎⁠SELECT⁠、‎⁠UPDATE⁠、‎⁠DELETE⁠。
• 常用类型：整数、浮点、小数、字符串、日期时间、布尔、JSON/JSONB。
• 关系建模：一对多、多对多（通过关联表）。
• 索引：加速查询。
• 约束：CHECK、UNIQUE 等保证数据质量。

5. Migration

• 用迁移脚本管理数据库“版本”，避免手动改表结构带来的混乱。
• 每个变更一个迁移文件，可重放和回滚。

十一、Supabase（BaaS 后端）

1. 定位与优势

• 开源、托管的“后端即服务”：PostgreSQL + Auth + Storage + Realtime，一站式。
• 能免费用很久，后期可自部署 Supabase 开源代码。

2. 核心界面与概念

• 项目列表 → 单项目内的数据库、认证（Auth）、存储（Storage）、API、Settings 等。
• 用户表 ‎⁠auth.users⁠ + 自定义 ‎⁠profiles⁠ 表（通过 Trigger 关联）。
• Storage：Bucket（如 ‎⁠avatars⁠）+ RLS 策略控制访问。

3. 官方示例项目（Next.js + Supabase）

• 创建 profiles 表、开启 RLS 和策略。
• 函数 + trigger 在用户注册时自动创建 profile。
• 在 Next.js 中用环境变量配置 ‎⁠SUPABASE_URL⁠ 和 ‎⁠ANON_KEY⁠。
• 使用 ‎⁠@supabase/ssr⁠：

• ‎⁠createBrowserClient⁠：客户端访问。
• ‎⁠createServerClient⁠：服务器端访问，用 cookie 维持 session。

• 配合 Next.js 中间件刷新 session。
• 登录/注册流程：server action ‎⁠login⁠/‎⁠signup⁠。
• 邮件验证：通过自定义 email 模板与 ‎⁠/auth/confirm⁠ 路由。
• 账户页面：‎⁠AccountForm⁠ 作为 client 组件，‎⁠supabase.from('profiles')⁠ 查询/更新用户资料。
• 退出登录：server 端 route handler (‎⁠POST /auth/signout⁠) 调用 ‎⁠supabase.auth.signOut()⁠。
• 头像上传：

• ‎⁠Avatar⁠ 组件接入 Storage bucket ‎⁠avatars⁠，上传文件、更新 profile 表中 ‎⁠avatar_url⁠。

好的，接着把后半部分也系统整理完，这里我会更偏“提纲 + 重点”，方便你当学习导航用。

十一、DevTools（浏览器调试与性能分析）

这一章是教你如何像“专业工程师”一样定位 bug 和性能问题，而不是靠蒙和截图问 AI。

1. DevTools 总览与界面

• 打开方式：右键页面空白处 → “检查”，或 F12。
• 主界面区域：

• 活动栏：选择工具（Elements、Console、Sources、Network、Performance 等）。
• 主工具区：当前工具内容。
• 快速视图区（底部）：可以同时开启 Console、Rendering 等小工具。

• 检查工具（鼠标箭头图标）：可以在页面上选中元素，查看其 HTML 结构和 CSS。
• 设备模式（手机图标）：模拟移动设备（尺寸、触摸、网络）。

2. Console（控制台）

• 核心用途：

• 看错误（JS 报错、网络错误）。
• 打日志：‎⁠console.log⁠ 输出变量、状态。
• 临时跑 JS 片段（试一行逻辑、算个值、调试 DOM）。

• 特点：

• 支持自动补全、历史命令（↑）。
• 单行回车执行，多行用 Shift+Enter 换行。

3. Sources + 调试器

• 文件导航：按 URL/路径列出当前页面加载的 HTML/JS/CSS 等资源。
• 调试步骤：

• 在 JS 文件某行左侧点击行号设断点。
• 回到页面触发某个操作（如点击按钮）。
• 代码执行到断点时暂停。
• 在右侧/底部看：

• Scope：当前作用域中变量值。
• Watch：你手动关注的表达式。
• Call Stack：调用链。

• 使用 Step over / into / out 等按钮一步步执行。

• 可以在 DevTools 里临时修改 JS 保存到本地缓存（不改真实文件），用于快速试验修复思路。

4. Network（网络分析）

• 用于排查：

• 请求是否发送成功？URL 是否正确？
• 响应状态码？是不是 4xx/5xx？
• 请求参数/响应数据对不对？
• 加载慢，卡在哪个资源？

• 常用操作：

• 刷新后查看请求瀑布图。
• 点击某条请求，查看：

• Headers（请求头、响应头、状态码）。
• Preview（渲染预览）。
• Response（原始 JSON/HTML）。
• Timing（DNS、TCP、TTFB、Content Download）。

• 模拟网速：选择 3G、Slow 3G，测试真实弱网体验。
• “空缓存并硬刷新”：观察首访体验。
• 搜索：按关键字搜响应体或头部内容（如查缓存策略 ‎⁠cache-control⁠）。
• 过滤：按类型（JS/CSS/XHR）、域名等筛选。

5. Performance（性能分析）

重点用一个“卡顿动画”例子教你如何定位 CPU / 渲染瓶颈：

• 步骤：

• 开 Performance 面板，CPU 模拟降速（如 4x/6x）。
• 页面上制造足够负载（不断加小图标）。
• 点击 Record 录制几秒。
• 停止后查看：

• FPS：红线代表掉帧。
• CPU 图：长时间满载说明有性能问题。
• Main Thread：放大某一段，查看调用栈和耗时。

• 找到频繁触发布局（Layout）/重排（Reflow）的 JS 代码：

• 如每帧里先 ‎⁠element.style⁠ 写样式，再 ‎⁠offsetTop⁠ 读位置，造成“强制回流”。

• 优化前后对比：

• 未优化：每帧对每个元素做“写样式 → 读布局 → 再写”，迫使浏览器不停重新计算 layout。
• 优化后：

• 只读/写 transform 相关值：‎⁠element.style.transform = translateY(...)⁠。
• 避免用 ‎⁠top/left⁠ 做动画；用 ‎⁠transform⁠ 让 GPU 合成都来处理。

• 结论：动画尽量用 transform/opacity 而不是 top/left/width/height。

6. Frame Rendering Stats（帧率叠加）

• 在 Rendering 工具中打开“帧渲染统计”：

• 在页面右上角显示实时 FPS、GPU 栅格、内存等。
• 边看帧率，边调整动画/布局，实现“实时性能调参”。

7. DevTools MCP（让 AI 操作浏览器）

• 通过 Chrome DevTools MCP 适配器，让 AI 直接连到你的浏览器：

• 可以调用：DOM 检查、Network、Lighthouse、Performance 等。
• 可以自动跑性能评测，然后基于报告给出修复方案并改代码。

• 典型用法：

• “用 MCP 打开当前页面，跑 Lighthouse，指出性能问题并给出修复方案，然后修改我的 Next.js 工程中的对应代码。”
• “用 MCP 读取某网站首页的 DOM 和 CSS，帮我在我的项目中复刻这个页面布局。”

本质：你不再是“截图 + 复制错误给 AI”，而是让 AI 自己在 DevTools 里“看”和“测”，再来改。

十二、内功与 AI 编程结合（心法总结）

这一章是从方法论层面，帮你把前面的所有技术（Cursor、终端、前端、后端、数据库、DevTools）和“用 AI 写代码”真正串起来。

1. 模糊描述 vs 清晰描述

• 模糊描述的典型问题：

• “做一个积分功能。”
• AI 不知道你的技术栈、已有模块、业务规则、数据表结构，只能乱猜，结果往往不落地。

• 清晰描述的结构：

• 上下文：项目技术栈、已有模块（如已有订阅系统、price 表）。
• 目标：本次具体要做什么（比如：按订阅计划，每月发放积分）。
• 约束与规则：年付如何摊分、边界情况（过期、升级、降级）。
• 技术要求：用什么方式实现（定时任务、队列、Cron、API 路由等）。
• 工作模式：要求 AI 先给方案和改动文件列表，你确认后再写代码。

本质：清晰描述 = 架构 + 流程 + 上下文 + 约束，内功越强，描述越清晰，AI 越好用。

2. Vibe Coding 的高阶姿势

“Vibe Coding”不是“躺在那让 AI 随便写”，而是：

• 你掌握方向和架构，AI 负责体力活和细节。
• 面对新问题的流程：

• 先找最佳实践：

• 官方文档 / 教程 / GitHub 示例（比如“Next.js + Supabase Auth 最佳实践”、“Postgres 定时任务最佳实践”）。

• 再让 AI 把最佳实践落到你的项目：

• “结合我这个项目的目录结构和技术栈，用刚才这套最佳实践来实现 X 功能。”

这样就不会出现“AI 发明一堆奇怪的轮子”而你很难维护。

3. 架构设计 = 真正的内功

前面讲的 HTML/CSS/JS/Next.js/Supabase 等，都是“局部技能”。真正决定你上限的是：

• 是否会在写代码前画“全局流程图”和“模块边界”。
• 比如 AI 试衣网站的例子：

• 你脑中应该有的流程图：

• 前端上传图片 → 压缩 → 上传到对象存储（Supabase Storage / S3）。
• 得到 ‎⁠modelUrl⁠、‎⁠clothingUrl⁠。
• 调用 Next.js API Route，把 URL 传到后端。
• 后端调用 AI 模型 API（带 API Key，放环境变量）。
• AI 返回合成图 URL 或二进制 → 存储 → 返回给前端。
• 前端展示结果图。

• 每一步对应一个模块/服务：

• 存储服务：只负责存取文件。
• 模型服务：只负责调用模型。
• Web API：只负责编排输入输出和安全控制。

• 这是“高内聚、低耦合”的典型落地：

• 将来想换存储或换模型，只改对应一层，不牵连其它层。

4. 用 AI 时的“反求诸己”

当 AI 没做出你要的东西时：

• 先反问自己：

• 我描述清楚了吗？
• 我有把现有代码/数据结构贴给它吗？
• 我的架构图是否完整？需求有没有漏掉边界情况？

• 而不是简单认为“模型不行”。

这点对你做企业级 AI 方案尤其关键：你自己是“架构师 + PM”，AI 是拿需求干活的工程师。

5. 实战准则（可以直接当 checklist 用）

• 复杂逻辑 → 先写用例和测试

• “这是函数输入输出表，这些是测试用例，请写一个实现能通过所有测试。”

• 语言必须具体：

• 不要“随便优化 UI”，要明确颜色、尺寸、状态、动效。

• 守住架构边界：

• 让 AI 把逻辑写到正确文件/层级中（service / API / component），而不是一个大文件里啥都干。

• 大改动必须“先方案后实现”：

• 要求 AI 先输出：理解总结 + 任务拆分 + 将改动的文件列表及影响，再开始写。

• 反复利用 DevTools + MCP：

• 让 AI 用 DevTools MCP 检查布局、Network、性能，而不是你手动截图说明。

6. 进阶阅读（真正拉开段位的书）

• 《Clean Code》：训练你“什么是好代码”，看懂 AI 写的代码哪里不行。
• 《Head First 设计模式》或《大话设计模式》：

• 学完之后，你可以跟 AI 说“用策略模式重构这段支付逻辑”、“用观察者模式实现这个通知系统”，AI 的实现会更接近工程级水准。

如果你后面想把这一整页内容拆成“学习路线”（比如针对你做海内外 AI SaaS 的目标：先 Next.js + Tailwind + Supabase，然后再上 shadcn/ui + DevTools + MCP），我可以帮你按“4~6 周学习计划”再压一版专门路线图。