02 - Telling AI what you want

告訴 AI 你到底想做什麼

在 AI 時代，創建軟體最簡單的方式已不再是親自編寫程式碼。相反地，你應該告訴 AI 替你完成。這種指示 AI 執行任務的過程，我們稱之為 提示 (prompting)。當給予精確的指令時，AI 能夠為你完成許多事情。

我希望在這篇文章中與你分享一些關於提示 AI 創建軟體的最佳實踐。我們將首先一起逐步完成一個範例，然後你可以使用任何 AI 聊天系統自行嘗試，例如：

• ChatGP
• Gemini
• Claude
• 或內建於此網站的系統。

透過範例理解 AI 提示

要使用這些 AI 系統，你需要提供一個提示或一組指令。例如，你可以這樣告訴它：

> 「創建一個網頁來幫助我編寫生日卡片。當我輸入一個人的姓名、年齡和愛好時，它應該回傳一個有趣的訊息。」

如果你這樣做，AI 實際上可能會生成一個像這樣的應用程式：

• 初始版本：這是一個不錯的開始。你可以輸入姓名、年齡和愛好，它會生成一個還算可以的訊息。

但如果你對此不滿意，你可以繼續與 AI 對話，並說：

> 「讓它更漂亮，添加一個節日標題和顏色。」

• 第二版本：這會給你第二個版本的應用程式，現在看起來好一點了。

如果你仍然不滿意，你可能會說：

> 「在右側顯示卡片，讓它看起來像生日卡片內部。」

• 第三版本：這會讓你得到第三個版本。

如果你有想法讓它變得更好，你可以給予更多指令，例如：

> 「在頂部添加一個有趣的標題」等等。

這就是我在實際工作中，使用 AI 為我編寫程式碼的方式。我通常會從一組基本指令開始，看看我得到了什麼，然後我會反覆告訴 AI 我希望如何改進它。

掌握提示詞的五大要素

在構建軟體應用程式時，你可能會在提示中包含一些基本構建模組。我經常包含的一個要素是目標。例如，這裡的目標是「創建一個網頁來幫助我編寫生日卡片」。

你可能還會包含以下要素：

1. 輸入 (Input)：指定使用者必須告訴軟體什麼。
2. 輸出 (Output)：我們希望軟體輸出什麼。
3. 佈局 (Layout)：例如，什麼在左邊，什麼在右邊，如何安排應用程式的不同部分。
4. 特殊功能 (Special Instructions)：你希望它包含的任何額外功能。

撰寫好的提示有很多方法，但當你開始告訴 AI 為你構建軟體的旅程時，我鼓勵你考慮這五個構建模組作為你可能選擇包含在提示中的常見部分：

• 目標 (Goal)：你想要創建什麼。
• 輸入 (Input)：使用者將提供什麼輸入。
• 佈局 (Layout)：軟體應用程式的佈局是什麼。
• 特殊功能 (Special Features)：你希望它具有什麼特殊功能。
• 輸出 (Output)：你希望軟體輸出什麼。

單一長提示與增量提示的選擇

在前面，我們經歷了一個來回的過程，我分四個步驟逐步增加了給 AI 的指令，告訴它我想要做什麼。但如果你已經預先知道你想要構建的軟體大致規格，你也可以在單一提示中指定所有構建模組。

例如，如果我已經知道我想要的軟體規格，我可以寫一個更長的單一提示，像這樣：

> 「創建一個網頁來幫助我編寫生日卡片，當輸入一個人的姓名、年齡和愛好時，給他們一個有趣的訊息，使用節日標題和顏色」等等。

在這個範例中，我將所有五個構建模組都寫入了一個單一、更長的提示中。所以，與你之前看到的逐步構建不同，你也可以在一個更長的提示中給予所有指令。這可能會給你一個更好的應用程式第一個版本，如果它仍然不完全符合你的要求，你還可以進一步完善它。

靈活運用構建模組

無論你是一次性編寫一個長的單一提示，還是一次一個地增量提供構建模組，我通常都會從告訴 AI 我的目標開始。然後，對於其餘的構建模組，有多種方法可以將它們組合起來，你不必每次都使用所有構建模組，而且順序也不是非常重要。

你可以從目標開始，然後告訴輸入/輸出佈局，可能不列出任何特殊功能；或者你可以以這種方式將構建模組組合起來，它也能正常工作；或者你可以以不同的順序列出構建模組。AI 通常非常擅長理解這些不同的構建模組重排。

如果你覺得「天哪，這太多了」，我想說不用擔心。如果你只是告訴 AI 你腦海中的任何想法，即使它不完整且不完美，你也可以與 AI 來回溝通幾次，共同將它磨練成你想要的樣子。

提升提示詞精確度與結果可預測性

隨著時間的推移，你將磨練出給予 AI 更具體指令的能力，因為即使你給出相當具體的提示，你得到的結果也可能有所不同。

例如，這裡有一個你剛才看到的詳細長提示，它指定了所有五個構建模組。如果你將這些相同的指令多次給予同一個 AI 系統：

• 第一次：可能會得到一個看起來不錯的應用程式。
• 第二次：可能會構建出類似的應用程式。
• 第三次：可能會構建出另一種應用程式。

