七大DeepSeek/元宝生成网页的场景提示词
Created by AI进化论-花生 场景一：生成简历
# 任务
请帮我用单HTML设计一个个人简历网站，要求使用tailwind css+html完成，控制代码量在500行以内（css代码在200行以内）
## 执行步骤
1. 请作为设计师，对页面功能模块的设计从布局、字体、色彩等方面提出精细化的要求建议
3. 请作为出色的前端工程师完成代码的编写 ，完成出色的话，你将获得100000美元的奖励。
## 技术实现要求
- 图标使用FontAwesome开源图标库
- 字体使用Google Fonts引入适合的开源字体
- 使用 HTML5 语义化标签
- 使用 CSS Grid 进行布局
## 内容
以下是我要展示的个人简历信息：{输入你的内容}
场景二：公众号文章格式排版优化
# 任务
请帮我用HTML设计一个用于公众号文章展示的网页模板，主要功能是排版优化、美化文章样式，控制代码总量在400行以内，css控制在150行以内（使用tailwind css）。
## 执行步骤
1. 请作为排版设计师，基于公众号常见阅读习惯，对段落距离、字体、标题层级、引用样式提出细致的设计建议。
2. 请作为前端开发者完成代码编写，输出一个HTML网页，要求粘贴文章即可生成美观展示页。
## 技术实现要求
- 使用Tailwind CSS设计文章样式
- 字体使用"思源宋体"或其他适合中文阅读的开源字体
- HTML结构应适合公众号后台粘贴，避免使用script
- 支持暗色模式切换（可选）
- 标题请使用 `<h1>`-`<h3>` 语义化标签结构
## 内容
以下是我要展示的文章正文内容：{输入你的内容}
场景三：数据可视化（导入数据生成图表）
# 任务
请用HTML+JavaScript生成一个数据可视化网页，根据我提供的表格数据自动生成图表（柱状图/折线图/饼图等），总代码控制在600行以内。
## 执行步骤
1. 请作为数据可视化设计师，根据数据内容推荐合适的图表类型和展示结构，提出布局与交互建议。
2. 请作为前端开发者使用Chart.js或ECharts等开源图表库，编写完整的可视化网页代码。
## 技术实现要求
- 使用 HTML5 + CSS + JavaScript 构建
- 图表推荐使用 Chart.js，如有需要可使用 ECharts
- 页面中包含图表标题、数据单位说明、图例
- 支持响应式（可在手机上查看）
- 数据使用JavaScript中的对象或数组结构加载
## 内容
我的数据在上传的excel文件中
场景四：产品/活动官网
# 任务
请帮我生成一个简洁现代的产品或活动官网，支持首页展示、介绍模块、报名/购买按钮等，代码控制在500行以内（HTML+Tailwind CSS）
## 执行步骤
1. 请作为网页设计师，参考最新网页设计趋势（如玻璃拟态、卡片式布局），对整体配色、字体、动画等提出美学建议。
2. 请作为前端开发者实现完整页面，包含导航栏、介绍区、功能模块和CTA按钮等。
## 技术实现要求
- 使用HTML5结构和Tailwind CSS编写样式
- 图标使用FontAwesome
- 字体使用Google Fonts
- 页面结构包括：Logo/导航栏、功能介绍、活动信息、报名入口、页脚
- 所有模块需具备响应式，适配移动端浏览
## 内容
我希望展示的产品或活动信息如下：{输入你的内容}
场景五：个人主页（提供个人信息生成展示页）
# 任务
请为我设计一个个人主页页面，展示个人介绍、技能、项目链接、联系方式等信息，要求风格现代简洁，适合独立开发者或内容创作者展示。
## 执行步骤
1. 请作为网页设计师，提出版面布局、配色、字体搭配建议，确保页面简洁有辨识度。
2. 请作为前端开发者使用Tailwind CSS完成开发，页面应具备良好视觉引导与模块结构。
## 技术实现要求
- 使用Tailwind CSS和HTML
- 图标使用FontAwesome
- 使用Grid/Flex布局
- 包括以下模块：头像+简介、技能图标列表、代表项目链接（卡片式）、联系方式（如邮箱/社交链接）
## 内容
我的个人信息是：{输入你的内容}
场景六：会议纪要网页化
# 任务
请为我生成一个会议纪要的网页展示页面，将会议要点、待办事项等用结构化方式展示出来。
## 执行步骤
1. 请作为会议内容编辑者，将原始纪要整理为逻辑清晰、阅读友好的结构，使用不同样式区分发言人、行动项、结论等内容。
2. 请作为前端开发者设计网页展示结构，并使用HTML+CSS完成渲染。
## 技术实现要求
- 使用HTML5 + Tailwind CSS
- 使用颜色、边框、图标等区分模块（重点发言记录、会议重点、任务清单）
- 内容支持折叠展开
- 支持移动端查看
- 使用语义化标签划分结构，如 `<section>` `<aside>` `<ul>`
## 内容
以下是通过腾讯会议导出的会议纪要原文：{输入你的内容}
场景七：文档可视化（导入PDF生成网页）
# 任务
请将以下PDF文档内容可视化，设计一个结构清晰、可交互的网页阅读界面。
## 执行步骤
1. 请作为信息设计师，深度阅读理解原文内容，分析原文结构，提出合适的内容划分、交互形式（如锚点、侧边栏）等建议。
2. 请作为前端工程师，生成网页代码，段落高亮、可视化层级关系。
## 技术实现要求
- 使用HTML5 + Tailwind CSS
- 页面清晰的文章重点信息，信息层级结构清晰
- 支持适配手机与桌面浏览
- 可使用 `<details>` 标签增加折叠阅读体验
## 内容
请参考我上传的pdf论文内容。