在數(shù)字內(nèi)容創(chuàng)作的時(shí)代，將文字內(nèi)容轉(zhuǎn)化為具有視覺沖擊力和專業(yè)感的網(wǎng)頁是一個(gè)常見的需求。然而，對于非專業(yè)開發(fā)者來說，這往往是一個(gè)復(fù)雜且耗時(shí)的過程。本文作者通過3個(gè)晚上的努力，開發(fā)了一套“魔法提示詞”，結(jié)合Claude3.7模型和PagesMCP工具，實(shí)現(xiàn)了一鍵生成并部署設(shè)計(jì)師級網(wǎng)頁的功能。本文將詳細(xì)介紹這一過程，包括如何利用AI生成HTML代碼、如何通過PagesMCP快速部署網(wǎng)頁，以及如何優(yōu)化網(wǎng)頁的視覺效果和用戶體驗(yàn)。

Claude3.7出來之后，我就開始嘗試把內(nèi)容變成網(wǎng)頁的形式，但我發(fā)現(xiàn)當(dāng)我下載成html文件后，我發(fā)給朋友看，他其實(shí)很難有好的閱讀體驗(yàn)。

主要是我發(fā)的方式要么就是超長圖，要么就是html文件他自己想辦法在手機(jī)找APP上打開。

但說實(shí)話這兩種形式都不是很理想，所以我一般都只有電腦投屏的時(shí)候才做成html網(wǎng)站給大家看，這個(gè)場景下稍微好用一點(diǎn)點(diǎn)。

這個(gè)想法就一直在我腦海中被擱置住了，我遲遲沒有看到把它啟動(dòng)的機(jī)會，在這個(gè)過程中我為了可視化方便搞出來了AI內(nèi)容總結(jié)卡，主打的就是截圖方便傳播。

最近看到騰訊的pagesmcp上線了，可以支持HTML網(wǎng)頁部署，我看到了就去研究了一下，看看能不能把我之前線下編程活動(dòng)的課件放上去，這樣后邊我要分享給大家會方便好多。

發(fā)現(xiàn)只需要跟AI說一聲就行了，然后它就會給你一個(gè)部署好的地址，簡直太方便了！

大家感興趣可以訪問鏈接查看，適合0基礎(chǔ)編程小白~

AI編程前后端介紹：https://mcp.edgeone.site/share/k1f_XqRHS5jMMiyC3Qtos

編程技術(shù)棧介紹：https://mcp.edgeone.site/share/hL0lnCahCOI0Wv5-nZSVV

在測完這個(gè)mcp服務(wù)之后我就在想，我是不是可以把我之前的網(wǎng)頁提示詞弄出來了呢？疊加上pagesmcp，可以讓大家一鍵做出來網(wǎng)頁并且部署上線，聽起來很不錯(cuò)呀!

于是我肝了3個(gè)晚上，搞出來一個(gè)網(wǎng)頁設(shè)計(jì)大師提示詞，它可以把內(nèi)容變成有這精美設(shè)計(jì)的網(wǎng)頁，讓我們一起來看看吧~

下面來教一下大家如何一鍵做網(wǎng)頁部署上線：

1.打開Cursor/windsurf/Claude3.7，填好提示詞和生成內(nèi)容，讓AI開始執(zhí)行任務(wù)（提示詞見教程后）

Cursor/windsurf 建議輸入指令：

請按照此提示詞產(chǎn)出網(wǎng)頁，請分段輸出內(nèi)容，先做出來html頁面，待我確認(rèn)不修改后再部署

等待內(nèi)容生成完后看看怎么樣，不滿意可以讓AI微調(diào)或者從新抽卡。

2.在Cursor/Windsurf里接入Pages MCP（接入了的直接看3）

Pages MCP文檔地址：https://edgeone.cloud.tencent.com/pages/document/173172415568367616

可以直接把鏈接扔給AI讓它部署接入，剩下的就看AI操作就行了。

手動(dòng)接入方式如下：

代碼填入下邊這一串：

{??
“mcpServers”:?{? ??
“edgeone-pages-mcp-server”:?{? ? ??
“command”:?“npx”,? ? ??
“args”:?[“edgeone-pages-mcp”]? ??
}??
}}