所有這些看起來都很好，但你可以看到它們之間存在一些差異。

具體提示與模糊提示的對比

相比之下，如果有人給出一個不那麼具體的提示，一個不那麼清晰的提示，例如一個非常短的提示，只說：

> 「創建一個網頁來幫助我編寫生日卡片。」

由於這些是相對模糊的提示，如果你多次通過 AI 系統運行它，結果可能會大相徑庭：

• 第一次：你可能會得到一個結果。
• 第二次：你可能會得到一個完全不同、帶有不同欄位的結果。
• 第三次：你可能會得到一個與前兩次完全不同的結果。

你編寫的提示越具體、越精確，結果就越可預測。但即使如此，仍然會有一點點變數。所以，如果你得到的結果與我在這篇文章中展示的略有不同，請不要擔心，這是 AI 系統行為的正常情況。但如果它給你帶來了你真的不喜歡的驚喜，那也沒關係。只需給予它額外的指令，引導或移動 AI 更接近你希望它做的事情。

親自動手：生成你的第一個應用程式

學習這個的最佳方式是親自操作鍵盤，嘗試使用 AI。讓我向你展示它會是什麼樣子。

逐步操作指南

我希望你在看完這篇文章後，前往網站上的這個部分，並親自完成這個練習。這裡的說明你可以稍後閱讀，但這是一個類似於 ChatGP、Gemini 和 Claude 等的 AI 系統。

1. 複製提示：我將選擇並複製這裡的第一個提示，它告訴 AI「創建一個網頁來幫助我編寫生日卡片」等等。
2. 發送給 AI：我將點擊此按鈕將其發送給 AI。它會思考一會兒，然後生成一個 HTML 頁面，你可以下載並運行它。
3. 等待生成：請注意，當它仍在運行時，這裡的下載按鈕是灰色的，我還不能點擊它。但 AI 系統只需一點時間來編寫一個稱為 HTML 頁面的東西。這就是網頁的組成部分，它將是這個生日卡片生成器。
4. 下載並運行：現在 AI 已經完成了所有這些 HTML 程式碼的生成，我可以點擊這個下載按鈕。我在 Mac 上運行 Chrome，稍後我會告訴你如果你在不同的機器上該怎麼辦。我可以轉到這裡的下載菜單，打開 file.html。這就創建了一個小型的生日卡片生成器。
5. 測試應用程式：例如，輸入「Karen 27」，我可以創建一個簡單的生日訊息。還不錯。請注意，這實際上是一段用 HTML 編寫的程式碼，如果你自己這樣做，它現在正在你的電腦上運行。程式碼在這個名為 file.html 的文件中，它現在實際上已保存到我的電腦上。如果你這樣做，它將保存到你的電腦上。

迭代改進應用程式

現在，如果你想改進程式碼，你可以提示它：

> 「添加一個節日標題和顏色。」

然後它會更新程式碼。和以前一樣，我必須等到它完成編寫程式碼才能下載。現在我可以下載它，和以前一樣，打開它。哇，現在它看起來更有節日氣氛了！

所以我希望你親自嘗試一下。你可以添加第三個提示，運行它，添加第四個提示，或者如果你願意，嘗試一些其他提示。但只使用這四個提示，一次一個，看看你從這個過程中得到了什麼樣的生日卡片生成器，這也沒問題。

即使我是在網站上向你展示這個過程，這些相同的提示也應該在 OpenAI 的 Chat GPT、Google 的 Gemini、Anthropic 的 Claude 或任何其他流行的 AI 系統上給你類似的結果。你所學到的並不局限於任何一個平台，這些技能適用於你選擇使用的任何 AI 系統。

如何存取和運行生成的程式碼

當你點擊下載按鈕時，你的網頁瀏覽器通常會將 file.html 或 AI 生成的帶有程式碼的文件下載到你的下載資料夾。這些文章會向你展示如何在 Windows 或 Mac 上導航到下載資料夾以找到該文件，然後如果你雙擊它，它應該會在網頁瀏覽器中打開，讓你看到你剛剛生成的程式碼在你的網頁瀏覽器中運行時的樣子。請務必嘗試一下。

軟體開發中的回饋力量

在你嘗試這個過程並生成一個網路應用程式後，我希望你擁有的一個心態是：獲得回饋通常是構建軟體應用程式的一個重要步驟。

每當我編寫軟體時，我通常會：

• 展示給朋友看
• 展示給家人看
• 有時會禮貌地接近陌生人，詢問他們是否願意看看我正在構建的東西，並讓我知道他們的想法
• 或者將其電子郵件發送給同事
• 或者發布到線上論壇以獲取回饋。

因為我發現當人們看到它時，他們通常會提出如何讓它變得更好的建議。有時，如果你通過向朋友展示一些有趣的東西而讓他們發笑，我也會覺得這非常鼓舞人心，並給我繼續前進的動力。

所以，我希望你現在繼續學習本課程的下一個項目，並親自嘗試一下。讓 AI 為你生成一些程式碼，下載 HTML 文件，看看你得到了什麼結果。如果你受到啟發，我希望你也將它展示給朋友或其他人，以獲取他們的回饋。之後，請回到下一篇文章，我們將繼續開發應用程式，並探討如何為生日卡片應用程式添加更多功能。