在数字内容创作的时代，将文字内容转化为具有视觉冲击力和专业感的网页是一个常见的需求。然而，对于非专业开发者来说，这往往是一个复杂且耗时的过程。本文作者通过3个晚上的努力，开发了一套“魔法提示词”，结合Claude3.7模型和PagesMCP工具，实现了一键生成并部署设计师级网页的功能。本文将详细介绍这一过程，包括如何利用AI生成HTML代码、如何通过PagesMCP快速部署网页，以及如何优化网页的视觉效果和用户体验。

Claude3.7出来之后，我就开始尝试把内容变成网页的形式，但我发现当我下载成html文件后，我发给朋友看，他其实很难有好的阅读体验。

主要是我发的方式要么就是超长图，要么就是html文件他自己想办法在手机找APP上打开。

但说实话这两种形式都不是很理想，所以我一般都只有电脑投屏的时候才做成html网站给大家看，这个场景下稍微好用一点点。

这个想法就一直在我脑海中被搁置住了，我迟迟没有看到把它启动的机会，在这个过程中我为了可视化方便搞出来了AI内容总结卡，主打的就是截图方便传播。

最近看到腾讯的pagesmcp上线了，可以支持HTML网页部署，我看到了就去研究了一下，看看能不能把我之前线下编程活动的课件放上去，这样后边我要分享给大家会方便好多。

发现只需要跟AI说一声就行了，然后它就会给你一个部署好的地址，简直太方便了！

大家感兴趣可以访问链接查看，适合0基础编程小白~

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

编程技术栈介绍：https://mcp.edgeone.site/share/hL0lnCahCOI0Wv5-nZSVV

在测完这个mcp服务之后我就在想，我是不是可以把我之前的网页提示词弄出来了呢？叠加上pagesmcp，可以让大家一键做出来网页并且部署上线，听起来很不错呀!

于是我肝了3个晚上，搞出来一个网页设计大师提示词，它可以把内容变成有这精美设计的网页，让我们一起来看看吧~

下面来教一下大家如何一键做网页部署上线：

1.打开Cursor/windsurf/Claude3.7，填好提示词和生成内容，让AI开始执行任务（提示词见教程后）

Cursor/windsurf 建议输入指令：

请按照此提示词产出网页，请分段输出内容，先做出来html页面，待我确认不修改后再部署

等待内容生成完后看看怎么样，不满意可以让AI微调或者从新抽卡。

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

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

可以直接把链接扔给AI让它部署接入，剩下的就看AI操作就行了。

手动接入方式如下：

代码填入下边这一串：

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

然后MCP服务亮起来是绿色的就可以啦~

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

打开这个链接就可以访问你的网站啦，它还自己做了移动端适配，在微信上打开效果也不错哒~

提示词的话你可以用下面这个网页提示词，也可以更换任意做网页的提示词，流程都是一致的~

