大模型直接生成前端页面口令指南

基于多年一线开发经验我整理了五组前端页面开发提示词。这些案例均脱胎于真实项目需求难度跨度从基础布局到复杂数据交互细节详实可直接作为独立的前端开发任务执行。提示词一个人作品集画廊简单使用 HTML/CSS/原生 JavaScript 构建一个响应式个人作品集页面。页面结构包括顶部导航栏含首页、作品、关于链接、作品展示区至少6个项目每项包含标题、简述及占位图、页脚版权信息。作品卡片采用网格布局适配桌面端3列、平板2列、手机1列。交互上悬停仅改变卡片边框颜色为品牌色如 #3b82f6并微调背景亮度filter: brightness(0.98)禁止位移或翻转效果。导航点击需实现平滑滚动至对应区块无需路由机制。“关于”区域展示个人简介及技能标签使用 span 配合圆角背景。所有数据硬编码于 JS 数组中无需 localStorage 或后端支持。配色需保持整体和谐无需适配深色模式亦无需复杂动效。提示词二任务待办看板中等开发一款支持“待处理”“进行中”“已完成”三列的任务看板工具。任务以卡片形式展示数据持久化存储于 localStorage初始化时预置至少5条示例任务。核心功能包括- 新增任务点击全局按钮弹出无动画模态框输入标题、描述并选择所属列表单需校验非空。- 编辑任务点击卡片编辑图标弹出模态框修改标题、描述或所属列。- 删除任务点击卡片删除按钮直接移除无需二次确认。- 拖拽排序支持将任务卡片拖拽至其他列使用原生 HTML Drag and Drop API 或基于鼠标事件的简易拖拽方案状态变更后需同步更新 localStorage。- 统计显示每列顶部实时显示该列任务数量。界面规范列采用 flex 横向布局卡片具备浅灰背景与圆角按钮悬停变色。所有操作模态框显隐、列表刷新均无过渡动画。代码需自包含不依赖第三方 UI 库但可引入 FontAwesome 等图标库。提示词三活动报名表单与名单管理中等构建纯前端活动报名管理系统数据依托 localStorage 存储。系统包含报名表单与已报名名单两个主要视图。1. 报名表单字段涵盖姓名必填2-10字符、手机号必填11位数字正则校验、邮箱可选格式校验、参加人数1-5数字选择器及备注文本域。提交时需校验数据通过后存入 localStorage 的 attendees 数组并给出成功提示可选择清空表单或保留。需拦截重复手机号提交并提示“该手机号已报名”。2. 已报名名单以表格形式展示所有记录列包括姓名、手机号、邮箱、参加人数、备注及操作删除。支持按姓名或手机号进行实时模糊搜索。删除单条记录时需调用原生 confirm 弹窗二次确认。名单上方需动态显示总报名人数及总参加人数各记录参加人数之和。界面规范表单与名单上下布局。表单采用卡片式设计表单项垂直排列提交按钮具备悬停效果。表格需适配移动端支持横向滚动。全程使用原生 JavaScript不依赖任何框架无复杂动效。提示词四销售数据仪表盘复杂开发“区域销售分析仪表盘”数据源自内置硬编码数据集至少50条记录严禁使用后端或外部 API。数据结构salesData 数组每条记录包含日期2025年内随机、区域东/南/西/北、城市每区2-3个、产品类别电子/家具/办公、销售额100-5000元、销售代表。功能要求- 关键指标展示总销售额、总订单数、平均销售额及销售最多产品类别。- 图表可视化使用 ECharts 或 Chart.js关闭所有入场及过渡动画1. 柱状图各区域总销售额。2. 折线图按月聚合的总销售额趋势。3. 饼图各产品类别销售额占比。- 多级联动筛选- 区域下拉全部/各分区。- 城市下拉根据所选区域动态加载对应城市含“全部”若选“全部”区域则禁用或提示先选区域。- 产品类别下拉全部/各类别。- 日期范围选择器起始与结束日期可选。- 联动逻辑筛选条件变更时关键指标、图表及下方汇总表格需同步更新。图表重绘时无动画。汇总表格展示筛选后记录支持点击表头对销售额进行升序/降序排序。- 其他提供“重置筛选”按钮恢复初始状态。页面布局需整洁图表容器需响应式自适应。鉴于数据量较小无需虚拟滚动但需确保筛选排序操作流畅。提示词五员工绩效评估面板复杂开发员工绩效管理面板数据源为用户导入的 JSON 文件非后端。1. 文件导入提供“上传 JSON”按钮接受包含员工对象数组的 .json 文件。对象字段包括id、姓名、部门技术/市场/销售/人事、职位、入职年份2020-2025、季度绩效Q1-Q40-100整数、年度目标完成率百分比。页面需提供“下载模板”按钮生成默认示例 JSON 供测试。2. 数据展示导入后数据存于内存刷新即失展示以下内容- 统计卡片总员工数、各部门人数、全公司平均绩效分四季度均值之平均。- 交互式表格展示姓名、部门、职位、入职年份、年度平均绩效保留一位小数、目标完成率。支持按部门下拉筛选、绩效分数范围筛选最小/最大值输入框及姓名实时模糊搜索。筛选结果需同步更新统计卡片。- 图表区使用 Chart.js 或 ECharts 展示“各部门平均绩效对比”柱状图及“绩效分布直方图”分段统计0-59, 60-69, 70-79, 80-89, 90-100。图表初始化无入场动画。3. 详情交互点击表格行在右侧或无动画模态框中显示员工详情包含基于四季度分数的绩效雷达图可使用原生 Canvas 或图表库绘制无复杂动效。4. 其他要求无后端无持久化存储。提供清除数据按钮以重新上传。界面需整洁表格行悬停有背景色变化。禁止使用需 API Key 的服务。图表库通过 CDN 引用。若未上传文件页面需展示默认示例数据避免空白。