统一开发工作流是AI工具链的核心

统一开发工作流是AI工具链的核心 | 前端进阶之旅

Full translation

完整中文译文

如果你现在感到被 AI 的信息轰炸所淹没，你并不孤独

每天似乎都有一个新工具、新的 MCP、新的模型、新的 skill、新的工作流、新的功能、或者一条新的社交媒体帖子，声称"嘿看！我用这个奇妙的 prompt 完全搞定了 AI"。

我每天都在使用 AI 工作，我发现的是：少就是多。关键不在于我安装或配置了什么，也不在于我如何诱导 agent 去做某些事——这些都很有趣，但说到底感觉就像花招。

我在生产力上获得的最大收益来自于我如何使用 harness 以及我对它的理解程度。

所以在这篇文章中，我要分享一个简单的工作流，你可以用它仅仅通过 GitHub Copilot 的现有功能来显著提高你使用 AI 的有效性。不需要奇怪的 prompt。不需要别人都知道但你不知道的某个 skill。只需要 harness。harness 就是你所需的全部——基本上。

1. 选择一个工具，任何工具

这是显而易见的，对吧？选择一个工具！这很简单！

但即便在 GitHub Copilot 家族中，也有很多选择。这包括 CLI、新的 GitHub Copilot 应用、VS Code、Visual Studio 和 JetBrains，仅举几例。

好消息是，这些体验越来越多地集中在同一个 harness 上。细节可能因工具而异，但核心工作流是一致的。学一次 harness，在任何地方使用它。

也就是说，我确实认为学习 harness 是关键，学习它的最好方式就是尽可能接近它。所以如果你刚入门，我建议从 GitHub Copilot CLI 开始。它是一个终端界面，这意味着它只是文本。没有太多 UI 需要学习。你输入 prompt，agent 执行任务。但这种交互更直接、更即时，坦白说，非常令人满足。

在这个演示中，我将使用新的 GitHub Copilot 应用。但该应用使用的 harness 与你在使用 GitHub Copilot CLI、VS Code 以及许多其他可以找到 GitHub Copilot 的地方使用的 harness 完全相同。

2. 启用 YOLO 模式

YOLO 模式也被称为"Allow All"。这让 agent 可以执行任何命令而不需要请求许可。这可能因工具而异，但对于大多数工具，它只是聊天中的 /allow-all 命令。否则，agent 每次需要做一些工作时都会停下来等待你的批准。

Agents 需要自主权才能让你看到生产力的提升。如果你必须批准 agent 做的每一件事，你不如自己做。而且，那是一个糟糕的用户体验。没有人想要被贬低到整天坐在办公桌前按"批准"按钮。而且一遍遍地按"批准"只会训练你不去读你被要求批准的内容，这违背了初心。

不过，你确实希望与 agents 一起使用时是安全的。坏事会发生在好人身上。当使用 YOLO 模式时，你不想在本地机器上运行 agent。当你在工作中使用它们时尤其如此——数据在你组织系统上是私有的，错误可能代价高昂。

幸运的是，有很多选择可以在沙箱中运行 agents。一个容易开始的是 GitHub Codespaces 或开发容器。

3. 从原型开始

AI 最神奇的地方之一是你可以轻松地提前原型化任何东西。从历史上看，情况并非如此。原型化曾是一个项目的完整阶段，通常是一种奢侈。现在，你可以用一个 prompt 制作一个。

让我们看几个例子。

假设我们想构建一个日期选择器 web 组件。这似乎很直接，但实际上相当复杂。想想你可能想用它做的所有不同的事情。

你如何在组件内导航？

选定的日期看起来如何？

选定的范围看起来如何？

用户如何在日、月和年之间导航？

从一个简单的原型开始并获得几个变体。我通常从这样的东西开始：

Give me 20 mocks for a date picker web component. Put them all in an HTML file so I can compare.

在这种情况下，AI 生成了一堆不同的布局，但其中之一是一个从年视图开始的模拟。这很有趣。我想让我的日期选择器让用户能够缩小到年份，然后进入月份，最后进入日期。这些是你在看到它们之前不会考虑的事情。

作为人类，我们处理图像、形状和有形布局等感官丰富的模型比密集的文本快得多。尽早创建低成本的原型有助于使复杂概念立即变得直观。

