75%代码AI搞定！风格指南变“基建”，4人顶50

当我们第一次组建起智能开发团队时，那种激动人心的时刻至今难忘。理论与实践仿佛在这一刻完美融合。我们知道，要构建一套完善的智能开发体系，不仅需要精妙的架构设计，更要有清晰界定的智能“团队成员”（如同完整的组织结构），以及严谨高效的工作流程。然而，过去几年行业内屡屡出现智能团队努力搭建的页面，最终却呈现出与客户品牌格格不入的窘境，这样的故事我们听过太多，其中不乏网站项目失败的案例。坦白说，在我们快速扩大智能团队规模的过程中，也曾遇到过一些类似的挑战。任何重大的技术进步，总会伴随着一些摸索和磕碰。

我们团队的首席技术官乔·华纳（美国）曾提出一个富有远见的战略设想：不再将人工智能视为一个单一的庞大“大脑”，而是将其视为一支由高级专家组成的团队，每个成员都拥有明确的职责、清晰的工作范围，并配备了恰当的工具，确保各司其职。这一理念彻底重塑了我们整个部门的运作方式。然而，再好的愿景也无法自动生成代码，代码最终还是要靠开发者来实现。而当开发者与三四十名智能团队成员在真实的客户项目中并肩作战时，遇到的问题往往是任何白板会议都无法完全预见的。今天，我们要聊的正是其中一个核心问题，我们将分享我们如何解决它，以及这一解决方案如何持续深化我们对智能开发的理解。

你可能没注意到的规模化挑战

目前，我们团队拥有四名人类开发工程师，同时与大约三四十名智能开发代理并肩工作。通过这种革新性的方法，这些智能代理所完成的工作量，相当于四十到五十名人类开发人员，它们在多个真实客户项目中并行推进，预计能够完成75%到80%的生产代码编写。

当团队领导层首次提出这一发展方向时，其逻辑非常清晰：智能团队能够有效消除传统顺序开发模式中的瓶颈。传统模式下，一名开发人员需要按照队列逐项处理任务；而现在，多个智能代理可以同时执行任务。试想一下，当一个前端智能代理正在构建组件时，一个质量保障（QA）代理同时进行测试，一个合规代理进行审计，一个性能代理则负责标记布局偏移风险。这就是并行认知，它被巧妙地分配给了具有特定职责的专业角色。然而，这种框架设计，却往往没有为智能代理们在面对“外观设计”这一环节时，各自独立做出决策可能带来的问题做好充分准备。

当智能代理“自由发挥”客户品牌形象时

大型语言模型天生带有一丝创造力。在需要构思创意或解决新颖问题时，这往往是它们的强大优势。但当我们需要在整个网络应用程序中实现像素级的视觉一致性时，这种“创造力”却可能成为一个隐患。如果任由智能开发代理们凭“本能”行事，它们产出的结果通常看起来是泛泛的、合格的，乍看之下似乎没什么问题，但仔细一瞧，却发现与真实的品牌识别度脱节。

我们很快就注意到了这种模式。例如，同一网站上，一个页面上的按钮宽度是30像素，而另一个页面上却变成了40像素；颜色值在接近但不完全正确的十六进制代码之间漂移；字体排版则默认采用了模型训练数据中“专业”的建议。这种未经检查的输出，往往会“差不多对”，这意味着如果我们的人类团队稍不留神，这些不一致的地方就可能悄悄溜入生产环境。从根本上说，这正是另一种“人工智能冗余”问题，而且它不是简单通过修改提示语就能轻易解决的。

解决方案，其实早已在我们的资产库中

故事发展到这里，任何一位开发主管或技术总监都会心一笑：原来，解决之道并非是某种全新的AI黑科技，它就藏在一份PDF文件中。十多年来，每一个优秀的开发团队都在遵循品牌风格指南进行工作。当设计师将设计稿交付给开发人员时，这份风格指南就是双方的“合同”，它详细规定了十六进制颜色代码、字体堆栈、间距值、组件行为以及交互模式等一切细节。通常情况下，开发人员的任务不是即兴创作，而是严格按照这份指南来执行。这是一种如此基础且根深蒂固的实践，以至于连最有经验的团队都可能将其视为理所当然。

事实证明，过去十年间，那份让开发者保持品牌一致性的资产，对智能代理同样发挥着非凡的作用。没错，就是同一份PDF文档，相同的细节程度。不同之处在于，我们如何将其深度融入智能代理的工作流程。

