了解人工智能代理是如何通过使用“Antigravity”和“Stitch”工具来构建Flutter应用程序，从而改变软件开发的流程的。

软件开发始终与我们所开发的工具一同发展演变。

曾经有一段时间，开发者们需要用汇编语言来编写所有程序。后来，高级编程语言的出现使人们可以减少对硬件的关注，而更多地将精力投入到问题解决上。框架技术的出现进一步消除了重复使用相同代码模式的必要性。

如今，我们正在见证又一次变革，而且这一变革的发生速度比许多人预期的要快。

人工智能开始直接参与软件开发过程。

在2026年达沃斯世界经济论坛上，Anthropic公司的首席执行官Dario Amodei表示，在六到十二个月内，人工智能系统或许就能完全承担大部分软件工程任务。

大约在同一时间，Spotify的首席技术官Gustav Söderström透露了一个更加令人惊讶的事实：2026年，Spotify的一些顶尖开发者竟然没有编写过一行代码。这些人工智能系统负责生成具体的实现代码，而工程师们则负责审核和监督这些结果。

许多大型科技公司已经在根据这一变革调整自身的组织结构。金融技术公司Block最近宣布将裁员数千人，同时强调其在工程工作中对人工智能的依赖程度正在不断增加。

对于很多开发者来说，这样的新闻会引发一个令人不安的问题：人工智能是否会在未来取代软件开发人员呢？

最准确的答案是：软件开发本身正在发生变化。

开发者们不再把大部分时间花在编写代码语法上，而是越来越关注系统设计、架构选择，以及监督那些能够自动生成实现代码的人工智能系统。

人工智能正在成为开发者的得力助手，但开发者依然是整个开发过程的主体。

在本文中，你将通过使用现代工具——Antigravity、Stitch、Flutter和Dart来构建一个Flutter应用程序，从而了解这种新的开发工作流程在实际应用中的表现。

我们不会手动编写代码，而是让人工智能工具来生成用户界面和项目架构。

完成本指南的学习后，你将能够基于国际妇女节的主题，构建一个专门用于女性自我护理产品销售的Flutter应用程序。

目录：

• 先决条件

• 在人工智能驱动的世界中，开发者的新角色

• 什么是Antigravity？

• 了解MCP服务器

• 什么是Stitch？

• Flutter与Dart

• 我们将要构建的应用程序

  • 步骤1：使用Stitch生成用户界面

    • 为什么这个提示有效

  • 步骤2：将Stitch与Antigravity连接起来

  • 步骤3：生成Flutter应用程序代码

• 运行应用程序

• 部分截图

• 如何运用Antigravity中的相关技能

  • 如何在Antigravity中使用Stitch技能

• 结论

• 参考资料

先决条件

在开始之前，请确保您的开发环境已经准备就绪。

您需要在自己的机器上安装并运行Flutter。执行flutter doctor命令可以确认您的开发环境配置是否正确。由于Dart是与Flutter一起提供的，因此建议 also 通过dart --version命令来验证Dart的安装情况。

此外，您还需要能够使用Antigravity——这个我们在本教程后续部分会用到的基于智能代理的开发工具。同时，您也需要创建一个Stitch账户，这样才能生成应用程序的界面布局文件。

虽然本教程中的工作流程在很大程度上依赖于人工智能技术，但如果您对Flutter的架构有基本的了解，那么整个学习过程就会更加容易理解。在生成的代码中，会出现诸如“清晰架构”这样的设计理念，以及BLoC之类的状态管理模式。

在人工智能驱动的世界中，开发者的新角色

要理解为什么像Antigravity和Stitch这样的工具会变得越来越重要，就需要考虑开发者的角色是如何随着时间推移而发生变化的。

在计算机发展的早期阶段，编程意味着需要向机器提供极其详细的指令。开发者直接控制内存位置、寄存器以及各种硬件操作。

后来出现的高级编程语言通过抽象掉许多与硬件相关的内容，使开发工作变得更加高效。而开发框架则通过提供可复用的组件和架构模式，进一步提升了效率。

人工智能为软件开发带来了另一个层面的抽象化。

