---

2.9.7 版本的时候本计划封笔的主贴【2026年8月6日更新、备份】

【生活育儿、社会公益赛道】字帖生成器 — 纯前端PWA离线汉字书法练习工具（复赛版）

A Type, A Trace — 一键生成带拼音、组词、笔画分解的描红字帖，支持矢量 PDF 输出，PWA 离线安装。

本文为 TRAE AI 创造力大赛复赛作品说明帖。作品体验入口、源码包等交付物已通过飞书问卷私密提交，仅供评审查看。

---

1. 团队介绍

初赛晋级作品：【学习工作赛道】字帖生成器 — 纯前端离线汉字书法练习工具

---

2. 产品简介（复赛版）

是什么

字帖生成器是一款纯前端 、可PWA 离线应用，基于 Vite + ES Module 工程化构建。无需服务器、无需安装、无需联网，安装到桌面/手机主屏后完全离线可用。输入汉字后自动生成带拼音标注、组词提示、笔画分解的描红字帖，支持矢量 PDF 输出。

相比初赛 Demo 的"单 HTML 文件"，复赛版本已升级为工程化 PWA 应用，具备完整的构建流程、CI/CD 自动部署、模块化代码结构，并新增了学习闭环（历史记录 / 练习反馈 / 复习计划）和界面辅助（设置中心 / 新手引导 / 演示模式 / 难度评估）功能。

这是进入复赛之后早期版本界面，已经更新（界面设计以后还可根据反馈调整）：

这是2.9.3之后修改的界面(Desktop)：

字帖预览（移动端、Desktop等效果一致性好）：

面向谁

• 中小学语文教师 — 快速生成课堂练习字帖，自定义练习内容
• 家长 — 为孩子定制课后练字纸，随时打印，保护儿童隐私
• 书法爱好者 — 自由切换 6 款开源书法字体，个性化练习
• 教育资源匮乏地区 — 无网络环境可用，服务教育公平
• 任何想写好汉字的人 — 正如作者所说：“自从用了电脑，打字技术增长，但字却越来越丑”

完整功能清单

用户使用路径

访问 GitHub Pages 在线地址
       ↓
[首次使用] 新手引导3步 → 浏览器提示安装PWA → 点击安装到桌面
       ↓
[快速体验] 点击"演示模式"按钮 → 自动加载示例并生成字帖
       ↓
[自主使用] 在文本框输入要练习的汉字 → 难度评估实时显示
       ↓
选择字体（霞鹜文楷/思源宋体/文鼎楷体等）
       ↓
[可选] 从模板库选择预设模板（唐诗/千字文/常用字等）
       ↓
[可选] 打开设置中心调整格子大小/每行字数/显示选项
       ↓
点击「生成字帖」→ 实时预览拼音+组词+笔画 → 自动保存到历史记录
       ↓
[练习反馈] 标记整体难度（轻松/有点难/需要继续）
       ↓
[单字反馈] 悬停字帖格子标记单字状态（掌握/复习/错字）
       ↓
点击右下角打印按钮 → 浏览器打印预览 → 另存为PDF
       ↓
[复习] 次日打开 → 首页显示"今日待复习" → 一键加载复习字帖
       ↓
[离线使用] 关闭网络后刷新页面 → 仍可正常使用

PWA 安装与离线使用

本作品是标准的 PWA（Progressive Web App）应用，支持安装到桌面/手机主屏，安装后完全离线可用（Service Worker 预缓存全部资源含字体）。以下为各浏览器的安装方法：

Microsoft Edge（推荐，开发测试用）

1. 用 Edge 打开 所附测试地址
2. 等待页面加载完成（地址栏右侧出现 ⊕ 安装 图标）
3. 点击 ⊕ 图标 → 弹出安装确认框 → 点击「安装」
4. 桌面生成"字帖生成器"独立应用图标，点击即开
5. 安装后断网仍可正常使用

备用入口：如地址栏未出现 ⊕ 图标，点击右上角 ⋯ →「应用」→「将此站点作为应用安装」

Google Chrome

1. 用 Chrome 打开上述 URL
2. 地址栏右侧出现 ⊕ 安装 图标 → 点击 → 「安装」
3. 或点击右上角 ⋮ →「保存和分享」→「将页面作为应用安装」
4. 桌面生成独立应用图标

