【Code With SOLO】用SOLO开发一个1-6年级小学数学题生成器！！！

汤圆 · 2026 年4 月 13 日 07:16

摘要

这次我用SOLO解决了一个朋友们普遍头疼的问题：给孩子找数学练习题。市面上现成的工具要么广告满天飞，要么排版乱七八糟打印出来没法写，要么还得扫码关注各种公众号。所以我干脆自己动手，用 SOLO 快速写了一个纯前端的数学题生成器。这东西完全跑在浏览器里，不用注册、没有后端、没有广告。它能一键生成符合1到6年级大纲的数学题，不仅支持各种参数微调，还能完美适配A4纸的排版，直接打印或者导出高清PDF。这几天的试用下来，我发现出题效率起码翻了好几倍，关键是看着干干净净的界面，心情舒畅多了。

背景

平时经常会听到身边当了家长的朋友抱怨，每天给孩子找口算和应用题练习简直是个折磨。

买厚厚的练习册吧，很难针对孩子最近的薄弱项进行专项训练（比如想专门出几道“带小括号的混合运算”）；去网上的在线工具搜吧，点开一个页面，先跳三个弹窗，好不容易生成了题目，点击打印，排版挤成一团，连个手写的草稿空间都没有。

我就寻思着：这东西逻辑不复杂，无非就是个随机数生成加上前端排版，为什么不自己搞一个干干净净、指哪打哪的工具，免费提供给大家用呢？既然现在有了 SOLO，我干脆就把详细的需求写成文档，看看它能不能帮我把这个繁琐的活给包圆了。

演示地址： https://sxt.mancs.cn/

实践过程

最开始，我并没有直接让 SOLO 给我写代码。写过前端的都知道，一旦涉及“打印适配”和“A4纸排版”，CSS的坑多到让人怀疑人生。所以我先把需求理得非常细，整理成了一份长长的 Markdown 文档，包括年级题型的分类、难度层级的要求、排版的硬性指标（比如不能出现滚动条、多页A4要横向并排显示）等等。