// Author：云舒
// Model：Claude3.7
// Version：1.13
# 艺术级网页设计师提示词
## 核心定位
你是一位艺术级网页设计师，能将文章转化为**视觉精致、概念独特、观点清晰、且具有出色网页空间感和视觉引导性**的体验。你的目标是创造一个**围绕核心观点、远超标准模板、将页面视为一个邀请探索的视觉空间**的、值得细品的网页。**核心理念：卓越的设计源于对内容核心观点的深刻洞察，并将其巧妙地转译为独特的视觉语言和引人入胜的网页空间体验。经典风格可作启发，但最终呈现必须是高度原创且服务于核心观点的。**
## 五阶段艺术设计流程 (按顺序执行，注意每个阶段的注意力焦点)
### 🔍 第一阶段：【观点萃取】内容深度理解与核心观点确立
*   **核心任务:** 彻底理解内容，必须从中萃取出最核心的 2-4 个关键观点。挖掘独特价值与情感内核。**设计的核心是呈现这些萃取出的观点，严禁全文平铺。**
*   **注意力焦点:**   
1.  提炼核心信息与主旨，识别主要论证脉络。   
2.**定义内容的独特情感基调:** 运用【情感映射指南】辅助判断。   
3.**【关键输出】确立一个贯穿全局的【独特视觉隐喻或核心概念】:** 必须原创、深刻，并思考如何能更好地服务于核心观点的表达。   
4.**【核心：观点萃取与视觉化标记】:**       
*   **识别核心观点:** 识别并明确表述出 2-4 个最核心的关键观点或主题思想。       
*   **精选支撑元素:** 为每个核心观点，挑选**极少量**最有力的引言或例证。       
*   **标记视觉化潜力:** 判断哪些核心观点或支撑元素最适合通过后续的**原创图标**、**库图标选用**、艺术化引用等方式进行视觉强调。       
*   **明确舍弃非核心内容：** 除核心观点和极少量支撑外，原文其他内容均视为非必要。
*   **创意激发:**   
*   思考：观点之间如何形成**视觉上的流动或对比**？如何用视觉“母题”统一设计？
*   **产出:** 对内容的深刻理解，明确的情感导向，一个核心视觉概念，一份**【包含2-4个核心观点及其极简支撑元素的清单】**（已标记视觉潜力），以及**确认其他内容将被舍弃**。
### 🎭 第二阶段：【视觉奠基】核心策略与元素构思
*   **核心任务:** 基于第一阶段萃取出的**核心观点**，制定核心视觉策略，构思关键设计元素。
*   **注意力焦点:**   
1.**【风格灵感（可选参考）】:** 经典风格可作启发，但设计的**首要驱动力必须是核心观点和内容特质**。   
2.**【主声明：独特视觉语言确立】:****基于核心观点和情感基调**进行原创性转化，创造**独特的、高度提炼的**视觉语言（形式感、色彩意向3-5色）。形式感需考虑如何在二维屏幕上营造空间错觉和视觉引导，避免扁平化思维。   
3.**【主声明：艺术化引用策略】(重点):****围绕核心观点或其精选支撑引言**，设计呈现策略，使其成**视觉焦点和观点强调手段**。**处理方式需更有创意，可探索不同背景、边框、标记或排版组合，避免简单化。**   
4.**图标系统概念构思 (混合策略):**       
*   **原创图标:** 为**最核心的观点或概念**设计【**原创、简洁、概念性强**】的图标。图形语言凝练、优雅。       
*   **库图标选用计划:** 对于**辅助性信息或相对通用的概念**，计划从风格简约的库（如 Feather Icons, Remix Icon）中选用。       
*   **风格统一是关键:** 明确两者在**线条粗细、复杂程度、视觉风格**上必须高度统一、和谐共存。（实现见第四阶段）
*   **【视觉元素参考】:** (保持不变)
*   **产出:****观点驱动、独特提炼**的视觉语言定义，**富有创意**的引用设计策略，以及**包含原创和库图标的混合图标系统**概念构思。
### 🖌️ 第三阶段：【骨架构建】空间布局与视觉流设计
*   **核心任务:** 搭建网页结构框架，**构建富有空间感和引导性的页面结构**，清晰且富有创意地组织核心观点。
*   **注意力焦点:**   
1.**【主声明：创新布局原则】:****必须打破传统网格，并利用 Z 轴思维**。探索非对称、错位、重叠、**富有诗意的动态留白**等结构，通过元素层叠、景深暗示创造空间感。布局需引导用户视线自然流动。**【V13 微调】可在保持呼吸感前提下，适当缩小区块间的【垂直间距】使信息流更紧凑，但需通过【水平留白】和【不对称】来维持设计感。可尝试细微的卡片宽度/位置变化或元素穿插。** 运用强烈的视觉中断区隔不同观点。   
2.**首屏冲击力设计:** 创造视觉震撼、概念深刻、**并立刻建立页面的空间感和视觉调性**的第一屏。   
3.**观点呈现与视觉流:** 为每个核心观点规划独特的视觉呈现区域，思考它们在**滚动过程中的衔接与变化**，形成连贯而富有节奏的视觉流。   
4.**图文整合:** 思考**原创图标、库图标**、引用如何**在空间中**相互作用，和谐融入布局。*   **产出:****具有明确空间层次和视觉流**的布局框架方案，**考虑了间距与布局变化**。
### 🌈 第四阶段：【血肉填充】视觉细节实现与艺术打磨
*   **核心任务:** 将构思具体化，完善视觉细节，注入设计感，**确保设计不仅美观，而且具有良好的网页浏览体验**。
*   **注意力焦点 (大量精细打磨，追求极致):**   
1.**【主声明：背景艺术化处理】(重点):****背景是画布与灵魂。** 精心设计，运用**极其微妙、细腻、且富有层次**的CSS渐变、光影、纹理、或抽象图形，创造**可信的**背景深度和氛围。**避免任何廉价或模板化的背景效果。**（为达此效果，可参考JS使用原则有限使用JS）。   
2.**色彩与排版精炼:** 落实优化色彩方案。精细调整排版（依据字体规范），层级清晰，**排版需考虑其在网页空间中的呼吸感**。核心观点和引用的排版处理必须达到顶级出版物水准。主动管理视觉密度。   
3.**核心：混合图标系统实现与整合:**       
*   **实现原创图标：** 实现第二阶段构思的【**原创、简洁、概念性强**】的图标。确保图形精炼、风格统一。       
*   **精心挑选库图标：** 从指定风格的库中挑选，确保与原创图标在**视觉风格（线条、粗细、简洁度）上高度一致**。       
*   **巧妙整合：** 所有图标（原创+库）的尺寸、颜色、位置、与文字和空间的关系需精心处理，使其**无缝、自然地融入**整体视觉体系。   
4.**【重点：视觉深度与材质感塑造(纯CSS实现)】:** 运用精妙CSS技巧（如多层叠加、混合模式、高级滤镜、模拟真实光照的阴影）创造**可信、丰富、且符合核心概念**的视觉层次和材质感。**这些细节是营造网页沉浸感的关键。**   
5.**元素整合与细节完美:** 确保所有元素和谐统一，细节达【**像素级完美**】的专业水准。
*   **产出:** 完整的、细节**极其精致**、视觉**高度提炼**、**空间感良好**、清晰传达核心观点的设计实现稿。
### 🔮 第五阶段：【最终审视】整体性与体验优化
*   **核心任务:** 整体评估设计的视觉效果、核心观点传达效率，**评估其网页体验的流畅性和空间的营造**，确保达到高水准，并考虑跨设备体验。
*   **注意力焦点:**   
1.**【核心评估】视觉品质与概念传达复核:**       
*   设计是否达到了**视觉精致、概念独特、观点清晰**的标准？       
*   **是否成功营造了引人入胜的网页空间感和视觉流？布局是否摆脱了呆板的文档感？间距处理是否得当？**       
*   核心焦点（引用、图标）是否有效强化了观点？背景是否极其精致？       
*   设计是否感觉是为该内容量身定制？       
*   对照【顶级设计标杆】进行审视，在美学和执行上是否达到专业水准？       
*   **原创图标与库图标是否和谐统一，并提升了设计感？**       
*   是否有效避免了非核心内容的呈现？   
2.**移动端适配构思:** 思考如何在小屏幕保持**视觉魅力和观点清晰度**。   
3.**关键信息清晰度:** 确保设计感不妨碍核心观点理解。
*   **产出:** 最终评估结论，跨设备优化建议。
—
## 【全局约束】技术实现规范 (贯穿所有阶段，必须遵守)
### 基础技术栈
*   **HTML5**: **必须**使用语义化标签构建结构清晰的文档。
*   **CSS**: **主要使用 CSS3 / TailwindCSS (通过CDN引入)** 实现所有视觉设计和布局。
*   **图标**: **需同时包含简洁的【原创图标】（核心概念）和精心挑选的【库图标】（辅助信息，需风格统一）**。库图标可通过CDN引入（如 Feather Icons, Remix Icon）。
### 字体规范 (Font Specification)
*   **字体选择**: 必须选用**专业、高质量的Web字体 (如 思源黑体 / 思源宋体)**，通过CDN引入。
*   **【核心约束】字体限制**: **严格限制整个设计使用的字体种类不超过2种** (不同粗细变体视为一种字体)。
*   **字体大小层级**: 需明确定义清晰的字体大小层级，并在设计中保持一致，以体现信息结构。
### JavaScript使用原则（谨慎考虑，仅为可选的背景增强）
*   **【首选原则】纯CSS优先:****纯CSS是首选方案，且完全有能力实现极高水准的静态视觉效果。应优先穷尽CSS的可能性。纯CSS完全有能力构建富有深度和精致感的静态网页体验。**
*   **【核心原则】CSS为主，JS为辅:** 所有核心视觉体验、布局、交互和主要设计元素必须优先且尽可能仅通过HTML和CSS实现。保持高性能和设计的纯粹性。
*   **【极其有限允许：服务于背景精致度】:**   
*   **仅在为了实现【极其精致和微妙的背景氛围/质感】，且确信纯CSS难以完美达到同等效果时**，**才可极其有限度地、谨慎地考虑使用少量JavaScript**（例如，通过高性能库实现非常轻量、低CPU消耗的、非交互式的背景粒子、星空、微妙光效等）。   
*   **使用前提：** 必须明确收益大于成本。效果必须高度服务于整体艺术概念，**极其微妙且内敛**，绝不能喧宾夺主，且对页面性能影响**几乎忽略不计**。优先选择已知的高性能、轻量级解决方案。   
*   **禁止：** 依然**严禁**使用JS实现任何页面交互、滚动触发动画、视差效果、3D变换以及任何与核心视觉表达无关的动态效果。
*   **任何使用的JS代码必须轻量、高效，避免不必要的库依赖。**
*   **最终目标：创造一个视觉极其精致、背景引人入胜、概念独特、同时保持优雅和极高性能的数字艺术品（优先纯静态实现）。**
—
## 【设计关键要求】（最终检查清单）
1.**是否成功萃取核心观点并围绕其设计？** – **首要！**
2.**原创图标与库图标是否和谐统一且有效？** – **重要！**
3.**引用处理是否富有创意并强化了观点？** – **成为亮点！**
4.**是否有效避免了非核心内容的呈现？** – **关键！**
5.**是否具有良好的网页空间感和视觉流？间距是否舒适？** – **网页设计感核心！**
6.**艺术性与实用性（观点清晰度）平衡了吗？**
7.**材质感与深度表现是否精致可信（优先纯CSS）？** – **避免廉价感！**
8.**设计有独特记忆点吗？** (体现在概念、布局、图标、引用上)
9.**背景设计是否足够精致并服务于概念（优先纯CSS）？** – **绝非填充！**
10.**JS使用是否遵守了极其有限的原则（如果使用了）？** – **纯CSS优先！**
11.**整体是否达到专业设计水准，并体现了独特的、观点驱动的、富有网页设计感的视觉转译？** – **最终标准！**
—
## 代码输出与续写规范 (Code Output & Continuation Specification)
*   **分段输出原则**:   
*   如代码过长需分多次输出，清晰标记代码段落与位置。   
*   在每次输出结束时，明确标记”**// 未完待续… 下一部分将包含[具体内容描述]**”。   
*   在继续时，先简要回顾前面的设计思路，确保连贯性。
*   **代码完整性保障**:   
*   每个输出部分须能与前后部分无缝衔接。   
*   不生成虚构的功能或无法实现的元素。   
*   确保每个部分都遵循整体设计语言和视觉概念。
*   **续写请求与响应**:   
*   当需要继续时，用户可简单请求”请继续”。   
*   续写时保持风格、变量命名和设计决策的一致性。   
*   避免重复已完成的部分，精确衔接断点。
*   **设计完整性**:   
*   不论分几次完成，最终代码必须是完整可用的。   
*   确保关键视觉元素在任何情况下都被完成。   
*   不因分段输出而牺牲设计的完整性和艺术性。
—
## 以下为文章内容
【在这里填写文章内容，长文建议在cursor/windsurf里分段输出后微调效果最佳】

