前端工程化

Harness Engineering：让 Agent 在受控边界内运行AI Agent 工程化系列第五篇。本文以 Cherry Studio 的 Tool Registry、Claude Code settings、审批、会话宿主与可观测性为例，说明 Harness Engineering 如何把“模型能做什么”变成“产品允许它在什么边界内做什么”。文中的伪代码用于解释设计逻辑，不是可直接复制的生产代码。

AINative软件工程

LLM 应用的依赖注入工程实践：解耦 Client、Prompt 和 Tool Registry，让 AI 系统真正可测试可替换作者按：我们团队有一个 LLM 应用上线后跑了 3 个月，等到要切换模型供应商的时候，才发现 LLM 客户端实例被散落在 17 个文件里，单元测试覆盖率是 0%，因为没法 mock。这篇文章就是为了不让你重蹈覆辙。

Loop Engineering：把模型调用变成可控的多步任务AI Agent 工程化系列第四篇。本文以 Cherry Studio 的 AI SDK Agent、Stream Manager 和 Agent Session Runtime 为例，讲解工具循环的状态、停止条件、Hook、错误、审批与用户 steering。文中的伪代码用于解释工程逻辑，不是可直接复制的生产实现。

Context Engineering：让 Agent 在当前步骤看到正确的事实AI Agent 工程化系列第三篇。本文以 Cherry Studio 的运行时为例，讲解对话历史、附件、知识库、记忆与 Agent Session 如何共同构成模型上下文，并给出关键算法的伪代码与工程取舍。

一次前端生产白屏复盘：旧 HTML、Hash 资源和 MIME type text/html最近处理了一次生产环境白屏问题。项目是一个 React + Vite 的 SPA 应用，构建后资源文件会带 hash，例如：

Prompt Engineering：从提示词文案到 Agent 行为契约AI Agent 工程化系列第二篇。本文以 Cherry Studio 的 Chat 与 Agent Session 运行时为例，讨论 Prompt 如何被组装、维护、测试和演进。文中的伪代码用于解释设计逻辑，不是可直接复制的生产代码。

前端技术官

前端真的比后端简单吗？在这个圈子摸爬滚打这么久，我听过最多的一句吐槽就是：前端不就是画画页面，调调接口吗？有什么难度？很多写后端的兄弟，看着前端用各种脚手架两分钟就能搭出一个漂亮的管理后台，往往会产生一种错觉：前端的门槛极低，随便拉个会写 HTML 的实习生就能干。

Webpack迁到Rspack，文档说三步走，实际我折腾了两天我们组一个React中后台项目，跑了三年多了，452个模块。Webpack 5打包一次生产环境接近两分钟，CI排队的时候看着进度条，总觉得在浪费生命。上周刷GitHub看到Rspack已经2.1.7了，release note里写了不少性能优化，我寻思趁这周需求间隙试试。官方文档看起来挺清爽的：改个配置文件名，换几个loader，完事。半天就够了吧。结果折腾了两天。文档写得挺清楚，但坑都在文档没写的地方。

2026 年了，别再用 only-allow 固定包管理器了！devEngines 才是正解大家好，我是 sonion。最近在搭新项目时，发现用 only-allow 限制包管理器强制用 pnpm 的方案失效了，排查半天才发现 only-allow 不支持 pnpm v11。

先吃饱再说

编写一个颜色选择器之后，我理解了 React 工程化的三层架构摘要：一个包含颜色选择器和成员列表的小项目，如何从“所有代码堆在一起”演进为 Model、API、Component 三层分离？本文通过实际代码，拆解工程化如何让 React 项目变得清晰、可维护、可扩展。

先吃饱再说

从“传事件”到“只传值”：React + TypeScript 组件 Props 设计的两次进化摘要：本文通过一个简单的姓名编辑组件，展示 React + TypeScript 中 Props 类型定义的三次迭代——从暴露事件对象到封装内部状态，再到状态提升与职责分离，揭示组件设计如何逐步走向清晰与可维护。

