我如何使用 AI 构建前端应用：我的真实而混乱的过程

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我注意到，一些人反对使用人工智能进行编程，部分原因是他们不知道如何使用它。我知道，我知道你以前肯定听过“技能问题”这种说法，听起来很烦人，但某种程度上来说，这确实是事实。

我也看到一些人试图接受使用人工智能，但他们似乎从未花时间去“雕琢”（正如帕特里克·埃里克森所说），或者说重新完善人工智能代理的输出结果。他们提交的绝对是粗制滥造的人工智能产物，这让我感到不寒而栗。

我知道你在想什么：人工智能不是应该让我跑得更快吗？如果我必须修改代码，那怎么能让我跑得更快呢？

它在构思阶段速度更快，但质量未必更好。我认为很多时候，作为工程师，我们会花很多时间思考如何实现，因为我们不想把时间和投资浪费在最终效果不佳或用户体验差的产品上。但有了人工智能，你可以快速制作原型，并选择最佳方案。

我想向大家展示我的方法。我尝试过直播，但并不成功。我想这可能是因为我对自己的流程感到害羞或尴尬。人们通常会使用“计划模式”，并运用各种花哨的策略来操控他们的人工智能代理。我的方法比较随意，但这种随意性确实有效。而且我认为更多的人可以从我的方法中学习（不同的方法对不同的人有效）。

这是我的最终输出结果：https://nokeyboardsallowed.dev/

🎯 目标：一个最后一刻的着陆页

我的目标是：为一个黑客马拉松网站搭建一个落地页。不用人工智能，构思起来其实挺容易的，只是我的设计能力实在有限。我花了几个小时尝试各种不同的方案，然后又因为觉得优先级更高或者更有意思而放弃了。

有时候，等我终于想到一个好主意，已经是下午五点了，我那哭闹不停、扭来扭去的宝宝已经回家了。我不得不放弃所有能花在编程上的时间。几周过去了，预产期也越来越近。而就在那时，我几个小时后还要赶飞机，所以根本没多少时间继续编程。（题外话：我真不知道人们是怎么在飞机上用慢吞吞的Wi-Fi写代码的。）

所以我引入了一些“设计专业知识”，但我真的、真的不想用薰衣草做LLM。

第一部分：与克劳德·索内特一起进行头脑风暴🧠

我做的第一件事就是和克劳德聊天。我用克劳德·索内特4来帮我集思广益，想出一个高质量的提示语给人工智能代理，这样我对输出结果就不会那么失望了。

这是节选版本，因为对话时间很长。

首先，我给克劳德介绍了一些背景信息：

我：需要做一个黑客马拉松的着陆页。帮我集思广益。黑客马拉松的挑战是这样的，所以我在想我们可以做一个以某种方式体现主题的着陆页，但在开始制作之前，我们先来集思广益。挑战内容如下
：使用非常规输入方式开发一个应用程序。语音命令、手势、面部表情，任何非传统的键盘和鼠标输入方式都可以。

克劳德提出了五个视觉主题方案，但我之前也想到了。我只是在帮克劳德介绍背景，打好基础。所以，我又向克劳德提出了一个后续想法，我认为这个想法能推动我们前进。我希望黑客马拉松的着陆页能展示一个可能的提交作品示例。

我：我在想，应该有常规模式，还有非常规模式……如果我表达清楚的话……非常规模式可以连接摄像头或者其他支持手势操作的设备。

当然，克劳德对我露出了白眼：

克劳德：哦，这太棒了！🤯 这就像是一次元体验，登录页面本身就展示了挑战！

克劳德提出了以下建议：

• 常规模式：传统导航
• 非常规模式：使用 MediaPipe/TensorFlow.js 实现摄像头 + 手势控制

但我感觉克劳德可能会把“常规模式”理解成一个普通的网站。我希望即使用户不启用非常规模式，网站看起来也依然美观，体现出我的用心。两种模式都应该各有千秋，所以我说：

我：但我不想让普通模式看起来太无聊……你知道的……

克劳德接受了这个想法，于是我提示道：

我：请建站

我想看看我的想法是否真的与克劳德的想法一致。

迭代过程

然后，我突然冒出一个想法，但我不知道该如何实现。我很喜欢它最终呈现出来的效果，但我想探索一下再添加一层会是什么样子。

我：我们能不能探讨一下这个想法，但更偏向命令行/终端风格……帮我集思广益一下。

克劳德给了我8个建议。我无法决定，于是问克劳德：

我：你觉得哪个最好？

克劳德做出了选择，然后我引导它建造出它想象中的东西。

我喜欢它最终呈现出来的效果……算是吧。但它和我们最初的设想相去甚远，而且缺乏专业水准，所以我提出了以下建议：

我：我们该如何将以前的想法与专业的界面结合起来呢？因为我其实还是挺喜欢以前的风格的。

它向我展示了一种可能的组合方式，但我仍然不满意，所以我催促它：

我：我觉得终端模式和专业模式可以更紧密地结合起来。

克劳德给了我八个建议，我又问了克劳德一次“你觉得哪个最好”。但我并不认同它的选择。所以我告诉它我更喜欢另一个方案。我心中有数，不会因为一个人工智能工具说了什么就放弃思考。事实上，在这些时刻，我从未如此自信过。我通常会有点担心会伤害到人的感情，但人工智能工具没有感情，所以我可以自由地表达不同意见。

最终确定提示

我喜欢它的新版本，但我还有一些反馈。黑客马拉松页面本应包含子代理，虽然它确实包含了，但它错误地描述了我们子代理的工作原理，这可以理解（我认为它不熟悉这个概念），所以我解释了一下：

