# Storybook Co-Editor

面向 AI 绘本和网页绘本内容的本地协同排版工具，把网页图片捕获、分页编辑、图像微调、PDF 导出，以及本机 MCP 与 Codex 图像协作串成一条桌面工作流。

## Metadata

- HTML: https://glenzli.com/projects/storybook-co-editor/
- Markdown: https://glenzli.com/projects/storybook-co-editor.md
- Collection: Projects
- Language: zh-CN
- Published: 2026-06-30
- Status: active
- Tags: storybook, desktop, extension, prepress, ai, mcp

## Content

Storybook Co-Editor 是一套面向 AI 绘本和网页绘本内容的本地协同排版工具。它把“网页生成图片”到“本地电子或印刷 PDF”的流程串起来：Chrome 扩展负责抓取插图，Tauri 桌面端负责分页、文字排版、图像微调、项目保存和印前拼版。

它适合用 ChatGPT、Gemini、Midjourney、Discord 或其他网页工具生成绘本后，把图片整理成可编辑、可保存、可导出的本地项目。核心项目格式是 `.scproj`，桌面端会在本机提供 `http://127.0.0.1:14320` 作为扩展和应用之间的桥接服务。

## 本地工具入口

  ![Storybook Co-Editor 项目 banner](/images/projects/storybook-co-editor-cover.webp)

## 工作流

### 网页悬浮捕获

  ![Chrome 扩展图片悬浮捕获层](/images/projects/storybook-co-editor-extension-overlay.webp)
  Chrome 扩展在支持页面里给图片加悬浮操作，用户可以直接发送到本地编辑器，也可以设为参考图，用于后续风格对齐。

- 扩展会从网页 DOM、懒加载图片和常见 AI 图片 URL 中提取图片。
- 图片以 base64 或 URL 方式发送到本地桌面端。
- 桌面端按图片内容哈希去重，避免重复导入同一张图。

### 分页和内容编辑

  ![Storybook Co-Editor 主编辑器，包含页序、画布和文字样式面板](/images/projects/storybook-co-editor-editor.webp)
  左侧管理绘本页序，中间预览逻辑页面，右侧统一调整脚本、字体、字号、颜色、描边、底板和偏移。

  ![Storybook Co-Editor 脚本编辑面板](/images/projects/storybook-co-editor-script-editor.webp)
  脚本面板用 `[Cover]`、`[Author]`、`[Title]` 和数字页标签把整本书的文字绑定到页面预览；中文标签如 `[封面]`、`[作者]`、`[扉页]` 也可用。

桌面端围绕绘本项目组织内容：封面、作者署名、扉页、正文页和空白页都可以独立处理。左侧页序支持拖拽排序、置顶、置底、删除、恢复、复制和导出原图；虚拟空白页 `blank://` 用于补齐印刷页数。

### 图像微调

  ![Storybook Co-Editor 图像微调面板](/images/projects/storybook-co-editor-image-tuning.webp)
  每页可以保存独立的缩放、偏移、底色和图像参数。它更像印前整理工具，而不是单纯的图片收藏器。

- 基础调色：亮度、曝光、对比度、高光、阴影、饱和度、色温和色调。
- 局部调色：按目标色相做 HSL 偏移，用来统一 AI 出图色彩。
- 背景处理：指定底色抠除，处理 AI 图片边缘泛白、泛黄或泛灰。

### 电子与印刷 PDF

  ![Storybook Co-Editor 印前拼版预览](/images/projects/storybook-co-editor-prepress.webp)
  印前视图按 A4、A5、A3 等纸张预览单页或双页拼版，支持装订方式、胶区留白、硬件边距、裁切线和双面打印检查。

桌面端提供两条独立但共用页面模型的导出路径：

    **电子 PDF**
    按项目画布比例逐页导出，不包含拼版、裁切线和装订留白，适合屏幕发布或个人阅读。

    **印刷 PDF**
    支持骑马钉、无线胶装和蝴蝶对裱，以及 1-up / 2-up、正反面预览、裁切线与胶区留白。

    **出版信息**
    作品标题、参与者、版权、许可、ISBN、DOI 和 URL 可写入 PDF Info 与 XMP metadata。

    **版权与权限**
    可以生成版权页，并为电子 PDF 设置打印、复制、修改和批注权限，或选择打开密码。

