2025年7月18日 星期五

我的Vibe Coding製作教學工具經驗談(114年7月)

 想知道如何更有效率地利用人工智慧來開發工具或教學軟體嗎?🚀 過去這段時間,我深入探索了利用AI進行「Vibe Coding」的心得,這裡將分享我寶貴的實戰經驗與技巧,希望能幫助大家在AI輔助開發的道路上走得更順暢、更高效。



利用AI製作軟體的關鍵技巧🔑

在使用AI來撰寫程式時,掌握一些關鍵的技巧能讓您的開發過程事半功倍:

  • 明確你的需求: 在動手之前,務必想清楚您想做什麼,以及需要哪些功能。將需求描述得越具體、越詳細越好。例如,若要開發一個抽籤程式,除了基本抽籤功能,也要考量是否需「指定抽籤」或重複抽中的處理方式。過去的AI可能無法一次處理太多複雜需求,但現在的AI(特別是這半年來)進步飛快,通常能一次處理80%-90%的需求,非常驚人!📈
  • 指定角色與情境: 賦予AI一個明確的角色能幫助它更好地理解您的意圖,例如:「你是一位老師,請幫我設計一個...」。這樣AI的產出會更貼合您的期望。👩‍🏫
  • 循序漸進地增加功能: 如果AI無法一次性完成所有複雜功能,可以先讓它完成核心與必要功能,之後再逐步添加其他額外功能。小步快跑,效果更好。🏃‍♂️
  • 自然語言溝通: 把AI當作朋友一樣聊天,用自然、口語化的方式描述您的需求,這樣AI更能捕捉您的真實意圖。💬
  • 成果測試與迭代: AI生成的程式不一定完美,務必進行測試。若發現問題或不符預期,直接向AI提出修改要求。例如,若按鈕沒有反應,直接告訴它「按鈕沒反應」,它通常會幫您迅速修正!🔧
  • 利用版本回溯: 當程式在修改過程中壞掉時,可以回到之前正常運作的版本。將該段程式碼複製下來,在新的對話中重新貼上,然後請AI繼續修改。這樣能有效避免在舊對話中持續嘗試修正已出錯的邏輯,省時又省力。↩️
  • Pro版本輔助: 當免費版Gemini 2.5 Flash怎麼改都無法達到要求時,可以將程式碼複製到Pro版本中,利用其更強大的能力進行修正,然後再將修正後的程式碼複製回Flash版本繼續使用,以節省Pro版本的有限次數。這是一個聰明的策略!💡
  • 指定輸出格式: 若希望每次生成的程式界面都保持一致,可以提供一個滿意的HTML範例給AI,並告訴它「以下為HTML範例,請照此範本生成」。這樣AI在生成新的程式時就會依循您提供的格式,省去大量調整時間。🎨

AI工具的選擇:我的「Gemini」與「Canva」取捨之道 🤔

在眾多AI工具中,我主要選擇 Google Gemini 來進行程式編寫,而非Canva。以下是我的考量與理由:

  • 下載功能限制: Canva 所生成的程式若需要檔案下載功能,在Canva網站上是無法使用的,而我製作的許多程式恰好都需要此功能。Gemini則沒有這個問題。⬇️
  • AI功能嵌入能力: Gemini能夠將自身的AI功能(例如自動生成題目)嵌入到程式中,這大大提升了工具的智慧化程度。Canva目前則無法實現這一點。🤖
  • 免費版強大: Gemini 2.5 Flash 是完全免費的,且功能強大。雖然Pro版本每天有5-6次問答機會,之後需要付費,但我目前所有用Gemini寫的程式,都是使用免費的2.5 Flash版本,足以應付大部分需求。🆓
  • 提示詞長度優勢: Gemini 的免費版可以接受非常長的提示詞,這對於需要提供大量資訊(例如完整的HTML範例)來生成特定格式程式時非常有用。而有些免費AI在提示詞過長時會直接拒絕服務。✍️
  • 帳號類型限制: 若您使用Gemini開發程式,並希望能夠生成公開分享的網頁連結供學生使用,務必使用個人的Gmail帳號,不要使用教育版的Gmail帳號。教育版的Gmail帳號會缺少「分享Canvas」的功能,這點非常關鍵。🔑

總的來說,利用AI來輔助程式開發和教學工具製作,不僅能顯著提升效率,更能開拓新的可能性。只要掌握正確的溝通技巧並選擇合適的工具,您也能輕鬆打造出功能強大又實用的應用。希望這些經驗分享能對您有所啟發!

沒有留言:

張貼留言