新DeepSeek R1代码能力直逼Claude 4！附生成任何优质网站的通用提示词

昨晚，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. 请先作为具有20年经验的，受乔布斯和张小龙夸赞的出色产品经理，穿透用户的需求表述，洞悉他想到以及没想到的可能需求，形成更完成充分的网站设计需求2. 获取需求后，请作为一个吹毛求疵的在Apple Inc.工作过20年的出色设计师，用你能所想象的最好的设计去实现产品经理的需求，输出详细的前端能轻松理解的需求文档3. 作为出色的前端工程师，充分思考产品经理和设计师所表达的需求，一步步完整实现需要的所有代码。### 前端HTML代码要求：1. 使用现代HTML5结构2. 通过CDN引入Google Fonts字体3. 图标使用Font Awesome CDN4. 响应式设计，适配移动设备5. 当网站设计需要图片时，可以使用以下可靠的图片源：   - Unsplash: https://images.unsplash.com/ (例如: https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800)   - Picsum: https://picsum.photos/ (例如: https://picsum.photos/800/600)6. 思考这个主体网站best practice所采用的色彩、布局方案，并加以借鉴与设计7. 选择和网站主题相匹配的字体8. 使用语义化标签（header/main/footer等）9. 包含内联CSS样式，使网页美观

说说我的这份提示词的逻辑：1、首先，我们希望DeepSeek R1只生成一个html文件，否则在DeepSeek网站中无法预览，所以需要在开头明确提出要求；2、影响界面美观程度的细节包括是否有图片、是否有好看的图标、CSS样式等，所以我对这几个细节进行了说明，尤其是虽然AI不能生成图片，但是可以引入开源图片库的链接而实现网页上展示图片的。不过这也存在一定的问题是，这部分连接生成可能会有后缀有错导致图片裂开，或者AI并不那么清楚具体是什么图片，导致美术馆网页中的图片和描述完全不符合的情况，这属于很正常的情况；3、布局和配色是影响界面视觉非常重要的因素，实际上你对这部分限定得越死、描述越仔细，你能得到的界面会更「美观」更「可控」，但是一种类型的网站生成多了很容易审美疲劳，很无聊的，所以我在这部分保持了开放性，不做具体的限制，但是要求模型参考行业最佳实践。4、我在提示词中引入了工作流，这个工作流算是借鉴人类产品开发过程中的基础实践，并且让AI扮演专家角色。之所以这么做，跟DeepSeek R1是推理模型有关，一方面他确实能够在思考中实现这一推理过程，另一方面是让AI弥补我们人类在很多细节场景表述不清楚，不知道自己不知道什么的不足。比如，下面就是我发出这份提示词之后DeepSeek R1典型的思考过程：

我们按照步骤进行：1. 产品经理视角：深入理解需求，挖掘潜在需求用户需求：一个美术馆的图片画廊网站，展示美术馆中的藏品。潜在需求：- 用户可能希望了解每件艺术品的详细信息（如作者、创作年份、简介等）- 用户可能希望有分类浏览（如按艺术流派、年代、作者等分类）- 用户可能希望有搜索功能- 用户可能希望有响应式设计，在手机、平板、电脑上都能良好展示- 用户可能希望有灯箱效果（点击图片放大查看）- 用户可能希望网站有艺术感，设计优雅，符合美术馆的调性- 用户可能希望有关于美术馆的介绍和联系信息- 用户可能希望有活动展览信息- 用户可能希望有社交媒体链接2. 设计师视角：形成详细的设计文档- 设计风格：简约、现代、突出艺术品本身- 色彩方案：以白色和浅灰色为主，避免喧宾夺主，文字用深灰色或黑色，点缀色使用美术馆标志色（假设为深蓝色）- 字体：标题使用衬线字体（如Playfair Display）以增加艺术感，正文使用无衬线字体（如Lato）保证可读性- 布局：* 头部：美术馆logo和名称，导航栏（首页、展览、藏品、关于、联系）* 主体：展示精选藏品，使用网格布局（瀑布流或等高等宽网格），每张图片下方有简短信息（标题和作者），点击图片可进入详情页或弹出灯箱* 底部：美术馆简介、联系方式、社交媒体图标、版权信息- 响应式：在移动设备上网格变为单列，导航栏变为汉堡菜单- 交互：图片悬停时有轻微放大效果，导航菜单高亮当前页3. 前端工程师视角：实现代码- 使用HTML5语义标签- 引入Google Fonts（Playfair Display和Lato）- 引入Font Awesome图标- 使用CSS Grid或Flexbox实现响应式网格- 使用内联CSS（为了满足要求，但实际项目建议外联）由于要求内联CSS，我们将样式放在<style>标签中。考虑到代码长度，我们简化一些内容，但包含关键部分：- 导航栏（简单菜单，移动端使用汉堡菜单需要JavaScript，但这里我们只做响应式折叠，用纯CSS实现）- 图片网格（使用CSS Grid）- 页脚注意：由于无法使用外部CSS文件，我们将所有样式放在一个<style>标签中。我们假设美术馆名为“墨心艺术馆”（MoXin Art Gallery）。图片使用Picsum提供的随机艺术类图片，但实际中应替换为真实藏品图片。我们将设计一个包含以下部分的页面：- Header: 包含logo（用文字代替）和导航- Main: 画廊网格- Footer: 联系信息等由于要求内联样式，我们直接写在HTML中。开始编写代码：

功能需求和设计需求都在代码写完之前由DeepSeek代劳完成了。不过最后还需要说明的是，虽然DeepSeek R1在一次性生成简单页面的能力上直逼Claude4了，但是毕竟大多数项目不是这么简单的，会需要AI模型有类agent的多步规划能力，工具调用能力，以及更长的上下文去解决复杂问题。现在DeepSeek R1显然具有了一个很好的开始，但是在真实世界更复杂的任务中表现怎样样，我们可以再测一测，以及对R2抱有一些期待。希望今天提供的提示词和提示词设计思路能对你有所启发。enjoy～