Show HN：集成自然拼读辅助与 Agent 创作的开源儿童早期阅读器 Yara Reads

在线体验：yarareads.finereli.com —— 免费，无需注册账号。

这是一款专为刚掌握自然拼读发音、需要阅读真实读物的儿童设计的阅读应用。故事中的每个单词都可以用他们已经掌握的发音规则拼读出来。当孩子卡壳时，点击该单词，对应的拼读发音按钮就会立即显示在原地。

我是为我 6 岁的女儿 Yara 制作的这款应用。她非常喜欢亮片、魔法和恐龙。在学完《Teach Your Monster to Read》之后，我发现很难为她找到既有吸引力、又完全由她能拼读出来的单词构成的后续读物。她的大哥 Tom 写了第一个故事，而这款应用在设计上支持轻松扩展更多故事。

• 辅助提示直接嵌入在单词上。 点击任意单词：单个字母下方会显示圆点，像 "sh" 和 "ee" 这样的字母组合下方显示横线，像 a_e 这样的拆分元音之间则用弧线连接。一个扬声器按钮会依次点亮每个发音部分，最后读出整个单词。它从不直接替孩子朗读整页内容。
• 核心功能在于发音校验器。 故事会根据孩子已知的所有发音规则进行逐词比对校验，校验基于实际发音而非单纯的拼写（例如，如果孩子还没学过拆分元音 a，那么包含 "cake" 的故事就会校验失败）。运行 npm run check 会直接报错并指出孩子尚未掌握的生词。
• 支持导入自定义读物。 可以连接你自己的 Agent（Claude、ChatGPT，或任何支持 MCP 的工具），由它在孩子已知发音的词汇库内编写新故事，或者录入你家里的藏书。Agent 会自行校验词汇、添加配图并展示结果。这些内容仅在你的账号下可见。
• 完全由你设定孩子的认知进度。 自由开启或关闭各项发音及常见难词（tricky words）。包含未学发音的单词会显示下划虚线，未掌握的新发音会以紫色高亮显示。

技术架构基于 Cloudflare Worker 与静态资源，采用 D1 存储数据、R2 存储图片，无需复杂的构建步骤（No build step）。如果你也是一位懂技术的父母，且家里有正在学习阅读的孩子，非常欢迎你把它部署并打造成专属于你的版本。

bash git clone https://github.com/finereli/yarareads && cd yarareads npm install npx wrangler d1 create yara-reads # put the database_id in wrangler.jsonc, with your account_id npx wrangler r2 bucket create yara-reads-pictures npx wrangler d1 migrations apply yara-reads --local node tools/lexicon-asset.mjs # the word dictionary the worker uses node tools/push.mjs --local --inventory --images --owner dev # load the stories (--owner: books from home, if you have any) npx wrangler dev

调试满意后运行 npm run deploy 即可上线（请在 wrangler.jsonc 中修改为你自己域名的 routes；部署时需要词典生成步骤，脚本会自动运行）。

注意事项：

• 无需登录即可完整使用。 整个应用支持离线/免登录体验，所有拼读发音和阅读进度均保存在浏览器本地。账户系统（以及 Agent 功能）接入的是 login.finereli.com，该服务仅用于我自己的应用。如果你希望自行运行账户服务，请替换为你自己的登录系统：public/login.js 和 src/verify-login.js 是全项目中仅有的两处相关文件。
• 拼读音频来自我本人的录音，是专门为发音磁贴录制的，并未包含在此代码仓库中。缺少音频文件时磁贴依然会正常高亮，只是不会出声。你可以使用 tools/sounds-record.mjs 录制你自己的声音（参考文件顶部的注释说明）。整词发音调用的是 Cloudflare Workers AI，因此部署时需要账号启用该功能。
• 编写故事：复制 content/stories/toby-1.json，修改页面内容，然后运行 npm run check。工具会列出你孩子当前还读不懂的每一个生词。绝不要为了让故事通过检查而故意放宽发音限制：应该去重写故事。docs/vocabulary.md 中给出了接下来建议教学的内容顺序队列。
• 插图绘制：docs/illustration.md 和 tools/illustrate.mjs 详细说明了插图的生成与制作流程。
• CLAUDE.md：供你或你的 Agent 参考，解释了整个系统各部分的协作逻辑。
• 统计数据查看：运行 node tools/stats.mjs。

