我注意到，有些人反對使用人工智慧進行編程，部分原因是他們不知道如何使用它。我知道，我知道你以前肯定聽過「技能問題」這種說法，聽起來很煩人，但某種程度上來說，這確實是事實。

我也看到一些人試圖接受使用人工智慧，但他們似乎從未花時間去「雕琢」（正如帕特里克·埃里克森所說），或者說重新完善人工智慧代理的輸出結果。他們提交的絕對是粗製濫造的人工智慧產物，這讓我感到不寒而慄。

我知道你在想什麼：人工智慧不是應該讓我跑得更快嗎？如果我必須修改程式碼，那怎麼能讓我跑得更快呢？

它在構思階段速度更快，但品質未必更好。我認為很多時候，身為工程師，我們會花很多時間思考如何實現，因為我們不想把時間和投資浪費在最終效果不佳或使用者體驗不佳的產品上。但有了人工智慧，你可以快速製作原型，並選擇最佳方案。

我想向大家展示我的方法。我嘗試過直播，但並不成功。我想這可能是因為我對自己的流程感到害羞或尷尬。人們通常會使用“計劃模式”，並運用各種花哨的策略來操控他們的人工智慧代理。我的方法比較隨意，但這種隨意性確實有效。而且我認為更多的人可以從我的方法中學習（不同的方法對不同的人有效）。

這是我的最終輸出結果：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 是因為我知道它能夠查看我程式碼庫的全貌，而且它本身也具備關於自身的資訊。我使用 Claude Sonnet 4 作為goose的 LLM（語言學習模組）。

熟悉

我讓 goose 透過瀏覽程式碼庫並查看localhost:8000上執行的內容來熟悉該應用程式。

goose：拒絕並表示無法查看localhost:8000 。

我：我再次反駁並提醒它，是的，它可以使用 Chrome 開發者工具的 MCP 伺服器。

當然，它說我完全正確！ goose 給我總結了網站的內容，這太好了，它知道，我不用解釋了。

新增功能並迭代優化佈局

我告訴了它我的下一步計劃：

我：因為我們鼓勵他們使用新技術，所以我想讓他們參考我們的文件。你覺得我該怎麼做？

這是我們的主要文件： https://block.github.io/goose/docs/category/guides

這是我們的安裝指南：https: 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工作流程是怎樣的？

原文出處：https://dev.to/blockopensource/how-i-use-ai-to-build-frontend-apps-my-candid-messy-process-3ehk