其他基于 Chromium 的浏览器

移动端安装

Firefox 说明

• 桌面版 Firefox 不支持 PWA 安装（Mozilla 已移除相关功能），但可正常在线使用
• 移动版 Firefox for Android 支持「添加到主屏幕」

离线使用验证

安装 PWA 后，可通过以下方式验证离线可用性：

1. 打开安装后的"字帖生成器"应用
2. 断开网络（关闭 Wi-Fi 或拔网线）
3. 按 F5 刷新页面 → 页面正常加载，所有功能可用（含字体、拼音、笔画渲染）
4. 或在浏览器开发者工具中模拟：F12 → Network → Online 改为 Offline → 刷新

Service Worker 预缓存约 916 KiB 资源（含 6 款开源字体、JS/CSS 全部模块），安装后首次加载即完成缓存，后续完全离线可用。

相比初赛 Demo 的升级（详细对比）

---

3. 产品演示视频

这个是演示包含了Node.js支持和Puppeteer矢量格式PDF导出功能的Desktop上使用方法；我用的Windows，可以从bat或powershell脚本启动，Linux或MacOS则用.sh脚本启动；电脑比较老旧，加上天气热、降温只靠风扇，所以反应比较迟钝

从脚本打开全功能使用视频

---

4. 产品创作历程

想法诞生

作为一名书法练习者，我在日常练字中遇到几个痛点：

• 市面上的字帖内容固定、无法定制
• 在线字帖工具依赖网络且常收费
• 打印出来的字帖往往是位图、放大后模糊不清
• 缺少拼音、组词、笔画分解等教学辅助信息

于是想到用前端技术，做一个完全离线、自由定制、高清矢量输出的字帖工具。

我自从用了电脑，打字技术增长，但字却越来越丑；自从练习写字之后，用小楷毛笔在 A4 复印纸上都能写出这个水平的字了：

初赛 Demo（2026-07-05）

初赛阶段采用"最小可行产品"策略：

• 单 HTML 文件实现核心功能（拼音+组词+笔画+PDF）
• 双击即可运行，零安装零依赖
• 9 款字体内置（含商业字体，仅演示用）
• 极光毛玻璃 UI，日间/夜间双主题
• Puppeteer 矢量 PDF 双轨方案

初赛成果：成功晋级复赛。

复赛完整作品（2026-07-21 至 2026-07-26）

复赛阶段围绕"从工具到产品"的核心目标，进行了7 大维度升级：

升级 1：工程化重构（Vite + ES Module）

将 1.1MB 单 HTML 文件拆分为模块化工程：

• 14 个 JS 模块：main.js / fontManager.js / settings.js / gridRenderer.js / pdfExport.js / puppeteerClient.js / zuci.js / strokes.js / history.js / feedback.js / review.js / settingsCenter.js / onboarding.js / demoMode.js / difficulty.js
• 17 个 CSS 文件：base.css / components.css / fab.css / grid.css / main.css / print.css / tailwind.css / theme.css / history.css / feedback.css / review.css / grid-styles.css / report.css / settingsCenter.css / onboarding.css / demoMode.css / difficulty.css
• 3 个数据文件：customZuCi.js（1719条组词）/ templates.js（20个模板）/ vocabulary.js（3级18分类字库）
• 构建工具：Vite 5.4 + vite-plugin-singlefile（保留单 HTML 分发能力）
• 依赖管理：pinyin-pro / cnchar / hanzi-writer 全部 npm 安装

升级 2：PWA 离线支持

• vite-plugin-pwa 0.20.5：Workbox 预缓存策略
• Service Worker：字体文件 CacheFirst 策略（40MB 预缓存）
• manifest.webmanifest：lang=zh-CN，3 个图标含 maskable
• 可安装到桌面/手机主屏：像原生应用一样独立运行

升级 3：开源字体替换（版权合规）

追加功能：个人使用时，可以添加电脑上安装或已有个性化字体等。

升级 4：UI 现代化

• Tailwind CSS v4：渐进集成，保留 CSS 变量主题系统
• Lucide Icons：主题切换（sun/moon SVG）+ 打印按钮（printer SVG）+ 设置按钮（settings SVG）+ 演示按钮（sparkles SVG）
• 响应式适配：@media max-width:680px 移动端适配

