1. 项目背景与需求分析
最近在准备一个教学演示项目，需要开发一个学生成绩管理系统的前端界面原型。作为前端开发者，我决定尝试使用AI辅助工具来快速生成基础页面框架。这个系统需要包含两个核心页面：
- 用户登录页面 - 提供账号密码输入和登录功能
- 成绩管理页面 - 展示学生成绩数据并提供编辑功能
选择使用DeepSeek作为生成工具的原因主要有三点：
- 支持在线实时预览生成效果
- 能够根据反馈进行迭代优化
- 生成的代码结构清晰易于后续开发
注意：虽然市面上有更炫酷的国外AI工具，但考虑到网络稳定性和中文支持度，最终选择了国产的DeepSeek模型。
2. 页面设计与生成过程
2.1 初始方案与问题发现
第一轮提示词设计如下：
plaintext复制用html和css编写一个学生成绩管理系统的网站页面，不涉及js逻辑。共有两个页面，一个是用户登录，一个是学生成绩展示和编辑的页面。要求界面风格简洁大方，以蓝色为主色调
生成的页面存在一个主要问题：将登录和管理界面合并成了一个页面，通过标签页切换。这与我们期望的独立页面设计不符。
问题分析：
- AI可能将"两个页面"理解为功能模块而非物理页面
- 默认采用了SPA(Single Page Application)的设计模式
- 标签页切换方式不适合登录流程的实际场景
2.2 页面分离与结构调整
第二轮提示词明确要求分离页面：
plaintext复制将上述页面分解成两个页面，共享的css设置分别存在各自的页面中
这次生成了独立的login.html和manage.html，但登录页面仍包含多余元素：
- 顶部导航标签（不符合登录页面的独立性要求）
- 过多的说明文字（影响界面简洁性）
- 演示账号信息（不适合正式场景）
2.3 登录页面优化迭代
通过多轮调整逐步简化登录页面：
第三轮提示词：
plaintext复制修改最新的login.html，去除页面上方，学生成绩管理系统的"登录"和"成绩管理"切换的部分
第四轮提示词：
plaintext复制修改login.html，去除"简洁高效的学生成绩管理与分析平台"的字样；去除"这是一个静态演示页面..."说明的字样，去除演示账号信息
最终得到的登录页面包含：
- 简洁的标题"学生成绩管理系统"
- 账号密码输入框
- 登录按钮
- 蓝色主色调的简约设计
2.4 管理页面布局改造
管理页面的初始版本将统计信息和成绩编辑混合展示，不符合实际使用场景。通过以下调整优化：
第五轮提示词：
plaintext复制改造manage.html，有两个标签页组成，标签页"统计卡片"，并将统计卡片的页面部分移入该标签页，学生成绩展示和编辑部分则移入第二个标签页"成绩管理"
第六轮提示词进一步优化：
plaintext复制修改manage.html，去除顶部"登录"，"成绩管理"的字样；将"统计卡片"，"成绩管理"标签页更改为左右横向分布
最终管理页面特点：
- 清晰的标签页导航（统计卡片 | 成绩管理）
- 统计卡片页展示关键指标数据
- 成绩管理页提供表格形式的成绩展示和编辑
- 横向标签布局更符合现代UI设计趋势
3. 核心代码实现解析
3.1 登录页面关键代码
html复制<!-- 登录表单结构 -->
<div class="login-container">
<h1>学生成绩管理系统</h1>
<form class="login-form">
<div class="form-group">
<label for="username">账号</label>
<input type="text" id="username" placeholder="请输入账号">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
</div>
css复制/* 蓝色主题样式 */
.login-container {
background: #f5f9ff;
border: 1px solid #d0e3ff;
}
.login-btn {
background: #1890ff;
color: white;
}
.login-btn:hover {
background: #40a9ff;
}
3.2 管理页面标签页实现
html复制<!-- 标签页导航 -->
<div class="tab-nav">
<button class="tab-btn active" data-tab="stats">统计卡片</button>
<button class="tab-btn" data-tab="grades">成绩管理</button>
</div>
<!-- 标签页内容 -->
<div class="tab-content">
<div id="stats" class="tab-pane active">
<!-- 统计卡片内容 -->
</div>
<div id="grades" class="tab-pane">
<!-- 成绩表格 -->
<table class="grade-table">
<!-- 表格内容 -->
</table>
</div>
</div>
css复制/* 横向标签样式 */
.tab-nav {
display: flex;
border-bottom: 1px solid #eee;
}
.tab-btn {
padding: 12px 24px;
background: none;
border: none;
cursor: pointer;
}
.tab-btn.active {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
4. 开发经验与实用技巧
4.1 AI辅助开发的注意事项
-
提示词设计技巧：
- 先描述整体需求，再逐步细化
- 明确区分"页面"和"功能模块"的概念
- 对不满意的部分要具体指出问题所在
-
样式调整建议：
- 首先生成基础框架，再微调细节
- 颜色、间距等样式最好单独提出修改要求
- 保留AI生成的CSS类名便于后续维护
-
结构优化经验：
- 先确定页面关系（独立页面/单页应用）
- 再规划每个页面的功能区域划分
- 最后调整细节布局和交互方式
4.2 常见问题解决方案
问题1：AI生成的页面元素不符合预期
- 解决方案：在提示词中明确排除不需要的元素，如：
plaintext复制
去除所有演示账号信息 不要包含任何导航菜单
问题2：样式不符合设计规范
- 解决方案：提供具体的样式要求：
plaintext复制
主色调使用#1890ff 按钮悬停颜色加深20% 表单间距统一为16px
问题3：布局方式不理想
- 解决方案：明确指定布局方式：
plaintext复制
使用flex布局实现水平排列 标签页采用横向分布 表格宽度设置为100%
4.3 后续开发建议
-
交互功能开发：
- 使用JavaScript实现标签页切换
- 添加表单验证逻辑
- 实现表格的编辑功能
-
响应式优化：
- 添加媒体查询适配移动设备
- 调整表格在小屏幕下的显示方式
- 优化登录页面的移动端布局
-
后端对接准备：
- 设计API接口数据结构
- 预留AJAX请求的代码位置
- 规划状态管理方案
5. 项目总结与效果评估
经过六轮提示词调整，最终获得了符合要求的静态页面：
登录页面效果：
- 纯净的登录表单
- 无多余信息和导航元素
- 蓝色主题符合系统定位
管理页面特点：
- 清晰的标签页导航
- 统计视图与编辑视图分离
- 专业的数据表格展示
开发效率评估：
- 总耗时约2小时（包括调整和评估时间）
- 相比手工编码节省约70%时间
- 基础UI框架完成度达90%
实操心得：AI生成代码最适合用于搭建基础框架和原型开发，但细节调整仍需开发者参与。合理设计提示词和分阶段调整是提高效率的关键。