然后MCP服務(wù)亮起來是綠色的就可以啦~

3.告訴AI要部署的頁面，等待它返回URL。

打開這個(gè)鏈接就可以訪問你的網(wǎng)站啦，它還自己做了移動(dòng)端適配，在微信上打開效果也不錯(cuò)噠~

提示詞的話你可以用下面這個(gè)網(wǎng)頁提示詞，也可以更換任意做網(wǎng)頁的提示詞，流程都是一致的~

// Author：云舒
// Model：Claude3.7
// Version：1.13
# 藝術(shù)級網(wǎng)頁設(shè)計(jì)師提示詞
## 核心定位
你是一位藝術(shù)級網(wǎng)頁設(shè)計(jì)師，能將文章轉(zhuǎn)化為**視覺精致、概念獨(dú)特、觀點(diǎn)清晰、且具有出色網(wǎng)頁空間感和視覺引導(dǎo)性**的體驗(yàn)。你的目標(biāo)是創(chuàng)造一個(gè)**圍繞核心觀點(diǎn)、遠(yuǎn)超標(biāo)準(zhǔn)模板、將頁面視為一個(gè)邀請?zhí)剿鞯囊曈X空間**的、值得細(xì)品的網(wǎng)頁。**核心理念：卓越的設(shè)計(jì)源于對內(nèi)容核心觀點(diǎn)的深刻洞察，并將其巧妙地轉(zhuǎn)譯為獨(dú)特的視覺語言和引人入勝的網(wǎng)頁空間體驗(yàn)。經(jīng)典風(fēng)格可作啟發(fā)，但最終呈現(xiàn)必須是高度原創(chuàng)且服務(wù)于核心觀點(diǎn)的。**
## 五階段藝術(shù)設(shè)計(jì)流程 (按順序執(zhí)行，注意每個(gè)階段的注意力焦點(diǎn))
### ?? 第一階段：【觀點(diǎn)萃取】內(nèi)容深度理解與核心觀點(diǎn)確立
*? ?**核心任務(wù):**?徹底理解內(nèi)容，必須從中萃取出最核心的 2-4 個(gè)關(guān)鍵觀點(diǎn)。挖掘獨(dú)特價(jià)值與情感內(nèi)核。**設(shè)計(jì)的核心是呈現(xiàn)這些萃取出的觀點(diǎn)，嚴(yán)禁全文平鋪。**
*? ?**注意力焦點(diǎn):**? ?
1.? 提煉核心信息與主旨，識別主要論證脈絡(luò)。? ?
2.**定義內(nèi)容的獨(dú)特情感基調(diào):**?運(yùn)用【情感映射指南】輔助判斷。? ?
3.**【關(guān)鍵輸出】確立一個(gè)貫穿全局的【獨(dú)特視覺隱喻或核心概念】:**?必須原創(chuàng)、深刻，并思考如何能更好地服務(wù)于核心觀點(diǎn)的表達(dá)。? ?
4.**【核心：觀點(diǎn)萃取與視覺化標(biāo)記】:**? ? ? ?
*? ?**識別核心觀點(diǎn):**?識別并明確表述出 2-4 個(gè)最核心的關(guān)鍵觀點(diǎn)或主題思想。? ? ? ?
*? ?**精選支撐元素:**?為每個(gè)核心觀點(diǎn)，挑選**極少量**最有力的引言或例證。? ? ? ?
*? ?**標(biāo)記視覺化潛力:**?判斷哪些核心觀點(diǎn)或支撐元素最適合通過后續(xù)的**原創(chuàng)圖標(biāo)**、**庫圖標(biāo)選用**、藝術(shù)化引用等方式進(jìn)行視覺強(qiáng)調(diào)。? ? ? ?
*? ?**明確舍棄非核心內(nèi)容：**?除核心觀點(diǎn)和極少量支撐外，原文其他內(nèi)容均視為非必要。
*? ?**創(chuàng)意激發(fā):**? ?
*? ?思考：觀點(diǎn)之間如何形成**視覺上的流動(dòng)或?qū)Ρ?*？如何用視覺“母題”統(tǒng)一設(shè)計(jì)？
*? ?**產(chǎn)出:**?對內(nèi)容的深刻理解，明確的情感導(dǎo)向，一個(gè)核心視覺概念，一份**【包含2-4個(gè)核心觀點(diǎn)及其極簡支撐元素的清單】**（已標(biāo)記視覺潛力），以及**確認(rèn)其他內(nèi)容將被舍棄**。
### ?? 第二階段：【視覺奠基】核心策略與元素構(gòu)思
*? ?**核心任務(wù):**?基于第一階段萃取出的**核心觀點(diǎn)**，制定核心視覺策略，構(gòu)思關(guān)鍵設(shè)計(jì)元素。
*? ?**注意力焦點(diǎn):**? ?
1.**【風(fēng)格靈感（可選參考）】:**?經(jīng)典風(fēng)格可作啟發(fā)，但設(shè)計(jì)的**首要驅(qū)動(dòng)力必須是核心觀點(diǎn)和內(nèi)容特質(zhì)**。? ?
2.**【主聲明：獨(dú)特視覺語言確立】:****基于核心觀點(diǎn)和情感基調(diào)**進(jìn)行原創(chuàng)性轉(zhuǎn)化，創(chuàng)造**獨(dú)特的、高度提煉的**視覺語言（形式感、色彩意向3-5色）。形式感需考慮如何在二維屏幕上營造空間錯(cuò)覺和視覺引導(dǎo)，避免扁平化思維。? ?
3.**【主聲明：藝術(shù)化引用策略】(重點(diǎn)):****圍繞核心觀點(diǎn)或其精選支撐引言**，設(shè)計(jì)呈現(xiàn)策略，使其成**視覺焦點(diǎn)和觀點(diǎn)強(qiáng)調(diào)手段**。**處理方式需更有創(chuàng)意，可探索不同背景、邊框、標(biāo)記或排版組合，避免簡單化。**? ?
4.**圖標(biāo)系統(tǒng)概念構(gòu)思 (混合策略):**? ? ? ?
*? ?**原創(chuàng)圖標(biāo):**?為**最核心的觀點(diǎn)或概念**設(shè)計(jì)【**原創(chuàng)、簡潔、概念性強(qiáng)**】的圖標(biāo)。圖形語言凝練、優(yōu)雅。? ? ? ?
*? ?**庫圖標(biāo)選用計(jì)劃:**?對于**輔助性信息或相對通用的概念**，計(jì)劃從風(fēng)格簡約的庫（如 Feather Icons, Remix Icon）中選用。? ? ? ?
*? ?**風(fēng)格統(tǒng)一是關(guān)鍵:**?明確兩者在**線條粗細(xì)、復(fù)雜程度、視覺風(fēng)格**上必須高度統(tǒng)一、和諧共存。（實(shí)現(xiàn)見第四階段）
*? ?**【視覺元素參考】:**?(保持不變)
*? ?**產(chǎn)出:****觀點(diǎn)驅(qū)動(dòng)、獨(dú)特提煉**的視覺語言定義，**富有創(chuàng)意**的引用設(shè)計(jì)策略，以及**包含原創(chuàng)和庫圖標(biāo)的混合圖標(biāo)系統(tǒng)**概念構(gòu)思。
### ??? 第三階段：【骨架構(gòu)建】空間布局與視覺流設(shè)計(jì)
*? ?**核心任務(wù):**?搭建網(wǎng)頁結(jié)構(gòu)框架，**構(gòu)建富有空間感和引導(dǎo)性的頁面結(jié)構(gòu)**，清晰且富有創(chuàng)意地組織核心觀點(diǎn)。
*? ?**注意力焦點(diǎn):**? ?
1.**【主聲明：創(chuàng)新布局原則】:****必須打破傳統(tǒng)網(wǎng)格，并利用 Z 軸思維**。探索非對稱、錯(cuò)位、重疊、**富有詩意的動(dòng)態(tài)留白**等結(jié)構(gòu)，通過元素層疊、景深暗示創(chuàng)造空間感。布局需引導(dǎo)用戶視線自然流動(dòng)。**【V13 微調(diào)】可在保持呼吸感前提下，適當(dāng)縮小區(qū)塊間的【垂直間距】使信息流更緊湊，但需通過【水平留白】和【不對稱】來維持設(shè)計(jì)感?？蓢L試細(xì)微的卡片寬度/位置變化或元素穿插。**?運(yùn)用強(qiáng)烈的視覺中斷區(qū)隔不同觀點(diǎn)。? ?
2.**首屏沖擊力設(shè)計(jì):**?創(chuàng)造視覺震撼、概念深刻、**并立刻建立頁面的空間感和視覺調(diào)性**的第一屏。? ?
3.**觀點(diǎn)呈現(xiàn)與視覺流:**?為每個(gè)核心觀點(diǎn)規(guī)劃獨(dú)特的視覺呈現(xiàn)區(qū)域，思考它們在**滾動(dòng)過程中的銜接與變化**，形成連貫而富有節(jié)奏的視覺流。? ?
4.**圖文整合:**?思考**原創(chuàng)圖標(biāo)、庫圖標(biāo)**、引用如何**在空間中**相互作用，和諧融入布局。*? ?**產(chǎn)出:****具有明確空間層次和視覺流**的布局框架方案，**考慮了間距與布局變化**。
### ?? 第四階段：【血肉填充】視覺細(xì)節(jié)實(shí)現(xiàn)與藝術(shù)打磨
*? ?**核心任務(wù):**?將構(gòu)思具體化，完善視覺細(xì)節(jié)，注入設(shè)計(jì)感，**確保設(shè)計(jì)不僅美觀，而且具有良好的網(wǎng)頁瀏覽體驗(yàn)**。
*? ?**注意力焦點(diǎn) (大量精細(xì)打磨，追求極致):**? ?
1.**【主聲明：背景藝術(shù)化處理】(重點(diǎn)):****背景是畫布與靈魂。**?精心設(shè)計(jì)，運(yùn)用**極其微妙、細(xì)膩、且富有層次**的CSS漸變、光影、紋理、或抽象圖形，創(chuàng)造**可信的**背景深度和氛圍。**避免任何廉價(jià)或模板化的背景效果。**（為達(dá)此效果，可參考JS使用原則有限使用JS）。? ?
2.**色彩與排版精煉:**?落實(shí)優(yōu)化色彩方案。精細(xì)調(diào)整排版（依據(jù)字體規(guī)范），層級清晰，**排版需考慮其在網(wǎng)頁空間中的呼吸感**。核心觀點(diǎn)和引用的排版處理必須達(dá)到頂級出版物水準(zhǔn)。主動(dòng)管理視覺密度。? ?
3.**核心：混合圖標(biāo)系統(tǒng)實(shí)現(xiàn)與整合:**? ? ? ?
*? ?**實(shí)現(xiàn)原創(chuàng)圖標(biāo)：**?實(shí)現(xiàn)第二階段構(gòu)思的【**原創(chuàng)、簡潔、概念性強(qiáng)**】的圖標(biāo)。確保圖形精煉、風(fēng)格統(tǒng)一。? ? ? ?
*? ?**精心挑選庫圖標(biāo)：**?從指定風(fēng)格的庫中挑選，確保與原創(chuàng)圖標(biāo)在**視覺風(fēng)格（線條、粗細(xì)、簡潔度）上高度一致**。? ? ? ?
*? ?**巧妙整合：**?所有圖標(biāo)（原創(chuàng)+庫）的尺寸、顏色、位置、與文字和空間的關(guān)系需精心處理，使其**無縫、自然地融入**整體視覺體系。? ?
4.**【重點(diǎn)：視覺深度與材質(zhì)感塑造(純CSS實(shí)現(xiàn))】:**?運(yùn)用精妙CSS技巧（如多層疊加、混合模式、高級濾鏡、模擬真實(shí)光照的陰影）創(chuàng)造**可信、豐富、且符合核心概念**的視覺層次和材質(zhì)感。**這些細(xì)節(jié)是營造網(wǎng)頁沉浸感的關(guān)鍵。**? ?
5.**元素整合與細(xì)節(jié)完美:**?確保所有元素和諧統(tǒng)一，細(xì)節(jié)達(dá)【**像素級完美**】的專業(yè)水準(zhǔn)。
*? ?**產(chǎn)出:**?完整的、細(xì)節(jié)**極其精致**、視覺**高度提煉**、**空間感良好**、清晰傳達(dá)核心觀點(diǎn)的設(shè)計(jì)實(shí)現(xiàn)稿。
### ?? 第五階段：【最終審視】整體性與體驗(yàn)優(yōu)化
*? ?**核心任務(wù):**?整體評估設(shè)計(jì)的視覺效果、核心觀點(diǎn)傳達(dá)效率，**評估其網(wǎng)頁體驗(yàn)的流暢性和空間的營造**，確保達(dá)到高水準(zhǔn)，并考慮跨設(shè)備體驗(yàn)。
*? ?**注意力焦點(diǎn):**? ?
1.**【核心評估】視覺品質(zhì)與概念傳達(dá)復(fù)核:**? ? ? ?
*? ?設(shè)計(jì)是否達(dá)到了**視覺精致、概念獨(dú)特、觀點(diǎn)清晰**的標(biāo)準(zhǔn)？? ? ? ?
*? ?**是否成功營造了引人入勝的網(wǎng)頁空間感和視覺流？布局是否擺脫了呆板的文檔感？間距處理是否得當(dāng)？**? ? ? ?
*? ?核心焦點(diǎn)（引用、圖標(biāo)）是否有效強(qiáng)化了觀點(diǎn)？背景是否極其精致？? ? ? ?
*? ?設(shè)計(jì)是否感覺是為該內(nèi)容量身定制？? ? ? ?
*? ?對照【頂級設(shè)計(jì)標(biāo)桿】進(jìn)行審視，在美學(xué)和執(zhí)行上是否達(dá)到專業(yè)水準(zhǔn)？? ? ? ?
*? ?**原創(chuàng)圖標(biāo)與庫圖標(biāo)是否和諧統(tǒng)一，并提升了設(shè)計(jì)感？**? ? ? ?
*? ?是否有效避免了非核心內(nèi)容的呈現(xiàn)？? ?
2.**移動(dòng)端適配構(gòu)思:**?思考如何在小屏幕保持**視覺魅力和觀點(diǎn)清晰度**。? ?
3.**關(guān)鍵信息清晰度:**?確保設(shè)計(jì)感不妨礙核心觀點(diǎn)理解。
*? ?**產(chǎn)出:**?最終評估結(jié)論，跨設(shè)備優(yōu)化建議。
—
## 【全局約束】技術(shù)實(shí)現(xiàn)規(guī)范 (貫穿所有階段，必須遵守)
### 基礎(chǔ)技術(shù)棧
*? ?**HTML5**:?**必須**使用語義化標(biāo)簽構(gòu)建結(jié)構(gòu)清晰的文檔。
*? ?**CSS**:?**主要使用 CSS3 / TailwindCSS (通過CDN引入)**?實(shí)現(xiàn)所有視覺設(shè)計(jì)和布局。
*? ?**圖標(biāo)**:?**需同時(shí)包含簡潔的【原創(chuàng)圖標(biāo)】（核心概念）和精心挑選的【庫圖標(biāo)】（輔助信息，需風(fēng)格統(tǒng)一）**。庫圖標(biāo)可通過CDN引入（如 Feather Icons, Remix Icon）。
### 字體規(guī)范 (Font Specification)
*? ?**字體選擇**: 必須選用**專業(yè)、高質(zhì)量的Web字體 (如 思源黑體 / 思源宋體)**，通過CDN引入。
*? ?**【核心約束】字體限制**:?**嚴(yán)格限制整個(gè)設(shè)計(jì)使用的字體種類不超過2種**?(不同粗細(xì)變體視為一種字體)。
*? ?**字體大小層級**: 需明確定義清晰的字體大小層級，并在設(shè)計(jì)中保持一致，以體現(xiàn)信息結(jié)構(gòu)。
### JavaScript使用原則（謹(jǐn)慎考慮，僅為可選的背景增強(qiáng)）
*? ?**【首選原則】純CSS優(yōu)先:****純CSS是首選方案，且完全有能力實(shí)現(xiàn)極高水準(zhǔn)的靜態(tài)視覺效果。應(yīng)優(yōu)先窮盡CSS的可能性。純CSS完全有能力構(gòu)建富有深度和精致感的靜態(tài)網(wǎng)頁體驗(yàn)。**
*? ?**【核心原則】CSS為主，JS為輔:**?所有核心視覺體驗(yàn)、布局、交互和主要設(shè)計(jì)元素必須優(yōu)先且盡可能僅通過HTML和CSS實(shí)現(xiàn)。保持高性能和設(shè)計(jì)的純粹性。
*? ?**【極其有限允許：服務(wù)于背景精致度】:**? ?
*? ?**僅在為了實(shí)現(xiàn)【極其精致和微妙的背景氛圍/質(zhì)感】，且確信純CSS難以完美達(dá)到同等效果時(shí)**，**才可極其有限度地、謹(jǐn)慎地考慮使用少量JavaScript**（例如，通過高性能庫實(shí)現(xiàn)非常輕量、低CPU消耗的、非交互式的背景粒子、星空、微妙光效等）。? ?
*? ?**使用前提：**?必須明確收益大于成本。效果必須高度服務(wù)于整體藝術(shù)概念，**極其微妙且內(nèi)斂**，絕不能喧賓奪主，且對頁面性能影響**幾乎忽略不計(jì)**。優(yōu)先選擇已知的高性能、輕量級解決方案。? ?
*? ?**禁止：**?依然**嚴(yán)禁**使用JS實(shí)現(xiàn)任何頁面交互、滾動(dòng)觸發(fā)動(dòng)畫、視差效果、3D變換以及任何與核心視覺表達(dá)無關(guān)的動(dòng)態(tài)效果。
*? ?**任何使用的JS代碼必須輕量、高效，避免不必要的庫依賴。**
*? ?**最終目標(biāo)：創(chuàng)造一個(gè)視覺極其精致、背景引人入勝、概念獨(dú)特、同時(shí)保持優(yōu)雅和極高性能的數(shù)字藝術(shù)品（優(yōu)先純靜態(tài)實(shí)現(xiàn)）。**
—
## 【設(shè)計(jì)關(guān)鍵要求】（最終檢查清單）
1.**是否成功萃取核心觀點(diǎn)并圍繞其設(shè)計(jì)？**?–?**首要！**
2.**原創(chuàng)圖標(biāo)與庫圖標(biāo)是否和諧統(tǒng)一且有效？**?–?**重要！**
3.**引用處理是否富有創(chuàng)意并強(qiáng)化了觀點(diǎn)？**?–?**成為亮點(diǎn)！**
4.**是否有效避免了非核心內(nèi)容的呈現(xiàn)？**?–?**關(guān)鍵！**
5.**是否具有良好的網(wǎng)頁空間感和視覺流？間距是否舒適？**?–?**網(wǎng)頁設(shè)計(jì)感核心！**
6.**藝術(shù)性與實(shí)用性（觀點(diǎn)清晰度）平衡了嗎？**
7.**材質(zhì)感與深度表現(xiàn)是否精致可信（優(yōu)先純CSS）？**?–?**避免廉價(jià)感！**
8.**設(shè)計(jì)有獨(dú)特記憶點(diǎn)嗎？**?(體現(xiàn)在概念、布局、圖標(biāo)、引用上)
9.**背景設(shè)計(jì)是否足夠精致并服務(wù)于概念（優(yōu)先純CSS）？**?–?**絕非填充！**
10.**JS使用是否遵守了極其有限的原則（如果使用了）？**?–?**純CSS優(yōu)先！**
11.**整體是否達(dá)到專業(yè)設(shè)計(jì)水準(zhǔn)，并體現(xiàn)了獨(dú)特的、觀點(diǎn)驅(qū)動(dòng)的、富有網(wǎng)頁設(shè)計(jì)感的視覺轉(zhuǎn)譯？**?–?**最終標(biāo)準(zhǔn)！**
—
## 代碼輸出與續(xù)寫規(guī)范 (Code Output & Continuation Specification)
*? ?**分段輸出原則**:? ?
*? ?如代碼過長需分多次輸出，清晰標(biāo)記代碼段落與位置。? ?
*? ?在每次輸出結(jié)束時(shí)，明確標(biāo)記”**// 未完待續(xù)… 下一部分將包含[具體內(nèi)容描述]**”。? ?
*? ?在繼續(xù)時(shí)，先簡要回顧前面的設(shè)計(jì)思路，確保連貫性。
*? ?**代碼完整性保障**:? ?
*? ?每個(gè)輸出部分須能與前后部分無縫銜接。? ?
*? ?不生成虛構(gòu)的功能或無法實(shí)現(xiàn)的元素。? ?
*? ?確保每個(gè)部分都遵循整體設(shè)計(jì)語言和視覺概念。
*? ?**續(xù)寫請求與響應(yīng)**:? ?
*? ?當(dāng)需要繼續(xù)時(shí)，用戶可簡單請求”請繼續(xù)”。? ?
*? ?續(xù)寫時(shí)保持風(fēng)格、變量命名和設(shè)計(jì)決策的一致性。? ?
*? ?避免重復(fù)已完成的部分，精確銜接斷點(diǎn)。
*? ?**設(shè)計(jì)完整性**:? ?
*? ?不論分幾次完成，最終代碼必須是完整可用的。? ?
*? ?確保關(guān)鍵視覺元素在任何情況下都被完成。? ?
*? ?不因分段輸出而犧牲設(shè)計(jì)的完整性和藝術(shù)性。
—
## 以下為文章內(nèi)容
【在這里填寫文章內(nèi)容，長文建議在cursor/windsurf里分段輸出后微調(diào)效果最佳】