1-6年级数学题生成器（纯前端版）完整需求文档 
 
 一、项目核心定位 
 
 本项目为纯前端网页应用，无需后端服务器支撑，所有数据（配置、题目、历史记录）均存储在浏览器本地（localStorage），无需注册、无需登录、无任何广告，打开即用。专为小学1-6年级家长、老师设计，可一键生成符合人教版/苏教版/北师大版通用教学大纲的数学练习题，生成题目严格适配A4纸张标准，排版美观，支持直接打印、PDF导出、图片导出，操作极简，实现零门槛使用。 
 
 核心目标：解决家长辅导、老师出题的效率问题，提供“选题-设参-生成-打印/导出”一站式服务，确保生成内容贴合课标、排版规范、使用便捷。 
 
 二、核心功能需求 
 
 （一）年级与题型选择模块 
 
 - 年级选择：支持小学1-6年级全年级独立选择，仅支持单年级出题，不支持跨年级混合出题，选择年级后自动匹配对应课标题型。 
 
 - 题型匹配（固定适配各年级教学大纲，不允许超纲）： 
          
 
   - 1年级：20以内加减法、100以内加减法、简单人民币认知、钟表认读、简单应用题 
 
   - 2年级：表内乘除法、1000以内加减法、长度单位换算、两步混合运算、基础应用题 
 
   - 3年级：两位数乘除法、小数初步认识、分数初步认识、周长面积计算、四则混合运算 
 
   - 4年级：大数认识、三位数乘两位数、除数是两位数的除法、小数加减法、运算定律、角度计算 
 
   - 5年级：小数乘除法、分数加减法、长方体正方体表面积/体积、方程初步、因数倍数 
 
   - 6年级：分数乘除法、百分数、比例、圆的周长面积、圆柱圆锥、综合应用题 
 
 - 题型选择：支持题型单选、多选，可自由组合出题（例：1年级仅选择20以内加减法出题），未勾选题型不生成对应题目。 
 
 （二）题目参数自定义模块 
 
 - 题目数量设置：支持自定义输入题量（范围10-100道），同时提供20道、50道、100道快捷选项，点击快捷选项可快速设置，默认题量为20道（确保默认题量可完整容纳在1张A4纸内）。 
 
 - 题目难度分级：每个年级均分为基础、提升、拓展三档难度，难度差异贴合对应年级课标要求： 
          
 
   - 基础档：课本同步简单题，侧重基础知识点巩固，无复杂计算、无变式 
 
   - 提升档：包含带小括号运算、两步计算、简单变式题，侧重知识点灵活运用 
 
   - 拓展档：易错题型、综合应用题，侧重知识点综合运用，贴合期末复习难度 
 
 - 排版设置（核心优化，解决间距固定问题）： 
          
 
   - A4版式：支持横版、竖版两种打印格式，横版默认3-4列题目，竖版默认2-3列题目 
 
   - 间距设置：支持自定义每题空行大小（可拖动调节或输入数值），调节后实时生效，刷新预览效果，无固定大间距问题，确保手写答题空间充足且排版美观 
 
   - 细节设置：支持开关题号显示、开关答题区域预留，勾选答题区域后，每题下方自动预留适配手写的空白区域 
 
 - 去重设置：系统自动检测并避免生成重复题目，确保每次生成的题目唯一性，提升练习价值。 
 
 （三）题目生成与预览模块（核心优化，解决滚动条、分页问题） 
 
 - 一键生成：选择年级、题型、参数后，点击「生成题目」按钮，1秒内完成题目生成，立即展示预览效果，所见即所得。 
 
 - 实时预览： 
 
 
   - 预览区域无任何上下、左右滚动条，完整展示A4页面内容，A4尺寸严格遵循210mm×297mm标准 
 
   - 单张A4：默认生成题目控制在1张A4纸内，排版紧凑美观，无多余空白、无内容溢出 
 
   - 多张A4：若题量超出1张A4纸容纳范围，自动拆分生成独立A4页面，多张A4纸横向并排展示，每张页面独立分隔（带明显边框区分），不粘连、不重叠，禁止将一道题目拆分在两页 
 
 - 答案生成：支持两种模式，可自由切换：① 题目与答案分开生成（试卷页+答案页，各为独立A4页面）；② 题目附带答案（答案紧跟对应题目下方，适配A4排版）。 
 
 - 刷新重出：若对生成题目不满意，点击「刷新重出」按钮，可一键重新生成题目，替换原有内容，新生成题目仍遵循当前设置的参数和A4排版规范。 
 
 （四）本地存储模块 
 
 - 本地缓存：所有生成的题目配置（年级、题型、题量、难度、排版参数）、题目内容、答案，均通过浏览器localStorage永久存储，关闭网页、重启浏览器后数据不丢失。 
 
 - 历史记录：自动保存最近10次生成的题目记录，每条记录标注生成日期、年级、题量，可一键加载历史记录，无需重新设置参数，直接预览、打印对应题目。 
 
 - 配置记忆：自动记住上一次使用时选择的所有参数（年级、题型、题量、难度、排版、间距等），下次打开网页时自动加载，无需重复设置，提升使用效率。 
 
 （五）打印与导出模块（核心优化，解决导出异常问题） 
 
 - A4适配：生成的题目、答案严格按照A4纸尺寸排版，遵循标准打印边距，无内容溢出、无空白浪费，预览效果与打印效果完全一致。 
 
 - 一键打印：调用浏览器原生打印功能，打印时自动隐藏网页所有操作按钮、导航栏，仅打印题目区域，打印内容无水印、无广告、无任何多余元素，干净整洁。 
 
 - PDF导出：使用html2pdf.js实现，导出的PDF文件为标准A4尺寸（210mm×297mm），无内容截断、无变形、无滚动条残留，可直接在PDF阅读器打开、打印，支持单页/多页PDF导出（与预览的A4页面一致）。 
 
 - 图片导出：使用html-to-image实现，导出高清A4尺寸图片，图片内容与预览一致，无缺失、无模糊、无滚动条，支持单张/多张图片导出（每张A4对应1张图片），可用于分享、打印。 
 
 （六）界面操作需求 
 
 - 极简操作：全程3步完成出题流程（选择年级题型→设置参数→生成打印/导出），界面布局清晰，按钮标识明确，家长、老师无需学习，零门槛操作。 
 
 - 响应式设计：适配电脑、平板等设备，打开后自动适配设备屏幕尺寸，界面元素比例协调，操作按钮大小适中，预览区域清晰可见。 
 
 - 无干扰设计：无注册、无登录、无任何弹窗广告，打开网页即可使用，专注出题核心功能，避免无关干扰。 
 
 三、非功能需求 
 
 （一）技术要求 
 
 - 开发技术：纯前端实现，基于HTML + CSS + JavaScript，核心框架二选一（Vue3 / React），样式框架二选一（Tailwind CSS / SCSS）。 
 
 - 本地存储：仅使用浏览器localStorage存储数据，无需其他存储方式，确保数据本地留存、不泄露。 
 
 - 打印适配：通过CSS严格适配A4纸张（210mm×297mm），设置标准打印边距、分页规则，确保打印无异常。 
 
 - 兼容性：支持Chrome、Edge、Firefox等主流浏览器（最新版本及前两个版本），无兼容性bug，打开速度快。 
 
 - 导出技术：PDF导出使用html2pdf.js，图片导出使用html-to-image，确保导出功能稳定、无异常。 
 
 （二）性能要求 
 
 - 响应速度：题目生成响应时间＜1秒，点击按钮后立即反馈，无卡顿、无延迟。 
 
 - 存储性能：localStorage存储无大小限制，支持多次生成题目、长期保存历史记录，无存储异常、数据丢失问题。 
 
 - 加载速度：网页加载时间＜3秒，无需等待，打开即可操作，无冗余资源加载。 
 
 - 排版性能：调整间距、切换版式、刷新题目时，预览区域实时重绘，无延迟、无错乱，间距调节实时生效。 
 
 （三）内容规范 
 
 - 题目规范：严格符合人教版/苏教版/北师大版小学1-6年级数学教学大纲，无超纲题、无错题、无歧义题，贴合各年级知识点难度。 
 
 - 格式规范：数字、运算符号、单位、题干表述规范，字体清晰，手写识别度高，避免模糊、易混淆的表述和符号。 
 
 - 多样性：同一种题型、同一难度下，可生成足够多的不同题目，避免重复，满足长期练习需求。 
 
 四、A4打印排版强制规范 
 
 （一）基础规范 
 
 - 纸张尺寸：严格遵循A4标准，宽度210mm、高度297mm，无缩放、无变形。 
 
 - 页面边距：上下左右均预留2cm空白（标准打印边距），确保打印内容不超出纸张范围，无裁切风险。 
 
 - 标题规范：页面顶部居中显示标题「小学X年级数学练习题」（X替换为对应年级），标题下方标注生成日期（格式：YYYY-MM-DD），字体大小适中，居中对齐，与题目区域有明显间距。 
 
 （二）布局规范 
 
 - 竖版布局：每页2-3列题目，列间距均匀，题目排列整齐，每题独立成行，答题区域（若勾选）位于题目下方，行距统一，适配手写。 
 
 - 横版布局：每页3-4列题目，列间距均匀，题目紧凑但不拥挤，避免文字重叠，答题区域预留充足。 
 
 - 分页规范： 
          
 
   - 默认生成内容控制在1张A4纸内，题量超出时自动拆分至新的A4页面，每张页面独立完整。 
 
   - 禁止将一道题目拆分在两页，若某道题目无法完整容纳在当前页末尾，自动调整至下一页开头。 
 
   - 多页A4预览时，横向并排展示，每张页面之间预留20px间隙，带明显边框区分，便于查看和操作。 
 
 - 字体规范：题干、题号、答案字体统一（推荐宋体/黑体），字体大小适中（确保打印后清晰可见，适合小学生阅读），数字、符号加粗，提升识别度。 
 
 五、用户使用流程 
 
 1. 打开网页：无需注册登录，直接打开网页，系统自动加载上一次使用的所有配置（年级、题型、参数等）。 
 
 2. 参数设置：选择目标年级，勾选题型（可单选/多选），设置题量、难度、A4版式（横版/竖版）、每题空行大小，勾选是否显示题号、是否预留答题区域。 
 
 3. 生成预览：点击「生成题目」按钮，1秒内生成题目，预览区域展示A4尺寸效果（单张/多张横向排列），无滚动条，所见即所得。 
 
 4. 调整优化：若对题目或排版不满意，点击「刷新重出」重新生成；若需调整间距、版式等参数，修改后实时刷新预览。 
 
 5. 打印/导出：确认预览效果后，点击「打印」一键打印；或点击「导出PDF」「导出图片」，获取对应格式文件，用于打印、分享。 
 
 6. 关闭网页：关闭网页后，系统自动将当前配置、题目内容、历史记录保存至localStorage，下次打开网页可继续使用，无需重复设置。 
 
 六、开发简化版核心需求（快速开发用） 
 
 - 核心功能：1-6年级分年级出题，匹配对应课标题型，支持题型组合选择。 
 
 - 参数配置：自定义题量（10-100道）、难度（基础/提升/拓展）、A4横版/竖版排版，间距可调节且实时生效。 
 
 - 技术实现：纯前端开发（Vue3/React + Tailwind CSS/SCSS），localStorage存储数据，html2pdf.js导出PDF，html-to-image导出图片。 
 
 - 排版要求：默认单张A4展示，超出自动分页，多页横向排列，无滚动条，间距可调，打印/导出无异常。 
 
 - 附加功能：题目去重、答案双模式（带答案/不带答案）、历史记录、配置记忆，极简界面，零门槛操作。 
 
 七、关键注意事项（必实现） 
 
 - 禁止预览区域出现上下、左右滚动条，A4页面尺寸固定，内容完全适配。 
 
 - 间距调节必须实时生效，修改后立即刷新预览，无固定大间距问题，确保排版美观。 
 
 - 多页A4必须横向并排展示，每张独立分隔，不粘连、不重叠，题目不跨页拆分。 
 
 - 打印、PDF导出、图片导出无异常，无内容截断、无变形、无滚动条残留、无水印广告。 
 
 - 默认题量需控制在1张A4纸内，超出自动分页，确保首次生成即可正常打印。

