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

十年碼農(nóng)經(jīng)驗，都感覺當下的AI編程，強的離譜。

一、簡介

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

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

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

二、風格提示詞

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

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

從前端編程的專業(yè)角度，分析下面網(wǎng)站的布局，視覺，色調(diào)，分別做共性總結(jié)即可，每一點在100字以內(nèi)，不必逐個分析。
GitHub：https://github.com/
Apache：https://github.com/apache
HuggingFace：https://huggingface.co/
OpenAI：https://openai.com/

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

• 100字描述

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

• 200字描述

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

三、大模型生成

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

3.1 簡版提示詞

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

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

3.2 復雜版提示詞

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

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

3.3 提示詞重構

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

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

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

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

四、智能體生成

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

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

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

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

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

五、寫在最后

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