编辑预览、电子 PDF 和印刷 PDF 共用同一套逻辑页面渲染规则，版权页也进入统一页序。受限电子 PDF 使用 PDF 2.0 AES-256 权限加密；密码只参与当前导出，不保存进项目。这里的权限用于表达发布者的使用限制，不等同于 DRM，截图或专用工具仍可能绕过。

## AI 协作（实验性）

桌面端现在可以作为本机 MCP 服务与 Codex 或其他兼容客户端协作。它不是把整个项目交给模型：第一版只开放当前项目结构、完整剧本和少量页面排版参数，图像像素不会作为 MCP 资源暴露。

    **本机 MCP**
    服务只监听 `127.0.0.1:14320`，使用应用随机生成的访问令牌；令牌可以轮换，旧令牌会立即失效。

    **读写范围**
    客户端可以读取当前项目和完整剧本、替换剧本、读取页面布局，并调整单页文字位置。

    **并发保护**
    每次写入都必须携带先前读取到的 `last_modified`；项目已经变化时会拒绝覆盖，成功修改则实时同步回编辑器。

    **Codex 润色**
    剧本面板可以选择本机 Codex 可用模型并附上修改意见。模型只返回建议版本，应用会先展示前后对照，确认后才写入项目。

### Codex 绘制与重绘

除剧本润色外，应用还可以经由本机 Codex App Server 生成新页候选图，或重绘当前页面的图片。Codex 不是编辑器运行的前提：未检测到可用的本机 Codex 时，这些入口会禁用，普通编辑、导出和 MCP 仍可独立使用。

    **新建候选页**
    新建页面菜单可按当前画布比例发起绘制，默认引用当前选中页，也可以额外选择至多四个参考页。参考页会以隔离 PNG 副本和对应脚本文字作为仅本次请求的上下文。

    **重绘当前图片**
    页面样式区、缩略图和主画布的右键菜单都可发起重绘；请求会带上当前图片的隔离副本和本次修改要求。

    **候选后确认**
    绘制和重绘都可选择快速、标准或深入响应方式，并显示连接、处理、生成、保存候选、已用时间和本次 token 用量。候选图在确认前不会改动页面或写入项目；确认后才成为新页或替换当前页，原图保留在回收站。

    **本机账号与模型**
    润色、绘制和重绘都复用本机 Codex 的登录及模型配置；剧本、绘制或重绘要求会发送给所选模型服务。

### 连接 AI 客户端

1. 打开项目，点击顶部工具栏的机器人图标。
2. 选择“安装到 Codex”并确认。应用只会在 `~/.codex/config.toml` 中创建或更新 `storybook` 条目，其他客户端也可以复制界面给出的配置。
3. 重启 Codex 或新建任务，并在使用 `storybook` MCP 服务期间保持 Storybook Co-Editor 运行。

本机令牌拥有当前项目的读取和编辑权限，不应写入仓库或交给不受信任的客户端。轮换令牌后，需要重新安装或复制配置。Codex 润色、绘制和重绘会复用本机 Codex 的登录和模型设置，并把相应剧本、绘制或重绘要求发送给所选模型服务；未安装或未登录 Codex 时，普通编辑、导出和 MCP 功能仍可使用。

## 项目结构

- `.scproj`：zip 项目包，保存 `project.json`、图片、回收站，以及可选的出版信息和电子 PDF 权限偏好。
- `app/`：Tauri 桌面端，包含 React 前端、Rust 后端、本地 HTTP/MCP 服务、Codex 润色与图像协作，以及项目管理。
- `extension/`：Chrome Manifest V3 扩展，负责网页注入层、图片悬浮操作和转发。
- `docs/images/`：README 和项目详情使用的截图资源。
- `release/`：本地 release 构建产物输出目录。

## 说明

桌面端支持简体中文和英文实时切换并记忆选择，Chrome 扩展跟随浏览器语言。核心编辑、MCP 协作和导出都在本地完成；只有可选的 Codex 润色、绘制和重绘会按照当前模型配置调用相应服务。

这个项目不适合放进本站的 iframe 体验页，因为它依赖本地桌面端、Chrome 扩展和 `127.0.0.1` 桥接服务。本站项目页只展示工具定位、工作流和界面截图；实际使用需要安装本地桌面端和扩展。