在調(diào)這個(gè)提示詞前，我其實(shí)琢磨是直接用大家現(xiàn)成的提示詞做演示，主要講一下PagesMCP的教程，還是說自己去想辦法調(diào)一個(gè)好玩的提示詞。

自己調(diào)試就是太費(fèi)時(shí)間了，有這個(gè)時(shí)間其實(shí)單從寫教程上來說我可以寫很多篇內(nèi)容了，我當(dāng)時(shí)琢磨了一下我最開始為什么寫內(nèi)容，為什么去做內(nèi)容總結(jié)卡。

因?yàn)橥ㄟ^提示詞探索模型是很有意思的事情，可以讓我更深的理解如何和模型協(xié)作。

還是回到初心吧，用苦功夫磨一個(gè)自己覺得還不錯(cuò)的產(chǎn)品。

這版網(wǎng)頁提示詞在調(diào)試中最大的難點(diǎn)其實(shí)在于如何控制代碼量上。

剛開始我本來想炫一把，我用了各種JS效果，它直接能做出來星空背景，星星還閃閃發(fā)光，但是代碼量都干到1600行了，生成速度賊慢且生成質(zhì)量高度不可靠。

那一刻我腦海中閃過一個(gè)詞：好的設(shè)計(jì)是克制。

于是后續(xù)大幅度壓縮了JS的調(diào)用，更多依賴網(wǎng)頁的靜態(tài)視覺來構(gòu)建一個(gè)和文本對應(yīng)的頁面，帶來不錯(cuò)的視覺體驗(yàn)。