从被动参考到主动约束

一份静静躺在项目文件夹里的风格指南，它只是一个被动的文件。人类开发人员或许会偶尔查阅，但智能开发代理如果得不到明确指令，则很可能会完全忽视它。我们激活智能工作流中风格指南的流程是这样的：

首先，我们的设计师会在Figma中构建视觉系统。接着，利用Figma的MCP（模型上下文协议）工具，我们能够将设计代币和组件规范以可解析的格式直接传递给大型语言模型。从那里，我们利用Claude Code生成一份全面的Markdown文档，这份文档完整捕捉了整个风格系统，包括颜色、字体排版比例、间距规则、组件规范、交互模式等等所有细节。这份Markdown文件随后会被链接到项目的CLAUDE.md文件中。CLAUDE.md是Claude Code在执行几乎所有操作之前都会读取的配置文件。你可以把它看作是智能代理的“常设指令”。

当风格指南被纳入CLAUDE.md文件时，它就不再仅仅是一份参考文档，而是变成了一个主动的约束条件。智能代理无需再费心记住去查阅指南，因为指南已经加载到它的操作上下文之中了。这是其中一个非常关键的转变：风格指南从单纯的文档升级为基础设施。细节越深入，其在赋能智能团队方面的效力就越强大。新媒网跨境认为，这种将风格指南视为“基础设施”的理念，正是智能开发走向成熟的关键一步。

多层级的执行栈

将风格指南链接到CLAUDE.md中，能够解决大部分问题。但“大部分”在生产环境中，也意味着“仍然需要人工干预”。因此，我们在此基础上叠加了多层执行机制。

第一道防线是“钩子”（Hooks）。 Claude Code支持基于事件的触发器：包括工具使用前（pre-tool-use）、工具使用后（post-tool-use）以及完成任务时（completion）的钩子，它们在智能代理工作流程的特定时刻触发。这些被视为软件层面的硬性约束。当流式API响应完成时，钩子会触发；当智能代理认为它已完成某项任务时，钩子也会触发。这种方式比仅仅依靠提示词级别的指令要可靠得多，因为用我们团队的话来说，提示词指令对于生产级工作而言“过于模棱两可”。

视觉回归测试是第二层保障。 我们的技术栈，基于Node.js并支持热模块替换，能够在智能代理的输出与设计规范出现偏差时，提供实时反馈。当我们在浏览器中看到偏差时，我们会立即引导智能代理回到参考文档：“按钮应该是30像素，而不是40像素。这是正确源头，请修正。”

预提交检查（Pre-commit checks），通过Husky等工具，在代码抵达代码仓库之前就捕获问题。架构验证、分支规则以及代码检查（linting）都会自动运行。智能代理生成的代码，需要通过与人类编写代码相同的“关卡”审查。

最后，我们还发现了一种效果显著的方法：智能代理会对其自身工作进行视觉审查。 Claude Code具备浏览功能，它能够打开一个Chrome浏览器实例，导航到它刚刚构建的页面，进行截图，然后根据风格指南分析自己的输出，并进行自我修正。在一些大型客户项目的构建过程中，我们广泛应用了这一功能，其带来的速度提升是显著的。智能代理在我们将错误发现之前，就能够自行修正。

“大象问题”：为何积极强化能取胜

在这次探索过程中，一个行为学上的发现让我们颇感意外：告诉人工智能代理不要做什么，通常会适得其反。如果你指示一个代理“不要使用爱彼迎（Airbnb）的风格指南”，那么你实际上已经将爱彼迎的风格指南引入了代理的上下文。这就像经典的“不要去想大象”悖论一样，在大型语言模型中表现得尤为明显。这听起来可能有些反直觉，但任何尝试过告诉ChatGPT“不要使用破折号”的人都知道，那简直是在“恳求”ChatGPT使用更多的破折号！

真正有效的方法是通过模式匹配进行积极强化。我们明确告诉代理应该遵循什么。“遵循仪表盘页面使用的样式模式”要比“不要使用默认样式”有效得多。代理会抓住这个积极的例子并进行复制。随着项目的推进，代理的上下文会充满自身前期工作中一致且符合品牌规范的例子，它会开始在没有明确指令的情况下做出正确的假设。这是智能开发中一个容易被低估的动态：代码库本身就成了训练集。智能代理早期产出的工作越一致，后期所需的指导就越少。

我们从未受训过的角色转变