我：我认为应该更多地输出子代理在后台执行的操作。这里有一个人们如何使用它们的例子……我可以设置子代理，它们的角色包括规划师、项目经理、架构师、前端开发人员、后端开发人员、测试工程师、技术文档撰写人员等等。每个子代理在开发生命周期中都扮演着特定的角色。

它达到了我满意的程度，所以现在我可以针对一些小细节给出具体的迭代反馈，例如：

• 我： “或许应该默认打开开发者视图”
• 我： “子代理面板的配色方案应该与网站其他部分的配色方案保持一致。”
• 我： “请把 goose 的首字母小写……而且 goose 是一个开源人工智能代理……不是人工智能框架。”

然后我请克劳德想出一个最终提示，我可以把它给人工智能代理：

我：好的，我们来写一个完整的提示，提示要尽量简单，这样人工智能代理才能发挥创造力，自由发挥。不要太死板，但要提供它所需的信息。

它给了我以下信息：

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.

然后，我把提示信息复制粘贴到 Loveable、ChatGPT 和goose中，比较了三个工具的输出结果。Loveable 的设计最好。

以下是Loveable给我的：

第二部分：使用 Loveable 构建用户界面🎨

我不知道他们用的是什么LLM（语言学习模型）和系统提示组合，但效果很棒。我选择Loveable是因为我知道最终成品会非常精美。

Loveable 满足了我的需求，所以我将代码导出到本地计算机，以便我可以通过 goose 继续使用它。

第三部分：使用 Goose（我的代码库代理）⚙️

在使用 Goose 时，我有一个goosehints文件，规定每次更改都要提交一次。我还为工作目录设置了 Git 仓库，并将其连接到本地和远程仓库。这样，如果我对某些更改不满意，就可以轻松回滚。

我迁移到 Goose 是因为我知道它可以查看我代码库的整个结构，并且它本身也包含有关自身的信息goose。我使用 Claude Sonnet 4 作为 Goose 的 LLM。

熟悉

我让 Goose 通过浏览代码库并查看正在运行的内容来熟悉该应用程序localhost:8000。

鹅：反驳说它不能看localhost:8000。

我：我再次反驳并提醒它，是的，它可以使用 Chrome 开发者工具的 MCP 服务器。

当然，它说我完全正确！goose 给我总结了网站的内容，这太好了，它知道，我不用解释了。

添加功能并迭代优化布局

我告诉了它我的下一步计划：

我：因为我们鼓励他们使用新技术，所以我想让他们看到我们的文档。你觉得我应该怎么做？
这是我们的主要文档：https://block.github.io/goose/docs/category/guides
这是我们的安装文档：https://block.github.io/goose/docs/getting-started/installation
这是我们的子代理文档：https://block.github.io/goose/docs/guides/subagents
你觉得我应该把链接放在哪里？我应该只放一个指向主要文档的链接，还是应该把三个链接都放上去？设计上应该怎么排版？

goose 采取了极致的做法：它创建了一个内容全面的“入门指南”部分，其中包括：

• 三张资源卡（文档、安装、子代理商）
• 主要文档的主要样式
• 黑客马拉松参与者快速入门流程
• 位于挑战和注册之间

我觉得这太过分了，所以我建议：

我：我当时想，一个写着“阅读文档”的按钮就足够了。

然后我询问了实习安排方面的建议：

我：你觉得这个位置怎么样？看看整个网站，它在本地主机 8080 端口上。

goose：（经过一番技术上的反复调试，终于让 Chrome 开发者工具正常工作了）分析了整个页面流程：

• 当前位置：按钮位于“挑战”部分之后
• 建议改进：移至“遇见鹅”部分
• 理由：更流畅的流程：英雄 → 认识鹅 + 文档 → 视频 → 挑战 → 注册；自然的进阶：介绍工具 → 学习工具 → 查看 → 应用；更高的转化率：人们在对工具感兴趣时会阅读文档，而不是在专注于挑战时阅读文档。

我要求 Goose 将其改为移动响应式设计，并实现深色模式和浅色模式主题。

调试之舞

然后我要求它添加语音输入响应功能。我建议使用 MediaPipe。它同意了，然后提醒我实际上应该使用浏览器的 Web Speech API。

然后我们一起反复调试这个功能。嗯，更确切地说，是鹅在调试，我汇报说没成功。

我：语音控制功能停止工作了

goose：（修复权限）

我：不，它闪烁不定，而且抖动得很厉害。

goose：（检查控制台，发现重启循环）

鹅：（第一次修复尝试）

我：还是没听见

鹅：（再次查看控制台，继续调查）

鹅：（第二次修复尝试）

我：屏幕仍然显示已准备就绪，但没有反应。

鹅：（最终解决方案：决定使用手动启动/停止按钮）

结果：语音控制功能可用，但需要手动激活。

添加复活节彩蛋

然后，我开始添加一些功能和彩蛋，纯粹是为了好玩。在这个阶段，我并没有过多地手动修改代码，因为我知道这只是一个简单的前端，不需要管理复杂的后端，而且这个网站只会使用一个月。不过，我还是确保控制台没有报错，用户体验也没有任何问题。如果遇到状态管理方面的问题，我会反馈给 Goose，并提出一些修复建议，有时 Goose 也会给出更好的建议。

最终，我成功搭建了一个可以通过语音或手势控制的落地页。我只用了半天就完成了这个项目。考虑到我从八月份就开始尝试搭建这个网站，而且因为屡次失败而失去专注，最终不得不放弃，这简直是巨大的进步。尽管期间因为家庭琐事和打包行李而不得不暂停，但人工智能驱动的方法极大地加快了我的进度。我的具体工作流程虽然有些混乱，但却是一个高效的迭代过程：Claude 负责集思广益，想出完美的提示语；Loveable 负责完善视觉效果；最后，goose 负责快速迭代代码。

你的AI工作流程是怎样的？