LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议

Chrome DevTools MCP 是我目前用过的 MCP 里比较实用的，推荐使用Claude Code辅助开发的朋友都可以尝试一下——只要你有一份认真写过的设计稿，它就能帮你把"还原度"这件事自动化掉一大半。设计流程是这样的：产品需求和设计稿定好之后， Gemini 负责具体页面的设计，跑通之后再交给我 review 页面是否有问题。这套流程跑通之后，一个页面从"AI 写完"到"还原度 OK

TDD 管的是"怎么把一件确定的事做对"，SDD 管的是"先把这件事到底是什么想清楚"。对新手来说，不用纠结"该学哪个"，它们解决的是软件开发里两个不同阶段的问题——而在 AI 帮你写代码的今天，"先把事情想清楚"这一步，正在变得比以前更重要。

Chrome DevTools MCP 是我目前用过的 MCP 里比较实用的，推荐使用Claude Code辅助开发的朋友都可以尝试一下——只要你有一份认真写过的设计稿，它就能帮你把"还原度"这件事自动化掉一大半。设计流程是这样的：产品需求和设计稿定好之后， Gemini 负责具体页面的设计，跑通之后再交给我 review 页面是否有问题。这套流程跑通之后，一个页面从"AI 写完"到"还原度 OK

LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议

LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议

LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议

如果你最近用过 Claude Code、Cursor 这类 AI 编程助手，大概有过这样的体验：你说"帮我加个按钮"，它改了七八个文件；你说"修个小 bug"，它把整个模块重构了一遍；更烦的是，它根本不问你任何问题，悄悄做了一堆假设，等你发现的时候已经一团糟。今年 1 月，AI 界的传奇人物 Andrej Karpathy（前 Tesla AI 总监、OpenAI 创始成员）分享了他用 AI 编程

核心坑点AI高频错误操作正确规范核心避坑原则上下文噪音干扰给AI开放式模糊指令，如“修复整个项目的bug”，不限制范围给封闭式精准指令，如“仅修改stores/plugin.ts文件，基于PluginItem接口重写add/delete方法”不给AI猜的空间，明确边界、锁定范围、固定基准响应式丢失直接解构Pinia/reactive响应式数据，导致引用断开必须使用storeToRefs处理Pini

问题场景:假设你在写一个网站,有很多功能:日期格式化、数据校验、Ajax 请求等。如果把所有代码都写在一个main.js文件里,这个文件可能有几千行,根本没法维护!模块化的思路项目文件夹/├── utils/│ ├── date.js ← 只负责日期处理│ ├── validator.js ← 只负责数据校验│ └── http.js ← 只负责网络请求└── main.js ← 主文件,把上面的