升级 5：CI/CD 自动部署

• GitHub Actions：push 到 retake 分支自动触发构建部署
• deploy.yml 工作流：字体下载 → Vite 构建 → Pages 部署
• download-fonts.sh：CI 环境自动下载开源字体
• GitHub Pages：https 持续可用，无需续费

升级 6：学习闭环（教育化升级） 复赛核心差异化

将"字帖生成工具"升级为"汉字学习闭环平台"：

• 历史记录：每次生成字帖自动保存到 localStorage（最多 20 条），右侧可折叠侧边栏，支持重新生成/删除/清空
• 练习反馈闭环：
  • 整体反馈三按钮（很轻松 / 有点难 / 需要继续）
  • 单字反馈悬停图标（已掌握 / 需要复习 / 总是写错 ）
  • 状态色环显示（绿/黄/红）
  • 数据保存到 localStorage
• 复习计划生成：
  • 基于艾宾浩斯遗忘曲线本地规则
  • 已掌握 → 7天后复习
  • 需要复习 → 3天后复习
  • 总是写错 → 明天复习
  • 首页顶部"今日待复习"区域
  • 一键加载待复习字到输入框并生成字帖
  • 统计信息（已掌握/待复习/错字数）

升级 7：内容辅助与体验优化

• 内置模板库：20 个预设模板（唐诗宋词 8 + 三字经 2 + 千字文 2 + 常用字 3 + 成语 3 + 节日 2）
• 分级字库：3 级 18 分类（初级 1-5画 / 中级 6-10画 / 高级 10+画）
• 设置中心面板：4 滑块 + 4 开关 + 3 主题选项，实时更新预览
• 新手引导：3 步聚光灯引导，首次自动触发
• 演示模式：一键加载示例并生成字帖，3 秒操作提示
• 难度评估：cnchar 笔画数计算，5 级星级，实时评估
• 米字格/回宫格：两种新格子样式，含打印友好样式

---

5. TRAE 实践过程

本项目全程使用 TRAE IDE 完成。以下是开发关键步骤、Session ID 和踩坑经验。

技术架构

vite.config.js 关键配置

{
  base: './',                    // 相对路径，支持子目录部署
  plugins: [
    tailwindcss(),               // Tailwind CSS v4
    viteSingleFile(),            // 单HTML打包
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: '字帖生成器',
        short_name: '字帖',
        lang: 'zh-CN',
        theme_color: '#667eea',
        display: 'standalone',
        icons: [                 // 3个SVG图标（含maskable）
          { src: 'icon-192.svg', purpose: 'any' },
          { src: 'icon-512.svg', purpose: 'any' },
          { src: 'icon-192-maskable.svg', purpose: 'maskable' }
        ]
      },
      workbox: {
        maximumFileSizeToCacheInBytes: 41943040,  // 40MB（字体预缓存）
        runtimeCaching: [{        // 字体CacheFirst策略
          urlPattern: /\.(?:woff2?|ttf|otf)$/,
          handler: 'CacheFirst',
          options: { cacheName: 'fonts-cache', expiration: { maxAgeSeconds: 60*60*24*365 } }
        }]
      }
    })
  ],
  build: { outDir: 'dist', emptyOutDir: true },
  server: { port: 3000, open: true }
}

关键开发步骤

步骤一：Vite 工程化重构

通过 TRAE 的 AI 辅助能力，将 1.1MB 单 HTML 文件拆分为模块化工程：

• 分析全局变量引用关系，生成检查清单
• 划分 10 个迁移模块，制定迁移顺序
• 配置 vite.config.js（singlefile + pwa + tailwind 插件）
• 验证重构后功能完整性

步骤二：PWA 配置与离线策略

• 配置 vite-plugin-pwa 0.20.5
• 设计 Workbox 预缓存策略（字体 CacheFirst，最大 40MB）
• 生成 PWA 图标（SVG → 192px/512px/maskable）
• 验证 Service Worker 注册和离线可用性

步骤三：开源字体替换与 CI 集成

• 评估 6 款开源字体的协议合规性
• 编写 download-fonts.sh CI 字体下载脚本
• 处理思源宋体 zip 解压路径问题（硬编码 → find 动态查找）
• 修复 pdfExport.js 中 14 处字体引用

步骤四：CI/CD 部署与问题排查

