AI百科全書 保姆級教程!!!手把手教你用Claude Code搭建網站！

我去你看 我只需要告訴他需求 比如說幫我做一個個人網站 他就開始自己編程設計和上線了 即便咱們完全不懂代碼 也可以分分鐘做出一個超牛的個人網站 嗨 我是帶你學AI的李豪 歡迎來到AI百科全書 現在咱們的百科全書也從文檔升級到網站了 正好借這個機會呢 我想手把手的帶所有零基礎的朋友 學會如何用AI創建一個自己的網站 OK 全網最基礎最詳細且完全免費的 AI建站教程 請查詢 這次的教程呢 咱們主要會用到這個VS Code和這個Cloud Code 這兩個工具啊 我發現這個建網站和這個建房子 本質上是一樣的 所以呢 我把這次建站的這個步驟呢 一共分成了四步 圈定BP 召喚汪工頭和下發圖紙 以及在線驗收 這個方法呢 不只是用在個人網站上 基本上是可以幫你處理所有開發網站的需求 並且呢每一步的詳細操作 我起碼都給它整理好了 各位懂的哈 自取 第一步 圈定BP 很多朋友啊 想要做網站 但是打開電腦 下課不知道從哪做起 爬天四顧心茫然 是不是 其實啊 就是從咱們自己的電腦創建文件夾開始就可以了 你看我先創建了一個文件夾 名字呢就叫我的網站 第一步就搞定了 當然還有一些哈 就是要在你的這個我的網站裏 準備一些配菜 比如說你看在我的文件裏 我就放了我的頭像 作品圖片 還有我自己的個人介紹 以及一些往期視頻教程的資料 既往這樣就算OK了 我們只有把東西準備好 AI呢才能夠精準的去幹活 大家也知道的 想要建房子 地基穩不穩 纔是最關鍵的 這一步呢我們就讓它完成了 第二步 召喚包工頭 我們把這個地基和材料都準備好了之後呢 就可以直接召喚包工頭了 我們先打開這個免費寫代碼的軟件 vizcode 哦 可能有朋友不知道怎麼下載 我這裏就不贅述了 大家可以直接看我的文檔 去一步步操作就好了 咱們把剛剛的文件夾呢 直接拖進到這個軟件裏 重點來了哈 大家看這個屏幕的右上角啊 找到這一排切換面板的小圖標 我們點它啊 你看 底下呢就會馬上彈出一個控制檯 在這個控制檯裏呢 我們點擊中端這兩個字 在底下呢就會彈出黑框 我們直接在這個黑框裏啊 敲一下字母cloud 按下回車 這裏就很關鍵了 大家注意看屏幕啊 如果你是第一次運行的話 它就會彈出一個安全提示 它就問你這個地方安不安全什麼之類的 你不用管 你就直接yes 就ok了 yes之後呢 這一步完成呢 就是相當於你的施工隊正式入駐了 準備聽你的指揮開幹了哈 第三步 下發圖紙 這一步纔是最關鍵且最爽的一步 大家過去的感覺是怎麼樣的呢 就比如說開發一個網站 是不是一定要會敲代碼 但是我保證 這次你不需要敲一行代碼 咱們只需要下達指令就好了 比如說我們在這個對話框裏直接打字啊 讀取文件資料 給我建一個高級感拉滿的個人網站 全黑背景 帶入場動畫 哦這裏還有我的一個獨創的小技巧 就是強行對齊優秀標準 就是我每次下指令的時候呢 其實我都會再說一句 請參考oddworlds的級別的網站來進行設計 這個oddworlds呢 是全球頂尖的網頁設計大獎 不瞭解也沒有關係 因爲AI懂 我們按下回車 基本上就插着腰看就好了 你看 這個AI就會在左邊自動創建文件 而在右側呢 就像瀑布一樣自動的生成代碼 甚至啊 它還能自己檢查錯誤 自己修復 直到把一個成品交給你 第四步 在線驗收 這一步呢 其實決定了咱們這個成品的上線 我們現在左邊呢 找到這個index的文件 右擊 在瀏覽器打開 你看 這樣一個超牛的網站 就這麼華麗的做好了 當然 創建完網站還只是完成了一半 接下來纔是本篇最重要的部分 就是驗收和修改 如果你有不滿意 或者想要增加什麼功能 應該怎麼辦 就比如說 我想在我這個網站裏 能夠讓粉絲朋友們直接點擊這個封面 就能夠跳轉去看看視頻 或者是領取教程文檔 我呢就會直接告訴他 幫我把我的AI百科全書 那部分的頁面呢 加一個更多菜單 然後教程卡片的下方呢 加兩個按鈕 左邊是看視頻 右邊是領文檔 哦 如果你沒有產品經理這個排版思維的話 你甚至可以直接問這個clog 讓他給你建議 你看 他就乖乖的重新寫代碼 直到做到你滿意爲止 來 大家來看一下 我剛剛手搜的這個網站 是不是還不錯 基本咱們頻道的基本介紹啊 AI百科全書的每期資料 還有一些延展的資料 基本全部都在這裏了 是不是還是挺清晰的 這比雲文檔不知道方便了多少 基本上到這裏呢 用AI做個人網站 就能全部搞定了哈 當然呢 我在自己摸索的時候 還發現了非常多的血淚教訓 我呢 給大家總結成了以下三點 大家一定要記得 少踩坑 第一 就是心態一定要好 好網站呢 是要磨出來的 做網站呢 絕對不是抽卡 你就不要指望AI 就能夠一次性給你做一個完美的成片 AI往往第一版呢 給到你的呢 更像一個精裝房 肯定有不符合你心意的地方 比如說這個排版非常錯亂 或者文字不對 甚至還有打不開的情況 千萬別畫 更不要覺得自己的提示詞不對 其實呢 你就可以像我一樣 不停的讓它去修改 去更正 就比如說我之前給它說的 排版還是不好看 幫我優化一下 或者是幫我修復一下 麻啦麻啦哪個bug 你只要跟它反覆的溝通 調整細節 這個網站呢 就會一點點被你打磨 到最完美位置 第二 提示詞呢 要強調水美 大家在下達指令的過程中呢 如果想要這個網站更高級一點的 一定要在話裏 加上這幾個詞語 比如說 蘋果極點風 暗黑科技風 還有我剛剛說的那個 請參考AutoWords的這種級別來設計 只要對接了這個標準呢 做出來的網站 看起來 絕對像花了幾萬 挺專業團隊設計的感覺 第三 一定一定要適配手機 哎呀 現在大部分啊 都是用手機在看網頁 所以大家在做之前呢 一定要給AI說一句話 就是必須完美適配手機屏幕 不然你電腦看着非常高大暢 但是手機一打開 哎 全亂了 我之前給大家分享 原味檔的時候呢 我就發現了 雖然我是用電腦編輯的 但是其實大家都是用手機來查看的 所以這一步一定要在創建前期 就一定要描述清楚 不然再修改 就等於全部搬工了 當然 做網站這個事呢 雖然用AI操作省了很多事情 但實際上呢 咱們這期視頻呢 只是給大家分享了一個 快速入門的野路子 其實很多網站專業的編程 或者配置部署的校正 還有這個Cloud Code 這些頂級軟件的詳細用法 其實我都沒來得及展開 哎 如果大家覺得這種 技術性的內容還不錯的話 可以扣個一鼓勵一下 我接下來呢 再利用大白話 給大家詳細介紹一下 類似這種Cloud Code的 更多用法 其實啊 自從有了AI 之前那些需要編程代碼 完成的工作 咱們現在也都可以做到了 我相信 願意把這條視頻看完的朋友 肯定都是非常願意學習 且有一定的見解的 所以呢 我也想給大家說兩句心裏話 其實我做AI博主這兩年呢 是真真切切感受到風來了 也看到了一些人 被風吹起來了 但是就我個人而言 光做內容 畢竟收益是有限的 所以我也在思考 在這場旋風裏 是否有更多的機會呢 也許屏幕前的你 會有不同的思考呢 歡迎有機會 咱們一起交流和探討一下 但是不管怎麼樣 我們永遠不能停下學習的腳步 就比如說 從最簡單的做一個網站 或者做一條慢劇開始 一步步的探索未知 終會遇到屬於自己的機會 好了 我是帶你學AI的李豪 歡迎關注 咱們一起無限進步