现在，开发者不再需要手动编写每一条代码或设计每一个界面，而是可以用自然语言来描述系统的需求。人工智能工具会解读这些描述，并自动生成大部分实现代码。

这种变化并没有消除对开发者的需求，而是改变了开发者主要花费时间从事的工作内容。

在使用人工智能工具时，开发者会更加专注于系统的设计、约束条件的定义、生成代码的审核，以及确保应用程序在现实环境中能够正常运行。

从很多角度来看，现在的工作重点已经不再是编写代码本身，而是协调和管理智能系统。

而像Antigravity这样的工作流程平台，正是为支持这种开发方式而设计的。

什么是Antigravity？

Antigravity是一个由人工智能驱动的开发平台，专为所谓的“基于智能代理的软件开发”而设计。

传统的AI编码辅助工具会在编辑器中提示开发者编写具体的代码片段。而Antigravity采取了不同的方式：它不是帮助开发者编写单行代码，而是让自主运行的智能代理来执行整个开发流程。

这些智能代理能够理解项目需求、规划实现方案、生成代码、运行测试并验证结果。虽然开发者仍然掌控着整个开发过程，但许多重复性的工作都已经被自动化处理了。

该平台与开发环境实现了深度集成。智能代理能够读取项目文件、运行终端命令、检测应用程序的行为，并与外部服务进行交互。

这种功能使得人工智能不再仅仅是一个提供建议的工具，而更像是一位与你共同工作的协作工程师。更多相关信息，请访问https://antigravity.google/

了解MCP服务器

使Antigravity的工作流程得以实现的核心技术之一，就是被称为“模型上下文协议”的技术，简称MCP。

MCP服务器充当了智能代理与外部系统之间的桥梁，使代理能够以结构化的方式与各种工具、API以及开发环境进行交互。

如果没有MCP服务器，智能代理就只能生成静态代码；而有了MCP服务器，它们就能主动与开发环境进行互动了。

例如，MCP服务器可以让代理从项目目录中读取文件、运行构建命令、访问数据库，或者从其他平台获取设计资源。

在我们的系统中，MCP服务器将使Antigravity能够与Stitch进行通信，并根据我们设计的用户界面生成Flutter代码。

什么是Stitch?

Stitch专注于开发流程中的另一个环节：用户界面设计。

手动构建用户界面往往非常耗时。开发者通常需要花费数小时来调整布局、优化间距，以及尝试不同的视觉层次结构，才能最终得到满意的设计结果。

Stitch通过让开发者使用自然语言来描述界面设计，简化了这一过程。

系统会解读这些描述，并生成一个结构化的布局图，这个布局图随后可以被转换成可运行的代码。

开发者无需手动安排每一个用户界面组件，而是可以专注于描述他们希望用户体验到的功能。更多关于Stitch的信息，请访问https://stitch.withgoogle.com/

Flutter与Dart

Flutter是由谷歌开发的一款开源UI框架，它允许开发者使用同一套代码为多个平台构建应用程序。

使用Flutter开发的应用程序可以在Android、iOS、网页浏览器以及桌面操作系统上运行，并且能够保持一致的性能和视觉效果。

Flutter采用Dart编程语言，这种语言专为支持响应式框架和高性能界面而设计。

由于Flutter应用程序的结构基于组件和声明式布局设计，因此该框架与基于AI的代码生成工具配合使用时效果尤为出色。您可以通过https://flutter.dev/和https://dart.dev/了解更多关于Flutter和Dart的信息。

我们将要构建的应用程序

为了演示这一开发流程，我们将为一家女性护理产品商店打造一款移动应用程序。

这个项目的灵感来源于国际妇女节，旨在宣传那些专注于健康与个人护理的产品。

该应用程序将包含四个主要界面屏幕。

1. 首页会展示产品分类、推荐商品以及畅销产品。

2. 心愿单页面允许用户保存日后想要购买的商品。

3. 购物车页面会显示已加入购物车的商品，用户可以在下单前调整商品数量。

4. 最后，个人资料页面可让用户查看账户信息并进行设置。

该应用程序的界面将使用以下配色方案：

#1A05A2
#8F0177
#DE1A58
#F67D31

步骤1：使用Stitch生成用户界面设计

我们首先会使用Stitch来生成应用程序的界面设计。

