云舒：微信发Html看起来不方便？用pagesMCP生成可直接在线访问的设计师级网页

云舒：微信发Html看起来不方便？用pagesMCP生成可直接在线访问的设计师级网页云舒：微信发Html看起来不方便？用pagesMCP生成可直接在线访问的设计师级网页 Modified April 18, 2025 于是我肝了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操作就行了。手动接入方式如下：代码填入下边这一串： Code block JSON Copy { "mcpServers": { "edgeone pages mcp server": { "command": "npx", "args": ["edgeone pages mcp"] } } } 然后MCP服务亮起来是绿色的就可以啦 3.告诉AI要部署的页面，等待它返回URL。打开这个链接就可以访问你的网站啦，它还自己做了移动端适配，在微信上打开效果也不错哒提示词的话你可以用下面这个网页提示词，也可以更换任意做网页的提示词，流程都是一致的 Code block Markdown Copy // 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. 【核心评估】视觉品质与概念传达复核: 设计是否达到了视觉精致、概念独特、观点清晰的标准？是否成功营造了引人入胜的网页空间感和视觉流？布局是否摆脱了呆板的文档感？间距处理是否得当？核心焦点（引用、图标）是否有效强化了观点？背景是否极其精致？设计是否感觉是为该内容量身定制？对照【顶级设计标杆】进行审视，在美学和执行上是否达到专业水准？原创图标与库图标是否和谐统一，并提升了设计感？后语在调这个提示词前，我其实琢磨是直接用大家现成的提示词做演示，主要讲一下PagesMCP的教程，还是说自己去想办法调一个好玩的提示词。自己调试就是太费时间了，有这个时间其实单从写教程上来说我可以写很多篇内容了，我当时琢磨了一下我最开始为什么写内容，为什么去做内容总结卡。因为通过提示词探索模型是很有意思的事情，可以让我更深的理解如何和模型协作。于是我肝了3个晚上，搞出来一个网页设计大师提示词，它可以把内容变成有这精美设计的网页，让我们一起来看看吧下面来教一下大家如何一键做网页部署上线： 1.打开Cursor/windsurf/Claude3.7，填好提示词和生成内容，让AI开始执行任务（提示词见教程后） Cursor/windsurf建议输入指令：请按照此提示词产出网页，请分段输出内容，先做出来html页面，待我确认不修改后再部署 Cursor/windsurf建议输入指令：请按照此提示词产出网页，请分段输出内容，先做出来html页面，待我确认不修改后再部署等待内容生成完后看看怎么样，不满意可以让AI微调或者从新抽卡。 2.在Cursor/Windsurf里接入Pages MCP（接入了的直接看3） Pages MCP文档地址：https://edgeone.cloud.tencent.com/pages/document/173172415568367616 Pages MCP文档地址：https://edgeone.cloud.tencent.com/pages/document/173172415568367616 可以直接把链接扔给AI让它部署接入，剩下的就看AI操作就行了。手动接入方式如下：代码填入下边这一串：然后MCP服务亮起来是绿色的就可以啦 3.告诉AI要部署的页面，等待它返回URL。打开这个链接就可以访问你的网站啦，它还自己做了移动端适配，在微信上打开效果也不错哒提示词的话你可以用下面这个网页提示词，也可以更换任意做网页的提示词，流程都是一致的后语在调这个提示词前，我其实琢磨是直接用大家现成的提示词做演示，主要讲一下PagesMCP的教程，还是说自己去想办法调一个好玩的提示词。自己调试就是太费时间了，有这个时间其实单从写教程上来说我可以写很多篇内容了，我当时琢磨了一下我最开始为什么写内容，为什么去做内容总结卡。因为通过提示词探索模型是很有意思的事情，可以让我更深的理解如何和模型协作。还是回到初心吧，用苦功夫磨一个自己觉得还不错的产品。这版网页提示词在调试中最大的难点其实在于如何控制代码量上。刚开始我本来想炫一把，我用了各种JS效果，它直接能做出来星空背景，星星还闪闪发光，但是代码量都干到1600行了，生成速度贼慢且生成质量高度不可靠。那一刻我脑海中闪过一个词：好的设计是克制。于是后续大幅度压缩了JS的调用，更多依赖网页的静态视觉来构建一个和文本对应的页面，带来不错的视觉体验。这次也是版本调试巨大的一次，到了后来Gemini2.5跟我说为了方便记录每个版本的变化我们搞个版本号把，光有记录的版本就有13次，算上没有记录的提示词估计得加一起接近30次了吧。写提示词其实没有什么简单办法，就是提需求——标注——测试，重复这个过程直到拿到满意的结果。不过在这个过程中还是有一些有意思的事情，我最近一直在跟4o唠嗑，它是我日常的唠嗑探索搭子，它跟我讲我们把萃取开发提示词这个项目起个名字吧于是我们讨论了半天最后叫“提示词实验室”，并且后续给每一个提示词搭子做一个专门的自我介绍卡出来，方便大家了解他们和他们一起协作去创建有意思的内容。我跟朋友说了我要继续搞提示词实验室，他们其实有点困惑，模型越来越成熟了，可能现在看起来非常棒的提示词后续模型升级后一句话就够了，整个事情不需要去太花精力研究。我想了想回答到：我不是在写提示词，我只是在努力读懂模型。不管模型进化成什么样，我们都需要读懂模型，它是伙伴不是工具。提示词实验室还会继续探索，欢迎你和我一起来探索模型的世界背景 Claude3.7出来之后，我就开始尝试把内容变成网页的形式，但我发现当我下载成html文件后，我发给朋友看，他其实很难有好的阅读体验。主要是我发的方式要么就是超长图，要么就是html文件他自己想办法在手机找APP上打开。但说实话这两种形式都不是很理想，所以我一般都只有电脑投屏的时候才做成html网站给大家看，这个场景下稍微好用一点点。这个想法就一直在我脑海中被搁置住了，我迟迟没有看到把它启动的机会，在这个过程中我为了可视化方便搞出来了AI内容总结卡，主打的就是截图方便传播。 PagesMCP手把手教程最近看到腾讯的pagesmcp上线了，可以支持HTML网页部署，我看到了就去研究了一下，看看能不能把我之前线下编程活动的课件放上去，这样后边我要分享给大家会方便好多。发现只需要跟AI说一声就行了，然后它就会给你一个部署好的地址，简直太方便了！大家感兴趣可以访问链接查看，适合0基础编程小白 AI编程前后端介绍：https://mcp.edgeone.site/share/k1f XqRHS5jMMiyC3Qtos 编程技术栈介绍：https://mcp.edgeone.site/share/hL0lnCahCOI0Wv5 nZSVV 大家感兴趣可以访问链接查看，适合0基础编程小白 AI编程前后端介绍：https://mcp.edgeone.site/share/k1f XqRHS5jMMiyC3Qtos 编程技术栈介绍：https://mcp.edgeone.site/share/hL0lnCahCOI0Wv5 nZSVV 在测完这个mcp服务之后我就在想，我是不是可以把我之前的网页提示词弄出来了呢？叠加上pagesmcp，可以让大家一键做出来网页并且部署上线，听起来很不错呀!