新DeepSeek R1代码能力直逼Claude 4！附生成任何优质网站的通用提示词
原创 花叔 花叔 2025-05-29 16:35 云南
互动数据
- 阅读：7677
- 点赞：108
- 转发：779
- 喜欢：50
- 留言：11
昨晚，DeepSeek R1官方低调的在微信群里发布了「小版本」升级的说明。以DeepSeek的过往作风，大家都懂这个所谓的「小」不值得相信，实际有多少东西我们真得测了才知道。
昨晚到现在，我已经玩了DeepSeek-R1 8小时以上，发现他们在文本写作方面的过度「量子力学」的问题已经得到了大幅度的修复，思维链推理能力也有不少改进。但…
真正重要，值得写的是，他的代码能力获得了极大的提升，尤其是在前端审美方面，已经直逼最强编程模型Claude 4了。
我估计你可能也已经看到了不少类似的说法，但是，当你自己上手尝试，想让DeepSeek帮你写个网页的时候，似乎效果就差很多了？
这篇文章，是想达到三个目的：
1）向你展示现在DeepSeek R1的前端能力到什么水平了；
2）为你提供一个通用的写前端html网页的提示词，让你轻松生成视觉效果出色的任意网站；
3）不止授之以鱼，我还会想办法为你解释清楚为什么提示词要这么写，优劣势是什么，希望对你写提示词的逻辑也提供一些启发。
来吧，我们先看几个网站（这些网站都是用一段提示词，一次性生成的）
1、个人简历网站
2、美术馆网站
3、拥有文本、图片、视频、音频内容的社交网站
4、B站的后台数据管理网站
5、吃苹果的贪吃蛇小游戏
6、番茄钟+todo
提示词如下：
请根据我的描述创建一个完整的HTML网页。我想生成的网站是：{输入你的网站要求，比如一个B站up主查看后台数据的看板，包含不同类型的数据图表}
说说我的这份提示词的逻辑：
1、首先，我们希望DeepSeek R1只生成一个html文件，否则在DeepSeek网站中无法预览，所以需要在开头明确提出要求；
2、影响界面美观程度的细节包括是否有图片、是否有好看的图标、CSS样式等，所以我对这几个细节进行了说明，尤其是虽然AI不能生成图片，但是可以引入开源图片库的链接而实现网页上展示图片的。不过这也存在一定的问题是，这部分连接生成可能会有后缀有错导致图片裂开，或者AI并不那么清楚具体是什么图片，导致美术馆网页中的图片和描述完全不符合的情况，这属于很正常的情况；
3、布局和配色是影响界面视觉非常重要的因素，实际上你对这部分限定得越死、描述越仔细，你能得到的界面会更「美观」更「可控」，但是一种类型的网站生成多了很容易审美疲劳，很无聊的，所以我在这部分保持了开放性，不做具体的限制，但是要求模型参考行业最佳实践。
4、我在提示词中引入了工作流，这个工作流算是借鉴人类产品开发过程中的基础实践，并且让AI扮演专家角色。之所以这么做，跟DeepSeek R1是推理模型有关，一方面他确实能够在思考中实现这一推理过程，另一方面是让AI弥补我们人类在很多细节场景表述不清楚，不知道自己不知道什么的不足。
比如，下面就是我发出这份提示词之后DeepSeek R1典型的思考过程：
我们按照步骤进行：
功能需求和设计需求都在代码写完之前由DeepSeek代劳完成了。
不过最后还需要说明的是，虽然DeepSeek R1在一次性生成简单页面的能力上直逼Claude4了，但是毕竟大多数项目不是这么简单的，会需要AI模型有类agent的多步规划能力，工具调用能力，以及更长的上下文去解决复杂问题。现在DeepSeek R1显然具有了一个很好的开始，但是在真实世界更复杂的任务中表现怎样样，我们可以再测一测，以及对R2抱有一些期待。
希望今天提供的提示词和提示词设计思路能对你有所启发。enjoy～
本文首发于花叔知识星球「AI编程：从入门到精通」，如果你对AI编程感兴趣，欢迎加入我们，和1500+圈友一起感受创造的快乐～