在當(dāng)今這個(gè)科技飛速發(fā)展的時(shí)代，AI 已經(jīng)深入到我們生活和工作的各個(gè)角落，編程領(lǐng)域也不例外。藤設(shè)計(jì)就來(lái)給大家分享一下如何借助一款超火的 AI 代碼編輯器 ——Cursor，開發(fā)一個(gè)屬于自己的網(wǎng)站。

去年誕生的 Cursor，前段時(shí)間因被大神卡帕西發(fā)推稱贊而大火。連 cloudFlare 的副總裁分享自己 8 歲女兒用 Cursor 做網(wǎng)站的視頻都能在全球網(wǎng)友間引起轟動(dòng)，這正應(yīng)了李彥宏那句話：“所有的人，只要你會(huì)說(shuō)話，就具備今天的程序員所具備的能力?！?

首先，我們?nèi)?Cursor 的官網(wǎng)下載免費(fèi)套餐，安裝完成后打開它。對(duì)于初次使用的朋友，先不用去了解項(xiàng)目結(jié)構(gòu)那些復(fù)雜的東西，咱們可以完全依靠 AI。打開后，點(diǎn)擊擴(kuò)展應(yīng)用，搜索中文并下載中文包，然后按說(shuō)明使用 ctrl + shift + p 調(diào)出小框框，輸入 “display”，選擇 “l(fā)anguage” 并點(diǎn)擊中文。重啟應(yīng)用后，界面就變成中文啦，是不是很方便？

接著，我們新建一個(gè)文件夾用來(lái)存放代碼。在 Cursor 里點(diǎn)擊 “打開一個(gè)空文件夾”，選擇剛剛新建的文件夾。然后在設(shè)置里打開 “features”，把 “composer” 打開，這可是我們后續(xù)要用到的關(guān)鍵功能哦。

在正式開始編寫代碼前，我們得先整理一下需求。我是和 claude - 3.5 - sonnet 聊了聊，告訴它我要設(shè)計(jì)一個(gè)好看的個(gè)人網(wǎng)站，要有照片輪播，底部還要有社交媒體賬號(hào)鏈接，并且要有像 OpenAI 那樣的對(duì)話界面。得到設(shè)計(jì)方案后，不用深究，直接把內(nèi)容全拷貝，在 Cursor 里用 ctrl + i 調(diào)出 composer（這是個(gè) AI 對(duì)話界面），粘貼進(jìn)去。我還補(bǔ)充了一句，希望這是一個(gè)單頁(yè)面應(yīng)用，通過(guò) CDN 或者其他簡(jiǎn)單方法實(shí)現(xiàn)，因?yàn)槲覀兊木W(wǎng)站需求比較簡(jiǎn)單，不想搞得太復(fù)雜。

之后，把這些內(nèi)容發(fā)送給 AI，它就開始自動(dòng)寫代碼了，點(diǎn)擊 “accept” 接受代碼。單頁(yè)面應(yīng)用查看效果很簡(jiǎn)單，右鍵 html 文件，在瀏覽器中打開就行。要是遇到問(wèn)題，比如頁(yè)面空白，別慌，直接跟 AI 反饋。當(dāng) AI 詢問(wèn)是否添加個(gè)人照片時(shí)，肯定回答是呀?？梢宰屗鼛兔μ幚砦募诸?，我還讓它把所有相關(guān)名字改成 “tengsheji”。把照片放在名為 “images” 的文件夾里，把路徑拷貝給 AI，它就能自動(dòng)替換了。應(yīng)用修改后刷新頁(yè)面，要是發(fā)現(xiàn)照片有問(wèn)題，比如太小，或者頁(yè)腳沒(méi)顯示，繼續(xù)和 AI 溝通調(diào)整。

說(shuō)到對(duì)話界面，如果出現(xiàn)是灰色沒(méi)反應(yīng)的情況，那是因?yàn)檫€沒(méi)實(shí)現(xiàn)真正的功能。這時(shí)候我們得去調(diào)一個(gè) API，可以選擇通義千問(wèn)、擺渡文心、Kimi、海螺或者我用的智譜。我從智譜的 bigmodel 上拷貝接口文檔給 Cursor，讓它按文檔寫代碼，需要 API key 時(shí)，再?gòu)闹亲V拷貝過(guò)來(lái)發(fā)過(guò)去。要是擔(dān)心密鑰泄露，可以自己處理。如果它要求引入庫(kù)，也讓它自己添加。完成這些后，測(cè)試一下對(duì)話功能，讓它講個(gè)哈利波特的故事，看看是否正常。要是覺(jué)得對(duì)話窗口彈出的形式不好，可以要求它改成在頁(yè)面內(nèi)顯示。

最后，我們來(lái)看看頁(yè)腳部分。如果都是海外社交媒體，不符合需求，可以改成國(guó)內(nèi)的。把自己的鏈接拷貝過(guò)來(lái)，還可以設(shè)置懸停在圖標(biāo)上有變化且能直接跳轉(zhuǎn)。

基本框架完成后，大家可以根據(jù)自己的需求繼續(xù)豐富內(nèi)容，比如添加關(guān)于自己、作品集之類的信息，發(fā)揮自己的設(shè)計(jì)想法。會(huì)寫代碼的朋友還可以試試 Cursor 的選中區(qū)域?qū)υ捫薷?、代碼補(bǔ)全和終端報(bào)錯(cuò)對(duì)話等功能。

完成網(wǎng)站開發(fā)后，我們可以利用 GitHub 和 vercel 一鍵免費(fèi)部署。先注冊(cè)一個(gè) GitHub 賬號(hào)，登錄后新建一個(gè)代碼倉(cāng)庫(kù)并命名，把我們的代碼文件夾上傳。然后在 Cursor 官網(wǎng)用 GitHub 賬號(hào)登錄，新增項(xiàng)目，導(dǎo)入倉(cāng)庫(kù)，點(diǎn)擊部署和 visit，這樣網(wǎng)站就上線啦。大家可以把域名轉(zhuǎn)發(fā)給朋友，要是有自己的域名，也可以修改。

我希望給大家分享的都是簡(jiǎn)單易用、能真正擴(kuò)大大家能力邊界的 AI 工具。后續(xù)我還會(huì)繼續(xù)更新相關(guān)內(nèi)容，感興趣的朋友記得點(diǎn)贊、收藏、關(guān)注哦！大家看完也趕緊去試試，期待在評(píng)論區(qū)看到你們的成果。