新DeepSeek R1代碼能力直逼Claude 4！附生成任何優質網站的通用提示詞

昨晚，DeepSeek R1官方低調的在微信群里發布了「小版本」升級的說明。以DeepSeek的過往作風，大家都懂這個所謂的「小」不值得相信，實際有多少東西我們真得測了才知道。

昨晚到現在，我已經玩了DeepSeek-R1 8小時以上，發現他們在文本寫作方面的過度「量子力學」的問題已經得到了大幅度的修復，思維鏈推理能力也有不少改進。但...

真正重要，值得寫的是，他的代碼能力獲得了極大的提升，尤其是在前端審美方面，已經直逼最強編程模型Claude 4了。

我估計你可能也已經看到了不少類似的說法，但是，當你自己上手嘗試，想讓DeepSeek幫你寫個網頁的時候，似乎效果就差很多了？

這篇文章，是想達到三個目的：

1）向你展示現在DeepSeek R1的前端能力到什么水平了；

2）為你提供一個通用的寫前端html網頁的提示詞，讓你輕松生成視覺效果出色的任意網站；

3）不止授之以魚，我還會想辦法為你解釋清楚為什么提示詞要這么寫，優劣勢是什么，希望對你寫提示詞的邏輯也提供一些啟發。

來吧，我們先看幾個網站（這些網站都是用一段提示詞，一次性生成的）

1、個人簡歷網站

2、美術館網站

3、擁有文本、圖片、視頻、音頻內容的社交網站

4、B站的后臺數據管理網站

5、吃蘋果的貪吃蛇小游戲

6、番茄鐘+todo

提示詞如下：

請根據我的描述創建一個完整的HTML網頁。我想生成的網站是：{輸入你的網站要求，比如一個B站up主查看后臺數據的看板，包含不同類型的數據圖表}
## 工作流程
1. 請先作為具有20年經驗的，受喬布斯和張小龍夸贊的出色產品經理，穿透用戶的需求表述，洞悉他想到以及沒想到的可能需求，形成更完成充分的網站設計需求
2. 獲取需求后，請作為一個吹毛求疵的在Apple Inc.工作過20年的出色設計師，用你能所想象的最好的設計去實現產品經理的需求，輸出詳細的前端能輕松理解的需求文檔
3. 作為出色的前端工程師，充分思考產品經理和設計師所表達的需求，一步步完整實現需要的所有代碼。
### 前端HTML代碼要求：
1. 使用現代HTML5結構
2. 通過CDN引入Google Fonts字體
3. 圖標使用Font Awesome CDN
4. 響應式設計，適配移動設備
5. 當網站設計需要圖片時，可以使用以下可靠的圖片源：
   - Unsplash: https://images.unsplash.com/ (例如: https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800)
   - Picsum: https://picsum.photos/ (例如: https://picsum.photos/800/600)
6. 思考這個主體網站best practice所采用的色彩、布局方案，并加以借鑒與設計
7. 選擇和網站主題相匹配的字體
8. 使用語義化標簽（header/main/footer等）
9. 包含內聯CSS樣式，使網頁美觀

說說我的這份提示詞的邏輯：

1、首先，我們希望DeepSeek R1只生成一個html文件，否則在DeepSeek網站中無法預覽，所以需要在開頭明確提出要求；

2、影響界面美觀程度的細節包括是否有圖片、是否有好看的圖標、CSS樣式等，所以我對這幾個細節進行了說明，尤其是雖然AI不能生成圖片，但是可以引入開源圖片庫的鏈接而實現網頁上展示圖片的。不過這也存在一定的問題是，這部分連接生成可能會有后綴有錯導致圖片裂開，或者AI并不那么清楚具體是什么圖片，導致美術館網頁中的圖片和描述完全不符合的情況，這屬于很正常的情況；

3、布局和配色是影響界面視覺非常重要的因素，實際上你對這部分限定得越死、描述越仔細，你能得到的界面會更「美觀」更「可控」，但是一種類型的網站生成多了很容易審美疲勞，很無聊的，所以我在這部分保持了開放性，不做具體的限制，但是要求模型參考行業最佳實踐。

4、我在提示詞中引入了工作流，這個工作流算是借鑒人類產品開發過程中的基礎實踐，并且讓AI扮演專家角色。之所以這么做，跟DeepSeek R1是推理模型有關，一方面他確實能夠在思考中實現這一推理過程，另一方面是讓AI彌補我們人類在很多細節場景表述不清楚，不知道自己不知道什么的不足。

比如，下面就是我發出這份提示詞之后DeepSeek R1典型的思考過程：

我們按照步驟進行：
1. 產品經理視角：深入理解需求，挖掘潛在需求
用戶需求：一個美術館的圖片畫廊網站，展示美術館中的藏品。
潛在需求：
- 用戶可能希望了解每件藝術品的詳細信息（如作者、創作年份、簡介等）
- 用戶可能希望有分類瀏覽（如按藝術流派、年代、作者等分類）
- 用戶可能希望有搜索功能
- 用戶可能希望有響應式設計，在手機、平板、電腦上都能良好展示
- 用戶可能希望有燈箱效果（點擊圖片放大查看）
- 用戶可能希望網站有藝術感，設計優雅，符合美術館的調性
- 用戶可能希望有關于美術館的介紹和聯系信息
- 用戶可能希望有活動展覽信息
- 用戶可能希望有社交媒體鏈接
2. 設計師視角：形成詳細的設計文檔
- 設計風格：簡約、現代、突出藝術品本身
- 色彩方案：以白色和淺灰色為主，避免喧賓奪主，文字用深灰色或黑色，點綴色使用美術館標志色（假設為深藍色）
- 字體：標題使用襯線字體（如Playfair Display）以增加藝術感，正文使用無襯線字體（如Lato）保證可讀性
- 布局：
* 頭部：美術館logo和名稱，導航欄（首頁、展覽、藏品、關于、聯系）
* 主體：展示精選藏品，使用網格布局（瀑布流或等高等寬網格），每張圖片下方有簡短信息（標題和作者），點擊圖片可進入詳情頁或彈出燈箱
* 底部：美術館簡介、聯系方式、社交媒體圖標、版權信息
- 響應式：在移動設備上網格變為單列，導航欄變為漢堡菜單
- 交互：圖片懸停時有輕微放大效果，導航菜單高亮當前頁
3. 前端工程師視角：實現代碼
- 使用HTML5語義標簽
- 引入Google Fonts（Playfair Display和Lato）
- 引入Font Awesome圖標
- 使用CSS Grid或Flexbox實現響應式網格
- 使用內聯CSS（為了滿足要求，但實際項目建議外聯）
由于要求內聯CSS，我們將樣式放在

功能需求和設計需求都在代碼寫完之前由DeepSeek代勞完成了。

不過最后還需要說明的是，雖然DeepSeek R1在一次性生成簡單頁面的能力上直逼Claude4了，但是畢竟大多數項目不是這么簡單的，會需要AI模型有類agent的多步規劃能力，工具調用能力，以及更長的上下文去解決復雜問題。現在DeepSeek R1顯然具有了一個很好的開始，但是在真實世界更復雜的任務中表現怎樣樣，我們可以再測一測，以及對R2抱有一些期待。

希望今天提供的提示詞和提示詞設計思路能對你有所啟發。enjoy～

本文首發于花叔知識星球「AI編程：從入門到精通」，如果你對AI編程感興趣，歡迎加入我們，和1500+圈友一起感受創造的快樂～