Lazy loaded image
如何用DeepSeek快速制作html教学工具(第1期)
Words 695Read Time 2 min
2025-4-3
2025-6-5
type
status
date
slug
summary
tags
category
icon
password
 
3月24日,DeepSeek重磅更新了V3的新版本0324,在编程能力有了飞跃的提升,实测已经与Claude3.5不相上下,接近地表最强的Claude3.7,并且关键是免费!
如果你有安装cursor搭配Claude3.7,那当然是当前最优,但对于大多数教师而言,简单免费的DeepSeek才是最好的选择,接下来我们会以几个星球里的html教学工具为例,教大家如何条理化的编写提示词,让DeepSeek帮你写教学工具。
一、前期准备
首先明确自己的需求,以管理工具“任务完成打卡墙”为例,我们需要从几个角度罗列需求:必须显示的文本内容、需要用到的按钮名称和位置、页面的布局、每个按钮的功能、操作的流程、UI设计风格。
参考提示词:
 
💡
完整内容请到知识星球查阅https://t.zsxq.com/tYh2Z
 
 
在编写需求的时候需要掌握一个技巧,内心模拟整个页面的操作流程,按序号编写,中途有错可以调整,在最后写上对UI界面的要求就行。第一次的提示词很关键,具体的描述和详细的需求可以减少后续的调整甚至对骂。
二、对话大模型
在使用DeepSeek进行编程的时候,有一步关键操作,就是将深度思考和联网都关闭。这时候才会使用编程能力更强的V3模型。
notion image
接下来等待大模型的一顿输出,在它完成代码编写后,点击运行HTML查看效果。
notion image
notion image
notion image
notion image
怎么样,看着已经跟我用cursor+Claude3.7做的差不多了。
三、调试优化
每个人生成的样式和内容都可能有所区别,后续测试和调试也是编写教学工具的关键,其实这部分并不难,只要你觉得它没搞对的,指出来哪里错了,让它调整成什么样就可以了。
参考调试提示词:
在三个按钮与三个区域之间,用一行显示任务名称、任务要求、截止日期时间。字体颜色要求符合整体风格
来看一看成果(Claude3.7)
notion image
AI编程让所有人都能够实现「用嘴编程」让原本遥不可及的教学工具变得人人都能自主定制,只要掌握这个提示词的技巧,你也可以,快学起来吧!
 
上一篇
如何用DeepSeek快速制作html教学工具(第2期)
下一篇
免费-多学科教学管理工具