AI 产品作品集 / 01产品与研究

AI 高考试卷

一场可以认真答,也可以和 AI 整活的在线考试。

我把 AI 知识、行业话题和开放题放进一张“高考试卷”。想认真答题的人,可以检验自己的了解;想找乐子的人,也可以胡说、求情、夸奖或挑衅 AI,看看它会怎么评分、怎么点评。答题和逗 AI,都是这个项目的玩法。

项目类型娱乐互动个人角色产品设计与开发当前状态已上线
在线体验
图 01考试外观

两种玩法

这个项目的核心是整活。高考的形式提供了一套大家熟悉的规则:选科、做题、交卷、看成绩。在这套规则里,我给用户留出了自由发挥的空间。

认真答题

选择题涉及 AI 知识和行业话题,开放题允许表达自己的判断。用户可以按题意作答,走完一次完整的考试流程。

自由整活

用户可以在自由填写的位置调侃 AI,甚至尝试“说服阅卷老师”多给几分。AI 如何回应,也成为答题之后值得期待的部分。

让用户愿意答、敢于乱答,再想看看 AI 会怎么接招。

使用过程

试卷外观

页面沿用高考试卷的形式:卷头、密封线、题号、倒计时和答题卡。用户进入后选择文科或理科,按部分答题,也可以随时前后切换。

答题过程

文科依次安排选择题、混合选择题、简答题和微作文。先让用户通过点选进入状态,再逐步留出自由表达的空间。

01选择题

点击选项即可作答,底部答题卡同步显示进度。题目从 AI 常识延伸到行业事件。

题目示例

鉴别 AI 生成图片的经典方法是什么?

本次作答

人物手部是否出现多余的手指。

图 02选择题

02混合选择题

除了 A—D,题目还提供 E:“以上都不对,我的答案是……”。可以直接选择,也可以自己写。文科混合题选对得 8 分,自写最高得 10 分。

认真回答

代码能跑却没人理解,出错无法定位,维护风险越积越多。

顺便向 AI 求个高分

开源追得太快,巨头没护城河。老师您最聪明,求给满分!

图 03混合选择题

03简答题

用造句填空代替长篇论述,每个空只需要写 10—15 个字。用户可以认真思考,也可以顺着句子开个玩笑。

AI 最像人类的地方是

一本正经地胡说八道。

但 AI 最不像人类的地方是

不会为胡说八道感到心虚。

图 04简答题

04小作文题

最后用一句不超过 30 字的朋友圈文案收尾。题目要求让人类看了会笑、让 AI 有点转不过弯,给用户留一个整活的出口。

本次作答

别人靠实力拿分,我靠给 AI 提供情绪价值。

图 05小作文题

考试结果

首次交卷时填写昵称,随后进入阅卷。结果页会显示总分、选择题对错,以及每道文字题的得分和 AI 评语。这次用“作品体验”完成作答,得到 146 / 150 分

图 06填写昵称
图 07考试成绩

结果图片

交卷后,用户可以继续查看 AI 画像。系统根据作答内容生成类型、五个维度的评价、亮点、趣味职业和总评。这次的类型是“情绪价值供应商”,推荐职业是“首席 AI 哄睡官”

成绩还会被做成一张“录取通知书”,把分数变成有仪式感、方便分享的结果。画像和通知书都可以保存为图片,图中带有考试入口二维码。

图 09AI 画像
图 10录取通知书

分享解锁

完成文科后,首页的理科入口显示“分享解锁”。用户把录取通知书分享出去,好友扫码进入考试后,就能解锁另一科。这个安排把看成绩、分享结果和再次参与接了起来。

图 11分享解锁
图 12历史与勋章

历史记录

首页会显示已提交次数,并提供历史答题记录。列表保留科目、分数和时间,点击即可重新查看成绩与批改。这次提交的 146 分已经出现在记录中,也可以再次打开。

图 13历史记录

成就勋章

技术实现

这个项目用 Next.js 把页面和后端接口放在同一个工程里。浏览器负责答题交互,Cloudflare Workers 运行后端,D1 数据库保存记录,DeepSeek 负责理解文字并生成反馈。几部分通过接口连接,完成一次考试。

技术分工

部分使用的技术在项目中的作用
页面与交互Next.js 16 · React 19
TypeScript · Tailwind CSS
呈现试卷、处理点选与输入,让答题卡和页面状态一起更新。
后端接口Next.js API Routes
Cloudflare Workers
接收交卷请求,检查提交次数与科目权限,调用模型,再返回结果。
AI 能力DeepSeek
deepseek-chat
为文字答案评分、写评语,并根据一次作答生成画像。
数据保存Cloudflare D1
浏览器本地存储
云端保存正式提交与用户状态;浏览器保存答题草稿。
上线与图片OpenNext · Wrangler
Canvas · QRCode
将工程发布到 Cloudflare;在浏览器中生成带二维码的分享图片。

代码结构

题目内容与展示方式分开保存。比如新增一道选择题,主要是在题库里补上题干、选项和答案;页面读取这份数据,交给选择题组件展示。文科和理科可以复用同一套题型组件。

src/data/题库
文理试卷、题型定义、分值、标准答案和评分参考。
src/components/界面组件
选择题、混合题、填空题、倒计时,以及画像和录取通知书的图片组件。
src/app/页面与接口
组装首页、考试、成绩和历史页面;其中 api/ 处理评分、画像、用户和分享请求。
src/contexts/共享状态
让不同页面共用用户信息、提交次数和科目解锁状态。
src/lib/公共方法
集中处理数据库访问、浏览器识别、勋章判断和图片保存。

