Font Lab

Font Lab

挑选字体。润色文字。让你的 Agent 来完成工作。

观看完整演示 →

Font Lab 是一款面向 AI 构建的网站的实时排版和文本编辑器。你的 Agent 会安装它、组合精选的 Google Fonts 字体方案和独具特色的独立铸字厂字体，并在你的真实网站上实时渲染。你可以在不同字体之间切换，挑选自己喜欢的字体。随后，Agent 会完成收尾工作——在 Next.js 上使用 next/font + Tailwind，其他项目则使用可自托管的 @font-face——而且整个过程可逆。

大多数 AI 构建的网站最后都会使用 Inter 或 Geist 这类通用字体，因为 Agent 只用了默认设置。Font Lab 会根据一些初始问题，提供由 Agent 精选的选项，供你亲自挑选。它还支持编辑文本，让文字听起来像是你自己写的。

可复制的提示词：https://www.jack-mcgovern.com/fontlab

安装

在你的项目中使用以下提示词：

Install font-lab (npx font-lab install) and set it up for me — start whatever needs to run; I shouldn't have to touch the terminal. Ask me a couple of questions, compose font directions for this project, and show them on my real pages: the live panel if you're on my machine, screenshots if you're not. Before you tell me to look, make sure it actually worked — the panel really loaded, or the screenshots really came out. I make the call. Don't pick for me. Then write the code for the one I choose, and stick around — I'll have text fixes as I go.

适用于：Claude Code · Cursor · VS Code · Codex · Windsurf · Gemini CLI 支持：任何带有 CSS 接口的框架——Next.js 可获得完整的实时面板体验；其他项目则通过同一引擎完成部署（见下方矩阵）。

安装程序会自动检测你使用的 Agent，并为它们配置好所有内容——技能、MCP 服务、配置文件，且格式各不相同。对于完全没有接口的技术栈，Font Lab 不会只应用一部分内容，而是会明确说明原因并提供生成的代码。

新注册的 MCP 工具会在下次重新加载会话时加载——但 Agent 无需等待：每个工具也都可以作为一次性 CLI 运行，npx font-lab run <tool> '<json-args>'（使用相同的工具表，输出相同的 JSON），因此安装一完成就能开始工作流。MCP 服务在会话中途断开时，也可以使用这种后备方式。

框架——各框架的支持情况

审美引擎、可部署性检查、可移植预览和截图功能适用于所有技术栈。不同之处在于预览界面和字体选择如何应用到代码中——font-lab analyze 会输出针对你项目的准确判断：

你的技术栈	预览	自动应用
Next.js App Router + Tailwind v4	应用内实时面板 + 真实网站截图	next/font + Tailwind 代码生成
任何框架 + Tailwind v4（Vite、Astro、Remix、SvelteKit、TanStack、…）	真实网站截图（无头渲染）+ 可移植样式表	自托管的 @font-face + CSS 入口文件中的 @theme 角色映射
任何框架 + Tailwind v3（字体位于 tailwind.config 的 fontFamily 中）	真实网站截图（无头渲染）+ 可移植样式表	自托管的 @font-face + CSS 入口文件中的工具类/Preflight 覆盖
没有 Tailwind，字体通过 CSS 变量配置（--font-body、--fd、…）	真实网站截图（无头渲染）+ 可移植样式表	自托管的 @font-face + 重新指向的自定义字体变量
没有接口（硬编码的 font-family、CSS-in-JS）	真实网站截图（无头渲染）+ 可移植样式表	手动应用：Font Lab 生成代码块，由你粘贴

所有自动应用路径都有边界保护、支持幂等操作且可逆（font-lab undo）。**Agent：**读取 font_lab_analyze 中的 capabilities + shipNote——非 Next.js 技术栈只是通过同一工作流采用另一条路径，绝不是停止的理由。

升级

始终使用 upgrade，不要直接运行 npm install。

npx font-lab upgrade

Font Lab 有两个部分：npm 包和盖章写入项目的面板代码（app/_fontlab/）。直接运行 npm install font-lab@latest 只会更新软件包，面板仍是旧版本——因此会显示“版本过旧”警告。upgrade 会通过一条命令一起更新所有内容：软件包、重新写入面板、重新固定 MCP，以及关闭过时的端点。

工作原理

