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

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

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

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

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

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

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

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

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

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

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