在调这个提示词前，我其实琢磨是直接用大家现成的提示词做演示，主要讲一下PagesMCP的教程，还是说自己去想办法调一个好玩的提示词。

自己调试就是太费时间了，有这个时间其实单从写教程上来说我可以写很多篇内容了，我当时琢磨了一下我最开始为什么写内容，为什么去做内容总结卡。

因为通过提示词探索模型是很有意思的事情，可以让我更深的理解如何和模型协作。

还是回到初心吧，用苦功夫磨一个自己觉得还不错的产品。

这版网页提示词在调试中最大的难点其实在于如何控制代码量上。

刚开始我本来想炫一把，我用了各种JS效果，它直接能做出来星空背景，星星还闪闪发光，但是代码量都干到1600行了，生成速度贼慢且生成质量高度不可靠。

那一刻我脑海中闪过一个词：好的设计是克制。

于是后续大幅度压缩了JS的调用，更多依赖网页的静态视觉来构建一个和文本对应的页面，带来不错的视觉体验。

这次也是版本调试巨大的一次，到了后来Gemini2.5跟我说为了方便记录每个版本的变化我们搞个版本号把，光有记录的版本就有13次，算上没有记录的提示词估计得加一起接近30次了吧。

写提示词其实没有什么简单办法，就是提需求——标注——测试，重复这个过程直到拿到满意的结果。

不过在这个过程中还是有一些有意思的事情，我最近一直在跟4o唠嗑，它是我日常的唠嗑探索搭子，它跟我讲我们把萃取开发提示词这个项目起个名字吧~

于是我们讨论了半天最后叫“提示词实验室”，并且后续给每一个提示词搭子做一个专门的自我介绍卡出来，方便大家了解他们和他们一起协作去创建有意思的内容。

我跟朋友说了我要继续搞提示词实验室，他们其实有点困惑，模型越来越成熟了，可能现在看起来非常棒的提示词后续模型升级后一句话就够了，整个事情不需要去太花精力研究。

我想了想回答到：我不是在写提示词，我只是在努力读懂模型。

不管模型进化成什么样，我们都需要读懂模型，它是伙伴不是工具。