上一篇文章講了如何用AI開發簡單的單頁網站，今天開始講講如何開發複雜的單頁網站。本期視頻主要是教你如何準確描述界面佈局和內容，讓AI開發出你需要的界面樣式，還有網頁裏如果有多個功能點該如何讓AI處理問題等等。當你學會之後，你想用AI開發個人網站或企業網站都會得心應手。

首先講一下簡單的單頁網站和複雜的單頁網站有哪些區別，簡單的單頁網站，功能都比較單一，邏輯也比較簡單。複雜的單頁網站，邏輯會較多，一個頁面裏有多個功能模塊和多個系統邏輯。如果以後你需要開發大型的網站軟件，不可避免的會出現一個頁面裏有多個功能多個系統邏輯的情況，所以這也是為了幫助你打好基礎。比如我這個全球實時時間的首頁 https://tools.gushiio.com/time/，裏面包括了地圖模塊，老黃曆模塊，熱門城市模塊，更多國家時間模塊。他們都代表着不同的功能邏輯，比如這個世界地圖是最複雜的，因為它的背景並不是一張世界地圖的圖片，而是用代碼寫出來的世界地圖，這樣AI才能準確地把不同國家的時間放在對應國家的地圖位置上。第二複雜的是老黃曆，這裏顯示的內容都是使用第三方老黃曆數據庫來實現的。這個世界地圖代碼和老黃曆的數據庫如果你有需要，可以在視頻下方留言給我，我提供下載地址給你。熱門城市時間這個還好，雖然上面有動態時鐘，但這種功能並不複雜，AI能輕鬆駕馭，最下面的是最簡單的國家名稱列表，所以整個頁面的內容是從上到下，從複雜到簡單的功能來呈現給大家。

接下來講講開發思路，畢竟我的AI課程主要就是講開發思路和AI溝通方法，有了開發思路，你就能借助AI開發你需要的功能。所有擼碼的工作全交給AI，我們就安安分分的做一個CV程序員就可以了，什麼是CV程序員？就是隻需要會Crtl+C和Ctrl+V的程序員。繼續講講開發思路，像這樣的複雜的單頁網站，建議先做最難的功能，比如這個世界地圖和老黃曆，畢竟如果頁面內容較多，代碼量就會多，這會影響AI開發時消耗判斷問題和解決問題的算力。但是為了一開始能定好大致頁面內容佈局，其他區域的內容我也會跟AI説一起做上去，讓AI先寫一個大致完整的內容界面出來，只是其他小功能有bug或界面有問題我不會優先處理，先把複雜的功能做好，再做其他。

現在講講如何讓AI做一個大致頁面出來，首先，我們需要準確的描述頁面佈局給AI，讓AI能按照你的需求來製作界面。例如這個地圖和老黃曆，他們的樣式有點像個卡片，你可以這樣寫描述文字，左邊為地圖卡片內容，右邊為老黃曆卡片內容，兩個卡片放在同一行上，左邊內容按比例佔70%，右邊內容佔30%，一定要説這個比例，否則AI會把這兩個內容按照各佔50%來顯示。這樣這個區域的佈局就會出來。至於地圖和老黃曆卡片裏有什麼內容，你另外補充告訴AI就可以了。下面的“熱門城市時間”和“更多國家列表”，你就直接告訴AI一共要顯示多少個國家時間或者國家名稱列表，一行多少列，比如這個界面是一行4列就可以了。