1. 询问。 Font Lab 会询问你想要什么效果——想营造什么感觉、想做多大胆的改变，以及想唤起或避免联想到哪些品牌——这样推荐的方向会专为你定制，而不是采用泛泛的默认方案。
2. 搭配。 你的 Agent 会搭配出一小组字体方向（展示字体 + 正文字体 + 等宽字体，每种都附有理由），避开那些被 AI 用烂的默认选择。内置的反泛化评估规则会淘汰全是 Inter/Geist/Space Grotesk 的选项。
3. 挑选。 你可以在自己的网站上比较它们——在聊天中查看截图（网页或手机上都能用），或在本地使用实时切换／混搭／比较面板。最终始终由你来挑选。
4. 应用。 Agent 会为你的技术栈编写实际代码——在 Next.js 上使用 next/font + Tailwind；其他场景则通过 Tailwind 主题、v3 工具类或你自己的 CSS 字体变量接入自托管的 @font-face。所有改动都可以撤销。
5. 干净收尾。 点击 done ✓（或直接告知 Agent），Agent 就会运行 font_lab_finish：移除开发面板脚手架，并提供经 git 验证的提交方案——包含你的文案修改和字体更改，以及可直接运行的命令，不会混入任何 Font Lab 的内容。整个会话期间，脚手架和状态在 git 中都会自动忽略，因此 git status 从一开始就不会被弄得杂乱。

面板

Font Lab 面板会覆盖在正在运行的网站上——呈现真实页面和真实内容——让你实时更改字体和文字。

• 使用方向键切换不同方向——在多个路由的实际内容上查看每种搭配
• 混搭角色——从一个方向选标题字体，从另一个方向选正文字体，并将混搭结果另存为一个独立方向
• 前后对比——按住 B 查看当前字体；轻按 space 即可在两个最终候选方案之间切换
• 检查——将鼠标悬停在任意文本上，即可查看它的角色、字体、字号，以及有多少个元素共用该字体
• 编辑文字——双击任意文本，重新输入后便会直接保存到源文件
• 更改记录——每次编辑后都能准确查看页面上发生了哪些变化
• 撤销所有更改——每项修改都附带一条撤销命令
• 完成 ✓——单击一次即可干净地结束会话：你的 Agent 会移除开发工具，并提供准确的提交方案

面板也能以无头模式运行：Agent 会为每个方向截取网站画面，并在聊天中展示图片——每个方向都提供适合聊天窗口大小的首屏主视觉截图，后面还附有整页截图。手机、网页，以及 Agent 运行的任何环境都能使用。

实时面板仅支持 Next.js——但真实网站预览并不受此限制。对于其他所有框架，Font Lab 都会按每种方向渲染你实际运行的页面（使用面板切换方向时相同的优先渲染清点机制，以无头方式注入——不添加脚手架、不写入源文件；预览字体会缓存在自动忽略的状态中，因此在你真正应用之前，git status 始终保持干净）。如果没有正在运行的开发服务器，截图工具会自行启动项目的开发命令——绑定到 127.0.0.1，执行健康检查，并在截取后停止——因此，即使在人无法访问 Agent 本机地址的云端／容器 Agent 环境（例如网页版 Claude Code 等）中，工作流也能无人值守地运行。如果完全无法运行开发服务器，则会回退到便携预览：使用你自己的配色和文案生成一份独立的 HTML 字体样张（字体已嵌入，可离线打开），并明确标注为字体样张卡片，绝不会冒充你的网站页面。

诚实

Font Lab 的核心承诺是 预览 == 发布：你在面板中看到的，就是代码生成器写出的内容。

• 对通过门槛的每种字体，都能保证还原一致；如果无法做到逐字节一致，则会如实显示“渲染效果可能略有不同”的徽标。
• 只有在技术栈中确实存在接入点时才会自动发布；其他情况下，它会提供生成的代码，并清楚说明原因，而不是猜测。绝不会只应用一半更改——这是我们的承诺。
• 使用外部来源的文本时会明确告知，绝不会悄悄修改。
• 人的选择优先于一切。

贡献与测试

测试人员至关重要，尤其是“它在我的仓库里做错了”这类报告。分析器输出是你能提供的最有用信息。

• 问题表单 — 报告错误和提出“支持我的技术栈”请求
• CONTRIBUTING.md — 代码贡献以及如何运行测试
• SECURITY.md — 安全问题

深入了解

• cli/README.md — 完整用户指南：安装选项、Agent 循环、所有键盘快捷键和 CLI 参考
• docs/CONCEPT.md — 愿景与核心理念
• docs/ARCHITECTURE.md — 选择过程的运作方式以及 selection.json 合约
• docs/SHIP-SPEC.md — 如何将选择转化为真实且可撤销的代码
• docs/PRODUCT.md · docs/PANEL-VISION.md — 产品与品牌背景

---

开源 · MIT · 通过 npm provenance 发布 — 每次发布都可追溯到此仓库和提交。基于 jack-mcgovern.com 构建并经实际使用验证。