從零開始掌握Reddit獲取API密鑰與數據分析
實際效果
1. 打開 https://www.wappalyzer.com/ 輸入要分析的網站地址
2. 得到技術棧，我們主要關心框架和ui
這個頁面比較簡單
1. 頂部導航欄
2. 頁面主體區域
分類在左邊
文章列表在右邊
標題位置
文章卡片展示位置
文章列表和分類區域
3. 底部導航欄
1. 創建一個空的文件夾，注意名字要用英文小寫
2. 用 Trae 打開
3. 采用 Builder 模式，上傳截圖，輸入提示詞：復制圖片效果，實現一個 nextjs 博客網站
4. 在AI的指導下創建項目文件安裝必要環境依賴，對話框點擊運行即可，有問題AI會嘗試解決。
問題：如果依賴總是安裝不成功怎么辦？
原因是：網絡的問題。
解決方法：先 Control + C 結束執行「這個時候Trae可能會繼續執行，寫代碼，等它執行結束」，然后和AI對話：我在中國大陸，npm安裝太慢，依賴未安裝，使用淘寶鏡像安裝。并且用 yarn 安裝。
5. 運行預覽基礎效果。輸入提示詞：運行項目，預覽效果。
5.1 直接在 Trae 中預覽效果，點擊彈窗 「打開Webview」，或者左側側邊欄點擊「web 預覽」
5.2 根據提示的地址在瀏覽器中預覽
然后就可以看到效果了。
問題：有可能會有異常。如圖所示。
解決辦法：直接和AI說 解決運行的異常。
有了基礎效果之后，我們可以根據基礎效果對照原網頁，羅列所有不像的地方：
1. 背景樣式，字體不對。
2. 中間三個圖片卡片樣式不對。
3. 缺少文章的分類和文字列表部分。
4. 缺少底部導航部分
以上是簡要的分析，可以看到，只要想找，會找到很多不一樣的地方。
我的目的是做出完整的效果，細節的樣式問題不做處理，因此下一步要實現的是：文章列表部分和底部導航欄。
提示詞：根據圖片實現文章列表部分。位置在當前內容的下面。
可以看到很快就寫出來效果。
小技巧 — 不要直接點擊全部接受，先看效果。
由于AI修改的內容不一定符合實際需求。所以不要直接接受，要先檢查效果是否符合需求。如果不符合，可以拒絕。或者讓 AI 解釋新增代碼的作用，再決定是否接受。
我們可以看到，樣式和原文件不太一樣，但是和項目整體的ui是一樣的，對于UI的樣式目前不一定要完全一樣，我們的邏輯是先做出來功能，然后調整樣式，那么接下來，我們可以發現：左側分類菜單欄還沒有。
功能分析：實際使用我們會發現，左側菜單欄，分類內容是文章的分類，在頁面滾動的時候，菜單會吸頂。
提示詞：根據圖片實現文章部分左側菜單欄，內容是文章的分類，在頁面滾動的時候，菜單會吸頂。
執行后會發現有異常。
異常調試技巧 — 選中所有異常，然后添加到對話。直接對話：解決所有異常。
我們發現位置有問題，那么接下來就是調整位置。
精準修改小技巧 — 讓AI添加注釋，解釋每一段代碼對應的功能是什么，這樣，可以直接找到對應的代碼，然后精準提出修改建議。AI也可以根據注釋更好的定位修改位置。
提示詞技巧 — 說清楚比說的多更重要，大部分情況下也不需要特殊語法，能夠明確的說清楚要實現的功能的位置，大小，效果是最重要的。
效果完美。
文章列表太少了，讓AI增加幾條，我們看看完整效果。
這個部分比較簡單，一把成功，效果如下：
到此為止，基礎效果已經完成，后續要實現的話，就是按照上面的步驟，逐漸迭代，不斷增加即可。
Github 的使用教程很多，如： https://www.runoob.com/w3cnote/git-guide.html
當然了，也可以讓AI來手把手教你。
1. 注冊 Github，創建一個同名的倉庫
2. 輸入提示詞：指導我把代碼推送到github上。
3. 按照AI的提示操作，就會把代碼推送到Github中
PS：如果這一步比較麻煩，可以直接B站上看看相關的教程。
直接看教程 https://juejin.cn/post/7143067114025254919 ，或者讓AI知道都可以。
一鍵部署：
經過上面的步驟，你就會得到一個網站。
恭喜你，到此為止你得到了一個可以被所有人訪問的網站 https://zenblog-zpit.vercel.app/
原文轉載：公眾號@SocialPrompt