代码开源协议：MIT（LICENSE）。故事与插图协议：Creative Commons Attribution 4.0（content/LICENSE.md），欢迎二次创作并注明出处归属 Yara Reads 及原作者。第三方引用材料详见：NOTICE.md。

Privacy · Terms

Read it: yarareads.finereli.com - free, no account needed.

A reading app for kids who have just learned their phonics sounds and need something real to read. Every word in a story can be sounded out with the sounds they already know. When they get stuck, they tap the word and its sound buttons appear right there.

I made it for my daughter Yara. She's six and loves glitter, magic and dragons. She'd finished Teach Your Monster to Read and I couldn't find anything for her to read next that was both a good story and made only of words she could sound out. Her big brother Tom wrote the first story, and the app is built so there can be many more.

• The help lives on the word. Tap any word: a dot under single letters, a bar under pairs like "sh" and "ee", an arc joining split vowels like a_e. One speaker button lights each sound in turn, then says the word. It never reads whole pages for them.
• The checker is the point. Stories are checked word by word against the sounds the child knows, by pronunciation and not just spelling ("cake" fails if the child hasn't learned the split a). npm run check fails a story with a word they can't read.
• Bring your own books. Connect your own agent (Claude, ChatGPT, anything that speaks MCP) and it writes stories inside your child's sounds, or types in books you own. It checks its own words, adds pictures, and shows you the result. Only your account sees them.
• You set what your child knows. Switch sounds and tricky words on or off. Words with a sound they haven't learned get a dotted underline and the new sound shows in purple.

It's a Cloudflare Worker with static assets, D1 for data and R2 for pictures. No build step. If you're a tech dad (or mum) with a kid who's learning to read, I'd love you to take this and make it yours.

git clone https://github.com/finereli/yarareads && cd yarareads
npm install
npx wrangler d1 create yara-reads          # put the database_id in wrangler.jsonc, with your account_id
npx wrangler r2 bucket create yara-reads-pictures
npx wrangler d1 migrations apply yara-reads --local
node tools/lexicon-asset.mjs               # the word dictionary the worker uses
node tools/push.mjs --local --inventory --images --owner dev   # load the stories (--owner: books from home, if you have any)
npx wrangler dev

Then npm run deploy when you're happy (edit the routes in wrangler.jsonc for your domain; deploy needs the dictionary step, which the script runs for you).

Things to know:

• It works signed out. That's the whole app, with the sounds and progress kept in the browser. Accounts (and so agents) use login.finereli.com, which only serves my own apps. To run accounts yourself, swap in your own sign-in: public/login.js and src/verify-login.js are the only files that know about it.
• The sounds are my voice , recorded for the tiles, and they aren't in this repository. Without them the tiles still light up but stay quiet. Record your own with tools/sounds-record.mjs (see the comment at the top). Words are spoken by Cloudflare Workers AI, so deploying needs an account with that enabled.
• Write a story : copy content/stories/toby-1.json, edit the pages, run npm run check. It tells you every word your child can't read yet. Never loosen the sounds to make a story pass: rewrite the story. docs/vocabulary.md has the queue of what to teach next.
• Pictures : docs/illustration.md and tools/illustrate.mjs describe how the illustrations were made.
• CLAUDE.md explains how everything fits together, for you or your agent.
• Usage numbers: node tools/stats.mjs.

Code: MIT (LICENSE). Stories and pictures: Creative Commons Attribution 4.0 (content/LICENSE.md), so remix away and credit Yara Reads and the authors. Third-party material: NOTICE.md.

Privacy · Terms