• 配置 GitHub Actions deploy.yml 工作流
• 排查并修复 4 个 CI 构建阻断问题
• 通过 gh api CLI 修复部署权限
• 验证 Pages 部署成功（HTTP 200）

步骤五：UI 现代化与图标替换

• 集成 Tailwind CSS v4（@import “tailwindcss” 语法）
• 替换主题切换图标为 Lucide sun/moon SVG
• 替换打印按钮图标为 Lucide printer SVG
• 保留 CSS 变量主题系统，渐进迁移

步骤六：学习闭环三件套（多 Agent 并行开发）

通过 TRAE IDE 多 Agent 并行执行，完成学习闭环功能：

• Agent A：历史记录 + 练习反馈 + 复习计划（顺序执行，有依赖关系）
• Agent B：模板库数据 + 分级字库 + 米字格/回宫格样式 + 学习报告样式（纯新增文件，零冲突）
• Agent C：设置中心 + 新手引导 + 演示模式 + 难度评估

技术亮点：

• 跨模块通信：自定义事件 calligraphy:history-updated、calligraphy:char-feedback-updated、calligraphy:settings-updated
• 单字反馈：DOM 事件委托，不修改 gridRenderer.js，悬停显示 Lucide 图标
• 主题协同：settingsCenter 通过 toggleTheme() 与现有 settings.js 同步
• 打印友好：所有新 UI 在 @media print 下隐藏，不影响 PDF 导出

关键 Session ID

以下为 TRAE IDE 开发过程中关键任务的对话 Session ID，用于证明作品由 TRAE 开发完成。

注：复赛阶段 Session ID 格式为 TRAE CN 新版格式 {username}:{hash}_{thread_id}.{message_id}.{agent_id}:Trae CN.T({timestamp})，与初赛阶段的三段式格式略有不同。任务 6-7 的 Session ID 待补充。

复赛开发过程截图

复赛Session ID:

.309409433785034:a11c35564a5fba4de8491b2e5be71a35_6a65420875d3caad3f2d96fd.6a65779c75d3caad3f2d9ba4.6a65779b906468fed4eea4b1:Trae CN.T(7/26/2026, 10:57:32 AM)

复赛Session ID:

.309409433785034:9712b3aeee26622146a29e85b4e59e78_6a65420875d3caad3f2d96fd.6a654bda75d3caad3f2d9914.6a654bd9906468fed4eea4a5:Trae CN.T(7/26/2026, 7:50:50 AM)

复赛Session ID:
.309409433785034:534a413834ec6f61284db3dbeeaa6798_6a61fcaebe4273f5764bb50c.6a64c1f675d3caad3f2d947e.6a64c1f3906468fed4eea49c:Trae CN.T(7/25/2026, 10:02:30 PM)

复赛SessionID：
.309409433785034:534a413834ec6f61284db3dbeeaa6798_6a61fcaebe4273f5764bb50c.6a64c1f675d3caad3f2d947e.6a64c1f3906468fed4eea49c:Trae CN.T(7/25/2026, 10:02:30 PM)

初赛阶段 Session ID（已验证，7 条）

以下为初赛阶段的 7 个关键任务 Session ID，已发表于初赛帖子 72722 与初赛帖子 71664，格式为完整三段式 {thread_id}.{message_id}.{agent_id}，双击 TRAE 对话头像即可复制。

1. 独立 HTML 打包、JS 内嵌（2026-07-05 19:48）

6a49f7e8f615ceaf1589607b.6a4a44899a9540f3b14ec753.6a4a4488b75d9ac48d921ab0

2. 模板字符串修复、UI 增强、字体配置（2026-07-05 20:16）

6a49f7e8f615ceaf1589607b.6a4a4b199a9540f3b14eca1a.6a4a4b19b75d9ac48d921ab1

3. PDF 乱码修复、矢量输出、Puppeteer 脚本（2026-07-05 21:04）

6a49f7e8f615ceaf1589607b.6a4a564b9a9540f3b14ecd6a.6a4a564ab75d9ac48d921ab2

4. 开发过程截图(1)（2026-07-06 04:36）

6a49f7e8f615ceaf1589607b.6a4ac0459a9540f3b14ed5c4.6a4ac044b75d9ac48d921ab8