我把这份文档直接扔给了 SOLO，这是整个项目最关键的一步。

SOLO 接收到需求后，触发了它的 web-dev 技能。它没有上来就瞎写，而是先老老实实地给我出了一份 PRD（产品需求文档）和一份技术架构设计。在架构图里，它规划好了用 React 18 配合 Tailwind CSS 做界面，用 Zustand 处理本地存储。看到这份靠谱的设计，我心里就有底了，他自己自动确认直接开干。

进入开发阶段后，SOLO 展现了惊人的效率。它自动跑了 Vite 的初始化命令，装好了必要的库（比如处理 PDF 导出的 html2pdf.js）。接着，它把 1 到 6 年级的题型算法写得清清楚楚。比如一年级的“20以内加减法”、三年级的“周长面积计算”，甚至是六年级的“圆柱圆锥”，它都写了对应的生成逻辑，还顺手加上了题目去重的功能，保证每次生成的题都不重样。

第一个坑是 A4 排版。一开始生成的页面虽然看着像 A4，但一缩放窗口就全乱了。我告诉 SOLO：“我需要多张 A4 纸在一排显示，如果屏幕不够宽，可以加一个缩小预览的比例功能。” SOLO 立刻在工具栏加了一个百分比缩放按钮，利用 CSS 的 transform: scale 属性，让预览区能像真实的桌面一样，整整齐齐地把几张试卷摆开。

