用AI辅助构建前端应用的实战流程

我注意到，人们反对使用 AI 编程，有一部分原因是不知道该怎么用它。我知道，我知道，“这是技术问题”这个玩笑你以前已经听过了，听起来也挺烦人的，但它某种程度上确实是事实。

我还看到，有一类人正在尝试接受 AI，但他们似乎从来不会花时间去“雕琢”——Patrick Erichson 是这么形容的——或者说，去打磨 AI Agent 的输出。他们提交的确实是 AI 垃圾内容，看得我直皱眉。

我也知道你在想什么：AI 不就是应该让我变得更快吗？如果我还得自己修改代码，那它怎么能让我更快？

它加速的是构思，不一定是质量。很多时候，作为工程师，我们会花时间思考“该怎么做”，因为我们不想把时间和投入浪费在一个最终看起来不好、或者无法提供良好用户体验的东西上。但有了 AI，你可以快速做出多个想法的原型，然后从中选择最好的一个。

我想让大家看看我是怎么做的。我尝试过在直播中展示，但效果并不好。我觉得这是因为我对自己的工作过程感到害羞，或者有点难为情。人们通常会使用“plan mode”，再配合各种花里胡哨的 AI Agent 策略。我的过程很乱，但这种混乱确实有效。而且我认为，更多人可以从我的过程里学到东西——毕竟不同的方法适合不同的人。

这是我最终做出来的成果：https://nokeyboardsallowed.dev/

🎯 目标：临时赶工一个落地页

我的目标是：为一个 Hackathon 网站制作落地页。这件事即使不用 AI，也不难构思，只不过我并不擅长设计。我总是花上几个小时尝试不同的方案，然后又放弃它们，转而去做那些在我看来优先级更高、或者更有意思的事情。

有时候，等我终于想到一个不错的点子，已经是下午 5 点了，而我那个哭个不停、动来动去的小宝宝也回家了。我只能跟原本还想投入在这件事上的时间说再见。几周就这样过去，截止日期越来越近。偏偏那时我还得在几个小时后赶飞机，所以也没有多少时间可以继续做它。（顺带一提：我真不知道大家是怎么在飞机上用龟速 Wi-Fi 写代码的。）

于是，我请来了一些“设计专家”，但我真的、真的不想要那种典型的 LLM 薰衣草紫。

第一部分：使用 Claude Sonnet 进行头脑风暴 🧠

我做的第一件事，就是和 Claude 聊天。我使用 Claude Sonnet 4 帮我一起构思应该怎么做，并生成一个高质量的 prompt，之后再把它交给 AI Agent，这样我就不至于因为输出结果而那么沮丧。

下面是精简版，因为完整对话其实相当长。

首先，我给 Claude 提供了一些背景信息：

我：需要做一个 hackathon 落地页。帮我做做头脑风暴。hackathon 的挑战主题是下面这个，所以我在想，落地页是不是也可以通过某种方式体现这个主题，不过在开始构建之前，我们先一起想想方案。这就是挑战内容。挑战：使用非常规输入方式构建一个应用。语音命令、手势、面部表情，任何不同于传统键盘和鼠标的输入方式都可以。

Claude 提出了五种视觉主题方案，但这些我其实已经想过了。我只是在给 Claude 补充背景，为后续对话打基础。于是，我又告诉 Claude 一个我认为能推动进展的想法。我希望这个 Hackathon 落地页本身，就能演示一种潜在的参赛作品会是什么样子。

我：我在想可以有一个普通模式，再有一个非常规模式……不知道这样说你能不能理解……非常规模式里可以有摄像头之类的东西，再配合手势操作。

当然，Claude 开始猛夸我：

Claude：哦，这个想法太绝了！🤯 也就是说，这是一个元体验，落地页本身就在演示这项挑战！

Claude 提出了下面的方案：

普通模式：传统导航方式

非常规模式：使用 MediaPipe/TensorFlow.js 实现摄像头加手势控制

