得益于Claude3.7的审美、制作SVG，以及网络找图的能力提升，最近网上用Claude各种各样有趣好玩的HTML的案例非常多，但我发现有一个问题，每个提示词都太复杂了，仿佛都需要自己去磨，而每种类型HTML的提示词又好像不一样，要记忆很多。

（这个宣传图就是用今天的提示词模板来做的）

于是我花了半天时间，把即刻、公众号等出名的HTML案例都收集起来分析，耗费了大量的token，总结出了今天的万能提示词模板，让大家用一套模板就能生成精美PPT、实用简历、个人名片、高保真原型图、知识卡片、动态交互组件等等所有HTML的应用场景。

为什么是HTML？

其实AI的底层逻辑就是代码：

用文字和AI对话 ➡️ 文字会转成编码形式，AI才能懂

用多模态的图片、视频和AI交互 ➡️ 媒体会转成像素块，最终也是编码形式让AI理解

也就是说，相比于自然语言，「代码」是和AI交流更直接、好用的方式。

而HTML是用代码构建一切的最简单方式。

如果你还没接触过HTML，不要紧，接下来我就带你用AI生成各种各样的HTML，请准备好水，因为以下都是很干的干货。

提示词模板

我们可以看到，这个模板涵盖了HTML内容创建的所有关键方面，从视觉设计到技术实现，从资源配置到质量标准。这种全面性确保生成的HTML内容没有重大遗漏，进而也就确保了输出的确定性✅

代码块 # 角色：[专业身份] 你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。 ## 任务概述 请为我设计并创建一个[具体描述内容类型和主题]。这个[内容类型]应该[描述目标和用途]。 ## 内容规划 请按照以下步骤规划内容： 1. [思考/分析]：[详细描述思考过程要求] 2. [方案设计]：[详细描述设计规划要求] 3. [实现细节]：[详细描述实现步骤要求] ## 设计风格 - 整体风格：[描述整体设计风格、参考风格] - 配色方案：[描述配色需求，可指定具体色值或风格] - 字体选择：[描述字体需求，推荐字体类型] - 视觉元素：[描述视觉元素要求，如图标、插图等] - 交互效果：[描述所需的交互、动画效果] ## 技术要求 - 开发框架：[指定HTML/CSS框架，如TailwindCSS、Bootstrap等] - 脚本要求：[指定JavaScript库/框架，如React、Vue等] - 响应式要求：[描述不同设备上的表现要求] - 性能考虑：[描述性能优化要求] ## 资源配置 - 图片资源：[指定图片来源，如Unsplash、自定义图片等] - 图标库：[指定图标库，如Font Awesome、Material Icons等] - 外部引用：[指定需要引用的外部资源] ## 交付标准 - 代码质量：[描述代码质量要求，如注释、组织等] - 兼容性：[描述兼容性要求] - 文件格式：[描述交付文件格式] ## 特殊要求 [任何其他特殊要求或注意事项] ## 参考示例 [想要控制AI有稳定的输出，最好是把你找到的案例以图片或HTML源代码的形式附在提示词里让AI学习]

有了模板之后，用法就很简单了：把你的要求和需要的功能，连同模板一起扔给AI，让AI生成具体的提示词。然后就可以用这个提示词去生成HTML应用。

注意⚠️ 很多时候我们不是一次性就生成好的，但有了这个模板，很大概率通过2-3轮的对话就能迭代出你想要的效果。

模板使用说明｜详细参数指南

接下来，我将详细解释模板的各个部分，以及如何填写每个参数：

1. 角色设定

代码块 # 角色：[专业身份] 你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。

参数解释：

为了更好的阅读体验，来飞书看吧：

https://ry6uq5vtyu.feishu.cn/docx/WUkSdI945orhDMx11vic3RYHnMc