这也适用于非视觉任务。

例如，如果我想添加一个新的 API 端点，我仍然会创建一个视觉模拟来理解需求和约束，然后再深入实现。

Create a visual mockup of the API for this project. Add five options for how we could handle a new API endpoint that allows the user to download their analytics data.

由于 GitHub Copilot 应用支持 Mermaid 图表，agent 将其渲染为 Markdown，映出五种不同的方式我们可以实现此 API 端点。

在与 agents 合作时，很容易忘记一切都是细致的。原型化有助于提前发现这些细微差别，这样你就不会把宝贵的时间和 token 花在返工上。

我建议对大多数工作使用中等大小的模型，如 GPT 5.6 Terra 或 Claude Sonnet，采用中等推理。我也建议你在这个特定功能、bug 或增强的持续时间内坚持你选择的任何模型。Prompt caching 会为你节省 tokens。只要你不切换到不同的模型或推理级别，你之前的聊天就会保持与模型缓存，在未来的请求上给你折扣。

4. 计划实现

现在你知道你真正想要什么与你最初认为想要的相比，是时候规划实现了。

在 GitHub Copilot 中不启动新会话的情况下切换到计划模式。

/plan Build a date picker web component. I want the user to be able to zoom in and out of years, months, and days.

这是一个相当模糊的 prompt，你可能比我这里有更多的上下文，但这只是一个演示。如果你没有更多的上下文，没关系。那正是这一步的目的。

理论上，如果你用完美的 prompt、完美的上下文、完美的顺序组成，你可以让模型一次性做成任何事。理论上。

但我们没人能做到。不过，计划通过提出你在手工构建这个时需要自己回答的所有问题，帮助你接近那个理想：

开始日期和结束日期可以相同吗？

部分选择有效吗？

用户应该能够清除日期吗？

"今天"应该始终是可见选项吗？

允许手动输入吗？

日期的存储格式是什么？

应该允许粘贴日期吗？

列表还在继续。你不可能想到所有这些边界情况，但模型可以帮助你识别许多。

你可以通过安装 Matt Pocock 的"grill-me"skill，使计划模式在提出的问题和边界情况的纯粹数量上变得更激进。

/plan /grill-me Build a date picker web component. I want the user to be able to zoom in and out of years, months, and days.

这个计划步骤是关键的。关键不在于你只接受来自 AI 的每个建议。如果你这样做，你就否定了这个计划过程的价值。关键在于你深入参与问题并引导模型。这是你的专业知识发挥作用的地方。

你也可以反过来问模型问题。在下面的截图中，它问我"非连续日期"。我很确定我知道模型的意思，但我会要求澄清，这样我们就在同一页上。

计划过程甚至在你中断提出澄清问题等时也会继续进行。

5. 使用 Autopilot 实现

一旦计划完成，GitHub Copilot 可能会提示你切换到 Autopilot 并开始实现计划。

Autopilot 是一个内置的循环。它通过确保模型实际上已经完成它说它会做的事情来强制模型继续工作——在这种情况下就是完成计划中的每一项。

GitHub Copilot 将在此阶段自动充当协调者。如果它需要读取代码库中的文件，它将使用带有小模型的"Explore"subagent。如果它认为一个动作相对复杂，它可能会选择带有更大模型的"General Purpose"subagent。虽然你可以在 GitHub Copilot 中通过自定义 agents 和指令获得对协调的细粒度控制，但你不需要做任何特殊的事情就能获得 subagents 和多模型工作流的优势。这是开箱即用的，即使你之前不知道这些东西存在。

6. 人工审查和迭代

这是你获得多巴胺刺激的地方。你可以看到 AI 创造了什么。

但你可能不会得到完全想要的东西。那是正常的，也是预期的。模型无法读你的心，它是容易出错的。与模型迭代，直到你得到你真正想要的。无论是只有代码还是改进的 UI，这是你的品味将决定最终产品质量的部分。

例如，这是 GitHub Copilot 给我的日期选择器。

我已经可以看到它有一些问题：

动画不一致
当鼠标悬停在选定的日期上时，由于色彩对比，文本不可读
它不需要在顶部说"12 YEARS"
当我点击"Today"时，如果我在月或年视图中，它不会把我带到那一天
我也不喜欢设计。看起来太像是由 AI 创建的——因为它确实是！

