AI 生成的代码都是一坨屎？聊聊怎么给 Agent 制定工程约束

有次前端架构评审会上，隔壁业务线的一个前端组长说：他们团队上个月全员接入了某款国产当红(不用猜，肯定时 GLM 🤣🤣)的 AI 编码 Agent，一开始开发效率确实起飞了，原来排期三天的页面，一天就能搞定。但好景不长，上周他们打算对一个核心模块进行迭代时，发现根本无从下手。

因为那个 Agent 为了实现一个极其复杂的带级联筛选的表格，硬生生在一个 .tsx 文件里堆了快 2000 行代码。里面塞满了不知道从哪里抄来的正则、极其随意的变量、以及深达四层的嵌套回调。

他在会上总结陈词：AI 生成的代码就是一坨屎👎👎，只能做做外包和 Demo，根本上不了大型企业的生产环境。

我在台下听得直摇头，心想：兄弟，是不是你自己没有用好呢？😖。

做了这么多年前端，我带过不少实习生和初级开发。你回忆一下，如果你丢给一个刚毕业的新人一个复杂需求，不给他讲团队规范，不给他看底层的 Utils 封装，不给他做 Code Review，他写出来的东西，是不是跟现在 AI 生成的屎山一模一样？

AI 就像一个拥有无限精力和极快的手速，但完全没有工程常识的初级程序员。 它脑子里装满了 GitHub 上的开源代码，但它不知道你们公司的网络请求需要怎么带 Token，不知道你们的 UI 规范规定主色调必须用 Tailwind 的哪个变量，更不知道你为了防竞态条件专门写过一个自定义 Hook。

如果你只是在输入框里敲一句帮我写一个用户列表，然后就等着一键合并代码，那你不被屎山淹没谁被淹没？

到了 2026 年，一个合格的高级前端，核心能力早就不是比拼敲键盘的速度了，而是如何像 Tech Lead 一样，给你的 AI Agent 制定严苛的工程约束。

咱们直接拿真实场景讲清楚。

先说说，不受约束的 AI 是怎么写代码的？

假设你让 Agent 写一个 带防抖的搜索框，然后去后端拉取数据。一个没有任何工程约束的 Agent，凭着它的原始本能，大概率会给你生成这样的代码👇：

tsx 复制代码

// 毫无工程约束的 AI 垃圾代码
import React, { useState, useEffect } from 'react';

const SearchLocation = () => {
  const [query, setQuery] = useState('');
  const [locations, setLocations] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let timeoutId;
    if (query) {
      setLoading(true);
      // 让它手写防抖，极其容易漏掉清理函数导致内存泄漏
      timeoutId = setTimeout(() => {
        // 它直接裸调 fetch，完全无视项目里封装好的 Axios 拦截器
        fetch(`https://api.company.com/locations?q=${query}`, {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } // 这样安全吗？😢
        })
          .then(res => res.json())
          .then(data => {
            setLocations(data);
            setLoading(false);
          });
      }, 500);
    }
    return () => clearTimeout(timeoutId);
  }, [query]);

  return (
    // 直接写死 16px、#333 这种样式，破坏设计系统
    <div style={{ padding: '16px', background: '#fff' }}>
      <input 
        value={query} 
        onChange={e => setQuery(e.target.value)} 
        style={{ border: '1px solid #ccc', borderRadius: '4px' }}
      />
      {/* 渲染列表 */}
    </div>
  )
}

代码能跑吗？完美运行。但如果你的项目里全充斥着这种裸调 API、手写样式、自己控制防抖生命周期的代码，这个项目活不过三个月🤷‍♂️。

把规范写进 Agent 的基因里

现在主流的 AI 工具（无论是 Cursor 还是跑在本地的 Agent），都已经支持了全局的规则配置，也就是我们常说的 .cursorrules 或者 System Prompt。

给 AI 立规矩，本质上就是把你作为老兵的架构品味，强制注入到它的上下文中。

