AI 又又造词，Graph 就又要替代 Loop 了？
OpenClaw 的 Peter 是懂嘲讽的，之前也是他提的，Prompt Engineering 已经成为过去，开始要进入 Loop Engineering 了，然后最近他发现，大家已经开始炒 Gr
被 iOS 弹窗支配的恐惧——一次 H5 弹窗层级问题的排查与修复
线上工单流程弹出层被页面 fixed 元素挡住，深扒 iOS Safari 栈溢出的底层原理，MutationObserver + z-index 双管齐下搞定。
为什么很多人觉得前端很简单？
前端看似简单，实则复杂远超表象。视觉反馈快感掩盖了90%的隐性工作量，包括对抗失控的宿主环境、处理异步竞态灾难和防范内存泄漏。资深工程师用复杂机制伪装出简洁界面，在机器逻辑与人类行为间架起桥梁。
全网都在吹的 Kimi K3，到底怎么样？
国产最贵、速度还慢，凭什么还是国产之光？Kimi K3 前端能力全球第一梯队，长任务处理稳，还是开源模型，这次是真敢跟顶尖闭源模型掰手腕了。
用 Kimi K3 交付一个真实项目后：很强，但还有不足
大家好，我是孟健。 Kimi K3 正式发布了。这个结果，我终于可以公开说了：发布之前，我已经把 ShipSolo 微信小程序这个真实项目整个交给它，从需求梳理到部署验证走完全程，最终完整交付。 交付
停更的这一年，All In AI、陪媳妇生娃、还考了个研
停更的这一年，All In AI、陪媳妇生娃、还考了个研 打开掘金 App，看了一眼自己的最近更新——停在了整整一年前。 不是不想写，是这一年确实被塞得太满了。如果非要用几个关键词来概括，那就是： A
Vue 和 React 真正的差距，不在语法，而在团队犯错成本
React 与 Vue 的本质区别在于：前者给予开发者极大自由度，但需团队具备高水平才能避免常见陷阱；后者通过底层机制自动兜底，显著降低犯错成本，更适合多数业务场景。
为什么 AI 写前端时，总是优先选择 React，而不是 Vue？
AI编程工具默认生成React+Tailwind代码，而非Vue，本质是模型对语言结构纯粹性的偏好。React的JSX在AST层面更接近标准JS，而Vue的模板与脚本分离增加了模型理解成本，导致生成质量下降。
一键还原任意网站，这套 Playwright + 多 Agent 工程流太猛了
一 前言 哈喽，大家好，我是 alien，今天我们来讲一个能够将精美网站一键复制的功能——ai-website-cloner-template 的使用和实现原理。 通过本篇文档你能收获到哪些内容？ A
星云SDK + 油猴：给LLM塑造肉身，陪伴你在每个网页
作为一名前端开发者，我一直有一个愿景：让大模型不再只是冰冷的输入框，而是能以具身交互智能数字人形象，出现在我们浏览的每一个网页上，一直陪伴我们。 这个想法其实来自钢铁侠的“贾维斯”，我希望在我使用浏览
Fiber 节点 —— 一个数据结构如何承载整个 React 运行时
React通过 Fiber 节点去承载整个 React 的运行时，今天我们通过这篇文章来梳理一下 React 是如何做的，为什么要这样做，这样做背后的考量是什么？
凌晨睡不着，我给台风巴威写了个追踪网站
索性爬起来，打开电脑，用 Claude Fable 5 把想法一点点敲了出来。把基于中央气象台、日本气象厅、美国 JTWC、台湾气象署四家的路径数据放在同一张地图上之后，很多事一眼就看明白了
豆包和千问同时关了智能体，我用它们搭的 3 个自动化全废了——迁移方案整理
豆包和千问 7/15 同时下线智能体功能。整理了 4 种替代方案对比（Coze/Dify/Claude Code/自建API），附迁移操作指南和数据导出 Checklist。
别被模型宣传骗了，真实 Agent 任务一跑就知道
现在市面上能调用的模型确实越来越多了，各家都有自己的亮点和侧重点，光看宣传文档和跑分数据其实很难判断哪个真正适合自己——尤其是当任务从单轮对话延伸到多步操作的时候，情况就更加复杂了。 所以我就想着，不
首屏加载半秒开！还有谁！！！
这是我的网站登录页目前加载时间，毫秒级加载，嗖的一下就出来啦，现在总结一下怎么做到的 一，路由 懒加载，这是常规操作 二，UI组件库动态导入 一定不要在入口main.js里全部注册组件,使用插件动态自
我用 Codex 重写了同事维护三年的代码，他没说谢谢——而是找了领导
我用 Codex 花一个周末重写了同事维护三年的代码，提了一个大 PR。他没有说谢谢，而是找了领导。这篇文章复盘了我在 AI 时代犯的一个典型错误：技术上正确不等于做法正确。
AI 编程工作流：上下文、任务拆分与代码审查
AI 编程在真实项目中的完整工作流，包括需求分析、任务拆分、实现、审查和回滚
Claude Code 使用指南：从配置到实战
Claude Code 的核心配置、常用命令、上下文管理和最佳实践
AI 编程实战指南
Claude Code、Cursor、Codex 等 AI 编程工具的使用技巧与工程实践
MCP 协议详解：AI 应用的 USB-C
理解 MCP 协议的分层架构、核心能力，以及如何在项目中接入 MCP Server
2026 年微前端选型指南：wujie、qiankun、micro-app、Module Federation 全面对比
旧系统不敢动，新系统想用 Vue 3——微前端怎么选？本文从实际项目角度对比 wujie、qiankun、micro-app、Module Federation 四个方案，给出 2026 年的选型建议。
React Renderer 分离的多平台架构
React 的 Renderer 分离的多平台架构，让 React 可以支持多平台，真正的实现一次编写，到处运行。今天来探究这个架构的实现原因和背后的思考。
AI Agent 核心概念：从 Prompt 到自主决策
理解 AI Agent 的工作原理，包括 Agent Loop、Memory 系统、Context Engineering 和工具调用
RAG 检索增强生成：让大模型拥有外部知识
理解 RAG 的完整链路，包括文档处理、向量数据库、检索策略和优化方法
DeepSeek这次招得太猛了，36个岗位，80%都要会Agent！
从 DeepSeek 最新 36 个在招岗位的 JD 拆解 AI 时代的人才需求变化，逐岗位分析服务端、前端/客户端、测试开发的能力进化方向，附转型准备指南。DeepSeek 开始摇人了，有点猛啊。
qiankun 微前端实战：老项目不动，新功能用 Vue 3 怎么搞？
从零到一搞懂 qiankun 微前端，包含核心概念、快速上手、任意老项目接入方案和生产部署指南
Spec Coding：AI 编程的正确打开方式
从 Vibe Coding 到 Spec Coding，为什么先写规范再让 AI 写代码才是正道
AI 应用开发知识体系
从大模型基础到 Agent、RAG、MCP，系统梳理 AI 应用开发的核心概念与工程实践
大模型基础：Token、上下文与结构化输出
理解大模型 API 调用的核心概念，包括 Token 计算、上下文窗口、采样参数和结构化输出
Vue 3 里被严重低估的 API：InjectionKey
一、先说个场景 Hello~大家好，我是秋天的一阵风 你肯定写过这种代码： 跑起来没问题，但你把 'theme' 打成 'thme'，TypeScript 一声不吭。等到线上样式崩了你才发现——拼写错
面试官问你：“AI 能写 80% 的代码了，公司为什么还需要你？”
先说一个事实：2026 年的技术面试，已经和两年前完全不一样了。两年前面试问的是："手写一个 Promise"、"说说 React Fiber 原理"...现在面试官默认你会用 AI。他们真正想知道的
如何推动团队代码规范落地
代码规范从制定到落地的完整经验，包括工具链配置、团队推动、持续维护的方法。
前端性能监控体系建设
从前端埋点到性能分析的完整监控体系搭建方案，包含指标定义、数据采集、告警配置。
前端技术选型决策框架
面对新技术时如何做决策的思维框架，避免跟风选型和经验主义陷阱。
Docker + Nginx 前端部署实战
前端项目 Docker 化部署的完整流程，包含多阶段构建、Nginx 配置、HTTPS 证书。
ESLint + Prettier + Husky 配置全流程
2026 年前端项目代码规范配置的完整流程，一行命令搞定 ESLint + Prettier + Husky + lint-staged。
Git 分支策略：Git Flow vs Trunk Based
两种主流 Git 分支策略的对比分析，以及我们团队从 Git Flow 迁移到 Trunk Based 的经验。
Monorepo 实践：Turborepo 从零到一
使用 Turborepo 搭建前端 Monorepo 的完整指南，包含项目结构、任务编排、缓存优化。
Node.js 还能再战十年？给你一个不换引擎的理由
Nub 是一个用 Rust 编写的 Node.js 增强工具，旨在提升开发体验而非运行时性能。它通过优化冷启动、环境变量加载、TypeScript 执行和依赖管理等环节
Pinia vs Vuex：为什么我全面迁移到了 Pinia
从 Vuex 迁移到 Pinia 的完整历程，包含迁移策略、踩坑记录和性能对比。
Vite 插件开发入门
Vite 插件开发入门教程，从简单到复杂，手把手教你写一个自定义 Vite 插件。
Vue 3 Teleport + Suspense 实战用法
Vue 3 中 Teleport 和 Suspense 的实战用法，包含 Modal 异步组件、骨架屏等真实场景。
Vue 3 + TypeScript 项目从零搭建模板
2026 年 Vue 3 + TypeScript 项目的标准搭建模板，包含 Vite、ESLint、Prettier、Husky 全套配置。
无限期免费，Token 随便用，舒服啊！
实测 Agnes AI 三款免费全模态模型，Agnes-2.0-Flash 文本、Agnes-Image-2.1-Flash 图片、Agnes-Video-2.0 视频
前车查找算法设计与实现
oneLineCar 工单系统中前车查找功能的算法设计，从暴力匹配到空间索引优化，查询性能提升 100 倍。
Excel 百万级数据导出性能优化
工单系统报表导出从 OOM 到秒级完成的优化历程，涵盖流式写入、分片导出、Web Worker 等方案。
工单系统权限模型设计（RBAC）
工单系统中基于 RBAC 的权限模型设计，角色、权限、数据范围三层控制的完整方案。
工单系统 WebSocket 实时消息推送方案
oneLineCar 工单系统中 WebSocket 实时消息推送的完整方案，包含心跳检测、断线重连、消息确认机制。
工单系统 WebSocket 实时消息推送方案
在 oneLineCar 工单系统中从轮询迁移到 WebSocket 实时推送的完整方案，涵盖重连、心跳、消息确认和离线队列。
为什么AI 时代来临，大部分人吃不到红利
看了个段子深有感触 年少时的我曾对父亲说： 你们那年代遍地风口 改革开放南下经商、当个中间商开个厂都能赚得盆满钵满、房价低到像白捡，遍地都是机会！ 身处 AI 时代，这一刻我突然懂了 不是上一辈不努力
AI 辅助前端开发的正确姿势
<h1 id="ai-辅助前端开发的正确姿势" tabindex="-1">AI 辅助前端开发的正确姿势 <a class="header-anchor" href="#ai-辅助前端开发的正确姿势" aria-label="Permalink to "AI 辅助前端开发的正确姿势"">​</a></h1> <p>这篇文章不讲 prompt 技巧，不列工具对比表格。分享的是我 2025–2026 年在真实项目中用 AI 辅助前端开发的<strong>工作流和判断标准</strong>。</p> <p>2026 年的 AI 编码工具有一个共同特征：<strong>它们已经够好了，但前提是你知道怎么用</strong>。这个"怎么用"不是指写 prompt 的技巧，而是指：什么时候该用、什么时候不该用、怎么验证输出、怎么在团队层面落地。</p> <hr> <h2 id="一个判断框架-什么任务交给-ai" tabindex="-1">一个判断框架：什么任务交给 AI <a class="header-anchor" href="#一个判断框架-什么任务交给-ai" aria-label="Permalink to "一个判断框架：什么任务交给 AI"">​</a></h2> <p>我总结了一个简单的四象限判断，用来决定一个任务是否适合 AI：</p> <div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span> 高复杂度</span></span> <span class="line"><span> │</span></span> <span class="line"><span> AI 辅助策划 │ AI 辅助实现</span></span> <span class="line"><span> (给方向) │ (写代码)</span></span> <span class="line"><span> │</span></span> <span class="line"><span> ──────────────┼──────────────→ 高确定性</span></span> <span class="line"><span> │</span></span> <span class="line"><span> 自己写 │ AI 自动化</span></span> <span class="line"><span> (不适合AI) │ (重复劳动)</span></span> <span class="line"><span> │</span></span> <span class="line"><span> 低复杂度</span></span></code></pre> </div><ul> <li><strong>高确定性 × 高复杂度</strong>（右上）：AI 最适合。比如"写一个符合 OpenAPI 规范的接口 handler"。规范清楚、预期明确，AI 能一次搞定。</li> <li><strong>低确定性 × 高复杂度</strong>（左上）：AI 适合做调研和方案生成，但需要你审校和决策。比如"设计这个页面的组件结构"。</li> <li><strong>高确定性 × 低复杂度</strong>（右下）：用自动化脚本，不必每次都调 AI。</li> <li><strong>低确定性 × 低复杂度</strong>（左下）：自己写更快。比如改个文案、调个颜色。</li> </ul> <p><strong>判断依据就一句话：AI 写的代码我能不能一眼判断对不对？</strong></p> <p>能 → 交给 AI。不能 → 先自己理清楚。</p> <hr> <h2 id="我的-ai-辅助工作流" tabindex="-1">我的 AI 辅助工作流 <a class="header-anchor" href="#我的-ai-辅助工作流" aria-label="Permalink to "我的 AI 辅助工作流"">​</a></h2> <p>这套流程的核心逻辑是：<strong>用 AI 处理执行，用人脑处理决策</strong>。</p> <h3 id="step-1-建立上下文" tabindex="-1">Step 1：建立上下文 <a class="header-anchor" href="#step-1-建立上下文" aria-label="Permalink to "Step 1：建立上下文"">​</a></h3> <p>这是最容易被跳过、但最重要的一步。</p> <p>AI 在没有上下文的情况下写的代码，看起来没错，但放进项目里就是不对劲——用的变量名不合约定、样式没走设计 token、import 路径风格不一致。</p> <p>做法：**项目根目录放一个 <code>CLAUDE.md</code>（Cursor 用户是 `.</p>
OpenSpec 入门：用规范驱动 AI 编码
OpenSpec 是增长最快的开源 SDD 框架（55K+ stars），让 AI 编码从"黑盒"变"白盒"。本文从实战出发，讲清楚理念、上手流程、前端场景和避坑经验。
前端 SEO 全链路优化：从基础标签到 AI 搜索时代
从 TDK 标签、语义化 HTML、SSR/SSG 到结构化数据和 AI 搜索优化，一套完整的前端 SEO 实践指南。
Spec-Driven Development：写文档，让 AI 写代码
<h1 id="spec-driven-development-写文档-让-ai-写代码" tabindex="-1">Spec-Driven Development：写文档，让 AI 写代码 <a class="header-anchor" href="#spec-driven-development-写文档-让-ai-写代码" aria-label="Permalink to "Spec-Driven Development：写文档，让 AI 写代码"">​</a></h1> <p>2025 年开始，「Vibe Coding」这个词火遍了整个开发者社区。对着 AI 说一句「帮我做个XX」，代码就生成了。确实爽，但爽完之后，问题来了：</p> <ul> <li>AI 猜的架构和你想要的不一样</li> <li>改了一处，它又动了不该动的地方</li> <li>不敢上线，因为不知道 AI 写的代码到底干了什么</li> </ul> <p><strong>Vibe Coding 的问题不是 AI 不行，是你没告诉 AI 边界在哪。</strong></p> <p>于是 2026 年，主流的工作流开始从 Vibe Coding 转向 <strong>Spec-Driven Development（SDD）</strong> ——先写 spec，再让 AI 写代码。</p> <h2 id="从-vibe-coding-到-spec-coding" tabindex="-1">从 Vibe Coding 到 Spec Coding <a class="header-anchor" href="#从-vibe-coding-到-spec-coding" aria-label="Permalink to "从 Vibe Coding 到 Spec Coding"">​</a></h2> <p>Vibe Coding 和 SDD 的核心区别，一句话说清楚：</p> <table tabindex="0"> <thead> <tr> <th>维度</th> <th>Vibe Coding</th> <th>Spec-Driven Development</th> </tr> </thead> <tbody> <tr> <td>流程</td> <td>描述 → 生成 → 测试 → 迭代</td> <td>写 spec → 审查 → 生成 → 验证</td> </tr> <tr> <td>设计决策</td> <td>AI 替你决定了</td> <td>你在 spec 里写清楚</td> </tr> <tr> <td>验收标准</td> <td>「看起来差不多」</td> <td>「验收条件全部通过」</td> </tr> <tr> <td>可复用性</td> <td>聊天记录里翻</td> <td>spec 在 git 里，随时可重来</td> </tr> </tbody> </table> <p>Vibe Coding 适合原型和一次性脚本。但只要是<strong>会上线、会维护、会交接</strong>的代码，没有 spec 就是在赌 AI 猜对了你的想法。</p> <p>而 AI 最不擅长的就是读心术。</p> <h2 id="spec-driven-development-是什么" tabindex="-1">Spec-Driven Development 是什么 <a class="header-anchor" href="#spec-driven-development-是什么" aria-label="Permalink to "Spec-Driven Development 是什么"">​</a></h2> <p>SDD 就是把 spec 当作代码的<strong>唯一真实来源</strong>。开发流程变成：</p> <div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span>你写 spec（.md 文件，放 git 里）</span></span> <span class="line"><span> ↓</span></span> <span class="line"><span>AI 读 spec → 出计划 → 拆任务 → 写代码 → 验证</span></span> <span class="line"><span> ↓</span></span> <span class="line"><span>你 review 结果 → 改 spec → 循环</span></span></code></pre> </div><p>spec 不是写论文，不用长篇大论。核心就三个问题：</p> <h3 id="_1-做什么-为什么" tabindex="-1">1. 做什么 + 为什么 <a class="header-anchor" href="#_1-做什么-为什么" aria-label="Permalink to "1. 做什么 + 为什么"">​</a></h3> <p>一句话说清楚：给谁用、解决什么、做成什么样算完。</p> <h3 id="_2-关键约束-给-ai-看的" tabindex="-1">2. 关键约束（给 AI 看的） <a class="header-anchor" href="#_2-关键约束-给-ai-看的" aria-label="Permalink to "2. 关键约束（给 AI 看的）"">​</a></h3> <p>技术栈、数据结构、性能要求、不能碰哪些代码。写得越清楚，AI 越不会跑偏。</p> <h3 id="_3-边界" tabindex="-1">3. 边界 <a class="header-anchor" href="#_3-边界" aria-label="Permalink to "3. 边界"">​</a></h3> <p>这一步最重要——<strong>明确哪些事 AI 必须停下来问你</strong>。比如加依赖、改表结构、动公共组件——这些决策必须你来做。</p> <h3 id="一个真实例子" tabindex="-1">一个真实例子 <a class="header-anchor" href="#一个真实例子" aria-label="Permalink to "一个真实例子"">​</a></h3> <p>这是我一个功能最短的 spec：</p> <div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold"># Spec: 用户导出 CSV</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold">## 目标</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">后台用户列表加一个「导出 CSV」按钮，下载 name / email / created_at。</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold">## 技术约束</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Vue 3 + Composition API</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 直接用已有的 /api/users 接口</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 不引入新依赖</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold">## 边界</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 只导当前列表，不做筛选导出</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 不分页，一次性返回</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 不写测试</span></span></code></pre> </div><p>15 行，5 分钟写清楚。AI 读了这个 spec，一次就产出了我要的代码，不需要来回改。</p> <h2 id="_2026-年的-sdd-工具生态" tabindex="-1">2026 年的 SDD 工具生态 <a class="header-anchor" href="#_2026-年的-sdd-工具生态" aria-label="Permalink to "2026 年的 SDD 工具生态"">​</a></h2> <p>几个主流的 SDD 工具，定位各有不同：</p> <table tabindex="0"> <thead> <tr> <th>工具</th> <th>定位</th> <th>适合谁</th> </tr> </thead> <tbody> <tr> <td><strong>Claude Code + spec skill</strong></td> <td>Agent 读 spec 自主执行</td> <td>习惯终端、复杂项目</td> </tr> <tr> <td><strong>GitHub Spec Kit</strong></td> <td>开源 CLI，四阶段工作流</td> <td>团队协作、规范流程</td> </tr> <tr> <td>**Cursor + .</td> <td></td> <td></td> </tr> </tbody> </table>
我的 AI 编码工作流——从 spec 到 commit 的完整闭环
把 SDD、OpenSpec、AI 工具、编码判断力串成一条线。从需求到代码，每一步做什么、为什么、怎么落地。
Vite 8 迁移实战：从双构建器到 Rolldown 原生
Vite 8 用 Rolldown 统一了 esbuild + Rollup 的双构建器模式，实现 10-30x 构建加速。本文讲清楚架构变化、迁移步骤和踩坑经验。
AI 编程实战：Cursor、Claude Code 与 Agent 模式的经验总结
<h1 id="ai-编程实战-cursor、claude-code-与-agent-模式的经验总结" tabindex="-1">AI 编程实战：Cursor、Claude Code 与 Agent 模式的经验总结 <a class="header-anchor" href="#ai-编程实战-cursor、claude-code-与-agent-模式的经验总结" aria-label="Permalink to "AI 编程实战：Cursor、Claude Code 与 Agent 模式的经验总结"">​</a></h1> <p>2025 年下半年开始，AI 编程进入了一个爆发期。到 2026 年中，<strong>用 AI 写代码已经从「尝鲜」变成了一种主流工作方式</strong>。但用什么工具、怎么用、什么时候不该用——这些问题的答案比大多数人想的要复杂。</p> <p>先说我的结论：<strong>没有最好的 AI 编程工具，只有最适合你工作流的工具。</strong></p> <h2 id="_2026-年的-ai-编程工具格局" tabindex="-1">2026 年的 AI 编程工具格局 <a class="header-anchor" href="#_2026-年的-ai-编程工具格局" aria-label="Permalink to "2026 年的 AI 编程工具格局"">​</a></h2> <p>目前市面上主流的几个工具，各自的定位其实差异不小：</p> <table tabindex="0"> <thead> <tr> <th>工具</th> <th>核心优势</th> <th>适合场景</th> </tr> </thead> <tbody> <tr> <td><strong>Cursor</strong></td> <td>IDE 深度集成、Tab 补全、Agent 模式</td> <td>日常开发、调试、小范围重构</td> </tr> <tr> <td><strong>Claude Code</strong></td> <td>Agent 模式最强、终端原生、自主规划</td> <td>复杂任务、多文件修改、架构级变更</td> </tr> <tr> <td><strong>GitHub Copilot</strong></td> <td>VSCode 生态、稳定、低心智负担</td> <td>代码补全、简单代码生成</td> </tr> <tr> <td><strong>Codex CLI</strong></td> <td>命令行 Agent、开源、灵活</td> <td>批量任务、CI 集成</td> </tr> </tbody> </table> <h3 id="cursor-目前最均衡的选择" tabindex="-1">Cursor：目前最均衡的选择 <a class="header-anchor" href="#cursor-目前最均衡的选择" aria-label="Permalink to "Cursor：目前最均衡的选择"">​</a></h3> <p>Cursor 的 Agent 模式（Composer + Agent）是目前体验最流畅的。它的优势在于 <strong>「永远知道上下文」</strong>——不用手动选择文件作为上下文，它自动关联当前项目结构和相关代码。</p> <p>一个典型的工作流：</p> <div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span>1. Cmd+K 问一个问题 → 理解代码逻辑</span></span> <span class="line"><span>2. Agent 模式做多文件修改 → 预览 diff</span></span> <span class="line"><span>3. Tab 补全做重复性编码 → 比如写 type 定义、接口</span></span></code></pre> </div><p>尤其提一下 Tab 补全，这是 Cursor 被低估的功能。它不只是补全当前行，而是能<strong>预测下一步想写什么</strong>——写了一个函数签名，它能补完整实现。在我自己的体验里，<strong>日常编码中有 30-40% 的字符是 Tab 补全完成的</strong>，这种「不打断心流」的体验比 Chat 模式重要得多。</p> <h3 id="claude-code-复杂任务的王牌" tabindex="-1">Claude Code：复杂任务的王牌 <a class="header-anchor" href="#claude-code-复杂任务的王牌" aria-label="Permalink to "Claude Code：复杂任务的王牌"">​</a></h3> <p>Claude Code 是一个完全不同的工具。它不在 IDE 里运行，而是在终端里作为一个 Agent 工作。上手门槛比 Cursor 高，但上限也更高。</p> <p>它真正发光的地方是：</p> <p><strong>跨文件大规模重构</strong></p> <div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span>claude "把这个组件的 Props 类型提取到 types.ts，</span></span> <span class="line"><span>然后把所有用到的地方都更新，最后删除旧文件"</span></span></code></pre> </div><p>Claude Code 会：读所有相关文件 → 规划改动步骤 → 逐一执行 → 验证结果。这个流程一次完成，中间不需要你介入。</p> <p><strong>Agent 自主规划</strong> Claude Code 的 Agent 模式（如果用了子 Agent 编排）能自动拆解任务、并行执行、汇总结果。对于「调研一个开源库怎么用，然后集成到项目里」这种多步骤任务，效率极高。</p> <h3 id="github-copilot-稳定但不够聪明" tabindex="-1">GitHub Copilot：稳定但不够聪明 <a class="header-anchor" href="#github-copilot-稳定但不够聪明" aria-label="Permalink to "GitHub Copilot：稳定但不够聪明"">​</a></h3> <p>Copilot 最大的优势是稳定性。它在 VSCode 里的补全体验经过了多年的打磨，非常流畅。问题在于——<strong>它擅长的是「下一行代码」，而不是「改整个文件」</strong>。Agent 模式虽然也有了，但和 Cursor、Claude Code 比还有差距。</p> <p>Copilot 最适合的场景是：<strong>你清楚自己在写什么，只是不想敲样板代码。</strong> 比如写 CSS、写单元测试、写类型定义——这些活 Copilot 干得又快又好。</p> <h2 id="我的实际工作流" tabindex="-1">我的实际工作流 <a class="header-anchor" href="#我的实际工作流" aria-label="Permalink to "我的实际工作流"">​</a></h2> <p>经过大半年的磨合，我现在的工作流是这样的：</p> <div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span>日常编码 (80% 时间)</span></span> <span class="line"><span> ├── Cursor Tab 补全 → 重复性代码</span></span> <span class="line"><span> ├── Cmd+K / Composer → 理解代码、小范围修改</span></span> <span class="line"><span> └── Agent 模式 (Cursor) → 多文件改动</span></span> <span class="line"><span></span></span> <span class="line"><span>复杂任务 (15% 时间)</span></span> <span class="line"><span> └── Claude Code → 架构级变更、跨模块重构</span></span> <span class="line"><span></span></span> <span class="line"><span>纯思考 (5% 时间)</span></span> <span class="line"><span> └── 关掉所有 AI 工具 → 纯手写 + 思考</span></span></code></pre> </div><p>最后 5% 可能是最重要的一个环节。AI 编程容易让人进入 <strong>「无脑接受模式」</strong>——AI 给什么就吃什么。对于复杂逻辑、安全敏感代码、核心算法，关掉 AI 自己写一遍，反而比反复让 AI 改更高效。</p> <h2 id="避坑指南" tabindex="-1">避坑指南 <a class="header-anchor" href="#避坑指南" aria-label="Permalink to "避坑指南"">​</a></h2> <h3 id="_1-ai-生成的代码要审-而且要认真审" tabindex="-1">1. AI 生成的代码要审，而且要认真审 <a class="header-anchor" href="#_1-ai-生成的代码要审-而且要认真审" aria-label="Permalink to "1. AI 生成的代码要审，而且要认真审"">​</a></h3> <p>这个说了无数次，但实际做的人不多。我的实践：</p> <ul> <li><strong>代码审查时特别关注 AI 生成的改动</strong> — 通常我会标注 [AI] 标记</li> <li><strong>警惕 AI 引入的未使用变量和死代码</strong> — Agent 模式特别喜欢留这些</li> <li><strong>AI 不擅长边界条件</strong> — 空数组、null、超时、并发——这些场景必须人肉确认</li> </ul> <h3 id="_2-上下文窗口不是无限的" tabindex="-1">2. 上下文窗口不是无限的 <a class="header-anchor" href="#_2-上下文窗口不是无限的" aria-label="Permalink to "2. 上下文窗口不是无限的"">​</a></h3> <p>Cursor 和 Claude Code 的上下文窗口虽然大（100K+ tokens），但超出之后性能会急剧下降。大项目里：</p> <ul> <li>用 `.</li> </ul>
Vue 3 进阶：Pinia、Composition API 与依赖注入的实战总结
从 Pinia 状态管理到 provide/inject 依赖注入，再到 Composition API 的高级模式——在真实项目里用了一年后的经验沉淀。
前端工程化：2026 年的构建工具、架构演进与 CI/CD
从构建工具之争到微前端架构，再到 CI/CD 流水线，聊聊我对前端工程化这几年演进的一些观察和实践。
Hello, World — 我的博客开张了
从零搭建了一个科幻风的个人博客，聊聊为什么是现在、为什么是 VitePress。
Vue 3 组合式函数设计模式 — 从工单系统实践中总结
在 oneLineCar 工单系统中实践组合式函数设计模式半年后的一些总结和反思。
工单系统离线重连方案 — IndexedDB + 队列 + WebSocket
oneLineCar 工单系统在网络不稳定场景下的离线数据缓存与自动重连方案。