5. JSON 解析、三层防御、keep-alive 去重、编码兼容（2026-07-06 05:01）

6a49f7e8f615ceaf1589607b.6a4ac6429a9540f3b14ed689.6a4ac640b75d9ac48d921aba

6. 开发过程截图(3)（2026-07-06 05:09）

6a49f7e8f615ceaf1589607b.6a4ac81f9a9540f3b14ed6ae.6a4ac81eb75d9ac48d921abb

7. “我连文档都是用 AI 写的”（2026-07-06 05:16）

6a49f7e8f615ceaf1589607b.6a4ac9b99a9540f3b14ed718.6a4ac9b8b75d9ac48d921abc

Session ID 获取方法

以 TraeCN IDE 为例，在一段对话开始的地方，有红圈的 Trae 图标，双击它之后，跳出 “copy success” 一闪即逝，剪贴板就有 session id 了。

开发踩坑与经验

踩坑 1：思源宋体 zip 解压路径不一致

问题：CI 环境下载思源宋体 zip 后，硬编码路径 /tmp/shs/SourceHanSerifSC-Regular.otf 找不到文件。

排查：实际解压路径为 /tmp/shs/OTF/SimplifiedChinese/SourceHanSerifSC-Regular.otf，目录结构因版本而异。

解决：改用 find /tmp/shs -name "SourceHanSerifSC-Regular.otf" | head -1 动态查找。

踩坑 2：PowerShell 重定向导致 UTF-16 编码

问题：从 Git 备份分支恢复 fontManager.js 时，PowerShell > 重定向默认保存为 UTF-16 LE（BOM: FF-FE），Vite 报 “invalid JS syntax”。

排查：检查文件首 4 字节 FF-FE-2F-00 确认为 UTF-16 LE 编码。

解决：改用 .NET [IO.File]::WriteAllText + UTF8Encoding($false) 重写为 UTF-8（457,850 → 228,957 bytes）。

踩坑 3：GitHub Pages 部署权限

问题：CI 构建成功但部署失败，错误 Branch "retake" is not allowed to deploy to github-pages。

排查：github-pages environment 的 deployment-branch-policies 仅允许 main 分支。

解决：通过 gh api --method POST .../deployment-branch-policies -f name=retake 添加 retake 到允许列表。

踩坑 4：gh api 与 git push 历史不一致

问题：通过 gh api Contents API 推送的文件创建了不同的 Git 历史，导致 git push 被拒绝。

解决：创建备份分支保护本地提交 → git reset --hard origin/retake 同步到远程最新。

踩坑 5：多 Agent 并行开发的文件冲突

问题：多个 Agent 同时修改 main.js 和 index.html 可能导致冲突。

解决：Agent B 只新增文件不修改现有代码（零冲突）；Agent A 和 Agent C 顺序执行（Agent C 基于 Agent A 的结果）。

项目文件结构