我是怎么约束我手底下的 Agent 的？我会直接在根目录下写死一份极度严苛的工程约束文档。每次让它写代码前，它必须先过这四道防线：

规则一：严禁私自造轮子，强制依赖倒置

禁止 Agent 自己写原生的 fetch 或者手搓防抖节流。我会明确告诉它：项目中所有的异步请求必须从 @/utils/request 引入，所有的防抖机制必须使用 ahooks 里的 useDebounce。

规则二：状态与 UI 强制分离

只要组件超过 100 行，强制要求 Agent 把复杂的 useState 和 useEffect 抽离成独立的 useXxx 自定义 Hook。JSX 部分只允许有纯粹的渲染逻辑。

规则三：锁死样式系统

严禁使用行内样式和传统的 CSS 文件。强制规定：必须且只能使用 Tailwind CSS。如果是特定的颜色值，必须使用 tailwind.config.js 里定义好的主题变量，比如 text-primary-500。

规则四：安全底线

严禁在组件内部直接读取 localStorage 获取 Token。所有鉴权状态必须从全局的 Store 或者专门的 useAuth 钩子里拿。

约束后，你的代码品味就上来了

当你在 Agent 的配置里锁死了上面这些工程约束，你再给它下达完全一样的开发指令帮我写一个搜索框。

你来看看这次它给你的反馈是什么级别的：

tsx 复制代码

// 经过工程约束后的 AI 生成代码
import React, { useState } from 'react';
import { useDebounce } from 'ahooks';
import { fetchLocations } from '@/api/location'; // 强制使用了统一的 API 封装
import { useAuth } from '@/hooks/useAuth'; // 强制使用了鉴权 Hook

// 约束生效：UI 与逻辑彻底分离
const useLocationSearch = () => {
  const [query, setQuery] = useState('');
  const [locations, setLocations] = useState<Location[]>([]);
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth(); // 安全规范生效

  const debouncedQuery = useDebounce(query, { wait: 500 });

  React.useEffect(() => {
    if (!debouncedQuery) return;
    
    const loadData = async () => {
      setLoading(true);
      try {
        // 网络层封装生效，无需关心 Token 拼接
        const data = await fetchLocations(debouncedQuery, getToken());
        setLocations(data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, [debouncedQuery, getToken]);

  return { query, setQuery, locations, loading };
};

export const SearchLocation = () => {
  const { query, setQuery, locations, loading } = useLocationSearch();

  // 严格使用了 Tailwind 设计系统
  return (
    <div className="p-4 bg-white rounded-lg shadow-sm">
      <input
        type="text"
        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="search locations..."
      />
      {/* 渲染列表 */}
    </div>
  );
};

发现区别了吗？第二段代码，模块极其清晰，网络请求、样式规范、安全校验全部卡在了你设定的架构底线内。这是一段哪怕我现在离职，下家接手时绝对不会骂娘的高质量代码😁。

你在驾驭，还是在旁观？

很多人觉得写 Prompt 是一门玄学，今天用请你扮演一个资深前端专家，明天用深呼吸，一步一步想。别扯了！在严肃的商业开发面前，这些花里胡哨的咒语(指：AI 生成的代码就是一坨屎) 毫无意义。

真正的 AI 辅助开发，本质上是一次高强度的自动化 Code Review。

你觉得 AI 生成的代码烂，是因为你作为业务的 Owner，主动放弃了你的系统架构权。

你能不能把项目里乱七八糟的依赖清理干净？

你能不能提炼出极其精准的 TS 类型定义？

你能不能给那些跑在服务器上的自动化 Agent，画出一道道不可逾越的护城河，让它们在这个安全的沙盒里为你疯狂产出？🤔

AI 永远不会写出屎山。写出屎山的，是那个连架构边界都划不清楚，只知道疯狂按 Tab 键和回车的：

你！You ！🫵🫵🫵