各位读者好，我是萧尘。现在是2025年7月17日，星期四的晚上八点半。我所撰写的《Trae AI 从小白到大神的学习之路》系列课程，目前已更新至第六章。此前，我们已完成了前沿、软件介绍、代码管理、项目部署、MCP环境搭建以及构建智能体这五个章节的撰写。接下来的内容，我们将重点聚焦于实战部分，开始撰写第六个章节。
第六章 网页的开发：实战篇
一、 理论：基于提示词的快速网页开发
在我看来，在网页开发领域，其核心理念可以概括为两个关键点：首先，你必须非常清楚自己想要制作一个什么样的网站；其次，你需要提供一段“非常清晰的提示词” 。
- 清晰提示词的重要性：根据我的实践经验，我发现当你的提示词越清晰，并且内容描述得越明确，最终制作出来的网页效果就会越好。这是通过提示词来完成优秀网页开发的关键步骤。
- AI工具的应用：本质上，我们是借助像“TRAE 和 Claud3.7”这样的AI模型来完成开发的。我当时使用的是3.7模型，现在它已经升级至4.0模型。通过接入该模型，并提供一段精心设计的提示词，就可以比较好地、快速地完成网页的开发。这种通过提示词直接生成开发文档的方式，极大简化了我的网页开发过程。
- 网页开发的简化与技术栈：在我看来，网页制作的领域，特别是当不涉及到后端开发时，是相对比较简单的。通常情况下，我使用最简单的**HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript（脚本语言）**来完成网页的开发。这些是构建网页的基础要素，使得简单的网页呈现变得相对容易。
二、 案例：实战项目展示
我在实践中运用上述基于提示词的快速开发方法，完成了多个网页项目，充分验证了其高效性。以下是我曾开发的部分案例：
-
《Trae AI 从小白到大神的学习之路》书籍网站：我目前正在展示的这个书籍呈现网页，就是使用“TRAE”完成优化的，也是我用“TRAE”开发出来的。
-
拼图网页：这是一个通过“闪电视开发”完成的拼图网页。即便是这类相对复杂的项目，也是通过一段提示词，直接生成开发文档并最终完成的。
-
2025年高考作文预测网页。
-
雷军个人介绍网页。
-
高德行程规划网页。
-
音视频呈现网页。
-
介绍“TRAE”的网页。
-
简单的HTML官网：我通过一段提示词来完成了官网的制作。
-
“龙小宝”IP设计展示网页。
-
原型开发网页：同样是通过一段提示词，我就能比较好地完成这类开发，速度非常快。
-
此外，我还开发了其他官网、行程路线网站，以及个人介绍博客网站等。
这些案例共同展示了通过清晰的提示词和AI工具，我如何高效地实现各种类型的网页开发，从简单的官网到相对复杂的拼图页面，其本质都是通过一段提示词来完成的。
三、 讨论：进一步学习与交流
总结而言，在网页开发这个领域，其核心价值在于：明确你要构建什么样的网站，并提供一段非常清晰的提示词。当你的提示词越清晰，内容描述越明确，最终的网页效果就会越好。这种通过提示词直接生成优秀网页开发文档的方式，使得网页开发变得相对简单。
我已经将上述多个网页开发范例的文章撰写并发布在了掘金平台上。
- 查阅相关文章：我建议大家在学习之后，可以针对这些范例去一对一地查阅我的文章，这将有助于您对网页开发有更清晰的理解。
- 欢迎留言交流：如果在网页开发方面仍有不清楚的地方，欢迎大家留言。我会根据大家的疑问进行解答，以便更快速地帮助大家理解。
