GitHub仓库：https://github.com/boshi-xixixi/english-exam-generator
1、Skill 简介
这是一个对话式智能英语出题系统，你只需要用自然语言告诉 AI 你想要什么类型的英语题（比如"帮我出 10 道过去时选择题"），它就会自动生成高质量题目，并直接输出一个美观的在线答题网页——打开就能做题，带计时、自动评分、对错检查。适合英语学习者、教师、自学者使用。
一句话总结： 像跟家教聊天一样简单，AI 帮你出卷子，做完立刻知道对错。
2、使用场景
为什么想做它？
我自己在学英语的时候，经常遇到这些问题：
- 想练习某个语法点（比如虚拟语气、定语从句），但网上找的题目要么太简单要么太难
- 想要一套完整的模拟试卷，但市面上的 APP 要么要付费，要么广告满天飞
- 自己出题太麻烦，要找题库、排版、还要想办法批改
我就想：既然有 AI，为什么不能让它帮我出题呢？
之前遇到的麻烦
场景 1：自己找题
- 打开多个网站搜索"过去时练习题"
- 复制粘贴到 Word 里排版
- 自己做一遍（因为不知道答案）
- 花费时间：30-60 分钟
场景 2：用在线题库
- 注册账号、看广告、付费解锁
- 题目质量参差不齐
- 不能自定义难度和题型
- 体验差，还浪费时间
场景 3：用传统试卷生成器
- 需要手动配置题型、数量、时间
- 界面丑陋，像 10 年前的产品
- 题目是固定的模板，没有智能性
- 感觉不像"AI 时代"的工具
现在能省掉的动作
使用前： 找题 + 排版 + 做答案 = 30-60 分钟
使用后： 对话 10 秒 + AI 生成 3 秒 = 13 秒
效率提升：99%+
而且：
题目实时生成，每次都不同- 完全免费，无广告
- 界面精美，青绿色调，看着舒服
- 自动计时和评分，不用人工批改
3、创作过程
技术选型
| 技术 | 选择 | 原因 |
|---|---|---|
| 前端框架 | 纯 HTML/CSS/JS | 无依赖，单文件即可运行 |
| 字体 | DM Sans + Fraunces | 现代、学术感、易读 |
| 配色 | Teal（青绿）色系 | 清新、护眼、不俗套 |
| 动画 | CSS Animations | 流畅、轻量、不卡顿 |
| 出题引擎 | AI 对话式生成 | 灵活、智能、可定制 |
核心功能实现
功能 1：对话式需求收集
不是让用户填表单，而是像聊天一样收集需求：
为什么这样做？
- 降低使用门槛（不需要理解"配置"概念）
- 更自然（符合人类沟通习惯）
- 更灵活（可以随时调整需求）
功能 2：AI 智能出题
根据用户需求，调用 AI 能力实时生成高质量题目：
出题质量保证：
- 语法正确
- 选项干扰项合理（不会一眼看出答案）
- 难度匹配用户选择
- 涵盖不同知识点
功能 3：纯试卷界面（无配置面板）
这是我最满意的设计决策！
最初版本有一个"考试配置页面"，让用户选择题型、数量、时间等。但我发现：
真正的智能工具，不应该让用户做配置。
所以我把配置页面完全移除了：
现在的流程：
打开网页 → 看到完整试卷 → 直接答题 → 提交查看成绩
就像拿到一张真实的纸质试卷！
功能 4：美观的中文界面
设计原则：
除题目本身外，所有 UI 文字都是中文
配色清新（青绿色 Teal #0D9488）
完美响应式（手机/平板/电脑）
流畅动画（滑入、脉冲、抖动反馈）
配色方案：
:root {
--primary: #0D9488; /* 主色调：青绿色 */
--primary-light: #14B8A6; /* 浅色变体 */
--success: #10B981; /* 正确：翠绿色 */
--danger: #EF4444; /* 错误：柔和红 */
--bg-main: #F8FAFB; /* 背景：温暖白 */
}
为什么选青绿色？
- 不俗套（告别紫色渐变）
- 护眼（长时间做题不累）
- 专业（有学术感）
- 清新（让人心情好）
4、使用步骤
方法 1：通过 SOLO 对话触发（推荐）
Step 1: 在 SOLO 中说：
“帮我生成一个英语试卷”
或更具体：
Step 2: AI 会与你对话确认需求（题型、数量、难度、时间）“帮我出 15 道关于虚拟语气的选择题，高级难度，40 分钟”
Step 3: AI 自动生成题目并注入到 HTML 文件中
Step 4: 启动本地服务器或直接打开文件
Step 5: 开始答题！
5、效果展示
界面截图描述
试卷首页（无题目状态）
当还没有注入题目时，界面显示：
- 顶部标题：“英语试卷”
- 副标题：“请认真作答，祝您取得好成绩！”
- 状态栏：计时器（00:00:00）+ 进度条（0/0）
- 中央区域：友好的提示卡片
图标（大号）- “暂无题目” 标题
- “请通过 AI 助手生成试卷题目” 说明文字
设计感： 简洁、留白充足、不空旷
答题界面（已注入题目）
注入题目后的界面：
- 顶部： 标题 + 状态栏（计时器运行中 + 进度条更新）
- 题目区域：
- 每道题是一个白色卡片
- 左上角：绿色圆角数字序号（1, 2, 3…）
- 右侧：题型标签（单选题/多选题/填空题/阅读理解）
- 题目文字（英文）
- 选项列表（点击选择，选中后变青绿色）
- 底部：
- 提交试卷（绿色按钮）
重新开始（橙色按钮）
交互体验：
- 点击选项 → 平滑过渡 + 青绿色高亮
- 填空题 → 输入框聚焦时边框变色
- 多选题 → 方框 ☐ 变为
成绩展示页
提交后的结果面板：
- 背景： 渐变青绿色（#0D9488 → #115E59）
- 动态效果： 背景旋转光晕动画
- 内容：
- 图标（弹跳动画）
- “考试完成！” 标题
- 大号分数（如 “85%”，5.5em 字号）
- 详细统计卡片（半透明毛玻璃效果）：
- 正确：X 题
错误：X 题
用时：XX:XX:XX
正确率：XX%
- 等级评价（如 “
表现出色！”） - “再来一次” 按钮（白色，青绿色文字）
视觉冲击： 分数超大、渐变背景、动态光晕 → 仪式感拉满
用户体验：
- 对话结束 → 网页自动刷新
- 看到 5 道精美的题目卡片
- 点击选项 → 选中高亮
- 全部答完 → 点击"提交试卷"
- 看到成绩：80% 表现出色！
- 错题红色标记，正确答案绿色显示
性能提升对比
| 维度 | 传统方式 | 使用本 Skill |
|---|---|---|
| 出题时间 | 30-60 分钟 | 10 秒（对话）+ 3 秒（生成） |
| 题目质量 | 参差不齐 | AI 保证质量 |
| 界面美观度 | 丑陋/过时 | 现代/专业 |
| 批改方式 | 手动/查答案 | 自动评分 |
| 费用 | 付费/广告 | 完全免费 |
| 可定制性 | 低（固定题库） | 高（任意主题/难度） |
综合效率提升：99%+
6、Skill 链接
GitHub仓库：https://github.com/boshi-xixixi/english-exam-generator
7、总结与思考
收获
通过创作这个 Skill，我深刻体会到：
1. AI 的真正价值是"降低门槛"
以前出题需要：
- 懂教学设计
- 有题库资源
- 会排版工具
- 花大量时间
现在只需要：
- 会说人话（告诉 AI 你想要什么）
这不是"替代人类"，而是让每个人都能成为自己的出题老师。
2. 好的工具应该"消失"在体验中
最初版本有配置页面，用户要选题型、数量、时间…这很"工具化"。
后来我去掉了配置页面，改为纯试卷模式——打开就是一张卷子，直接做题。
用户甚至感觉不到这是一个"工具"，而像是拿到了一张专门为自己准备的试卷。
这才是好的产品设计：工具隐形，价值显形。
3. 界面美学很重要
很多人觉得"功能优先，界面无所谓"。但我的体会是：
- 好看的界面会让用户更愿意使用
- 清新的配色能让长时间学习不疲劳
- 流畅的动画能提供即时反馈，增加满足感
技术实现只占 50%，另外 50% 是审美和体验。
最满意的地方
对话式交互 - 不是填表单，而是聊天，门槛极低
纯试卷模式 - 去掉配置页面，打开即答，简洁有力
青绿色配色 - 告别俗套紫色，清新护眼，有辨识度
零依赖架构 - 单个 HTML 文件，无需安装，离线可用
完整功能闭环 - 出题 → 答题 → 计时 → 评分 → 对错检查，一气呵成
希望获得的反馈
欢迎大家体验并提出建议！特别想了解：
- 对话交互是否自然？ - 是否真的比填表单好用？
- 出题质量如何？ - AI 生成的题目是否有难度区分？
- 界面是否好看？ - 青绿色调是否符合你的审美？
- 还有什么功能是你想要的？ - 我会优先实现高频需求！
一句话总结
从"我想练英语"到"开始做题"，中间只隔了一句对话。这就是 AI 时代的学习方式。