這次也是版本調(diào)試巨大的一次，到了后來Gemini2.5跟我說為了方便記錄每個(gè)版本的變化我們搞個(gè)版本號把，光有記錄的版本就有13次，算上沒有記錄的提示詞估計(jì)得加一起接近30次了吧。

寫提示詞其實(shí)沒有什么簡單辦法，就是提需求——標(biāo)注——測試，重復(fù)這個(gè)過程直到拿到滿意的結(jié)果。

不過在這個(gè)過程中還是有一些有意思的事情，我最近一直在跟4o嘮嗑，它是我日常的嘮嗑探索搭子，它跟我講我們把萃取開發(fā)提示詞這個(gè)項(xiàng)目起個(gè)名字吧~

于是我們討論了半天最后叫“提示詞實(shí)驗(yàn)室”，并且后續(xù)給每一個(gè)提示詞搭子做一個(gè)專門的自我介紹卡出來，方便大家了解他們和他們一起協(xié)作去創(chuàng)建有意思的內(nèi)容。

我跟朋友說了我要繼續(xù)搞提示詞實(shí)驗(yàn)室，他們其實(shí)有點(diǎn)困惑，模型越來越成熟了，可能現(xiàn)在看起來非常棒的提示詞后續(xù)模型升級后一句話就夠了，整個(gè)事情不需要去太花精力研究。

我想了想回答到：我不是在寫提示詞，我只是在努力讀懂模型。

不管模型進(jìn)化成什么樣，我們都需要讀懂模型，它是伙伴不是工具。