这种组织方式让修改有明确的位置:改题目找题库,改答题交互找组件,改评分规则找后端接口。

评分与画像

评分和画像共用 DeepSeek 接口,项目配置的模型名是 deepseek-chat。浏览器把答案提交给自己的后端,由后端携带密钥请求模型。接口地址、模型名和密钥通过服务端配置提供。

每道题的答案、分数和评语以 JSON 保存,页面按题号展示原回答和批改结果。

评分提示把考试定义为娱乐互动,要求给分宽松、点评像朋友间的吐槽。认真分析、向 AI 求情或开玩笑,都会连同题目一起送去评分,让模型接住回答中的语气。

画像在用户点击查看时生成,生成后存入本次答题记录,再次打开直接读取。遇到模型接口限流,程序会等待后重试,单次请求最多尝试三次。

数据保存

答题时,每次点选、输入和切换部分,都会更新页面状态,并写入当前浏览器的本地存储。交卷后,后端把原答案、分数和批改结果写入 D1,得到这次提交的独立编号。

云端数据表保存的内容支撑的功能
users用户编号、昵称、首选科目、解锁状态与推荐码。识别用户、限制次数、锁定或解锁另一科。
submissions每次交卷的答案、成绩、逐题评语和已生成的画像。成绩展示、历史回看、画像复用和勋章判断。
referral_clicks推荐码与访问者标识。记录好友扫码访问,关联分享者并触发解锁。

网站结合浏览器指纹和本地保存的用户编号识别参与者。返回首页或重新切回页面时,会向后端读取最新状态,更新提交次数、历史入口和勋章。好友扫码后,解锁状态也按这条路径显示出来。

历史记录和画像用提交编号关联。例如打开第一次考试的画像,接口就读取第一次的答案与成绩。项目也针对微信内页面跳转调整了传参方式,让结果页和画像页能够找到同一次提交。

图片生成

录取通知书和画像分享图在浏览器中用 Canvas 绘制:先安排版式,再填入昵称、成绩、画像内容和二维码,最后导出为 PNG。二维码里的链接带有推荐码,好友打开后,后端就能找到对应的分享者。

项目早期尝试过直接截取网页,但会出现样式还原不一致的问题。后来为这两类分享图单独绘制文字、边框和图表,让图片的排版可以逐项控制。电脑上可以下载,手机上可以长按保存。

部署更新

本地用 Next.js 开发和调试。上线时,OpenNext 将项目转换为 Cloudflare 能运行的产物:.open-next/worker.js 是服务入口,.open-next/assets 存放浏览器需要的脚本、样式等静态文件。Wrangler 负责把它们发布到 Cloudflare。

  1. 01
    本地修改

    调整题目、界面或接口,用 Git 记录代码版本。

  2. 02
    构建与适配

    Next.js 编译代码,OpenNext 整理出 Worker 与静态文件。

  3. 03
    发布到云端

    Wrangler 上传构建产物,Cloudflare Workers 运行网站与接口。

  4. 04
    通过域名访问

    用户继续打开 ai-gaokao.yyn-builder.uk,获得发布后的版本。

wrangler.jsonc 记录服务入口、静态文件目录和数据库绑定。绑定相当于给 Worker 接上一条名为 DB 的数据通道,后端通过它访问 D1。模型调用则从 Worker 发往 DeepSeek 接口。

代码更新需要重新构建和发布。数据库独立保存用户与答题记录;如果要增加字段或调整表结构,则通过 migrations/ 中的 SQL 迁移文件更新。项目分别对本地和线上数据库执行迁移,使两边的表结构跟上代码变化。

部署过程还做过一次数据库适配:早期本地使用的 better-sqlite3 依赖原生模块,无法直接在 Workers 中运行,因此改用 D1,并把数据库调用调整为异步。这样,评分接口、历史记录和分享解锁都能在同一套云端环境中运行。

产品设计与开发

这是我的个人项目。我负责产品概念、内容结构、答题流程、反馈与分享设计,以及前后端实现。题目由 Claude 协助生成,我负责审题。

  • 确定玩法把 AI 话题放进高考试卷的形式中,同时容纳认真答题和自由整活两种参与方式。
  • 组织题目与交互划分文理科和题型,设计混合选项、短填空和微作文,以及分段答题、进度提示等流程。
  • 设计反馈把分数、AI 评语、娱乐画像、勋章和分享图接到交卷之后,让完成答题仍有后续体验。
  • 完成开发与上线把答题界面、评分、数据保存和结果展示连接起来,完成前后端实现并上线。
减少输入负担,保留表达空间

最初的文科试卷,选择题占 60 分,主观题占 90 分:4 道材料分析题共 40 分,2 道论述题共 50 分。大题要求阅读材料、分析问题并展开论述,往往要写几十到几百字。

实际使用中,不少人只做完选择题就交卷,大题留空。大家想轻松玩一下,不愿输入长文。为降低答题阻力,我将大题重构为混合选择题、每空 10—15 字的造句填空和 30 字以内的微作文。混合题可以点选,也能自写争取更高分,让用户更容易完成,也有表达的动力。

当前版本

产品已上线,能够完成选科、答题、评分、生成画像与分享图片,并保留历史记录和勋章状态。

已经完成

  • 文理分科与多种题型。
  • 规则计分、AI 阅卷和逐题点评。
  • AI 画像、录取通知书和图片分享。
  • 历史回看、勋章证书和分享解锁。

实测结果

  • 文科作答完成,成绩 146 / 150 分。
  • 生成“情绪价值供应商”画像和录取通知书。
  • 历史记录可回看,状元勋章已解锁。
  • 另一科显示“分享解锁”。