十年碼農經驗，都感覺當下的AI編程，強的離譜。

一、簡介

最近在開發產品的二期，就是做樓里App的網站版，但是會在整個過程中實踐AI的能力，面對的第一個問題就是：前端的代碼工程和網站模板。

帶著這個問題，直接開始各種AI工具的嘗試，半天的時間，就得到預期的效果了。

對于網站布局和結構，想要參考的布局和風格都有預期，所以直接開始調研，先用大模型做出網頁模板，整體看一下視覺效果，再去創建代碼工程優化細節。

二、風格提示詞

網站就包括首頁、AI工具、知識庫，這三個模塊，自己喜歡的風格是GitHub、OpenAI、HuggingFace這三款，此處使用GPT5模型。

這里的想法是，把喜歡的網站風格分析出來，加到自己的提示詞中，然后由大模型輸出網站模板。

從前端編程的專業角度，分析下面網站的布局，視覺，色調，分別做共性總結即可，每一點在100字以內，不必逐個分析。
GitHub：//github.com/
Apache：//github.com/apache
HuggingFace：//huggingface.co/
OpenAI：//openai.com/

分別生成粗略和細致的兩版描述，之前說過一個實踐經驗，提示詞太細致容易影響AI發揮，所以這里選擇兩個版本的提示詞。

• 100字描述

  • 布局：均采用響應式網格布局，首頁信息分區明確，頂部導航固定，內容層次清晰，兼顧桌面和移動端體驗。
  • 視覺：整體風格簡潔現代，強調內容可讀性，使用大塊留白和卡片式展示，交互元素反饋明顯，突出核心功能和入口。
  • 色調：主色偏中性或科技感藍灰色系，搭配少量強調色，整體視覺統一且不搶內容，傳達專業、可信賴和現代感。

• 200字描述

  • 布局： 網站采用響應式網格布局，首頁頂部固定導航欄便于快速訪問核心模塊，信息分區清晰，內容呈現層次分明。主要內容區域通過卡片式或分塊式布局展示功能或產品，強調核心入口和交互點，同時兼顧桌面和移動端的適配。整體結構簡潔，減少干擾元素，突出用戶關注的核心信息，確保頁面快速加載和易用性。
  • 視覺： 整體視覺風格簡約現代，強調內容可讀性和信息層次。廣泛使用留白和分隔線，增強視覺呼吸感。關鍵功能或交互元素采用明顯的按鈕或高亮樣式，提供即時反饋。圖標與圖像風格統一，文字排版清晰，視覺重點集中在核心操作和重要信息上，整體設計傳達科技感和專業感。
  • 色調： 主色調多為中性或冷色系，如藍灰色、白色和黑色，輔以少量強調色用于按鈕或鏈接，突出交互和重要信息。色彩搭配統一且低干擾，既保證內容可讀性，又傳達專業、可信賴和現代感。整體色彩策略注重視覺一致性，避免花哨和雜亂，營造高端、科技化的用戶體驗。

三、大模型生成

先基于幾款自己常用的大模型生成，主要是DeepSeek，KimiK2，智譜清言，在多輪嘗試的過程中，也有不錯的模板，但是離預期的結構和視覺，始終差點意思。

3.1 簡版提示詞

從幾款模型的輸出效果看，并沒有獲得比較滿意的網站模板，并且AI味賽博風格非常明顯

一、網站核心模塊
  ① 首頁-簡介 + 產品/功能概覽
  ② 廣場頁-基于大模型的實用工具集合（卡片網格，每卡片含 “使用/文檔/記錄” 三要素）
  ③ 知識庫-AI 實踐經驗文章集合，按分類可過濾，支持文章預覽
二、關鍵要求
布局：均采用響應式網格布局，首頁信息分區明確，頂部導航固定，內容層次清晰，兼顧桌面和移動端體驗。
視覺：整體風格簡潔現代，強調內容可讀性，使用大塊留白和卡片式展示，交互元素反饋明顯，突出核心功能和入口。
色調：主色偏中性或科技感藍灰色系，搭配少量強調色，整體視覺統一且不搶內容，傳達專業、可信賴和現代感。
現在，請基于上述要求生成單文件 HTML，并確保頁面在移動與桌面端都能良好展示。

3.2 復雜版提示詞

這一段提示詞，跑出一款還算可以的模板，整體的效果有點接近自己的預期，不過還是差點感覺。

你是資深產品設計顧問兼前端工程師。任務：基于要求生成單文件 HTML，并確保頁面在移動與桌面端都能良好展示。
一、網站核心模塊
  ① 首頁-簡介 + 產品/功能概覽
  ② 廣場頁-基于大模型的實用工具集合（卡片網格，每卡片含 “使用/文檔/記錄” 三要素）
  ③ 知識庫-AI 實踐經驗文章集合，按分類可過濾，支持文章預覽