但我隐约觉得，Claude 可能会把“普通模式”理解成一个平平无奇的网站。我希望即使用户没有启用非常规模式，网站看起来也依然漂亮，能让人感觉我确实认真做过。两种模式都应该以各自的方式给人留下深刻印象，所以我说：

我：但我不希望普通模式看起来太无聊……你懂的……

Claude 接受了这个想法，接着我又给了它 prompt：

我想看看，我的想法是否真的与 Claude 的理解一致。

迭代过程

然后，我突然冒出了一个随机的想法，但不知道该怎么实现。我喜欢它做出来的东西，不过我还想进一步探索：如果再增加一层设计，最终会是什么样子？

我：我们能不能继续探索这个想法，但让它更有 cli/terminal 的感觉……帮我做做头脑风暴。

Claude 给了我 8 个方案。我无法决定，于是问 Claude：

我：你觉得哪个最好？

Claude 做出了选择，然后我让它把自己想象中的方案构建出来。

我有点喜欢它做出来的东西……算是吧。但它与我们最开始构建的内容偏离得太远，而且缺少专业的精致感，于是我给出 prompt：

我：我们要怎样把前面的一些想法和那个专业界面结合起来？因为我其实还是很喜欢那个界面的。

它向我展示了一种可能的组合方式，但我依然不满意，于是又对它说：

我：我觉得 terminal 模式和专业模式可以结合得更紧密一些。

Claude 又给了我 8 个方案，我再次问它“你觉得哪个最好”。但这一次，我不同意它的选择。所以我告诉它，我喜欢的是另一个选项。我心里有一个明确的愿景，不会仅仅因为 AI 工具说了什么，就关闭自己的大脑、放弃批判性思考。事实上，在这种时刻，我反而前所未有地自信。我平时多少会担心伤害人类的感情，但 AI 工具没有感情，所以我可以毫无顾虑地反驳它们。

最终确定 prompt

我喜欢它新构建的版本，但还有更多反馈要给。这个 Hackathon 页面应该包含 subagent。它确实加入了 subagent，但对我们实际使用 subagent 的方式描述得并不准确。这也可以理解——我觉得它可能并不熟悉这个概念——所以我解释道：

我：我觉得应该展示更多 subagent 在后台做了什么。下面是一个人们使用它们的例子……我可以设置具有不同角色的 subagent，比如 Planner、Project Manager、Architect、Frontend Dev、Backend Dev、QA Engineer 和 Tech Writer。每个角色都在开发生命周期中承担特定职责。

它终于做到了一个我满意的程度，于是我可以开始针对一些细节提供具体的迭代反馈，比如：

我：“也许 developer view 应该默认打开。”

我：“subagent 面板的配色应该和网站其他部分保持一致。”

我：“可以把 goose 一直保持为小写吗……另外，goose 是一个开源 AI Agent，不是 AI framework。”

然后，我让 Claude 生成一个最终 prompt，好让我把它交给 AI Agent：

我：好，现在把整个需求写成一个 prompt。这个 prompt 尽量保持简单，让 AI Agent 可以发挥创造力，按照自己的方式来做。不要规定得太死……但要提供它所需的信息。

下面是它给我的内容：

Build a hackathon landing page with a unique dual-experience design that demonstrates the hackathon's core concept through the page itself.

HACKATHON CONTEXT:
This hackathon challenges participants to build apps using unconventional inputs (voice, gestures, facial expressions, etc.) instead of keyboard and mouse. Participants must use goose, an AI agent that can use specialized subagent teams.

CORE DESIGN PHILOSOPHY:
The landing page should be a meta-demonstration of the challenge. It needs two distinct modes that visitors can toggle between:

MODE 1 - PROFESSIONAL/POLISHED:
- A modern, impressive landing page that's already visually striking on its own
- Don't make this boring or plain - it should have personality and wow-factor
- Should hint at interactivity and the unconventional theme
- Use contemporary web design trends and create something that feels premium
- Include smooth animations, micro-interactions, and life/motion throughout