calligraphy-sheet-generator/
├── src/                          # 源代码
│   ├── main.js                   # 入口文件（事件绑定+初始化+模块集成）
│   ├── data/                     # 数据文件（3个）
│   │   ├── customZuCi.js         # 自定义组词数据（1719条）
│   │   ├── templates.js          # 内置模板库（20个模板）⭐新增
│   │   └── vocabulary.js         # 分级字库（3级18分类）⭐新增
│   ├── modules/                  # 功能模块（14个）
│   │   ├── fontManager.js        # 字体管理（FONT_LIST+loadFonts+base64拼音字体）
│   │   ├── gridRenderer.js       # 田字格渲染（CSS Grid+笔画SVG）
│   │   ├── pdfExport.js          # PDF导出（window.print+字体加载）
│   │   ├── pinyin.js             # 拼音转换（pinyin-pro）
│   │   ├── puppeteerClient.js    # Puppeteer客户端（side-effect导入）
│   │   ├── settings.js           # 设置管理（主题+页眉页脚+localStorage）
│   │   ├── strokes.js            # 笔画数据（hanzi-writer）
│   │   ├── zuci.js               # 组词查询（cnchar+自定义词典）
│   │   ├── history.js            # 历史记录（localStorage+侧边栏）⭐新增
│   │   ├── feedback.js           # 练习反馈（整体+单字）⭐新增
│   │   ├── review.js             # 复习计划（艾宾浩斯规则）⭐新增
│   │   ├── settingsCenter.js     # 设置中心面板（滑块+开关+主题）⭐新增
│   │   ├── onboarding.js         # 新手引导（3步聚光灯）⭐新增
│   │   ├── demoMode.js           # 演示模式（一键加载示例）⭐新增
│   │   └── difficulty.js         # 难度评估（cnchar笔画数+5级星级）⭐新增
│   └── styles/                   # 样式文件（17个）
│       ├── base.css              # 基础样式
│       ├── components.css        # 组件样式
│       ├── fab.css               # 浮动按钮样式
│       ├── grid.css              # 田字格样式
│       ├── main.css              # 主样式（@import汇总）
│       ├── print.css             # 打印样式（@media print）
│       ├── tailwind.css          # Tailwind CSS入口
│       ├── theme.css             # 主题样式（CSS变量+日间/夜间）
│       ├── grid-styles.css       # 米字格/回宫格样式 ⭐新增
│       ├── report.css            # 学习报告样式 ⭐新增
│       ├── history.css           # 历史记录侧边栏样式 ⭐新增
│       ├── feedback.css          # 练习反馈区域样式 ⭐新增
│       ├── review.css            # 复习计划区域样式 ⭐新增
│       ├── settingsCenter.css    # 设置中心面板样式 ⭐新增
│       ├── onboarding.css        # 新手引导样式 ⭐新增
│       ├── demoMode.css          # 演示模式样式 ⭐新增
│       └── difficulty.css        # 难度评估样式 ⭐新增
├── public/                       # 静态资源
│   ├── icon-192.svg              # PWA图标192px
│   ├── icon-512.svg              # PWA图标512px
│   └── icon-192-maskable.svg     # PWA maskable图标
├── .github/workflows/
│   └── deploy.yml                # GitHub Actions CI/CD工作流
├── scripts/
│   └── download-fonts.sh         # CI字体下载脚本（6款开源字体）
├── index.html                    # HTML入口
├── vite.config.js                # Vite配置
├── package.json                  # 项目配置（MIT协议）
├── puppeteer-pdf.cjs             # Puppeteer PDF生成脚本（CommonJS）
├── README.md                     # 项目文档（中英文）
├── README_contest.md             # 参赛文档
├── README_EN.md                  # 英文文档
├── CHANGELOG.md                  # 更新日志（Keep a Changelog格式）
├── 启动Puppeteer.bat             # Windows启动脚本
├── 启动Puppeteer.ps1             # PowerShell启动脚本
└── 启动Puppeteer.sh              # Linux/macOS启动脚本

package.json 依赖清单

npm scripts

构建验证

---

6. 技术方案分享

纯前端 PWA + 矢量 PDF 双轨方案

核心理念：零后端依赖，保护用户隐私，离线可用。

用户输入汉字
    ↓
pinyin-pro 转换拼音 → cnchar 组词 → hanzi-writer 笔画
    ↓
CSS Grid 渲染田字格（拼音行 + 汉字行 + 笔画行）
    ↓
方案A：window.print() → 浏览器打印预览 → 另存为 PDF（全平台）
方案B：Puppeteer 无头浏览器 → 矢量 PDF（文字可选可复制）
    ↓
PWA Service Worker 缓存所有资源 → 离线可用

技术亮点：

• FontFace API 动态注册字体 + document.fonts.check() 验证加载
• FontFace 超时重试机制（5秒超时 + 3秒额外等待）
• JSON 解析三层防御（Connection:close + safeJsonParse + 请求去重）
• vite-plugin-singlefile 保留单 HTML 离线分发能力

学习闭环技术方案

生成字帖 → 自动保存到历史记录（localStorage, 最多20条）
    ↓
练习反馈 → 整体反馈（3按钮）+ 单字反馈（DOM事件委托+悬停图标）
    ↓
复习计划 → 艾宾浩斯规则（mastered→7天 / review→3天 / error→1天）
    ↓
首页待复习 → 一键加载复习字 → 生成字帖 → 更新练习时间

跨模块通信：自定义事件 calligraphy:history-updated、calligraphy:char-feedback-updated、calligraphy:settings-updated

---

7. 社会价值分析

教育公平