二、開發要求
布局： 網站采用響應式網格布局，首頁頂部固定導航欄便于快速訪問核心模塊，信息分區清晰，內容呈現層次分明。主要內容區域通過卡片式或分塊式布局展示功能或產品，強調核心入口和交互點，同時兼顧桌面和移動端的適配。整體結構簡潔，減少干擾元素，突出用戶關注的核心信息，確保頁面快速加載和易用性。
視覺： 整體視覺風格簡約現代，強調內容可讀性和信息層次。廣泛使用留白和分隔線，增強視覺呼吸感。關鍵功能或交互元素采用明顯的按鈕或高亮樣式，提供即時反饋。圖標與圖像風格統一，文字排版清晰，視覺重點集中在核心操作和重要信息上，整體設計傳達科技感和專業感。
色調： 主色調多為中性或冷色系，如藍灰色、白色和黑色，輔以少量強調色用于按鈕或鏈接，突出交互和重要信息。色彩搭配統一且低干擾，既保證內容可讀性，又傳達專業、可信賴和現代感。整體色彩策略注重視覺一致性，避免花哨和雜亂，營造高端、科技化的用戶體驗。

3.3 提示詞重構

上面的內容普遍都是AI賽博風，考慮會不會是提示詞有問題，于是用專業的PromptPerfect工具，重新優化了一版提示詞。

需求是開發個人AI網站，網站核心布局如下：
1、首頁，簡介和產品的概覽；
2、廣場頁，基于大模型，開發實用的工具；
3、知識庫，記錄AI實踐過程中有價值的內容，形成分類文章。
分析下面網站的布局，視覺，色調，作為個人網站的開發要求。 
色調參考-GitHub：//github.com/ 
廣場頁參考-Apache：//github.com/apache 
知識庫參考-HuggingFace：//huggingface.co/ 
首頁參考-OpenAI：//openai.com/
基于上面需求，設計提示詞工程，可以直接用來生成代碼。

下面的提示詞結構，末尾的一句要求是自己加入的，可以直接預覽。從執行的效果看，AI味依舊明顯，但是賽博風格弱化了很多，有點類似常規的小破站了。

開發個人AI網站，包含以下頁面：
1. 首頁：
  a. 簡介和產品概覽
  b. 頂部導航欄，包括"首頁"、"廣場"、"知識庫"、"聯系我們"等鏈接
  c. 一個吸引人的主內容區域，包含網站簡介、產品功能圖示（可以使用圖標或圖片）
  d. 腳注區域，列出版權信息和社交媒體鏈接
2. 廣場頁：
  a. 展示各種實用工具，側重于AI模型應用
  b. 每個工具以卡片形式展示，包括標題、簡短描述和操作按鈕
  c. 頂部導航和側邊欄，用于快速訪問其他工具或分類
3. 知識庫頁：
  a. 記錄AI實踐過程中的內容，形成分類文章
  b. 分類列表和文章預覽，文章包括標題、簡短描述和鏈接到詳細內容頁
  c. 頂部導航和側邊欄，用于快速瀏覽文章分類和最近更新
4. 通用設計元素：
  a. 色調：基于白色為背景色，結合藍色、灰色、黑色等輔助色，以突出內容和功能
  b. 使用現代的響應式設計，確保在不同設備上的流暢體驗
  c. 清楚的排版結構，使用簡潔的字體和適當的空白區域
5. 示例代碼：
  a. HTML5結構化標簽如header、nav、section和footer等元素
  b. CSS用于布局和樣式，包括flexbox和grid實現響應式設計
  c. JavaScript用于交互功能，如下拉菜單、動態內容加載等
請生成上述個人AI網站的完整代碼，包括HTML、CSS和JavaScript部分，代碼放在單個HTML文件中，可以直接預覽。

四、智能體生成

上面幾組提示詞的效果，始終不符合自己的感覺，再次細化提示詞結構，指定每個頁面參考的網站地址，然后直接用智能體執行提示詞。

需求是開發個人AI網站，網站核心布局如下：
1、首頁，包含3個模塊，產品簡介，熱門應用，精選內容。
布局和視覺參考1：//github.com/
布局和視覺參考2：//openai.com/
2、廣場頁，基于大模型，開發實用的工具，會進行一級分類，使用網格布局，填充3個分類10條數據；
布局和視覺參考：//github.com/apache
3、知識庫，記錄AI實踐過程中有價值的內容，形成文章，會進行一級分類，使用網格布局，填充3個分類10條數據；
布局和視覺參考：//huggingface.co/
4、網站的頁腳自由發揮，結構整體協調即可。
基于Vue3框架，HTML、CSS、JS等編程語言，開發前端代碼工程即可，要求可以直接預覽。

不得不說復雜的任務，還得是智能體好用，Manus的第一版除了色調有點花，其它地方基本滿意，做了一版優化之后，就確定了網站的基礎模板。最后一版由其它智能體工具實現，布局和視覺也非常不錯。

Manus預覽地址：//aiproduct-94oax8.manus.space/knowledge

事實上在之前就寫過幾篇Manus的實踐案例，網站模板也可以首先使用Manus生成，之所以選擇最后嘗試，其中一個原因是想多嘗試各種大模型的能力，另一個關鍵原因：Manus貴有貴的道理。

五、寫在最后

下載Manus的代碼工程源文件，導入本地后可以正常運行，技術棧也符合提示詞的要求，但是AI味和一部分細節需要優化，下一篇內容再來詳細說這個方面。