故事讲到这里，就超越了工具层面，触及到了以这种方式工作时真实的感觉。当风格指南的流程运转顺畅（CLAUDE.md配置得当、钩子机制严格执行标准、智能代理能够根据视觉输出进行自我修正）时，人类开发者的工作职责将发生根本性变化。你不再是编写代码，而是编辑代码。这听起来可能只是一个细微的区别，但实则不然。

编写代码意味着你需要深入到逻辑的字里行间，在每一步中做出具体的实现决策。而编辑代码则意味着你处于更高的视角，审视架构决策，捕捉智能代理遗漏的逻辑错误，优化性能，并确保整个系统协调一致。你的时间重心从“构建”转向了“质量保障”，从“执行”转向了“人类判断”。乔·华纳（美国）将此描述为从“执行者”到“监督者”的转变，亲身经历数月之后，我们深感此言非虚。这与一位高级开发者开始管理初级团队时所经历的认知转变如出一辙。

如今，我们发现自己编写的代码越来越少，因为我们的杠杆作用和更大的价值体现在了不同的地方。对我们来说，这意味着以我们未曾完全预料到的方式提升了自身能力。当你身边有智能团队成员同时处理SEO分析、可访问性审计、质量保障测试和安全审查时，你更像是在领导一支专家团队。我们每个人，都以一个小工程部门的综合专业知识在运作。这就是一种乘数效应，它彻底重新定义了我们在每个项目中能够实现的广度和质量。

基础的重要性远超框架

如果说有什么是我们想对任何准备大规模采用智能开发的团队提出的建议，那就是：你的基础决定了你的上限。可以把这比作烘焙蛋糕。我们需要正确的食材。最初的搭建工作包括你的技术栈、架构决策、风格系统和配置文件（就像搅拌面糊）。这需要亲自动手的工作，对“食材”的深入了解，以及深思熟虑的选择。

你需要配置CSS变量，让你只需编辑一个变量定义就能全站更改字体颜色，而不是进行全局搜索和替换。一旦这个基础坚实稳固（蛋糕烤好），后续的工作就是锦上添花。智能代理会学习你的偏好，它们会参考之前的模式。由于底层系统就是为此设计的，所以微小的更新也能干净利落地传播。那些跳过基础工作、试图在“做对”之前追求“快速”的团队，最终会让智能代理在沙滩上建房子。而在沙滩上建造的智能代理，只会产出那种不一致、脆弱的结果，从而给智能开发带来不好的声誉。

请务必从一开始就做对。深入做好搭建工作。速度，自然会随之而来。

这对工作意味着什么？

我们应该直接阐明这种能力对我们所服务的组织意味着什么。我们团队的智能开发运营，意味着那些过去无法承担所需深度开发工作的客户，现在能够享受到这样的服务。这包括全面、多学科的工程实践，能够同时兼顾搜索引擎优化（SEO）、可访问性、安全性、性能和品牌一致性。现在，一个四人的人类开发团队，却能以四五十人规模的开发效率进行生产，这已是运营的现实。

这意味着更快的周转时间、更高的基线质量，以及过去只有拥有相应工程预算的大型企业才能享受到的那种对细节的关注。每周，我们的智能代理都会变得更聪明，因为我们的代码库变得更加一致。每个项目，基础搭建工作都变得更快，因为我们之前已经建立了模式。这个良性循环正在加速运转。

未来的方向

我们正处于将智能团队全面标准化整合到我们整个开发运营中的前沿（以周为单位计算，而非数月或数年）。我们在此描述的风格指南流程只是一种模式。还有其他模式，例如合规性执行、可访问性审计、性能优化。每种模式都有其自身的引导策略、执行栈以及积累的经验教训。那些能够尽早掌握这些的团队和组织，将能更智能地编写代码，拥有随时间推移而不断强化的内置质量控制机制。上述案例中的风格指南工作表明，预先为智能团队提供更好的约束条件，能够带来实实在在的改进。最优秀的智能团队，将是那些围绕这些模型构建了最严谨架构的团队。我们致力于持续构建这样的架构，并将不断分享我们的所学所得。

新媒网（公号: 新媒网跨境发布），是一个专业的跨境电商、游戏、支付、贸易和广告社区平台，为百万跨境人传递最新的海外淘金精准资讯情报。

本文来源：新媒网 https://nmedialink.com/posts/ai-writes-75-code-style-guide-as-infra-4-equals-50.html