MODE 2 - UNCONVENTIONAL INPUTS:
- When activated, demonstrates gesture/voice control capabilities
- Shows webcam feed with hand tracking visualization
- Displays gesture control instructions
- Simulates (or actually implements) gesture-based navigation
- The UI can transform or add overlays to show this alternative interaction mode

THE KEY INSIGHT:
Mode 1 shouldn't be a "boring regular website" - both modes should be impressive in different ways. Think of Mode 1 as a beautiful sports car parked (professional, polished, stunning) and Mode 2 as actually driving it (interactive, gesture-controlled, immersive).

REQUIRED CONTENT SECTIONS:
1. Hero - Introduce the hackathon with impact
2. The Challenge - Explain the unconventional inputs requirement, no keyboard/mouse allowed
3. The Tool (goose) - Explain that participants must use goose AI framework to create specialized subagent teams
4. Call to Action - Registration

5. THE SUBAGENT PANEL:
Include a side panel (open by default) that shows goose subagents actively working. This simulates a real development workflow with specialized agents:
- Planner (defines vision)
- Project Manager (breaks down tasks)
- Architect (sets up structure)
- Frontend Developer (builds UI)
- Backend Developer (API logic)
- QA Engineer (tests)
- Tech Writer (documentation)

Show these agents actually working through tasks with activity logs and status updates. Make it feel like you're watching a development team collaborate in real-time.

TECHNICAL IMPLEMENTATION:
- Toggle button to switch between modes (make it prominent and enticing)
- When in unconventional mode: show webcam preview, gesture tracking visualization, control instructions
- Smooth transitions between modes
- Consider using MediaPipe or TensorFlow.js for actual hand tracking if you want it functional
- The page should work gracefully even if webcam permission is denied

CREATIVE FREEDOM:
You have complete freedom on:
- Visual style and aesthetic direction (cyberpunk, minimalist, brutalist, glassmorphic, whatever you think fits)
- Color palette
- Typography choices
- Animation style
- Layout structure
- How the two modes relate to each other visually
- The transition between modes

THE GOAL:
Create a landing page where the experience itself teaches visitors what the hackathon is about. Someone should visit this page and immediately understand "unconventional inputs" through interaction, not just reading. Make both modes compelling in their own right - don't sacrifice one for the other.

WHAT SUCCESS LOOKS LIKE:
- Visitors are impressed by Mode 1 and think "this is slick"
- Visitors are intrigued by the mode toggle and want to try it
- Visitors switch to Mode 2 and think "oh THAT'S what unconventional inputs means"
- The page feels cohesive even with two different modes
- The page is memorable and makes people excited about the hackathon

Build something that pushes boundaries and shows creativity while being functional and accessible.

然后，我把这个 prompt 分别复制粘贴到了 Loveable、ChatGPT 和 goose 中。我对比了三者的输出，Loveable 的设计最好。

下面是 Loveable 给我的结果：

第二部分：使用 Loveable 构建 UI 🎨

我不知道他们使用的是怎样的 LLM 组合和 system prompt，但效果确实很棒。我选择 Loveable，是因为我知道它做出来的东西会非常精致。

Loveable 给了我想要的结果，于是我把代码导出到本地电脑，这样就能继续通过 goose 完善它。

第三部分：与 goose 协作，我的 Codebase Agent ⚙️

使用 goose 工作时，我会准备一个 goosehints 文件，要求它每完成一项改动都创建一次 commit。我还为工作目录初始化了 Git 仓库，并同时连接了本地和远程仓库。这样，如果出现任何我不喜欢的改动，我都可以轻松回滚。

我转到 goose，是因为我知道它能够看到整个 codebase 的全貌，而且作为 goose，它也掌握与自身有关的信息。我为 goose 使用的 LLM 是 Claude Sonnet 4。

我先让 goose 熟悉这个应用，给它的 prompt 是：浏览整个 codebase，并查看 localhost:8000 上正在运行的内容。

goose：拒绝了，说它无法查看 localhost:8000。

