番茄钟 Pomodoro

一个用个人设计语言系统搭建的极简番茄钟。专注 / 短休 / 长休三模式，可调时长，明暗双主题，全程纯语义化设计变量。

也是 design-language 系统的一个实战示例：展示如何复制 starter、喂 AI 设计规范、配中文字体，做出一个完整可用的真实应用。

功能

• 专注（25min）/ 短休（5min）/ 长休（15min）三模式切换
• 开始 / 暂停 / 重置
• 每模式时长可自定义
• 完成轮数统计
• 明暗主题一键切换
• warm preset：霞鹜文楷（中文）+ Satoshi（英文）

技术栈

Vite 6 · React 19 · TypeScript · Tailwind CSS v4

快速开始

# 1. 配齐字体（首次必跑，字体不进仓库——见下方「字体」）
./scripts/setup-fonts.sh

# 2. 跑项目
bun install
bun run dev      # 开发
bun run build    # 构建（含 tsc 类型检查）
bun run preview  # 预览构建产物

没跑第 1 步也能起，但中英文字体会回退到系统默认，看不到真实设计效果。

字体

字体二进制不进仓库（体积大，且 Satoshi 等有再分发授权限制）。scripts/setup-fonts.sh 自动从官方源下载英文字体，并对中文字体按 src/ 里实际用到的字做 subset（每个中文字体压到几十 KB）。

中文 subset 需要 fonttools：

python3 -m venv .venv && .venv/bin/pip install fonttools brotli

改了中文文案后要重跑 setup-fonts.sh，否则新增的字会因不在 subset 里而回退到系统字体（表现为同一行字号 / 字形不一致）。

设计语言

• .ai/DESIGN.md — 全局设计 DNA 与 NEVERS（喂给 AI）
• .ai/presets/warm.md — 当前 preset 规范
• CLAUDE.md — AI 生成 UI 前必读的硬性约束

所有颜色 / 圆角 / 过渡都走语义变量（var(--color-*) 等），禁用 Tailwind 默认色，build 时会校验。改 UI 前先读 CLAUDE.md。

完整设计系统、四套 preset、字体工具链见上游仓库： https://github.com/zhangyu0806/design-language

License

MIT