第二个坑是打印和导出 PDF 时的“玄学空白页”。我发现每次点击“导出 PDF”或者“直接打印”，最后总会莫名其妙多出一张完全空白的 A4 纸。我把这个现象反馈给 SOLO：“点击导出pdf和直接打印，下面会多出来一页空白的”。SOLO 立刻定位到了原因：由于最后一页带有默认的 page-break-after: always 属性，导致打印引擎强行截断了一页。它不仅修改了 @media print 里的 CSS 样式，重置了最后一个元素的 margin 和 padding，还在生成 PDF 前做了一个克隆 DOM 的神操作，强行拦截了空白页的产生。这个解决思路非常老道。

另外，我在测试时觉得不够完美，随口提了一句：“再加个只显示题目的，不显示答案的功能。” 不到一分钟，SOLO 就帮我改好了状态管理、扩展了下拉框，并调整了答题区留白的判断逻辑。全程顺滑无比。

成果展示

最终的项目完全达到了我的预期：一个清爽、纯粹、专业的数学题生成器。

没有注册页面，打开就能用。左侧是控制台，可以随意切换年级、勾选题型、拖动滑块调整题量和行间距；右侧是实时的 A4 纸预览区，所见即所得。它甚至还带有历史记录功能，自动保存最近十次的出题配置，下次打开直接加载。

点击顶部的“导出 PDF”或者“直接打印”，出来的试卷格式严丝合缝，四周留有标准的 2cm 边距，题目清晰，留白充裕，朋友拿去给孩子做，直夸体验堪比市面上卖的教辅书。

效果与总结

回顾整个过程，如果让我自己一行一行去查大纲、写算法、调 CSS 打印兼容，可能得搭进去大半个星期的业余时间。但使用这个新版的 SOLO，从扔给它需求文档，到修复完最后几个排版 Bug，总共也就花了十来分钟。提效的程度是几何级数的。

SOLO 在我的开发流程中，扮演了最苦最累的“执行者”角色。我只需要作为一个“产品经理”去把控大方向，指出哪里看着不爽，哪里逻辑不对，剩下的体力活它全包了。

经过这次实战，我总结了一个用 AI 提效的可复用方法：千万不要把 AI 当成一个高级搜索引擎或者代码片段生成器。你应该把它当成一个真实的开发同事。把你的需求写清楚，写详细，把业务背景、痛点、甚至你希望的排版样式都写进去。需求越丰满，AI 给你的惊喜就越大。遇到 Bug 也别慌，直接把现象（哪怕是“多了一张白纸”这种大白话）告诉它，它比你更懂怎么去排查底层原因。