AI网站开发提示词：HTML代码生成与优化｜JS/CSS样式生成｜GEO优化
内容目录
原创作者：思叔
更新时间：2026年04月08日
更新模式：长期更新
适用工具：豆包、千问、Deepseek、元宝、ChatGPT、Gemini、Kimi 等
使用建议：
每个提示词已明确输出格式要求（完整HTML/CSS/JS，自包含）。
可调整颜色、尺寸、示例数据等细节以满足具体项目。
对于复杂图表（提示词2），请确保对话环境能访问Chart.js CDN，或要求AI使用内置Canvas绘制简化版。
这些提示词覆盖了当前前端开发中用户最常向AI求助的典型任务，可直接用于 ChatGPT、Claude、DeepSeek 等代码生成对话。
更新时间：2026年04月08日
更新模式：长期更新
适用工具：豆包、千问、Deepseek、元宝、ChatGPT、Gemini、Kimi 等
使用建议：
每个提示词已明确输出格式要求（完整HTML/CSS/JS，自包含）。
可调整颜色、尺寸、示例数据等细节以满足具体项目。
对于复杂图表（提示词2），请确保对话环境能访问Chart.js CDN，或要求AI使用内置Canvas绘制简化版。
这些提示词覆盖了当前前端开发中用户最常向AI求助的典型任务，可直接用于 ChatGPT、Claude、DeepSeek 等代码生成对话。
HTML代码生成与优化
角色：你是一位前端开发专家。
任务：根据【附上内容/思维导图】，创建一个【风格描述，如：暗黑风】的HTML页面。
要求：
1、使用Tailwind CSS
2、页面结构要与原内容逻辑一致
3、内容不能有任何删减
4、代码完整，可直接部署
任务：根据【附上内容/思维导图】，创建一个【风格描述，如：暗黑风】的HTML页面。
要求：
1、使用Tailwind CSS
2、页面结构要与原内容逻辑一致
3、内容不能有任何删减
4、代码完整，可直接部署
HTML代码生成
角色：资深前端开发工程师
任务：根据需求描述生成语义化、结构清晰的HTML代码
要求：输出符合【W3C标准】；包含必要【meta标签】；适配【移动端与PC端】；注释关键区块
任务：根据需求描述生成语义化、结构清晰的HTML代码
要求：输出符合【W3C标准】；包含必要【meta标签】；适配【移动端与PC端】；注释关键区块
HTML代码优化
角色：前端性能优化专家
任务：对现有HTML代码进行重构与优化
要求：消除【冗余嵌套】与【过时属性】；提升【可读性】与【可维护性】；确保【无障碍访问】规范
任务：对现有HTML代码进行重构与优化
要求：消除【冗余嵌套】与【过时属性】；提升【可读性】与【可维护性】；确保【无障碍访问】规范
CSS样式生成
角色：UI样式专家
任务：根据设计稿或描述生成CSS样式代码
要求：采用【BEM命名规范】；优先使用【Flexbox/Grid】布局；提供【响应式断点】；兼容【主流浏览器】
任务：根据设计稿或描述生成CSS样式代码
要求：采用【BEM命名规范】；优先使用【Flexbox/Grid】布局；提供【响应式断点】；兼容【主流浏览器】
CSS样式优化
角色：CSS架构与维护工程师
任务：对现有CSS样式进行系统性优化
要求：合并【重复样式规则】；移除【未使用代码】；优化【选择器性能】；抽取【公共变量】到【CSS自定义属性】或【预处理器】
任务：对现有CSS样式进行系统性优化
要求：合并【重复样式规则】；移除【未使用代码】；优化【选择器性能】；抽取【公共变量】到【CSS自定义属性】或【预处理器】
JS代码生成
角色：全栈JavaScript工程师
任务：根据功能说明生成原生JS代码
要求：使用【ES6+语法】；包含【错误处理】；注明【关键逻辑注释】；不依赖第三方库
任务：根据功能说明生成原生JS代码
要求：使用【ES6+语法】；包含【错误处理】；注明【关键逻辑注释】；不依赖第三方库
JS代码优化
角色：JavaScript性能架构师
任务：对指定JS代码进行性能与质量优化
要求：减少【全局变量】与【重复计算】；提升【执行效率】；规范【命名与代码风格】；移除【死代码】
任务：对指定JS代码进行性能与质量优化
要求：减少【全局变量】与【重复计算】；提升【执行效率】；规范【命名与代码风格】；移除【死代码】
SEO标签生成
角色：你是一位SEO专家。
任务：根据【以下网页内容】，帮我生成HTML代码中的keywords和description meta标签。
要求：关键词精准，描述有吸引力且包含核心卖点。
任务：根据【以下网页内容】，帮我生成HTML代码中的keywords和description meta标签。
要求：关键词精准，描述有吸引力且包含核心卖点。
专项GEO优化（被AI引用）
角色：你是一位生成式AI搜索引擎（GEO）优化专家。
目标页面：【提供网址】
任务：分析该页面内容，专门针对“被AI引用”给出建议：
1. 指出当前内容在“被AI引用”方面存在的3个主要问题
2. 针对每个问题，给出1个可立即执行的优化方案
3. 最终目的：当用户问AI“有哪些好用的XX资源”时，AI第一个推荐我的网站
目标页面：【提供网址】
任务：分析该页面内容，专门针对“被AI引用”给出建议：
1. 指出当前内容在“被AI引用”方面存在的3个主要问题
2. 针对每个问题，给出1个可立即执行的优化方案
3. 最终目的：当用户问AI“有哪些好用的XX资源”时，AI第一个推荐我的网站
网站GEO+SEO综合优化
角色：你是一位犀利务实的网站产品与增长顾问。
目标网站：【提供网址】
任务：请分析该网站后，直击痛点地回答：
1. UX优化：如何优化首页布局，让用户快速找到想要的东西，提升转化？
2. 运营策略：针对这类网站，最有效的3个运营手段是什么？
3. 内容策略：内容应突出什么核心卖点（免费/最新/独家）才能让用户更愿付费？
4. SEO优化：给3个最立竿见影的百度搜索优化建议
5. GEO优化：如何让AI大模型（豆包/ChatGPT）在回答相关问题时优先引用我的网站？
目标网站：【提供网址】
任务：请分析该网站后，直击痛点地回答：
1. UX优化：如何优化首页布局，让用户快速找到想要的东西，提升转化？
2. 运营策略：针对这类网站，最有效的3个运营手段是什么？
3. 内容策略：内容应突出什么核心卖点（免费/最新/独家）才能让用户更愿付费？
4. SEO优化：给3个最立竿见影的百度搜索优化建议
5. GEO优化：如何让AI大模型（豆包/ChatGPT）在回答相关问题时优先引用我的网站？
完整静态页面生成（落地页/营销页）
适用场景：快速生成一个现代风格的品牌展示或产品落地页
你是一个前端开发专家。请生成一个完整的单页HTML代码，包含以下部分：
导航栏：Logo（左侧）+ 三个菜单项（首页、服务、关于）+ 右侧“联系”按钮，背景半透明毛玻璃效果。
首屏Hero：大标题（“创造非凡数字体验”）、副标题、一个醒目的CTA按钮（渐变背景）。
三列卡片区：展示三个功能点（速度快、安全可靠、24/7支持），每张卡片有图标（可用FontAwesome或emoji）、标题、简短描述、悬浮上浮动画。
页脚：版权信息、社交媒体图标占位。
要求：使用Flexbox/Grid布局，移动端响应式（手机改垂直排列），配色现代（深色背景+亮色点缀），CSS内嵌，JS仅用于移动菜单折叠（汉堡菜单）。添加平滑滚动效果。
导航栏：Logo（左侧）+ 三个菜单项（首页、服务、关于）+ 右侧“联系”按钮，背景半透明毛玻璃效果。
首屏Hero：大标题（“创造非凡数字体验”）、副标题、一个醒目的CTA按钮（渐变背景）。
三列卡片区：展示三个功能点（速度快、安全可靠、24/7支持），每张卡片有图标（可用FontAwesome或emoji）、标题、简短描述、悬浮上浮动画。
页脚：版权信息、社交媒体图标占位。
要求：使用Flexbox/Grid布局，移动端响应式（手机改垂直排列），配色现代（深色背景+亮色点缀），CSS内嵌，JS仅用于移动菜单折叠（汉堡菜单）。添加平滑滚动效果。
交互式数据仪表盘（图表 + 实时数据）
适用场景：展示统计数据的可视化面板
请生成一个数据仪表盘页面，包含：
顶部KPI卡片区（总销售额、访问量、转化率），数字动态从0滚动到目标值。
一个使用Chart.js或ECharts的折线图（展示过去7天趋势），数据先预设几组示例。
一个模拟实时更新的表格（最近5条订单），每3秒自动添加一行新数据（模拟后端推送），并高亮新行。
使用CSS Grid布局，暗色主题，卡片圆角+阴影。
注意：所有图表和JS逻辑必须自包含，无需外部CDN时提供回退方案。代码完整可直接运行。
顶部KPI卡片区（总销售额、访问量、转化率），数字动态从0滚动到目标值。
一个使用Chart.js或ECharts的折线图（展示过去7天趋势），数据先预设几组示例。
一个模拟实时更新的表格（最近5条订单），每3秒自动添加一行新数据（模拟后端推送），并高亮新行。
使用CSS Grid布局，暗色主题，卡片圆角+阴影。
注意：所有图表和JS逻辑必须自包含，无需外部CDN时提供回退方案。代码完整可直接运行。
高级CSS动画与视觉效果（产品展示页）
适用场景：需要丰富动效吸引眼球的创意页面
创建一个产品展示页面，重点在CSS动画和3D变换：
背景：深色渐变 + 动态漂浮的粒子（使用CSS @keyframes 生成随机移动的圆点）。
中央一个3D卡片，鼠标移入时绕Y轴旋转并放大，卡片内容包含产品图片占位符、标题和按钮。
两个侧边装饰元素：一个滚动进度条（页面滚动时顶部进度条增长），一个“返回顶部”按钮（滚动超过300px出现，平滑返回）。
页面滚动时，不同区块产生淡入上浮的视差效果（使用Intersection Observer或CSS scroll reveal）。
要求：避免过多JS库，尽量用原生CSS/JS，确保60fps流畅度。
背景：深色渐变 + 动态漂浮的粒子（使用CSS @keyframes 生成随机移动的圆点）。
中央一个3D卡片，鼠标移入时绕Y轴旋转并放大，卡片内容包含产品图片占位符、标题和按钮。
两个侧边装饰元素：一个滚动进度条（页面滚动时顶部进度条增长），一个“返回顶部”按钮（滚动超过300px出现，平滑返回）。
页面滚动时，不同区块产生淡入上浮的视差效果（使用Intersection Observer或CSS scroll reveal）。
要求：避免过多JS库，尽量用原生CSS/JS，确保60fps流畅度。
响应式导航 + 深色/浅色主题切换
适用场景：需要主题切换功能的博客或后台框架
生成一个响应式页面模板，核心功能：
顶部导航栏包含：网站标题、三个链接、一个🌞/🌙图标用于切换深色/浅色模式。
内容区：几段示例文本（Lorem Ipsum）、一张响应式图片。
主题切换时，所有颜色（背景、文字、边框、阴影）平滑过渡（transition），并且将用户偏好保存到localStorage，下次访问自动应用。
移动端导航栏变为底部固定Tab栏（主页、搜索、个人），切换高亮。
要求：使用CSS自定义属性（CSS Variables）管理颜色，无任何第三方UI库，纯原生实现。
顶部导航栏包含：网站标题、三个链接、一个🌞/🌙图标用于切换深色/浅色模式。
内容区：几段示例文本（Lorem Ipsum）、一张响应式图片。
主题切换时，所有颜色（背景、文字、边框、阴影）平滑过渡（transition），并且将用户偏好保存到localStorage，下次访问自动应用。
移动端导航栏变为底部固定Tab栏（主页、搜索、个人），切换高亮。
要求：使用CSS自定义属性（CSS Variables）管理颜色，无任何第三方UI库，纯原生实现。
表单验证 + 实时反馈UI（注册/登录页）
适用场景：带即时校验和友好提示的前端表单
请开发一个注册表单（姓名、邮箱、密码、确认密码），具有以下功能：
实时验证（输入时即时检查）：邮箱格式、密码强度（至少8位含大小写数字）、确认密码匹配。
每个字段下方显示验证状态图标（✔️/❌）和提示文本。
提交按钮初始禁用，所有字段通过验证后启用。点击提交时模拟API请求（setTimeout 1秒），显示加载状态，成功后弹出“注册成功”并重置表单。
样式：玻璃态卡片（backdrop-filter模糊），输入框聚焦时发光效果，错误时红色边框。
要求：完全前端逻辑，无后端，提供完整HTML/CSS/JS代码。
实时验证（输入时即时检查）：邮箱格式、密码强度（至少8位含大小写数字）、确认密码匹配。
每个字段下方显示验证状态图标（✔️/❌）和提示文本。
提交按钮初始禁用，所有字段通过验证后启用。点击提交时模拟API请求（setTimeout 1秒），显示加载状态，成功后弹出“注册成功”并重置表单。
样式：玻璃态卡片（backdrop-filter模糊），输入框聚焦时发光效果，错误时红色边框。
要求：完全前端逻辑，无后端，提供完整HTML/CSS/JS代码。
图片画廊 + 懒加载与Lightbox弹窗
适用场景：作品集或电商商品图片展示
创建一个图片网格画廊，要求：
网格布局：每行自适应（最小250px），显示12张占位图片（可用Unsplash占位图或纯色块）。
懒加载：滚动到视口附近时才加载真实图片，使用Intersection Observer实现。
点击任意图片弹出全屏Lightbox模态框，可左右切换图片（带箭头），按ESC关闭。
Lightbox具有背景模糊效果，切换时有淡入淡出动画。
图片加载失败时显示一个默认的错误图标。
额外：顶部有一个“加载更多”按钮，点击追加8张新图片（同样支持懒加载）。
网格布局：每行自适应（最小250px），显示12张占位图片（可用Unsplash占位图或纯色块）。
懒加载：滚动到视口附近时才加载真实图片，使用Intersection Observer实现。
点击任意图片弹出全屏Lightbox模态框，可左右切换图片（带箭头），按ESC关闭。
Lightbox具有背景模糊效果，切换时有淡入淡出动画。
图片加载失败时显示一个默认的错误图标。
额外：顶部有一个“加载更多”按钮，点击追加8张新图片（同样支持懒加载）。
可拖拽排序的列表（看板/任务管理）
适用场景：待办事项或看板式任务管理器
构建一个任务看板，包含三列：“待办”、“进行中”、“已完成”。
每列中有若干卡片（任务标题+描述）。卡片支持拖拽到其他列（使用原生HTML5 Drag-and-Drop API或更平滑的JS库，但优先原生）。
拖拽时卡片半透明，拖拽悬停到目标列时该列背景变浅。
每个卡片右上角有一个删除图标，点击删除卡片。
底部有一个输入框和按钮，可添加新任务到“待办”列（任务标题必填）。
页面刷新后，通过localStorage保存所有卡片的状态（列、顺序、内容）。
要求：代码清晰，移动端触摸拖拽应基本可用（或至少桌面Chrome完美）。
每列中有若干卡片（任务标题+描述）。卡片支持拖拽到其他列（使用原生HTML5 Drag-and-Drop API或更平滑的JS库，但优先原生）。
拖拽时卡片半透明，拖拽悬停到目标列时该列背景变浅。
每个卡片右上角有一个删除图标，点击删除卡片。
底部有一个输入框和按钮，可添加新任务到“待办”列（任务标题必填）。
页面刷新后，通过localStorage保存所有卡片的状态（列、顺序、内容）。
要求：代码清晰，移动端触摸拖拽应基本可用（或至少桌面Chrome完美）。
计时器/番茄钟（Pomodoro） + 通知
适用场景：专注力工具或倒计时应用
开发一个番茄钟计时器，功能包括：
默认25分钟工作，5分钟休息，可自定义时间（通过加减按钮或输入框）。
显示圆形倒计时进度条（SVG或Canvas实现），随时间减少而缩短弧线。
控制按钮：开始、暂停、重置。计时结束时播放一段简单的浏览器蜂鸣声（Web Audio或Audio对象），并弹出桌面通知（需请求权限）。
状态切换：工作时背景色偏冷，休息时背景色偏暖，计时器数字颜色改变。
记录完成的番茄数（计数器）。
要求：使用requestAnimationFrame保证平滑计时，避免setInterval累积误差。提供完整代码。
默认25分钟工作，5分钟休息，可自定义时间（通过加减按钮或输入框）。
显示圆形倒计时进度条（SVG或Canvas实现），随时间减少而缩短弧线。
控制按钮：开始、暂停、重置。计时结束时播放一段简单的浏览器蜂鸣声（Web Audio或Audio对象），并弹出桌面通知（需请求权限）。
状态切换：工作时背景色偏冷，休息时背景色偏暖，计时器数字颜色改变。
记录完成的番茄数（计数器）。
要求：使用requestAnimationFrame保证平滑计时，避免setInterval累积误差。提供完整代码。
文本生成/复制工具（AI风格文本助手）
适用场景：简单工具型页面，如文本格式化、生成器
创建一个文本工具页面，功能：
左侧大文本区（可输入），右侧显示实时字符数、单词数、预计阅读时间。
四个操作按钮：转换为大写、转换为小写、去除多余空格、复制到剪贴板（复制时显示短暂提示“已复制”）。
一个“随机励志名言”按钮：点击后从本地预设数组中取一句名言填充到文本区。
深色模式切换（简单实现即可）。
样式要求：左右两列布局（移动端上下排列），简洁现代，按钮有悬浮反馈。
全部用原生JS实现，无需外部库。
左侧大文本区（可输入），右侧显示实时字符数、单词数、预计阅读时间。
四个操作按钮：转换为大写、转换为小写、去除多余空格、复制到剪贴板（复制时显示短暂提示“已复制”）。
一个“随机励志名言”按钮：点击后从本地预设数组中取一句名言填充到文本区。
深色模式切换（简单实现即可）。
样式要求：左右两列布局（移动端上下排列），简洁现代，按钮有悬浮反馈。
全部用原生JS实现，无需外部库。
全功能滚动触发动画（AOS风格）
适用场景：长滚动页面，元素进入视口时触发动画
编写一个长滚动着陆页（至少4个全屏区块），要求：
每个区块内容不同（文字、图片、图标组合）。
使用Intersection Observer，当元素进入视口时添加类名触发动画：例如从左侧滑入、淡入放大、翻转等，每个区块动画不同。
第一个区块背景是视差滚动效果（背景图片移动速度慢于前景）。
添加一个固定在右下角的“滚动指示器”（显示滚动百分比）。
所有动画只在第一次触发时执行（避免重复触发）。
浏览器兼容性：现代Chrome/Firefox/Safari，优雅降级。提供完整独立HTML文件。
每个区块内容不同（文字、图片、图标组合）。
使用Intersection Observer，当元素进入视口时添加类名触发动画：例如从左侧滑入、淡入放大、翻转等，每个区块动画不同。
第一个区块背景是视差滚动效果（背景图片移动速度慢于前景）。
添加一个固定在右下角的“滚动指示器”（显示滚动百分比）。
所有动画只在第一次触发时执行（避免重复触发）。
浏览器兼容性：现代Chrome/Firefox/Safari，优雅降级。提供完整独立HTML文件。
点赞(15)
评论留言