我摆脱了“一键”AI 构建器：如何用 Gemini 构建 React 作品集（不懂 React）

Source: Dev.to

“一键”陷阱

我们都见过这种趋势。把 LinkedIn 个人资料导出为 PDF，喂给 Gamma 之类的工具或通用的 GPT 包装器，砰——就有了一个网站。

我试了一下。它成功了。但我讨厌它。

从技术上说，站点是可用的。但在美感上呢？它像是一张冒充作品集的企业 PowerPoint 幻灯片，缺乏灵魂。作为一名 AI 工程师和创作者，我意识到自己不能被一个通用模板所代表。于是，我把它删掉了。

“在我的机器上能跑”的噩梦

我决定走硬路线。我打开了 Google AI Studio，启动最新的 Gemini 模型，决定自己动手打造一些定制的东西。我想要一种特定的氛围——与众不同。

但现实随即击中我。我掉进了 完美主义陷阱。

我花了数周时间在 AI 预览窗口里微调像素。它在聊天界面里看起来很棒。但当我终于把代码复制到 VS Code 并尝试推送到 GitHub 时，遇到了开发者的经典噩梦：

“它在 AI 的预览中可以工作。”（但在其他地方会崩溃）。

• 缺少依赖。
• 组件被“幻觉”生成。
• 路由逻辑出现循环。
• 代码并非可部署的，只是一个脆弱的原型。

大多数人会在此止步，回到模板上去。

转折：从编码者到架构师

我没有放弃。我制定了新规则：从零重新开始。我把破损的代码库全部废弃。但这一次，我意识到，要用 AI 构建，需要停止把自己当作 编码者，而要以 架构师 的身份行动。

1. 不是语法，而是表达

我并不深入了解 React 或 HTML 的语法。如果让我要在白板上从头写一个复杂的 hook，我肯定写不出来。但 AI 对语法了如指掌。我的工作不是敲代码，而是描述 架构。

• 旧提示： “把按钮设成蓝色。”
• 新提示： “创建一个可复用的按钮组件，接受 ‘variant’ 属性，使用 Tailwind CSS 进行样式化，并确保在悬停时发光。”

2. 调试是逻辑游戏

当 AI 抛出错误时，我不是通过了解语言细节来修复，而是通过理解 数据流 来解决。

如果页面崩溃，我不去找缺失的分号，而是检查逻辑：

• 数据是否正确地从父组件传递到子组件？
• 状态是否在渲染之前已更新？

我通过向 AI 询问其自身的逻辑来调试，而不是阅读文档。

结果

我花了数天时间与错误搏斗。使用结构化框架不断优化提示。今天，Version 1 已上线。

代码并不完美。资深的 React 开发者可能会看到一些低效之处。但它能跑，能部署，最重要的是，它是我的。

https://portfolio-site-one-mauve.vercel.app/

启示

这将是我们许多人的未来开发方式。你不需要背诵词典才能写小说。你只需要一个故事和写作的意愿。

如果你因为“不会这门语言”而犹豫不前，停下来吧。世界上最强大的工程师已经在你指尖。你只需要学会如何去领导它。