所以这里我们只是在跟进模式中。我将使用我创建的一个称为 Postrboard 的 CSS 框架。我将其添加为一个指向 CSS 的 skill，并告诉 agent 如何使用它。如果你想使用它，可以随意自己安装，或者你可以选择其他任何你喜欢的 CSS 框架。给模型一些设计指导是相当有帮助的，通常一个 CSS 框架就是你所需的。

ok - we don't need a landing page here - just the component, output and settings panel in a minimal setting. Use the /postboard skill for the design and colors.

For the date picker, when I click on the day, it tries to zoom in, but can't because there is nothing to zoom to. There should be no zoom there.

It doesn't need to say "Zoom Out" at the top

When I mouse over a month or year that contains the selected day, I cannot read the hover text.

When I click "Today" it should take me to that day view, even if I'm on the month or the year.

The months don't need numbers under them and they don't need to be in boxes

Same goes for years. And it doesn't need to say "12 years" at the top."

注意这有多么对话的感觉。不要过度思考。当你修复很多像这样的小东西时，就把它交给模型。如果你有背景信息，你就有 prompt。

最重要的是不要满足于"足够好"的 AI 输出。坚持质量。对此毫不妥协。那部分仍然是你的责任，知道什么是质量结果与什么不是的价值是你带来的。没有 AI 会替代你的人类接触和创意。

这是我的最终日期选择器的样子。滚到这篇文章的末尾看它的实际动作。

7. 对结果进行橡皮鸭评审

在你迭代并对你创建的东西感到满意之后，是时候进行最终审查了。

请 GitHub Copilot 进行橡皮鸭评审。你可以通过简单地请求它：

Perform a rubber duck review on this date picker component implementation

在橡皮鸭评审中，GitHub Copilot 会请求来自不同 AI 家族的模型的评审。例如，由于我使用的是 GPT 5.6 Terra，它请求了来自 Sonnet 的评审。不同的模型在不同数据上训练，所以它们有不同的盲点。橡皮鸭评审有助于识别单个模型可能遗漏的潜在问题。

注意你可以在这个工作流中的任何时刻使用这个。你可以橡皮鸭原型。你可以橡皮鸭计划。这完全取决于你是否想要对某些东西的第二次 AI 评审。

如果你想进一步，你可以将橡皮鸭与 Autopilot 结合，让模型在一个循环中合作改进最终结果。

/autopilot rubber duck this date picker implementation. When you have the result, review it carefully and make any necessary adjustments. Repeat the rubber duck review until both you and the reviewing model agree that the only items that remain have diminishing returns.

在这一步之后，你将有一个甚至比之前更精制的结果，并可能识别了许多额外的边界情况。这一步确实花费更多 tokens，但你真的在战场硬化代码。将其视为对你未来自己的投资，他不必处理这些问题，因为你现在就抓住了它们。

此时，你准备好暂存和提交，或继续下一个你想与此 pull request 一起添加的功能。

我建议为你接下来做的任何与这个日期选择器无关的东西启动一个新的聊天会话。你可以将聊天会话视为主题性的；如果你开始太多地偏离主要话题，可能是时候开始新会话了。

这是我用这个工作流为这篇文章构建日期选择器的最终结果。

我认为这有点牵强，但我们都可以停下来片刻，为我们现在用 AI 能做到的事情喝彩吗？构建日期选择器曾经是你能尝试的最难的事情之一。问问那些曾经构建过日期选择器的英雄们就知道了。

事物不必复杂

这个简单的工作流对大多数人来说已经足够了。简单性也帮助你多任务处理。当你保持简单时，推理 agent 处于什么状态以及你上次在做什么更容易。你的上下文窗口也是有限的。

AI 空间中发生了很多事情。没有上限你可以构建和试验的东西。你可以添加 MCP 服务器、skills、指令和自定义 agents。你可以设置工作流和循环，创建提示 agents 的 agents，建立整个虚拟开发团队。

但请记住，现在真的没有人知道他们在做什么。我们都在边走边摸索。很多今天对 AI 的神奇的咒语将成为明天的反模式。

只需专注于以最简单的方式获得可重复、高质量的结果。学习 harness，你就会很好。