使用 Antigravity AI 创建我的作品集
Source: Dev.to
序列
- 想法
- 方法 / 策略
- AI 选择
- 前端应用的关键概念与选择
- 体验 / 旅程
- AI 工作流
- 结果
- 最后思考
想法
在搜索关于 WeAreDevelopers 活动（我很想参加）的意见时，我偶然发现了 dev.to 上的一篇有趣的帖子。该帖子包含一个弹窗，推广 使用 AI 的前端挑战。
我本来就想创建一个作品集并深入了解 AI，所以这似乎是一次一举两得的完美机会。
方法
我的策略是 “边做边学”。
与其花费大量时间阅读关于 AI 的资料，我更想看看我选择的 AI 有多直观，以及在不编写过于技术性的提示的情况下，我能走多远。
AI 选择
挑战提供了三个由 Google 提供的 AI；我选择了 Antigravity——主要是因为我喜欢这个名字（别挑剔，对吧？）。
在观看了 Antigravity 网站 上的介绍视频后，我了解到它的工作流程被划分为：
- 实施计划
- 前置条件
- 拟议架构
- 实施步骤
- 验证计划
关键概念与前端应用的选择
前端技术栈
- Next.js – 我想更熟悉它，所以特意选了它。
- TypeScript
关键概念
- 易于更改
- 关注点分离
- MVC 架构
- 吸引人的 UI
- 基于特性的布局（Atomic Design）
体验 / 旅程
以下是一些让我反思不同 AI 方法的时刻。
降级 Node 版本
Next.js 需要比我已安装的更高的 Node 版本。AI 没有建议升级，而是尝试 降级 Next.js（我把它停了）。
它为什么不提议升级 Node？
访问网页
我给了 AI 我的 GitHub 和 LinkedIn 公开链接。它打开浏览器，抓取信息，并在生成的代码中使用这些信息。看到这一过程非常令人印象深刻。
所有实体放在单个文件中
AI 的第一个方案把 所有实体放在一个文件。这种“便宜”“紧凑”的做法对模型来说很常见，但对大型代码库并不理想。记住：AI 能瞬间读取整个仓库；我们做不到。
Atomic Design… 真的如此
我在前置条件中提到了 Atomic Design，但 AI 创建了一个字面意义上的文件夹结构，完全照搬了该术语：
我想要 Atomic Design 的好处，却不想要字面的文件夹名称；更自然的分层方式会更好。
组件委托
因为我仍在学习 Next.js，不确定组件该如何组织。经过多次迭代，AI 提出了 组件委托 模式，这成为了我非常喜欢的简洁方案。
AI 工作流
Antigravity 的工作流由 两步或三步 组成，每一步都以需要我批准的 markdown 文件呈现。
- 提案 – AI 提交一个包含想法、选项以及每个选择的利弊列表的 markdown 文件。
- 实施计划 – 在编写任何代码之前，AI 展示一个详细计划：它将采取的步骤以及每个动作的目标。
拥有这种可见性让我对 AI 的思考过程充满信心。 - 演练 – 在我批准计划后，AI 执行它，我可以审查实现的代码和最终结果。
总体而言，这种分阶段的方法比“黑箱”生成后仅在最后进行一次审查要安全得多。
结果
以下是已完成应用的截图：
架构概览
- app/ – 包含页面（Next.js 路由）。
- components/ – UI 组件，按功能组织（遵循基于功能/原子设计的方法）。
- models/ – 领域实体（例如
Resume、Experience）。 - services/ 与 data/ – 一个模拟的 JSON 文件保存我的简历数据：
Resume
├─ Basic info
├─ Experiences
├─ Education
└─ Extras我目前将数据保存在本地，但这种结构可以轻松在以后换成 API，并自动生成个人资料。
最后的想法
最终，这段经历是有趣且富有教育意义的。我学到了很多关于以下方面的内容：
- Antigravity AI 的结构化工作流
- Next.js（包括 TypeScript）
- 在 Google Cloud Run 上部署
当我们迎接挑战时，我们的思维和技能会得到更多的磨砺。Antigravity 让我感到惊讶；实施计划这一步尤其酷炫。
我购买了一个域名，并使用 Google Cloud 将其链接到我的作品集——这相当容易。我还稍微研究了一下 TurboPack，它是用 Rust 编写的高速编译器。
虽然我在这个挑战上花的时间不多，但我玩得很开心，终于完成了长期待办清单上的作品集。
我还找到了一个无干扰的文本编辑器，强烈推荐用于记录想法。