Tips Tricks for AI Coder
1.0.0
歡迎使用AI編碼器初學者的提示和技巧，這是一種綜合資源，旨在幫助非編碼器有效地使用AI工具來開發網站，應用程序和其他項目。本指南基於對絕對初學者量身定制的現實經驗和實用建議。
本指南還證明了我作為初學者開發人員學習以利用AI力量的旅程。每一章都受到我在AI驅動發展世界的瀏覽時學到的教訓的啟發。我的目標是與您分享這些見解，以避免常見的陷阱並最大程度地發揮這些工具的潛力。
讓我與您分享我早期學到的最大的教訓之一。這是：您要求AI做的事情的方式就是一切。獲得出色的東西和變得無用的東西之間的區別通常取決於您的要求。聽起來很簡單，但是僅此技巧就可以節省很多挫敗感。
因此，讓我們談談如何以一種真正獲得結果的方式向您的AI“編碼助手”尋求幫助，因為您與AI交談的方式信任我，這一切都會有所不同。
這就是交易：AI工具很聰明，但他們並不是讀者。他們擅長以下方向，但是他們需要這些方向清晰明確。如果您含糊不清或留出猜測的空間，那麼事情可能會迅速進行。
這樣想：想像您要雇用承包商來建造房屋。如果您說：“為我建造一些好東西”，那麼當您真正想要的是一個帶游泳池的三居室牧場時，您可能會遇到樹屋。但是，如果您將藍圖遞給他們，然後說：“我想要這個具有這些確切特徵的確切房屋，”他們會確切知道該怎麼做。
人工智能以相同的方式工作。如果您的說明是特定的，則輸出會更好。不用說“修復此代碼”，而是嘗試類似的內容：“在用戶單擊它時，請使用提交按鈕不起作用的問題。”而不是“使我的應用變得漂亮”，而是用光滑，專業的字體和高質量的圖標將應用程序的UI現代化。”看到區別嗎？ AI現在確切地知道您想要什麼，並且有一條明確的遵循途徑。
我學到的一個技巧是從正確的任務特定短語開始 - 將其視為將AI進入正確模式的秘密調味料。以下是可以在不同情況下使用的短語示例。可以隨意複製，調整併根據需要使用它們。
當某事破裂時：
這告訴AI專注於解決一個特定問題。它沒有嘗試重做整個代碼，而是可以解決這個問題。
專家提示：如果您知道什麼破壞了事情（例如一定的代碼行），請包含該細節。如果您不確定嗎？不用擔心 - 只是專注於盡可能清楚地描述問題的症狀。
添加新功能時：
該短語值得黃金重量，因為它告訴AI兩個關鍵的事情：（1）您要添加的內容以及（2）不觸摸的內容。相信我，您不希望AI在添加閃亮的新功能時不小心打破某些東西。這就是為什麼“不刪除任何其他功能”部分如此重要的原因 - 它使其他所有內容保持完整。
當您需要修復瀏覽器錯誤時：
好的，這可能是有史以來最初學者的專業提示。如果您要構建網絡應用程序並且事情不起作用，那麼您的瀏覽器控制台就像一個已經為您弄清楚犯罪現場的偵探。要找到它，請右鍵單擊您的網頁，單擊“檢查”，然後轉到“控制台”選項卡。您將在那裡看到錯誤消息，只是複制這些消息並將其粘貼到您的AI工具中。
為什麼這麼好？因為這些錯誤消息通常包含AI所需的確切信息，以找出出了什麼問題。這就像為修復應用程序的路線圖提供了路線圖。說真的，這個技巧是救生員。
當您想改善應用程序的外觀時：
讓我們成為現實 - 設計是主觀的。一個人看起來很棒的人可能不是別人的茶。這就是為什麼以“現代”，“專業”和“高質量”之類的詞引導您的AI尤其重要的原因。這些形容詞有助於AI了解您想要的整體氛圍。
專家提示：如果您有喜歡外觀的特定應用或網站，請提及！例如：“使其看起來更像Spotify的設計。” AI將嘗試模仿該樣式並將其應用於您的項目。
刪除功能時：
刪除功能可能很棘手，因為您不想意外地拿出一些重要的東西。該短語使AI知道可以清潔刪除該功能，但請盡可能按照應有的方式工作。
當您不小心刪除某些內容時：
重要的是要讓AI知道您丟失的文件並給它一些上下文（例如，“此文件處理我的主頁的所有樣式”）。雖然AI可能無法完美地恢復文件，但通常會提供足夠的能力以使情況重回正軌。
如果您有一件事是從本章中刪除的，那就讓它成為：特殊性就是一切。您在提示中給出的細節和清晰度越多，AI的執行效果就越好。這是我學到的：
起初，這個過程可能會感到笨拙，但是我保證，您練習的越多，就會越好。
與AI一起構建應用程序和網站並不總是會順利進行。有時候，您會覺得自己正在滾動，只是撞到似乎沒有任何作用的牆壁。您已經給出了AI清晰的說明（或者您認為），您已經改寫了請求，但是……您的項目沒有向前邁進。
本章是關於解決這些令人沮喪的情況並解開自己的全部問題。
有時，AI只是……忘記了自己。如果您發現自己一遍又一遍地重複命令，並且什麼都沒有改變，那麼您的說明可能不會出現問題，這可能是聊天歷史記錄。
AI語言模型通過跟踪當前對話中以前的說明和響應來起作用。隨著時間的流逝，這一歷史可能會被沖突的背景變得混亂。例如：
修復程序：與AI開始新的對話。
如果“新鮮開始”無法解決問題，那麼問題本身就有可能在代碼本身中。當兩個代碼告訴您的應用程序做相反的事情時，就會發生矛盾的代碼。這通常會發生：
例如：
修復程序：要求AI識別和解決矛盾。使用AI助手的聊天功能，您可以提示一下： “查看我的代碼並確定可能彼此矛盾的任何部分。”然後將相關部分粘貼到聊天中。
另一個修復程序：手動調試。如果AI沒有遇到問題（或者您只需要更多控制），請一次開始測試您的應用程序。禁用或評論代碼的一部分，並查看應用程序未運行時該應用程序的行為。此過程可以幫助您找到引起衝突的特定線路。
這是一個改變遊戲規則的人： AI並不總是需要為您編寫代碼。您還可以將其用作值得信賴的調試合作夥伴來回答您的問題並指導您解決問題而無需實際更改項目。這種方法為您提供了更多的控制權，並可以幫助您更好地了解所有內容的連接方式。
例如，您可以詢問：
這個來回的不是將控制權交給AI，而是將其用作編碼教練。通過將AI視為老師而不是任務執行者，您可以解鎖洞察力，以幫助您更快，更好地解決問題。
如果一個AI模型沒有給您可以使用的答案，請嘗試將其混合在一起。不同的模型具有不同的優勢：
這是這樣做的方法：
即使您僅使用一種工具工作，切換到另一個工具也可以提供有價值的新觀點（和解決方案）。
更換是救生員。他們讓你：
許多工具和IDE都可以使您啟用更改或版本歷史記錄。如果沒有，您可以將GIT用於版本控制以達到相同的效果。
有時，問題不是您或AI，而是您選擇的語言。如果您的應用程序運行良好或感覺過於復雜，請詢問AI： “ [當前語言]是該項目的最佳選擇嗎？”
這一轉變可以改變遊戲規則。
本章重點介紹以創造性和有效的方式利用屏幕截圖，以及具有AI軌道並記住變化的策略，以使您的工作流保持生產力和挫敗感。
屏幕截圖通常可以說的不只是單詞，尤其是在UI中的某些東西看起來或表現不像預期的情況下。但是，如果沒有適當的上下文，AI可能會誤解屏幕截圖，並假定它代表您想要的解決方案，而不是要突出的問題。為了解決這個問題，至關重要的是，將屏幕截圖與指導AI重點的精確提示配對。
在屏幕截圖旁邊提供清晰的描述：
沒有上下文的屏幕截圖會導致誤解。例如，如果您要突出顯示視覺錯誤，請包括一個說明：
突出顯示屏幕截圖中的關鍵區域：
使用基本的圖像編輯工具來繞線，下劃線或註釋與問題相關的屏幕截圖部分。這有助於AI知道在哪里關注。
澄清屏幕截圖代表了一個問題：
為了確保AI不會誤解您所需的輸出，請使用此提示：
為什麼起作用：這個措辭明確地告訴AI將屏幕截圖視為問題的證據，確保其分析問題而不是假設結果。
另一個常見的問題是，何時AI生成不顯示應用程序或網站UI中的代碼更改。這可能是有幾個原因發生的，這可能是由於銷售問題，未保存的更改，甚至是項目結構中的隱藏錯誤。屏幕截圖在這里特別有用，因為它們可以在視覺上捕獲“之前”和“之後”，從而幫助AI指出了問題所在。
進行兩個屏幕截圖：
在您的提示中包括兩個屏幕截圖，並提供以下解釋：
使用有針對性的提示更深入：
為什麼起作用：將屏幕截圖與提示相結合，使AI既可以視覺和書面上下文，從而使其更容易識別潛在的問題。
屏幕截圖不僅用於查明UI問題。您可以使用屏幕截圖來改善與AI助手的交流：
顯示錯誤消息或日誌：
如果您的瀏覽器控制台或應用程序日誌顯示錯誤，請屏幕截圖，並包括一個提示：
捕獲現場環境中的意外行為：
在調試部署的項目時，請進行任何意外行為的屏幕截圖，並描述應該發生的事情：
突出顯示UI中缺少元素：
如果您的UI缺少某些內容（例如，圖像，按鈕或文本），請使用屏幕截圖顯示其缺失：
比較設計：
使用來自類似應用或項目的設計的屏幕截圖作為靈感，並要求AI複製這些設計的元素：
AI輔助開發的另一個頻繁挑戰是，當AI忘記了先前的編輯或失去對其所做的更改的跟踪。為了解決這個問題，您可以要求AI在項目中創建自定義更改跟踪系統。該系統將記錄其所做的更改，作為“記憶”，只要出現問題時就可以參考。
這可以包括：
集中日誌文件：
AI可以創建一個文件（例如， changelog.txt ），在其中自動附加了其所做的每個更改的描述：
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
內聯代碼註釋：
要求AI直接在代碼中註釋其更改：
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
版本號或標籤：
在代碼中具有AI嵌入式編號或標籤，因此您可以在需要時恢復到特定點：
https://github.com/techcow2/cursor-agent-tracking
在項目上工作時，您一定會遇到問題 - 無論是崩潰，意外的行為還是持續的錯誤。這些時刻可能令人沮喪，但是有一種簡單有效的方法來指導AI仔細處理這些挑戰，同時避免已知的陷阱。本節將向您展示如何製作周到的提示，以幫助AI有效地解決問題而無需引入新問題。
有時，當嘗試解決問題或添加新功能時，您可能會發現AI無意中重複同樣的錯誤或引入新問題。這可能會發生，因為AI不知道過去的錯誤，也沒有給出足夠的上下文來避免這種情況。沒有明確的指導，它可能會忽略關鍵細節或產生意外的副作用。
為了防止這些問題，您可以製作提示，以將您的任務描述與有關避免什麼的明確說明相結合。這樣可以確保AI謹慎處理任務，並專注於解決問題而不會引起進一步的並發症。
恢復到穩定狀態（如果需要）：
識別並記錄問題：
製作提示：
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
提供上下文（如果適用）：
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
審查和測試輸出：
在構建或增強網站或基於Web的應用程序時，效率和性能是兩個關鍵因素。實現這些目標的一種有效方法是使用內容交付網絡（CDN）庫。本章將指導您了解CDN庫是什麼，如何使您的項目受益，並介紹一些最受歡迎的庫，例如Tailwind CSS，Bootstrap，Material UI等。它還將提供有關如何提示您的AI助手集成和使用這些庫的有用示例，如果您是新手編碼並依靠AI來簡化開發任務時，特別是有用的。
內容交付網絡（CDN）是一個在地理上分佈的服務器網絡，它可以根據其位置向用戶提供網絡內容（例如JavaScript庫，CSS框架或字體）。 CDN庫是指在這些網絡上託管的流行框架或工具（例如Bootstrap或jQuery）的版本。您沒有將文件下載到您自己的服務器或開發計算機上，而是直接從CDN引用它們。
加載時間更快
CDN從最接近用戶的服務器提供文件，從而減少了您的網站加載時間。
減少服務器的帶寬
將託管託管託管到CDN的卸載意味著您自己的服務器不必處理這些文件下載。
易於實施
您可以快速添加功能強大的庫 - 通常只有一兩個代碼。
自動更新
CDN通常託管庫的最新版本，因此您可以輕鬆及時保持最新狀態。
緩存優勢
如果用戶已經從另一個站點上的CDN加載了相同的庫或框架，則其瀏覽器可以使用緩存版本，從而進一步加快加載時間。
如果您是編碼全新的，並依靠AI來設置項目，則可以在以下及時使用AI處理庫集成：
集成CSS框架
示例提示：
“在我現有的HTML文件中使用Bootstrap CDN。確保Navbar在移動設備上崩潰。用簡單的版權通知將頁腳放在底部。”
從一個框架遷移到另一個框架
示例提示：
“在我的項目中，通過CDN用Bootstrap替換尾風CS。小心地將現有的尾風類轉換為引導等效物，以保持相同的總體設計。”
添加JavaScript實用程序
示例提示：
“在我的index.html中包括cdn的lodash。然後，在我的main.js文件中，演示如何將lodash的debounce函數用於文本輸入。”
這些提示使AI清晰使用哪個庫，如何使用它（通過CDN）以及您想要實現的任何特定任務或功能。
在下面，您會發現流行的庫可以通過CDN輕鬆添加到項目。每個條目都包括描述，用法註釋，示例片段和您的AI示例示例。
描述：
實用第一的CSS框架，可幫助您通過使用HTML中的預定義類迅速構建自定義設計。
最適合：
希望在不編寫大量自定義CSS的情況下對設計進行顆粒狀控制的開發人員。
樣本實現：
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI升節示例：
“通過CDN向我的項目中添加尾風CSS。使用標頭，簡單的英雄部分和頁腳創建主頁。使用尾風班來確保乾淨現代的設計。”
描述：
使用最廣泛的CSS框架之一，用於構建響應迅速的移動優先網站。它帶有預設的組件，例如navbars，表單，模態等。
最適合：
想要快速，一致的設計的初學者。
樣本實現：
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI升節示例：
“將最新的Bootstrap CDN鏈接添加到我的網站。創建一個響應式Navbar，並在右側使用“服務”下拉和搜索欄。確保在移動設備上看起來不錯。”
描述：
一個基於React的庫，可實現Google的材料設計系統，提供按鈕，卡片和對話框等現成組件。
最適合：
React項目需要時尚，現代和專業的設計美學。
樣本實現：
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
（雖然材料UI主要建議NPM，但您仍然可以通過CDN引用其圖標字體。）
AI升節示例：
“整合了CDN的材料圖標，並將其在我的React應用中使用。構建一個簡單的卡組件，用於顯示具有材料風格的“添加到購物車”按鈕的產品。”
描述：
一個全面的圖標庫，提供可擴展的矢量圖標，可以輕鬆使用CSS設計。
最適合：
快速添加社交媒體圖標，導航圖標或任何其他圖標，而無需創建自定義SVG。
樣本實現：
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI升節示例：
“通過CDN向我的HTML添加字體很棒。用“ home”，“ profile”和“購物車”的字體圖標替換我的Navbar中的所有佔位符圖標。確保它們在移動設備上正確擴展。”
描述：
一個經典的JavaScript庫，以簡化DOM操縱，事件處理和Ajax操作而聞名。
最適合：
想要進行複雜的UI互動而不編寫大量香草JavaScript的傳統項目或初學者。
樣本實現：
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI升節示例：
“通過CDN添加jQuery到我的index.html。向我展示當用戶單擊按鈕時如何隱藏DIV，並將成功消息記錄到控制台。”
描述：
JavaScript實用程序庫，提供了用於數據操作的廣泛功能，包括深克隆，辯論等等。
最適合：
簡化陣列，對象和字符串上的複雜操作。
樣本實現：
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI升節示例：
“從CDN中添加Lodash。將我現有的for木製轉換為lodash方法，並演示如何調試搜索字段。”
描述：
CSS庫提供預製作的動畫（淡出，彈跳，幻燈片等），您可以通過添加特定類別應用於元素。
最適合：
在不編寫自定義CSS動畫的情況下，快速將動畫添加到元素中。
樣本實現：
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI升節示例：
“通過CDN包括Animate.css，並在頁面加載的“我的英雄”部分中應用淡入淡出的動畫。還將彈跳效果應用於“立即註冊”按鈕。”
描述：
用於創建交互式圖表和圖形的多功能JavaScript庫。
最適合：
想要一種直接的方法來可視化數據的初學者，而無需潛入更複雜的庫。
樣本實現：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI升節示例：
“通過CDN添加Chart.js，並創建一個條形圖，顯示每月銷售數據。將Y軸標記為“銷售”和X軸的年份。”
確定您的需求
確定您是否主要需要用於樣式（CSS）或JavaScript功能的幫助。一些圖書館（例如Bootstrap或tailwind）專注於設計，而另一些圖書館（例如JQuery或Lodash）專注於幫助完成JavaScript任務。
檢查兼容性
確保您選擇的庫與您已經擁有的工具或框架很好地配合使用。
尋找活躍的社區和文檔
良好支持的庫通常具有更好的教程，更大的社區用於故障排除以及頻繁的更新。
問你的人工智能
如果您仍然不確定要使用哪個庫，請提示您的AI以獲取建議：
“哪個庫最適合初學者友好，高度可定制的UI：尾風，引導或材料UI？”
AI可以在您的項目上下文中解釋每個選擇的利弊。