暗黑模式一键切换完整方案（CSS 变量 + 本地存储）Hi，我是前端人类学！在网页设计中，暗黑模式早已从“酷炫的彩蛋”变成了“用户刚需”。无论是为了夜间护眼、节省 OLED 屏幕电量，还是单纯追求视觉沉浸感，提供暗黑模式切换功能都已成为现代 Web 应用的标准实践。本文将带你从零构建一套生产环境可用的暗黑模式切换方案，核心思路是：CSS 变量统一管理主题色彩，JavaScript 控制切换逻辑，localStorage 持久化用户偏好。

从一个 Vue 项目到一套工程体系：Bun、Monorepo、Turbo 与 Docker 到底在解决什么？Bun workspaces、Monorepo、Turbo、Docker Compose 和 YAML 经常同时出现在现代项目架构中。本文不孤立罗列概念，而是从一个普通 Vue 项目逐渐成长为多应用系统的过程出发，串联讲清每项技术出现的背景、职责边界和协作关系。

原子化 CSS 深度解析：Tailwind 原理、自定义配置、大型项目利弊Hi，我是前端人类学！ Tailwind CSS 早已不只是“又一个 CSS 框架”——它代表的是一种范式转变。从 2017 年诞生至今，社区接受度逐年攀升，但关于“它到底是解放生产力还是开历史倒车”的争论从未停止。本文将拆解三个核心问题：Tailwind 的工作原理是什么？如何自定义配置？在大型项目中它究竟是利大于弊还是适得其反？

Rspack 2.0 正式发布 — 前端构建工具格局再变天从 5.6s 到 1.4s，从 192 个依赖砍到 1 个，Rspack 2.0 不只是"更快的 webpack"了。

我用Biome替换ESLint+Prettier在项目上踩了不少坑被ESLint折磨了大半年，上周终于下定决心换成了Biome。速度是真的飞起，但中间踩的坑也够我喝一壶的。特别是那个Vue项目，差点让我直接回滚。我们的Vue 3中后台项目，200多个文件，ESLint配了60多条规则，再加Prettier做格式化，CI跑一遍lint+format要两分多钟。组里有人吐槽"提交一次代码等lint等到忘记刚才在改啥"。我当时也没当回事，直到有天晚上debug到凌晨三点，等lint的时间比写代码还长，心态彻底崩了。那两天正好刷到Biome v2.5.5的发布，511条规则

页面更新后为什么出现 Loading chunk failed：旧页面如何请求了已删除的构建产物本文是「前端工程现场」系列的第 10 篇。下面使用一个便于理解的 Vue 3 与 Vite 单页项目作为假设场景。构建文件名、请求日志、缓存响应头和发布流程均为简化示例，不对应具体线上项目。

首屏变慢后，应该先查资源下载、脚本执行还是接口请求本文是「前端工程现场」系列的第 9 篇。下面使用一个便于理解的 Vue 3 与 Vite 后台项目作为假设场景。构建结果、文件大小和日志均为简化示例，不对应具体线上项目。

AINative软件工程

LLM 应用的 Eval 数据工程实践：Golden Set 构建、版本管理与生产 Trace 回放你的 eval 跑绿了，但上线之后用户还是骂——因为你的测试数据集三个月没更新，早就过时了。大多数团队把 90% 的 eval 精力花在写评估逻辑上：设计 judge prompt、选 LLM-as-judge 还是规则打分、确定阈值。

Vite 构建工具原理解析与实战：从 ES Module 到极速 HMR前端构建工具经历了从 Grunt、Gulp 到 Webpack 的演变，而如今 Vite 凭借极速的冷启动和模块热替换（HMR）体验，正在成为新一代工具的首选。Vite 基于浏览器原生 ES Module 和 esbuild 等现代技术，从根本上解决了传统打包器在大型项目中的性能瓶颈。本文将从核心原理出发，结合一个完整的实战项目，带你彻底理解 Vite 的工作方式，并总结常见问题与注意事项。