新DeepSeek R1代碼能力直逼Claude 4！附生成任何優(yōu)質(zhì)網(wǎng)站的通用提示詞

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

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

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

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

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

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

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

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

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

1、個人簡歷網(wǎng)站

2、美術(shù)館網(wǎng)站

3、擁有文本、圖片、視頻、音頻內(nèi)容的社交網(wǎng)站

4、B站的后臺數(shù)據(jù)管理網(wǎng)站

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

6、番茄鐘+todo

提示詞如下：

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

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

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

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

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

4、我在提示詞中引入了工作流，這個工作流算是借鑒人類產(chǎn)品開發(fā)過程中的基礎(chǔ)實踐，并且讓AI扮演專家角色。之所以這么做，跟DeepSeek R1是推理模型有關(guān)，一方面他確實能夠在思考中實現(xiàn)這一推理過程，另一方面是讓AI彌補我們?nèi)祟愒诤芏嗉毠?jié)場景表述不清楚，不知道自己不知道什么的不足。

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

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

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

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

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

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