使用AI工具快速开发学生成绩管理系统前端原型

1. 项目背景与需求分析

最近在准备一个教学演示项目，需要开发一个学生成绩管理系统的前端界面原型。作为前端开发者，我决定尝试使用AI辅助工具来快速生成基础页面框架。这个系统需要包含两个核心页面：

1. 用户登录页面 - 提供账号密码输入和登录功能
2. 成绩管理页面 - 展示学生成绩数据并提供编辑功能

选择使用DeepSeek作为生成工具的原因主要有三点：

• 支持在线实时预览生成效果
• 能够根据反馈进行迭代优化
• 生成的代码结构清晰易于后续开发

注意：虽然市面上有更炫酷的国外AI工具，但考虑到网络稳定性和中文支持度，最终选择了国产的DeepSeek模型。

2. 页面设计与生成过程

2.1 初始方案与问题发现

第一轮提示词设计如下：

plaintext复制用html和css编写一个学生成绩管理系统的网站页面，不涉及js逻辑。共有两个页面，一个是用户登录，一个是学生成绩展示和编辑的页面。要求界面风格简洁大方，以蓝色为主色调

生成的页面存在一个主要问题：将登录和管理界面合并成了一个页面，通过标签页切换。这与我们期望的独立页面设计不符。

问题分析：

1. AI可能将"两个页面"理解为功能模块而非物理页面
2. 默认采用了SPA(Single Page Application)的设计模式
3. 标签页切换方式不适合登录流程的实际场景

2.2 页面分离与结构调整

第二轮提示词明确要求分离页面：

plaintext复制将上述页面分解成两个页面，共享的css设置分别存在各自的页面中

这次生成了独立的login.html和manage.html，但登录页面仍包含多余元素：

1. 顶部导航标签（不符合登录页面的独立性要求）
2. 过多的说明文字（影响界面简洁性）
3. 演示账号信息（不适合正式场景）

2.3 登录页面优化迭代

通过多轮调整逐步简化登录页面：

第三轮提示词：

plaintext复制修改最新的login.html，去除页面上方，学生成绩管理系统的"登录"和"成绩管理"切换的部分

第四轮提示词：

plaintext复制修改login.html，去除"简洁高效的学生成绩管理与分析平台"的字样；去除"这是一个静态演示页面..."说明的字样，