實(shí)際效果

準(zhǔn)備工作

分析要拷貝頁(yè)面的技術(shù)棧

1. 打開 https://www.wappalyzer.com/ 輸入要分析的網(wǎng)站地址

2. 得到技術(shù)棧，我們主要關(guān)心框架和ui

截圖要克隆的網(wǎng)頁(yè)

分析頁(yè)面功能

這個(gè)頁(yè)面比較簡(jiǎn)單

1. 頂部導(dǎo)航欄

2. 頁(yè)面主體區(qū)域

分類在左邊

文章列表在右邊

標(biāo)題位置

文章卡片展示位置

文章列表和分類區(qū)域

3. 底部導(dǎo)航欄

開始克隆出效果

基礎(chǔ)工作 – 看到基礎(chǔ)效果

1. 創(chuàng)建一個(gè)空的文件夾，注意名字要用英文小寫

2. 用 Trae 打開

3. 采用 Builder 模式，上傳截圖，輸入提示詞：復(fù)制圖片效果，實(shí)現(xiàn)一個(gè) nextjs 博客網(wǎng)站

4. 在AI的指導(dǎo)下創(chuàng)建項(xiàng)目文件安裝必要環(huán)境依賴，對(duì)話框點(diǎn)擊運(yùn)行即可，有問題AI會(huì)嘗試解決。

問題：如果依賴總是安裝不成功怎么辦？

原因是：網(wǎng)絡(luò)的問題。

解決方法：先 Control + C 結(jié)束執(zhí)行「這個(gè)時(shí)候Trae可能會(huì)繼續(xù)執(zhí)行，寫代碼，等它執(zhí)行結(jié)束」，然后和AI對(duì)話：我在中國(guó)大陸，npm安裝太慢，依賴未安裝，使用淘寶鏡像安裝。并且用 yarn 安裝。

5. 運(yùn)行預(yù)覽基礎(chǔ)效果。輸入提示詞：運(yùn)行項(xiàng)目，預(yù)覽效果。

5.1 直接在 Trae 中預(yù)覽效果，點(diǎn)擊彈窗 「打開Webview」，或者左側(cè)側(cè)邊欄點(diǎn)擊「web 預(yù)覽」

5.2 根據(jù)提示的地址在瀏覽器中預(yù)覽

然后就可以看到效果了。

問題：有可能會(huì)有異常。如圖所示。

解決辦法：直接和AI說 解決運(yùn)行的異常。

逐漸完善 – 分析基礎(chǔ)效果

有了基礎(chǔ)效果之后，我們可以根據(jù)基礎(chǔ)效果對(duì)照原網(wǎng)頁(yè)，羅列所有不像的地方：

1. 背景樣式，字體不對(duì)。

2. 中間三個(gè)圖片卡片樣式不對(duì)。

3. 缺少文章的分類和文字列表部分。

4. 缺少底部導(dǎo)航部分

以上是簡(jiǎn)要的分析，可以看到，只要想找，會(huì)找到很多不一樣的地方。

逐漸完善 – 根據(jù)分析拆分后續(xù)要實(shí)現(xiàn)內(nèi)容

我的目的是做出完整的效果，細(xì)節(jié)的樣式問題不做處理，因此下一步要實(shí)現(xiàn)的是：文章列表部分和底部導(dǎo)航欄。

文章列表部分

提示詞：根據(jù)圖片實(shí)現(xiàn)文章列表部分。位置在當(dāng)前內(nèi)容的下面。

可以看到很快就寫出來(lái)效果。

小技巧 — 不要直接點(diǎn)擊全部接受，先看效果。

由于AI修改的內(nèi)容不一定符合實(shí)際需求。所以不要直接接受，要先檢查效果是否符合需求。如果不符合，可以拒絕?；蛘咦?AI 解釋新增代碼的作用，再?zèng)Q定是否接受。

我們可以看到，樣式和原文件不太一樣，但是和項(xiàng)目整體的ui是一樣的，對(duì)于UI的樣式目前不一定要完全一樣，我們的邏輯是先做出來(lái)功能，然后調(diào)整樣式，那么接下來(lái)，我們可以發(fā)現(xiàn)：左側(cè)分類菜單欄還沒有。

功能分析：實(shí)際使用我們會(huì)發(fā)現(xiàn)，左側(cè)菜單欄，分類內(nèi)容是文章的分類，在頁(yè)面滾動(dòng)的時(shí)候，菜單會(huì)吸頂。

提示詞：根據(jù)圖片實(shí)現(xiàn)文章部分左側(cè)菜單欄，內(nèi)容是文章的分類，在頁(yè)面滾動(dòng)的時(shí)候，菜單會(huì)吸頂。

執(zhí)行后會(huì)發(fā)現(xiàn)有異常。

異常調(diào)試技巧 — 選中所有異常，然后添加到對(duì)話。直接對(duì)話：解決所有異常。

我們發(fā)現(xiàn)位置有問題，那么接下來(lái)就是調(diào)整位置。

精準(zhǔn)修改小技巧 — 讓AI添加注釋，解釋每一段代碼對(duì)應(yīng)的功能是什么，這樣，可以直接找到對(duì)應(yīng)的代碼，然后精準(zhǔn)提出修改建議。AI也可以根據(jù)注釋更好的定位修改位置。

提示詞技巧 — 說清楚比說的多更重要，大部分情況下也不需要特殊語(yǔ)法，能夠明確的說清楚要實(shí)現(xiàn)的功能的位置，大小，效果是最重要的。

效果完美。

文章列表太少了，讓AI增加幾條，我們看看完整效果。

底部導(dǎo)航區(qū)域

這個(gè)部分比較簡(jiǎn)單，一把成功，效果如下：

到此為止，基礎(chǔ)效果已經(jīng)完成，后續(xù)要實(shí)現(xiàn)的話，就是按照上面的步驟，逐漸迭代，不斷增加即可。

發(fā)布上線

Github 代碼倉(cāng)庫(kù)

Github 的使用教程很多，如： https://www.runoob.com/w3cnote/git-guide.html

當(dāng)然了，也可以讓AI來(lái)手把手教你。

1. 注冊(cè) Github，創(chuàng)建一個(gè)同名的倉(cāng)庫(kù)

2. 輸入提示詞：指導(dǎo)我把代碼推送到github上。

3. 按照AI的提示操作，就會(huì)把代碼推送到Github中

PS：如果這一步比較麻煩，可以直接B站上看看相關(guān)的教程。

發(fā)布到 vercel

直接看教程 https://juejin.cn/post/7143067114025254919 ，或者讓AI知道都可以。

一鍵部署：

經(jīng)過上面的步驟，你就會(huì)得到一個(gè)網(wǎng)站。

恭喜你，到此為止你得到了一個(gè)可以被所有人訪問的網(wǎng)站 https://zenblog-zpit.vercel.app/

原文轉(zhuǎn)載：公眾號(hào)@SocialPrompt

#你可能也喜歡這些API文章!

從零開始掌握Reddit獲取API密鑰與數(shù)據(jù)分析

使用PRAW庫(kù)與RedditAPI進(jìn)行數(shù)據(jù)交互

Reddit免費(fèi)天氣API推薦

Reddit免費(fèi)AIAPI政策變更

RedditAPIPython接口指南

如何獲取字節(jié)火山deepseek系列-api完整教程，及使用方法

GitHub Copilot與API文檔的智能交互

GitHub GraphQL API開發(fā)指南

GitHub Copilot API接入指南