我：我再次反驳它，提醒它当然可以，它可以使用 chrome dev tools mcp server。

当然，它立刻表示我说得完全正确！goose 随后总结了这个网站是做什么的。这很完美，因为它已经理解了项目，我不需要再额外解释。

添加功能并迭代调整位置

我告诉它接下来要做什么：

我：因为我们要求参赛者使用新技术，所以我想给他们提供文档链接。你觉得我应该怎么做？这是我们的主文档：https://block.github.io/goose/docs/category/guides 这是安装文档：https://block.github.io/goose/docs/getting-started/installation 这是 subagents 文档：https://block.github.io/goose/docs/guides/subagents 你觉得我应该把它放在哪里？是只提供一个主文档链接，还是三个都放进去？从设计角度看，它应该是什么样子？

goose 采取了一种极繁主义方案：创建了一个内容非常全面的“Get Started”区块，其中包括：

三个资源卡片：Documentation、Installation 和 Subagents

主文档采用主要视觉样式

为 Hackathon 参与者设计的快速入门流程

整个区块放在 Challenge 和 Registration 之间

我觉得这有点过头了，于是建议：

我：我本来觉得，只放一个写着“read the docs”的按钮就够了。

接着，我又询问了它关于位置安排的意见：

我：你觉得现在这个位置怎么样？看一下整个网站，它运行在 localhost 8080 上。

goose：（经过一番技术层面的来回折腾，终于让 Chrome DevTools 正常工作后）分析了整个页面的浏览流程：

当前位置：按钮位于“The Challenge”区块之后

改进建议：把它移动到“Meet goose”区块

理由：页面流程会更合理：Hero → Meet goose + Docs → Video → Challenge → Registration；自然的推进顺序应该是：介绍工具 → 学习工具 → 查看演示 → 实际应用；转化率也会更高：人们应该在对工具产生好奇时阅读文档，而不是在专注理解挑战内容时阅读。

我让 goose 实现移动端响应式设计，并加入 dark mode 和 light mode 主题。

然后，我让它增加响应语音输入的能力。我建议使用 MediaPipe。它同意了，随后又提醒我，其实应该使用浏览器的 Web Speech API。

之后，我们一起反复调试这个功能。好吧，更准确地说，是 goose 负责调试，而我负责告诉它功能还是不能用。

我：Voice control stopped working

goose：（修复权限问题）

我：No, it's flickering and spazzing

goose：（检查 console，发现重启循环）

goose：（第一次尝试修复）

我：Still not listening

goose：（再次检查 console，展开更多调查）

goose：（第二次尝试修复）

我：Still says ready but doesn't react

goose：（最终方案：决定直接使用手动 Start/Stop 按钮）

结果：语音控制终于可以工作了，但需要手动激活。

接下来，我只是为了好玩，开始不断添加新功能和彩蛋。在这个阶段，我没有大量手动修改代码，因为我知道这只是一个简单的前端项目，没有什么需要管理的后端复杂逻辑，而且这个网站也只会使用一个月。不过，我确保 console 中没有任何 bug，也不会出现有问题的用户体验。如果发现状态管理方面的问题，我会把问题告诉 goose，并针对应该如何修复提出建议；有时候，goose 也会反驳我，并提出更好的方案。

最终，我得到了一个可以通过语音或手势控制的落地页。我只用了半天时间就完成了这个项目。考虑到我从 8 月起就一直在尝试构建这个网站，却又因为一次次失败的尝试而失去注意力、反复放弃，这次取得的进展可以说非常巨大。尽管中间还得因为照顾家人和收拾行李而暂停工作，但 AI 驱动的方法依然极大地加快了整个过程。这次构建所采用的具体工作流，是一个混乱但有效的迭代过程：使用 Claude 进行头脑风暴，打磨出理想的 prompt；使用 Loveable 实现精致的视觉效果；最后再使用 goose 快速迭代代码。

你的 AI 工作流是什么样的？

部分评论可能只有登录后的访客才能看到。登录以查看所有评论。

如果要采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。