• 无网络环境可用：农村学校、无网络家庭、教育资源匮乏地区
• 零成本：无需付费、无需注册、无需账号
• 隐私保护：所有数据本地处理，不上传儿童学习数据

文化传承

• 汉字书写教育：拼音+组词+笔画三位一体，辅助正确书写
• 开源字体推广：使用霞鹜文楷、思源宋体等开源字体，推动字体生态
• 技术降低门槛：让每个人都能自由定制练字内容

学习科学

• 艾宾浩斯遗忘曲线：基于科学记忆规律自动生成复习计划
• 渐进式学习：难度评估帮助用户选择合适内容
• 反馈驱动：练习反馈数据驱动个性化复习

环保理念

• 按需打印：只打印需要的练习内容，减少纸张浪费
• 数字预览：屏幕预览确认后再打印，避免错误打印

---

8. 产品迭代规划

已完成（复赛版本 v2.9.5）

• Vite 工程化重构（14 JS 模块 + 17 CSS + 3 数据文件）
• PWA 离线支持
• 开源字体替换
• CI/CD 自动部署
• UI 现代化（Tailwind + Lucide）
• 历史记录功能
• 练习反馈闭环（整体 + 单字）
• 复习计划生成（艾宾浩斯规则）
• 内置模板库（20 个模板）
• 分级字库（3 级 18 分类）
• 设置中心面板
• 新手引导（3 步聚光灯）
• 演示模式
• 难度评估（5 级星级）
• 米字格/回宫格/田字格等样式

进行中

• 演示视频录制【已经上传，12MB的视频、被以上限20MB为由拒绝上传？】
• 移动端深度优化【完成初步优化，如果版本大于2.9.5，则优化进一步更新】
• 学习报告功能（样式已预留、取舍平衡之后作了简化处理）

未来规划（MIT开源；任何人可自己定制和深入开发）

• AI 智能推荐（规则版本，离线可用；引入访问豆包等学习型LLM能解决知识更新问题）
• 学习报告（本地统计，含柱状图/饼图）
• 更多格子样式（九宫格等,已经追加了九宫格，但还可以改善）
• 多语言支持（英文界面：写汉字用，似乎不需要？）
• 教师批量生成功能（已经添加了“导入文件”、可以批量导入新的生字）
• 若引入豆包等大模型api key权限，功能可大幅完善扩充，考虑离线免费等，暂未考虑

---

9. 版权与字体说明

分发中的所有字体均为开源协议，无版权风险，可安全商用。用户完全可以通过定制、扩展功能引入可以合法免费个人使用但不能打包分发的优秀字体，如方正楷体等。

---

10. 致谢

• TRAE IDE — 提供强大的 AI 辅助开发环境，让非专业开发者也能完成工程化项目，多 Agent 并行开发能力极大提升了开发效率
• 开源社区 — pinyin-pro、cnchar、hanzi-writer、Vite、Tailwind CSS、Lucide 等优秀开源项目
• 字体作者 — 霞鹜文楷、思源系列、文鼎楷体等开源字体的创作者
• 初赛评委与测试用户 — 你们的反馈让作品更完善
• 所有关注汉字书写教育的人 — 一字一世界，一笔一乾坤

---

愿这份小小的工具，能为汉字教学与书写传承尽一份力。

作品体验入口、源码包等交付物已通过飞书问卷私密提交，仅供评审查看。

---

本文为 TRAE AI 创造力大赛复赛作品说明帖
发布日期：2026-07-23，7月26日更新
版本：复赛 V2.9.7（含取舍平衡之后简化了的学习报告 + 界面辅助 + 内容增强 + 5条复赛Session ID + 7条初赛Session ID + 9张TRAE开发截图 + 获取方法说明 + 赛道归属更新）
已发表帖子： 【生活育儿、社会公益赛道】字帖生成器 — 纯前端PWA离线汉字书法练习工具（复赛版）

---

之前放了Github pages的体验链接，后来看规则似乎不能放，于是就删掉了。如果希望在线体验，可以私信沟通。——我上次看了回放的“部署”有关的直播教程，很受启发。但大模型已经帮我自动免费部署好了，大模型提供的免费部署的途径有三种，github pages只支持public repository的部署，居然还有可以支持private 仓库部署的；此外，其中2种都是无须科学访问都能访问的。其中一种，测试打开后，发现无关的干扰信息比较多，就删了。