打开Stitch并创建一个新的任务。请严格按照以下内容输入提示信息：

为一家庆祝国际妇女节的女性护理产品商店，设计一款现代风格的移动购物应用用户界面。

该设计应体现出优雅、温馨且现代的感觉。

请使用以下配色方案：

#1A05A2
#8F0177
#DE1A58
#F67D31

应用程序应包含以下页面：

首页：
在顶部显示产品分类。
设置一个畅销商品专区。
包含一个展示重点产品的区域，每个产品都会用较大的卡片形式呈现。

心愿单页面：
显示用户保存的商品。
允许用户将某些商品从心愿单中移除。

购物车页面：
展示已加入购物车的商品。
提供增加或减少商品数量的控件。
显示总价信息。
设置一个下单按钮。

个人资料页面：
显示用户的圆形头像。
提供“个人资料”、“设置”、“订单”、“通知”和“帮助”等菜单选项。

请使用圆角卡片、现代的间距设计以及柔和的渐变背景效果。

为什么这个提示有效

在向Stitch提交设计请求时，清晰的结构比冗长的描述更为重要。这个提示之所以有效，是因为它将需求明确分解成了四个具体的部分：

1. 背景与主题
开篇语句明确指出了该应用程序的用途——这是一个为庆祝国际妇女节而设计的、专门针对女性用户的自我护理购物应用。这样的描述有助于Stitch生成与整体风格及目标受众相匹配的视觉效果。

2. 视觉设计方向
提示中明确规定了设计风格（优雅、温馨、现代），同时还提供了具体的色彩方案，这些信息为AI提供了指导，使其能够创造出统一且协调的视觉形象。

3. 界面结构
提示并非要求生成一个通用的应用程序界面，而是详细列出了所需的各种页面（首页、心愿单、购物车、个人资料页）以及每个页面应包含的内容。这样的设计确保了最终生成的UI更接近于一个真实的产品界面，而不仅仅是一个概念性设计。

4>用户界面设计细节
诸如圆形卡片布局、现代的间距设置以及柔和的渐变背景等设计细节，能够帮助AI生成出更加精致的用户界面，而不仅仅是简单的线框图。
在向Stitch提供设计指令时，关键是要像产品设计师一样思考：明确说明应用程序的用途、所需的页面结构以及视觉风格。这样，AI才能有足够的依据来生成实用且真实的用户界面。

当Stitch完成设计生成后，它并不会限制你只能使用某种特定的开发流程。相反，它会根据你的需求提供多种导出方式，让你能够继续完善自己的产品。这种灵活性正是Stitch最强大的特点之一——因为它使得生成的设计能够在不同的设计工具、开发环境以及AI系统中无缝地迁移和使用。

在这个阶段，你仍然可以对设计结果进行完全的修改。Stitch生成的每一个设计元素都可以被编辑、重新排列或进一步优化，然后再进入下一步的开发流程。你可以调整布局、更新色彩方案、修改文字内容，甚至可以重新构建界面的整体结构。把生成的设计结果看作是一个良好的起点，而不仅仅是一个固定的最终成果吧。

Stitch提供了多种导出选项，这些选项能够帮助你在不同的环境中继续进行开发工作。

其中一个选择是直接使用AI Studio。通过这个工具，你可以立即开始利用人工智能辅助的开发流程来构建应用程序。在这种环境下，生成的设计方案会成为应用程序结构的基础，使你能够快速进行迭代开发，同时人工智能工具会帮助将界面设计转化为可运行的代码。

另一个选择是将设计方案导出到Figma中。当以Figma文件的形式导出后，该布局就会成为Figma中一个完全可以编辑的设计系统。使用标准的Figma工具，你可以调整其中的每一个组件、框架和布局元素。

设计师可以细致地调整间距、排版样式以及交互效果，而开发人员则可以在开始实施之前查看设计规格，并与设计团队进行协作。这对于那些设计和开发职责分开的团队来说，尤其十分有用。

Stitch还支持将项目导出到Jules这一同样以人工智能辅助开发流程为核心的工具中。通过这个选项，生成的设计方案可以纳入更广泛的自动化开发流程中，在其中人工智能工具会解读这些设计并将其转化为应用程序代码。