如果你需要指定某些內容的顏色，例如這個鼠標移動到按鈕上顯示的紅色，你就需要提供這個紅色的顏色代碼給AI，因為你跟AI説紅色，AI使用的紅色可能跟你想象的不一樣，為了避免分歧，你需要把準確的顏色代碼發給AI。這時候你可以到我這個原型設計軟件的“顏色管理”裏，選擇對應顏色，例如這個紅色，這裏顯示了紅色的顏色代碼，然後把這個顏色代碼發給AI，AI就可以根據你提供的顏色代碼來修改顏色。你也可以把顏色保存下來，它會顯示在這裏，方便你下次找得到。還有就是文字大小，如果你跟AI説文字大一點或小一點，AI是不清楚究竟大多少小多少，它需要你提供準確的數字，所以之前我做這個原型設計軟件，就是為了可以預覽對應字體的大小，然後把大小的數字發給AI。一般網頁字體大小的單位是像素的就是px，例如這裏字體大小是16，就是16px，你可以在這裏調整字體的大小，例如13，你覺得這個字體大小合適，你就告訴AI，按鈕裏字體大小為13px就可以了，這樣就能避免在AI製作界面時顏色和字體大小與你需要的不一樣的問題。

現在整個頁面的大致佈局，AI已經做出來了，至於風格嘛，我一般都是叫AI按照年輕人喜愛的樣式來製作頁面，你也可以讓AI做其他的風格，例如門户風格，社交媒體風格等等。有了這個大致的頁面後，先不要急着讓AI去美化頁面，一定要把所有功能都做好了，最後再美化，因為AI在修BUG的過程中，或多或少都會調整一下界面的，等做完功能後再美化界面，這樣會比較合理。

然後講講這個頁面開發的難點，其實世界地圖這個是最難的，我需要地圖上的時間秒數能實時跳動，這個我問了很多次KIMI和DeepSeek都無法解決，最後使用Askmany的Gemini一下就解決了。所以我現在一般都推薦大家直接用Gemini來開發，能省心不少。你可以通過鼓獅工具箱的首頁這裏點擊進去註冊Askmany，能額外領取100元代金券，購買VIP時會便宜不少。第二個難點是老黃曆的財神方位，老黃曆上面的內容都是直接調用數據來顯示的，只有這個財神方位是通過什麼天干地支算出來的，這個我是用騰訊元寶版DeepSeek的推理內容上看到的。我打開這裏AI參考的文章，那篇文章完全就是講風水命理的，根本與功能開發無關，沒想到這個財神方位的功能問題，居然是AI看了風水命理的文章給解決了。當我看到這個AI的推理內容後，我開始重視AI推理的內容，幾乎每次修改重要的bug，我都會認真看一下推理內容，它能讓我知道，我的提問有沒有被AI準確理解。

所以每當發現AI一直沒有解決功能問題時，一定要認真看看AI一開始的推理內容，看看AI理解你的問題對不對，它們在尋找解決方案的方向對不對，畢竟這是直接影響AI能否準確解決問題的關鍵。如果發現AI在推理時，AI對你提出問題的理解是錯誤的，那你就需要修改提問的話術，並且提醒AI，你的理解是錯誤的，我要解決的問題應該是“這樣這樣的”。

最後，講講這個國家列表 https://tools.gushiio.com/time/china-time.html，這裏每個國家的時間頁面都是用html靜態頁面製作的，由於國家數量較多，我不知道哪些國家的時間頁面漏做了，如果我一個個的打開頁面鏈接來檢查，那效率太慢了，我就在網上找了一些能批量檢查死鏈的工具來使用，但普遍都只能檢查頁面裏10-30條的網址鏈接，我這種上百個的鏈接就需要額外付費，所以我讓AI開發了這個批量檢查網頁聯通性的工具 http://ai.gushiio.com/link_checker.php，這個工具在我以後的網站項目裏面都能幫上忙，能讓我發現我們的網站有哪些內容頁面丟失或者沒有做上去，因為這個對於做網站SEO優化來説很重要。如果你需要這個工具可以在視頻下留言，我提供源碼下載地址給你。使用也很簡單，你直接在寶塔界面把文件上傳上去立刻可以使用，如果你不知道這個寶塔界面是如何來的，可以看看這個視頻。

總結一下，本期視頻主要分享了3點：

第一，如何寫頁面描述提示詞能讓AI製作出對應的網頁出來

第二，一個網頁裏如果有多個功能點時應該優先開發複雜功能

第三，遇到一些AI較難解決的功能問題時，一定要認真看AI推理的內容，這能配合AI快速解決問題