这是辅导作业的时候顺手用vibe coding 方式写的。MIT协议公开其他用的时候还可以根据需要对格式、外观等修改核心的框架是跑通了的。——这个技术实现难度稍高但现实中却因为枯燥乏味可能反而不受青睐代码github链接 如果使用有问题最方便的还是问AI agent【学习工作赛道】字帖生成器 — 纯前端离线汉字书法练习工具A Type, A Trace— 一键生成带拼音、组词、笔画分解的描红字帖支持矢量 PDF 输出。1. Demo 简介是什么字帖生成器是一款纯前端单页应用HTML5 CSS3 Vanilla JS双击 HTML 文件即可在浏览器中运行。无需服务器、无需安装、无需联网。输入汉字后自动生成带拼音标注、组词提示、笔画分解的描红字帖支持通过浏览器原生打印输出矢量 PDF。面向谁中小学语文教师— 快速生成课堂练习字帖自定义练习内容家长— 为孩子定制课后练字纸随时打印书法爱好者— 自由切换 9 款书法字体个性化练习任何想写好汉字的人— 正如作者所说“自从用了电脑打字技术增长但字却越来越丑”核心功能功能说明智能描红字帖生成输入汉字自动生成田字格描红字帖支持拼音标注含声调组词辅助内置 4000 词库自动为每个汉字提供组词参考笔画分解基于 Hanzi Writer 输出 SVG 笔画分解辅助正确书写矢量 PDF 输出两种方式浏览器打印另存为 PDF Puppeteer 一键矢量 PDF9 款书法字体内置姜浩硬笔楷书、华文楷体、方正仿宋等支持上传自定义字体极光毛玻璃 UI日间/夜间双主题打印时自动隐藏面板2. Demo 创作思路灵感来源作为一名书法练习者我在日常练字中遇到几个痛点市面上的字帖内容固定、无法定制在线字帖工具依赖网络且常收费打印出来的字帖往往是位图、模糊不清。于是想到用前端技术做一个完全离线、自由定制、高清矢量输出的字帖工具。想解决的问题内容不可定制— 传统字帖内容是固定的无法针对性练习某个课文或诗词依赖网络— 在线工具需要联网教室或家中网络不稳定时无法使用输出质量差— 很多工具截图生成位图放大后模糊不适合打印缺少教学辅助— 仅有字形没有拼音、组词、笔画分解等教学信息为什么做这个方向真实需求汉字书写是中华文化的基础教育教师和家长每天都需要练习纸技术可行现代浏览器已支持 FontFace API、CSS Grid、window.print() 等关键能力差异化市面上缺少离线 矢量 教学辅助三位一体的免费工具个人积累练字过程中积累了多款字体的使用经验了解用户真实需求我自从用了电脑打字技术增长但字却越来越丑自从练习写字之后用小楷毛笔在 A4 复印纸上都能写出这个水平的字了3. Demo 体验地址方式一下载 ZIP 体验推荐下载解压后双击字帖生成器.html即可使用推荐 Chrome / Edge 浏览器。去原贴下载字帖生成器.zip(6.9 MB)包含主程序、JS 库、拼音字体。完整字体包请使用方式二。方式二一键启动矢量 PDF 工具Windows下载完整版双击启动Puppeteer.bat浏览器自动打开点击紫色按钮一键生成矢量 PDF。字帖生成器完整版.zip(2.6 MB)完整版包含全部 9 款字体、Puppeteer 自动启动脚本、README 文档。快速使用步骤下载解压 ZIP 包双击字帖生成器.html或运行启动Puppeteer.bat输入汉字如春眠不觉晓点击生成字帖点击打印按钮 → 选择另存为 PDF → 保存演示视频去原贴看4. TRAE 实践过程本项目全程使用TRAE IDE完成核心逻辑开发、调试与迭代优化。以下是开发关键步骤。技术架构技术点方案说明架构纯 HTML5 CSS3 Vanilla JS单页面零依赖运行拼音转换pinyin-proMIT自动标注声调组词查询cnchar 4000 词库MIT智能组词推荐笔画渲染Hanzi WriterMITSVG 笔画分解字体加载FontFace API动态注册支持用户上传字体PDF 导出window.print() Puppeteer双轨方案主题切换CSS 变量 data-theme日间/夜间开发工具TRAE IDEAI 辅助编码、调试关键开发步骤步骤一需求分析与技术选型通过 TRAE 的多智能体并行任务规划能力将字帖生成器拆解为拼音转换模块、组词查询模块、田字格渲染模块、笔画分解模块、PDF 导出模块。TRAE 帮助分析各模块的技术方案和依赖关系。步骤二核心功能实现使用 TRAE 的 AI 辅助编码功能快速实现拼音转换pinyin-pro 集成和组词查询cnchar 集成田字格使用 CSS Grid 布局动态生成每个格子包含米字格线、描红字、拼音标注笔画分解利用 Hanzi Writer 输出 SVG嵌入到每个字格中步骤三UI 设计与主题系统极光毛玻璃风格 UI采用 CSS 变量驱动的日间/夜间双主题TRAE 辅助完成复杂的 CSS 动画和渐变效果打印时自动隐藏控制面板确保输出整洁步骤四PDF 矢量输出双轨方案方案一浏览器window.print()另存为 PDF全平台通用方案二Puppeteer 无头浏览器生成矢量 PDF文字可选可复制TRAE 辅助解决了字体加载时序、keep-alive 请求合并、跨平台编码等关键问题步骤五离线打包与发布将所有 JS 库pinyin-pro、cnchar、Hanzi Writer内嵌到 HTML拼音字体 base64 内嵌汉字字体使用 FontFace API 加载编写 Windows/Linux 一键启动脚本实现傻瓜化操作关键 Session ID以下为 TRAE IDE 开发过程中关键任务的对话 Session ID用于证明作品由 TRAE 开发完成。格式为完整三段式双击 TRAE 对话头像即可复制。1. 独立 HTML 打包、JS 内嵌2026-07-05 19:486a49f7e8f615ceaf1589607b.6a4a44899a9540f3b14ec753.6a4a4488b75d9ac48d921ab02. 模板字符串修复、UI 增强、字体配置2026-07-05 20:166a49f7e8f615ceaf1589607b.6a4a4b199a9540f3b14eca1a.6a4a4b19b75d9ac48d921ab13. PDF 乱码修复、矢量输出、Puppeteer 脚本2026-07-05 21:046a49f7e8f615ceaf1589607b.6a4a564b9a9540f3b14ecd6a.6a4a564ab75d9ac48d921ab24. JSON 解析、三层防御、keep-alive 去重、编码兼容2026-07-06 05:016a49f7e8f615ceaf1589607b.6a4ac6429a9540f3b14ed689.6a4ac640b75d9ac48d921aba开发踩坑与经验字体加载时序Puppeteer 生成 PDF 时domcontentloaded事件在字体加载前触发导致 PDF 乱码。解决方案改用networkidle0 显式document.fonts.check()验证。HTTP keep-alive 请求合并浏览器在 keep-alive 连接上重复发送请求导致多个 JSON 请求体被合并JSON.parse()失败。解决方案三层防御Connection: closesafeJsonParse() 请求去重。Windows 批处理编码.bat文件中文注释在 cmd.exe 的 GBK 编码下被错误解析导致命令截断。解决方案添加chcp 65001切换到 UTF-8 代码页。PowerShell 安全警告每次运行弹出安全提示。解决方案预设PSDefaultParameterValues全局参数。5. 文件结构distribution/ ├── 字帖生成器.html # 主程序独立 HTMLJS拼音字体内嵌 ├── 启动Puppeteer.bat # Windows 一键启动脚本 ├── 启动Puppeteer.ps1 # PowerShell 启动脚本 ├── 启动Puppeteer.sh # Linux/macOS 启动脚本 ├── puppeteer-pdf.js # Puppeteer PDF 矢量生成脚本 ├── package.json # Node.js 依赖配置 ├── README.md # 完整使用文档 ├── CHANGELOG.md # 更新日志 ├── 参赛文档.md # 本文档 └── fonts/ # 字体文件夹9 款字体 ├── 姜浩硬笔楷书.ttf # 默认汉字字体 ├── texgyreadventor-regular.otf # 拼音字体 (base64 内嵌) ├── STKAITI.TTF # 华文楷体 └── 田英章楷书30Light.otf6. 未来展望笔顺动画支持基于 Hanzi Writer 扩展批量导入生字表Excel/CSV更多田字格样式米字格、回宫格、九宫格云端字帖社区共享优秀练习模板适配移动端触摸书写7. 版权与字体说明本工具本体代码采用MIT 许可证可自由使用、修改、分发。内置字体仅为演示版权归原权利人所有。请勿商用如有商用需求请替换为开源/授权字体推荐霞鹜文楷、思源系列。本 Demo 已移除所有商业字体只保留TeX Gyre AdventorGUST Font License自由使用其余字体需用户自行上传。项目作者不承担因字体使用产生的任何法律责任。8. 致谢TRAE IDE— 提供强大的 AI 辅助开发环境让创意快速落地开源社区 — pinyin-pro、cnchar、Hanzi Writer 等优秀库为本项目奠定基础所有测试用户与大赛评委你们的反馈让作品更完善报名帖链接https://forum.trae.cn/t/topic/31676一字一世界一笔一乾坤。愿这份小小的工具能为汉字教学与书写传承尽一份力。