如果你更喜欢在本地进行开发，Stitch也允许你将生成的项目下载为ZIP文件。这样，你就可以将所有设计资源以及生成过程中创建的结构化文件手动集成到你的开发环境或版本控制系统中。

还有一个快捷方式是直接将生成的成果复制到剪贴板中。当你想要将某个布局或设计方案粘贴到其他工具或环境中时，这种方式非常方便，因为你无需下载额外的文件。

最后，Stitch还提供了通过MCP进行导出的选项。MCP即“模型上下文协议”。使用这个选项时，Stitch会通过Stitch MCP服务器生成一份专门为人工智能工具设计的使用提示文件。这样一来，像Antigravity这样的工具，或者任何支持MCP的智能集成开发环境，都能够访问这些生成的布局文件，并自动将其转化为可运行的应用程序代码。

Stitch甚至还会提供在将设计方案发送给人工智能工具时应使用的具体提示信息，这使得从设计生成到代码生成的整个过程能够非常顺畅地进行。

虽然这些导出选项各自对应着略有不同的开发流程，但它们的目的都是一样的：让生成的设计方案能够轻松地从概念阶段过渡到实现阶段，同时让开发人员和设计师在开发过程中有充分的自由去修改任何他们认为需要的内容。在本指南中，我们将使用MCP方法，并结合Antigravity工具来进行操作。

步骤2：将Stitch连接到Antigravity

接下来，我们需要打开Antigravity，创建一个目录，并使用Google进行身份验证。

接下来，我们需要在Antigravity中启用Stitch MCP服务器（Dart已经安装好了）。

打开MCP配置面板，启用Stitch集成。系统提示时，请输入您的Stitch API密钥。

获取您的Stitch API密钥

要生成API密钥，请点击个人资料图标，进入“Stitch设置”，然后前往API选项卡。创建一个新的密钥，并将其复制到MCP配置面板中。

步骤3：生成Flutter应用程序

现在Antigravity已经可以访问Stitch的布局数据了，我们可以开始生成Flutter项目了。安装Flutter以及Dart的相关扩展也是很有必要的。

现在这些工具都已经安装好了，我们可以在Antigravity中输入以下指令：

## Stitch使用说明

获取以下Stitch项目所需的所有图像和代码：

## 项目信息
标题：用户个人主页
ID：2811186611775892217

## 需要生成的页面：
1. 用户个人主页
    ID：1768c58e5abb4c328a1837437d83875c

2. 自我护理首页
    ID：41494ba340bf4d7b8df12112116645ce

3. 购物车页面
    ID：e107a7a9fd034f83a302851021bbc468

4>您的愿望清单
    ID：ecc8e0e7cea3437c939e04ceeb645b61

请使用`curl -L`这样的工具来下载这些托管在互联网上的资源。

根据Stitch生成的UI布局，使用Dart语言来构建Flutter应用程序。

该项目应遵循清晰的设计架构，将界面展示层、业务逻辑层和数据存储层明确区分开来。

状态管理方面，请采用BLoC模式。

确保UI组件与业务逻辑相互分离，并且整个项目结构要符合清晰的设计规范。

这种指令的结构非常清晰，这在使用像Antigravity这样的AI开发工具时非常重要。

这里有几个关键点需要注意：

1. 直接引用了Stitch生成的输出文件

指令中首先列出了Stitch项目的ID以及各个页面的ID，这样Antigravity就能直接获取到之前生成的设计布局和图像文件。

2>事先明确了应用程序的整体架构

我们并没有要求它快速生成一个原型，而是明确指定了要采用清晰的设计架构。具体来说，这个架构包括：

• 界面展示层：负责处理用户界面显示的相关逻辑

• 业务逻辑层：包含各种业务规则和用例处理逻辑

• 数据存储层：用于存储模型数据和数据库信息

这样的架构使得生成的Flutter代码更易于维护。

3>对状态管理进行了明确的规定

# 实施计划：采用清洁架构构建Flutter应用

本计划旨在指导如何利用清洁架构和BLoC技术来实现这4个Stitch页面的功能。

flutter pub get
flutter run

npx skills add google-labs-code/stitch-skills --global