【学习工作赛道】字帖生成器 — 纯前端离线汉字书法练习工具
A Type, A Trace — 一键生成带拼音、组词、笔画分解的描红字帖，支持矢量 PDF 输出。
1. Demo 简介
是什么
字帖生成器 是一款纯前端单页应用（HTML5 + CSS3 + Vanilla JS），双击 HTML 文件即可在浏览器中运行。无需服务器、无需安装、无需联网。输入汉字后自动生成带拼音标注、组词提示、笔画分解的描红字帖，支持通过浏览器原生打印输出矢量 PDF。
面向谁
- 中小学语文教师 — 快速生成课堂练习字帖，自定义练习内容
- 家长 — 为孩子定制课后练字纸，随时打印
- 书法爱好者 — 自由切换 9 款书法字体，个性化练习
- 任何想写好汉字的人 — 正如作者所说：“自从用了电脑，打字技术增长，但字却越来越丑”
核心功能
| 功能 | 说明 |
|---|---|
| 智能描红字帖生成 | 输入汉字自动生成田字格描红字帖，支持拼音标注（含声调） |
| 组词辅助 | 内置 4000+ 词库，自动为每个汉字提供组词参考 |
| 笔画分解 | 基于 Hanzi Writer 输出 SVG 笔画分解，辅助正确书写 |
| 矢量 PDF 输出 | 两种方式：浏览器打印另存为 PDF + Puppeteer 一键矢量 PDF |
| 9 款书法字体 | 内置姜浩硬笔楷书、华文楷体、方正仿宋等，支持上传自定义字体 |
| 极光毛玻璃 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-pro（MIT） |
自动标注声调 |
| 组词查询 | cnchar + 4000+ 词库（MIT） |
智能组词推荐 |
| 笔画渲染 | Hanzi Writer（MIT） |
SVG 笔画分解 |
| 字体加载 | FontFace API 动态注册 |
支持用户上传字体 |
| PDF 导出 | window.print() + Puppeteer |
双轨方案 |
| 主题切换 | CSS 变量 + data-theme |
日间/夜间 |
| 开发工具 | TRAE IDE | AI 辅助编码、调试 |
关键开发步骤
步骤一：需求分析与技术选型
通过 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 开发完成。
| 序号 | 任务描述 | Session ID | 日期 |
|---|---|---|---|
| 1 | 从混合项目剥离字帖生成器、独立 HTML 打包、JS 内嵌 | 6a49f7e8f615ceaf1589607b.6a4a44899a9540f3b14ec753 |
2026-07-05 |
| 2 | 模板字符串修复、UI 增强（按钮渐变、打印功能）、字体配置 | 6a49f7e8f615ceaf1589607b.6a4a4b199a9540f3b14eca1a |
2026-07-05 |
| 3 | PDF 字体乱码修复、矢量输出优化、Puppeteer 脚本、Windows 编码问题 | 6a49f7e8f615ceaf1589607b.6a4a564b9a9540f3b14ecd6a |
2026-07-05 |
| 4 | JSON 解析错误修复、三层防御机制、keep-alive 去重、.bat 编码兼容 | 6a49f7e8f615ceaf1589607b.6a4ac6429a9540f3b14ed689 |
2026-07-06 |
如何获取 Session ID：双击 TRAE IDE 中的对话头像即可复制 Session ID。
追加的开发过程截图，感谢网友帮助，要不是我都找不回来：
(1)对应Session ID: .309409433785034:297f2e59bf9cbe03e9402224461c6dc9_6a49f7e8f615ceaf1589607b.6a4ac0459a9540f3b14ed5c4.6a4ac044b75d9ac48d921ab8:Trae CN.T(7/6/2026, 4:36:21 AM)
(2)对应Session ID:
.309409433785034:2307b9d888d863ad58b06c43cb447710_6a49f7e8f615ceaf1589607b.6a4ac6429a9540f3b14ed689.6a4ac640b75d9ac48d921aba:Trae CN.T(7/6/2026, 5:01:54 AM)
(3) 对应Session ID:
.309409433785034:b47e3e43240dd47ec799f33a2b40949b_6a49f7e8f615ceaf1589607b.6a4ac81f9a9540f3b14ed6ae.6a4ac81eb75d9ac48d921abb:Trae CN.T(7/6/2026, 5:09:51 AM)
(4) 我连文档都是用AI写的，对应Session ID: .309409433785034:799872eed994c2bacec9a5fffd7920d9_6a49f7e8f615ceaf1589607b.6a4ac9b99a9540f3b14ed718.6a4ac9b8b75d9ac48d921abc:Trae CN.T(7/6/2026, 5:16:41 AM)
我习惯不到5:00起床，所以quick pass的消耗就比较节约。
开发踩坑与经验
-
字体加载时序：Puppeteer 生成 PDF 时，
domcontentloaded事件在字体加载前触发，导致 PDF 乱码。解决方案：改用networkidle0+ 显式document.fonts.check()验证。 -
HTTP keep-alive 请求合并：浏览器在 keep-alive 连接上重复发送请求，导致多个 JSON 请求体被合并，
JSON.parse()失败。解决方案：三层防御（Connection: close+safeJsonParse()+ 请求去重）。 -
Windows 批处理编码：
.bat文件中文注释在 cmd.exe 的 GBK 编码下被错误解析，导致命令截断。解决方案：添加chcp 65001切换到 UTF-8 代码页。 -
PowerShell 安全警告：每次运行弹出安全提示。解决方案：预设
PSDefaultParameterValues全局参数。
5. 文件结构
distribution/
├── 字帖生成器.html # 主程序（独立 HTML，JS+拼音字体内嵌）
├── 启动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 # 华文楷体
├── FZFSB.TTF # 方正仿宋 GBK
├── FZSJ-DQYBKSJW.TTF # 方正宋简大漆
├── FZSJ-HAITWY.TTF # 方正宋简海豚
├── TW-Kai.ttf # 文鼎楷体
├── 我逸清晨体楷书.ttf
└── 田英章楷书30Light.otf
6. 未来展望
- 笔顺动画支持（基于 Hanzi Writer 扩展）
- 批量导入生字表（Excel/CSV）
- 更多田字格样式（米字格、回宫格、九宫格）
- 云端字帖社区，共享优秀练习模板
- 适配移动端触摸书写
7. 版权与字体说明
- 本工具本体代码采用 MIT 许可证，可自由使用、修改、分发。
- 内置字体仅为演示，版权归原权利人所有。请勿商用，如有商用需求请替换为开源/授权字体（推荐霞鹜文楷、思源系列）。
- 本 Demo 已移除所有商业字体，只保留 TeX Gyre Adventor（GUST Font License，自由使用），其余字体需用户自行上传。
- 项目作者不承担因字体使用产生的任何法律责任。
8. 致谢
- TRAE IDE — 提供强大的 AI 辅助开发环境，让创意快速落地
- 开源社区 — pinyin-pro、cnchar、Hanzi Writer 等优秀库为本项目奠定基础
- 所有测试用户与大赛评委，你们的反馈让作品更完善
报名帖链接
一字一世界，一笔一乾坤。
愿这份小小的工具，能为汉字教学与书写传承尽一份力。
—— 参赛者 · 2026 年夏
重要区分：HTML截图 ≠ IDE原生窗口截图；如果对方要求必须是Trae IDE程序窗口截图，只能用A方式。