@xiaobuyu/nodesign 0.0.7 → 0.0.8

package/README.zh-CN.md

@@ -2,120 +2,280 @@
 
 # NoDesign
 
-一张无限画布，一个始终在场的 Agent。
+> **哪里错了圈哪里。生成、检查、反馈和修改，全程不离开同一张无限画布。**
 
-告诉它你想做什么，它会在画布上创建网站、演示稿、文档、图片和视频。所有产物都会保存为真实文件，可以继续编辑、批注、下载和发布。
+[![npm version](https://img.shields.io/npm/v/%40xiaobuyu%2Fnodesign)](https://www.npmjs.com/package/@xiaobuyu/nodesign)
+[![npm downloads](https://img.shields.io/npm/dw/%40xiaobuyu%2Fnodesign)](https://www.npmjs.com/package/@xiaobuyu/nodesign)
+[![license](https://img.shields.io/npm/l/%40xiaobuyu%2Fnodesign)](https://github.com/Xiaokebuyu/Nodesign/blob/main/LICENSE)
 
-![demo](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo.gif)
+NoDesign 是一张以真实文件为底座的 Agent Native 创作工作台。
+
+告诉 Agent 你想做什么，它会在画布上创建网站、演示稿、Word 文档、图片和视频。你可以留在同一张画布上检查结果；发现哪里不满意，直接圈选、评论，或者在产物旁边发起讨论。
+
+你当前的视觉焦点、选中对象及其组件信息会随消息一起交给 Agent。它会理解你说的“这里”究竟是什么，修改背后的真实文件，再回到画布继续检查。
+
+```text
+提出需求 → Agent 生成 → 画布检查 → 圈选反馈
+        → 修改真实文件 → Agent 自检 → 原地继续
+```
+
+![在画布上圈选具体区域，Agent 获取目标上下文后直接修改](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-roundtrip.gif)
+
+NoDesign 不只是把 AI 生成的结果摆到画布上，而是把生成、检查、反馈和修改组成的完整创作循环留在同一张画布里。
 
 ## 立即体验
 
+### 本地版
+
+需要 Node.js 20 或更高版本：
+
 ```bash
 npx @xiaobuyu/nodesign
 ```
 
-需要 Node.js 20+，并配置至少一种模型接入方式：
+启动后配置至少一种模型接入方式：
 
 - Claude 订阅或 Anthropic API
 - OpenAI、DeepSeek、智谱、通义、OpenRouter
 - Ollama 或其他兼容 OpenAI API 格式的模型服务
 
-NoDesign 本身不收取订阅费，也不对模型调用加价。项目文件和配置保存在本地。使用云端模型时，完成任务所需的上下文会发送给你配置的模型服务。使用本地模型（如 Ollama）时，所有数据都留在你的电脑上。
+NoDesign 本身不收取订阅费，也不对模型调用加价。
 
-暂时不想安装，也可以通过在线实例体验基础能力：[nodesign.xiaobuyu.trade](https://nodesign.xiaobuyu.trade)
+项目文件和配置保存在本地。使用云端模型时，完成任务所需的上下文会发送给你配置的模型服务；使用本地模型（如 Ollama）时，数据可以完全留在你的电脑上。
 
-在线体验版提供免费模型和每日额度，部分本地能力暂未开放。
+### 在线体验版
 
-## 它能帮你做什么
+暂时不想安装，也可以直接体验基础能力：
 
-三个典型场景：
+[https://nodesign.xiaobuyu.trade](https://nodesign.xiaobuyu.trade)
 
-- **做一个作品集页面**：把参考图和文字素材放到画布上，告诉 Agent 你要什么风格，检查桌面、平板和手机尺寸下的效果，配置后一键发布到公网。
-- **做一份演示稿**：把照片、文字和参考风格放到画布上，Agent 生成分页幻灯，你直接在上面批注修改，导出 PDF 或 PPTX。
-- **做一个内容项目**：网站、图片、视频和文档放在同一张画布上，由同一个 Agent 连续处理。Agent 可以在不同产物之间继续取材和修改。
+线上版提供免费模型和每日额度，部分依赖本机环境的能力暂未开放。
 
-### 产物类型
+## 为什么整个创作过程可以留在画布里
 
-| 产物 | 格式 | 能做什么 |
-|---|---|---|
-| 演示稿（幻灯、长图、海报） | `.html` | 16:9、9:16、4:3 等比例分页，导出 HTML、PDF、PPTX |
-| 站点（作品集、落地页、小应用） | 带 `index.html` 的文件夹 | 桌面、平板和手机尺寸预览，整站 zip 导出，配置 Cloudflare 后可一键发布 |
-| Word 文档 | `.docx` | 直接生成标准 OOXML，不是把 HTML 包装成 Word 文件。页图预览、翻页、下载原件 |
-| 图片 | 常见图片格式 | 生图、抠图 |
-| 视频 | 常见视频格式 | 视频导入、预览与转码 |
+### 哪里错了圈哪里
 
-![说一句话生成图片，再抠掉背景，得到透明底 PNG](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-image.gif)
+很多时候，问题并不是模型不会修改，而是它不知道你说的“这里”究竟是哪里。
 
-![Agent 生成 Word 文档，在画布上直接看排版](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-docx.gif)
+在 NoDesign 中，你可以：
 
-这些文件不依赖 NoDesign 的私有格式，可以使用其他工具继续编辑和下载。
+- 双击修改文字；
+- 圈选一块区域并留下评论；
+- 拖动和整理画布元素；
+- 在不同内容之间建立「参考」「批注」「接着做」等关系；
+- 在正在检查的产物旁边直接唤出 Agent。
 
-使用 NoDesign 完成的实际项目：一个乐队的研究站、一份 15 页的西藏攻略幻灯配站点、一套像素风服务器宣传页、一份改了六版的简历 .docx。也有实验性项目，比如一个在页面上选择剧情、在聊天里生成内容的互动视觉小说。已发布的一个站点：[spica-mix.share.xiaobuyu.trade](https://spica-mix.share.xiaobuyu.trade)。
+当前视野、选中的目标、附近内容以及目标涉及的组件信息，会被整理为下一轮任务的上下文。
 
-## 它为什么不只是另一个 AI 聊天框
+你不需要再截图并解释：
 
-### 画布就是工作区
+> 第二屏右边那个蓝色的块位置不太对。
 
-画布上的卡片对应真实文件，文件夹对应真实目录。移动、编辑和整理卡片，也会同步改变磁盘上的内容。
+直接圈住它，说一句：
+
+> 这里太挤了。
+
+这样就够了。
+
+Agent 完成修改后，结果会回到同一张画布。你可以继续检查、追问或进行下一轮修改，不必在聊天框、预览窗口、编辑器和文件夹之间反复切换。
+
+### Agent 能检查自己的结果
+
+Agent 不只负责生成，也能主动检查自己做出来的东西。
+
+对于站点，它可以：
+
+- 获取桌面、平板和手机宽度下的页面截图；
+- 读取浏览器控制台错误；
+- 检查最终渲染样式；
+- 检查字体是否正确加载；
+- 提取滚动动效和关键动画帧；
+- 根据检查结果继续修改。
+
+![站点在桌面、平板、手机尺寸下的预览](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-viewport.gif)
+
+如果连续修改后结果仍不理想，Agent 还可以邀请一个只读评审子代理，从第三方视角逐页检查问题。评审角色只负责找出缺陷，不会直接修改文件。
+
+### 画布上的内容对应真实文件
+
+画布不是文件的终点。
+
+画布上的文件卡片对应磁盘中的真实文件，文件夹卡片对应真实目录。打开、重命名、归类和移动文件等操作会同步到项目工作区。
 
 ![打开文件夹、把卡片拖进文件夹、在两张卡之间建立关系](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-desktop.gif)
 
-### Agent 始终在场
+Agent 生成的网站、演示稿、Word 文档、图片和视频不会被锁在 NoDesign 的私有格式里。你可以：
 
-Agent 会出现在它正在处理的内容旁边。你可以看到它正在编辑哪个文件，以及内容如何逐步生成，而不是只能等待聊天框返回最终结果。
+- 在画布上继续检查和批注；
+- 下载原始文件；
+- 使用其他软件继续编辑；
+- 修改文件后再交给 Agent 接着处理；
+- 将项目发布或交付给其他人。
 
-### 画布也是黑板
+画布是一张连接文件、上下文和 Agent 的工作桌，而不是一个只能展示生成结果的容器。
 
-Agent 不只是把做完的产物放上画布，也把想法放上去。它会画草图、写板书、在相关的东西之间拉线，说明自己打算怎么做，或者把一件复杂的事情拆开摆出来。
+### 不同产物可以在同一张画布上接着做
 
-![拆《雷雨》的人物关系：八个人分成两家，关系线标出谁和谁是什么，主要人物的肖像当场生成后连回名字](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-blackboard.gif)
+网站、演示稿、文档、图片、视频和参考资料可以同时摊在一张画布上，由同一个 Agent 连续处理。
 
-板书是真文件，保存在项目的 `notes/板书/` 目录下。草图节点、连线和板书都可以双击直接改，改完 Agent 接着用改过的版本。
+例如，你可以：
 
-![双击 Agent 写的板书，在画布上原地改字](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-chalk.gif)
+1. 让 Agent 调研一个主题；
+2. 将调研结果整理成 Word 文档；
+3. 根据文档生成演示稿；
+4. 从演示稿中提取宣传长图；
+5. 根据同一批素材制作配套站点；
+6. 圈出不满意的部分，让 Agent 原地修改。
 
-### 你的操作会成为下一轮上下文
+Agent 可以掌握这些文件在项目中的位置，并在不同产物之间继续取材和工作，不必每换一种工具就重新解释项目背景。
 
-你可以直接修改文字、圈选区域、拖动元素，或者在不同产物之间建立「参考」「批注」「接着做」等关系。这些操作会被整理为后续任务的上下文。
+![NoDesign 综合创作流程](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo.gif)
 
-![圈选封面的一块区域写一句话，Agent 取到后直接修改](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-roundtrip.gif)
+### Agent 也可以自己寻找和分析参考
 
-### Agent 能检查自己的结果
+Agent 拥有自己的浏览器。你可以把一个网址交给它，也可以让它自己寻找参考内容。
 
-它可以获取不同屏幕尺寸下的页面截图、样式计算结果、控制台错误、字体加载状态和动效帧，并根据检查结果继续修改。做完之后它自己截图核对，改了两轮你还是不满意，它会请一个只读的评审子代理逐页检查。
+它能够：
 
-![站点在桌面、平板、手机尺寸下的预览](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-viewport.gif)
+- 浏览和截图网页；
+- 分析页面布局、配色和字体；
+- 观察页面的内容分区；
+- 检查滚动触发的动画与交互；
+- 将有用的截图和素材放入当前项目；
+- 根据参考内容继续生成站点、演示稿或其他产物。
+
+在本地版中，浏览器可以保留登录状态。遇到验证码、登录确认或其他需要人工处理的步骤时，Agent 会暂停并请求你接管；处理完成后，它可以继续原来的任务。
+
+### 思考过程也可以留在画布上
+
+Agent 不只把最终产物放到画布上，也可以把中间思考过程摆出来。
+
+它会画草图、写板书、在相关内容之间建立连接，说明自己的计划，或者把复杂问题拆成可以继续讨论的部分。
+
+![拆解《雷雨》人物关系：生成角色、肖像与关系线](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-blackboard.gif)
+
+板书本身也是真实文件，保存在项目的 `notes/板书/` 目录中。草图节点、连接线和板书文字都可以手动调整；修改之后，Agent 会继续使用更新后的内容。
+
+![双击 Agent 写下的板书，在画布上原地修改](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-chalk.gif)
+
+项目决策、风格记录和个人偏好不必只藏在聊天历史里。它们可以作为可见、可编辑的内容保留在工作区，也可以进一步沉淀成可复用的 Skill。
+
+> 正在开发：将更多头脑风暴与对话分支迁移到画布。完成后，可以从不同阶段和节点继续提问、延伸或比较方案，而不必在一条越来越长的聊天记录中来回翻找。
+
+## 它能帮你做什么
 
-### 记忆是可见、可编辑的
+### 三个典型场景
 
-项目决策、风格记录和个人偏好不会只藏在对话历史中。它们会以可见内容保留在工作区，也可以沉淀成可复用的 Skill。
+- **制作作品集或落地页**  
+  把参考图和文字素材放到画布上，告诉 Agent 你想要的风格。Agent 完成页面后，会检查桌面、平板和手机尺寸下的效果；你可以圈出不满意的位置继续修改，配置后发布到公网。
+
+- **制作一份演示稿**  
+  将照片、文字和参考风格放在画布上，Agent 生成分页幻灯。你可以直接查看每页效果、修改文字、圈选批注，最后导出 PDF 或 PPTX。
+
+- **完成一个跨媒体内容项目**  
+  将网站、图片、视频、演示稿和文档放在同一张画布上，由同一个 Agent 连续处理。不同产物可以共享已有素材、研究结果和风格上下文。
+
+### 支持的产物类型
+
+| 产物 | 文件格式 | 当前能力 |
+|---|---|---|
+| 演示稿、长图、海报 | `.html` | 支持 16:9、9:16、4:3 等比例分页，导出 HTML、PDF、PPTX |
+| 作品集、落地页、小应用 | 带 `index.html` 的文件夹 | 桌面、平板和手机尺寸预览，整站 ZIP 导出，配置 Cloudflare 后发布 |
+| Word 文档 | `.docx` | 生成标准 OOXML，不是将 HTML 修改后缀；支持页图预览、翻页和原件下载 |
+| 图片 | 常见图片格式 | 图片生成、背景移除和素材处理 |
+| 视频 | 常见视频格式 | 导入、预览和转码 |
+
+![说一句话生成图片，再移除背景，得到透明 PNG](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-image.gif)
+
+![Agent 生成 Word 文档，在画布上直接检查排版](https://raw.githubusercontent.com/Xiaokebuyu/Nodesign/main/docs/demo-docx.gif)
+
+### 已经完成的实际项目
+
+下面这些站点都在 NoDesign 里做出来，并且现在都能打开。
+
+| 站点 | 内容 |
+|---|---|
+| [喷气发动机 3D 互动教具](https://jet-engine-lab.share.xiaobuyu.trade) | 程序化几何构建的涡扇发动机，可旋转缩放、启动加油门、爆炸拆解、剖切透视与气流可视化，按站位读取压比、温度、速度与能量变化 |
+| [深入第三极](https://third-pole.share.xiaobuyu.trade) | 藏地三十日私人探险，长篇图文站 |
+| [晨曦 CHENXI](https://chenxi.share.xiaobuyu.trade) | 一份护肤刊物，以及从中生长出来的产品线 |
+| [相対性理論 · 纸上手账](https://soutaiseiriron.share.xiaobuyu.trade) | 乐队非公式粉丝站 |
+| [凛 · 角色拆解](https://rin.share.xiaobuyu.trade) | 短片《Shelter》主角的拆解笔记，每条批注同时是一个切换器 |
+| [某日猜想](https://225ad5.share.xiaobuyu.trade) | 分章节的互动故事，一个夏天午后的解谜 |
+| [SPiCa -paid vacation mix-](https://spica-mix.share.xiaobuyu.trade) | 单曲鉴赏页 |
+
+不是网站、但同样在这里做出来的：与上面第二个站配套的 15 页西藏攻略演示稿、一套像素风服务器宣传页，以及一份经历六轮修改的正式简历 `.docx`。
 
 ## 本地版与线上版
 
 | | 本地版 `npx @xiaobuyu/nodesign` | 线上版 [nodesign.xiaobuyu.trade](https://nodesign.xiaobuyu.trade) |
 |---|---|---|
-| 模型 | 你自己配置的（Claude 订阅、API Key 或兼容 OpenAI API 格式的服务） | 免费模型，每日额度 |
+| 模型 | 自行配置 Claude 订阅、API Key 或兼容 OpenAI API 格式的模型服务 | 免费模型，每日额度 |
 | 数据 | 保存在 `~/.nodesign/`，服务仅监听 `127.0.0.1` | 服务端存储，按用户隔离 |
 | 账号 | 无需账号，打开即可使用 | 公开注册 |
-| 能力 | 全部。截图、Word、抠图、生图等按本机环境自动探测。站点发布需要配置 Cloudflare Pages | 截图、搜索、生图开放。站点发布和订阅模型暂不对外开放 |
-| 费用 | 无订阅，无抽成。模型费用由你配置的服务商收取 | 免费 |
+| 能力 | 完整能力；截图、Word、抠图、生图等根据本机环境自动探测；站点发布需要配置 Cloudflare Pages | 开放截图、搜索和生图；站点发布与订阅模型暂未对外开放 |
+| 费用 | NoDesign 无订阅、无抽成；模型费用由配置的服务商收取 | 免费 |
 
-本地版是主力。线上版用来在不安装的情况下快速体验。
+本地版是主力，线上版用于在不安装的情况下快速体验基础能力。
 
 ## 配置
 
-启动后点右上角齿轮进入设置页，分为四个区域：
+启动后，点击右上角齿轮进入设置页。
+
+### 模型
+
+设置页提供两类模型配置：
+
+- **Claude 官方**：填写 Anthropic API Key，或通过 `nodesign login` 登录 Claude 订阅；
+- **自定义接入**：从服务商预设中选择 DeepSeek、OpenAI、智谱、通义、OpenRouter、Ollama 等服务，并填写接口地址和密钥。
+
+每个模型配置都可以运行连接测试，实际验证：
+
+- 普通对话；
+- 流式输出；
+- 工具调用；
+- 图片理解；
+- Token 计数能力。
+
+没有配置任何模型时，模型选择器会保持为空。
 
-- **模型**：两张并列的卡片。「Claude 官方」填 API Key 或通过 `nodesign login` 登录 Claude 订阅。「自定义接入」从服务商预设里选一个（DeepSeek、OpenAI、智谱、通义、OpenRouter、Ollama 等），填入接口地址和密钥。每个模型配置都可以运行连接测试，实际验证普通对话、流式输出、工具调用、图片理解和计数能力。没有配置任何模型时，模型选择器是空的。
-- **本机能力**：启动时自动探测 git、Chromium、LibreOffice、poppler、ffmpeg、rembg、生图、搜索、发布能力。缺少的会标出安装方法，对应工具会明确显示为不可用，并附上安装说明。
-- **其他设置**：搜索（四家任选一）、生图通道、Cloudflare 发布、沙盒与权限模式。
-- **状态**：数据目录、配置文件路径、重启。
+### 本机能力
 
-配置文件存放在 `~/.nodesign/.env`（密钥）和 `~/.nodesign/config.json`（模型插槽），也可以直接编辑。
+启动时会自动探测：
+
+- git
+- Chromium
+- LibreOffice
+- poppler
+- ffmpeg
+- rembg
+- 图片生成
+- 搜索
+- 发布能力
+
+缺少依赖时，设置页会标明安装方法，对应工具也会明确显示为不可用。
+
+### 其他设置
+
+还可以配置：
+
+- 搜索服务；
+- 图片生成通道；
+- Cloudflare Pages 发布；
+- 命令沙盒；
+- 自动权限检查。
+
+配置文件存放在：
+
+```text
+~/.nodesign/.env
+~/.nodesign/config.json
+```
+
+`.env` 用于保存密钥，`config.json` 用于保存模型插槽和其他配置，也可以直接编辑。
 
 ## 安全与隐私
 
-每个项目使用独立的工作区目录。本地数据默认保存在 `~/.nodesign/`，服务仅监听 `127.0.0.1`。
+每个项目都使用独立的工作区目录。本地数据默认保存在 `~/.nodesign/`，服务仅监听 `127.0.0.1`。
 
 在支持的平台上，可以启用系统级命令沙盒：
 
@@ -125,21 +285,39 @@ Agent 不只是把做完的产物放上画布，也把想法放上去。它会
 
 还可以启用自动权限检查，对文件上传、外部请求和其他敏感操作进行额外判断。
 
-本地版默认不启用命令沙盒和自动权限检查。请根据使用场景在设置中开启。在 Windows 上，建议仅打开你信任的项目，并在执行涉及工作区外文件、安装软件或上传内容的操作前确认 Agent 的计划。
+本地版默认不启用命令沙盒和自动权限检查，请根据自己的使用场景决定是否开启。
+
+在 Windows 上，建议只打开你信任的项目，并在 Agent 执行以下操作前确认它的计划：
+
+- 修改工作区外的文件；
+- 安装软件或依赖；
+- 上传本地内容；
+- 执行其他可能影响系统环境的操作。
 
 ## 项目状态
 
-个人项目，2026 年 4 月底起步，目前仍在快速迭代。本地发行版当前是 `0.0.6`，核心功能已在内测中稳定使用。
+NoDesign 是一个仍在快速迭代的个人项目，始于 2026 年 4 月底。
+
+当前状态：
+
+- 本地发行版：`0.0.7`
+- 进程内工具：54 个
+- 自动化测试：1,037 项
+- 早期用户：50 名
+
+核心功能已经在内测中稳定使用，但操作体验、平台兼容性和部分边缘能力仍需继续打磨。
 
-### 功能
+### 功能状态
 
 | 能力 | 当前状态 |
 |---|---|
 | 画布与项目管理 | 内测主版本运行中 |
 | 网站生成、预览与发布 | 稳定 |
 | 演示稿生成与导出 | 稳定 |
-| Word 文档 | 可用。预览分页与 Microsoft Word 可能存在偏差 |
-| 图片与视频工具 | 可用。具体能力取决于本机依赖和服务配置 |
+| Word 文档 | 可用；预览分页与 Microsoft Word 可能存在偏差 |
+| 图片与视频工具 | 可用；具体能力取决于本机依赖和服务配置 |
+| 空间化板书与关系图 | 可用，交互仍在继续完善 |
+| 画布对话与思考分支 | 开发中 |
 | 互动演出模式 | 实验中，尚未完整进入公开版本 |
 
 ### 平台兼容性
@@ -147,17 +325,26 @@ Agent 不只是把做完的产物放上画布，也把想法放上去。它会
 | 平台 | 状态 |
 |---|---|
 | Linux | 生产环境运行中 |
-| Windows | 已完成真机安装与运行验证 |
-| macOS | 有对应代码分支，尚未在真机上验证 |
-| 移动端 | 可以浏览和对话，整理和编辑建议使用电脑 |
+| Windows | 已完成真机安装和运行验证 |
+| macOS | 有对应代码分支，尚未进行真机验证 |
+| 移动端 | 可以浏览和对话；整理和编辑建议使用电脑 |
 
 ## 技术架构
 
-- **前端**：React + Vite。无限画布的相机、命中检测、关系排布和产物能力系统为自研实现（web/src/lib，45 个纯函数模块，配有单测）。
-- **服务端**：Node.js ESM。Agent 会话以项目工作区作为执行目录，通过 56 个进程内工具操作文件、浏览器和不同类型的产物。
-- **会话同步**：服务端维护会话状态，支持流式输出、断线恢复和多标签页同步。
-- **模型兼容**：原生支持 Claude，并通过格式转换接入兼容 OpenAI API 的模型服务。无法匹配上游时直接返回错误，避免请求被发送到错误的模型服务。
-- **产物系统**：网站、演示稿和 Word 文档通过统一的注册机制接入预览、导出和发布流程。新增产物类型时，通过同一注册入口接入相关能力。
+- **前端**  
+  React + Vite。无限画布的相机、命中检测、关系排布和产物能力系统为自研实现；`web/src/lib` 包含 46 个独立模块，几何计算、命中判定、导出格式等核心逻辑配有单元测试。
+
+- **服务端**  
+  Node.js ESM。Agent 会话以项目工作区作为执行目录，通过 54 个进程内工具操作文件、浏览器和不同类型的产物。
+
+- **会话同步**  
+  服务端维护会话状态，支持流式输出、断线恢复和多标签页同步。
+
+- **模型兼容**  
+  原生支持 Claude，并通过格式转换接入兼容 OpenAI API 的模型服务。无法匹配上游时直接返回错误，避免请求被发送到错误的模型服务。
+
+- **产物系统**  
+  网站、演示稿和 Word 文档通过统一的注册机制接入预览、导出和发布流程。新增产物类型时，通过同一注册入口接入相关能力。
 
 ## 开发
 
@@ -170,7 +357,7 @@ npm test                    # server 测试 + web 测试
 
 > 注意：完整运行需要配置模型接入（Claude 订阅或 API Key）以及部分本地工具依赖。设置页会列出缺少的依赖和安装方法。
 
-项目以 Vitest 测试套件作为发布前检查，server 和 web 合计 1021 项用例，覆盖前后端契约、模块边界、权限能力表和关键用户文案。部分约束以静态测试固化，避免仅依赖注释和人工约定。例如：
+项目以 Vitest 测试套件作为发布前检查，server 和 web 合计 1,037 项用例，覆盖前后端契约、模块边界、权限能力表和关键用户文案。部分约束以静态测试固化，避免仅依赖注释和人工约定。例如：
 
 - 前后端双份能力表逐项对账
 - 权限判断必须通过能力表查询

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiaobuyu/nodesign",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "type": "module",
   "description": "NoDesign: an infinite canvas workbench for independent creators. An agent builds sites, decks, documents, images and video as real files, on your machine, with your own model key.",
@@ -41,7 +41,7 @@
     "prepack": "npm run build:web"
   },
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.3.237",
+    "@anthropic-ai/claude-agent-sdk": "^0.3.251",
     "async-mutex-lite": "^1.0.0",
     "better-sqlite3": "^12.8.0",
     "cors": "^2.8.5",

package/server/api/admin.js

@@ -8,6 +8,7 @@
  *   GET    /api/admin/invites          邀请码列表（含用量）
  *   PATCH  /api/admin/invites/:code    {maxUses} 改总次数（0 = 封死）
  *   GET    /api/admin/users            用户列表 + 今日用量
+ *   GET    /api/admin/modes            设计 / 演出 两个模式各自的用量（不含站主）
  *   PATCH  /api/admin/users/:id        {disabled?, dailyCostLimitUsd?, lifetimeCostLimitUsd?} 封禁/调限额
  *   GET    /api/admin/issues           harness 问题库（按次数降序）+ 按工具聚合
  *   PATCH  /api/admin/issues/:id       {status} open|ack|ignored|closed
@@ -17,6 +18,7 @@
 import express from 'express';
 import { adminGuard } from '../auth/middleware.js';
 import { createInvite, listInvites, getInvite, updateInvite, listUsers, getUserById, updateUser } from '../auth/users-store.js';
+import { modeStats } from '../projects/store.js';
 import { tierOf, PLANS } from '../auth/tier.js';
 import { usedCostToday, usedCostTotal, usedTokensToday, limitFor } from '../lib/quota.js';
 import { listIssues, setIssueStatus, removeIssue, issueStats } from '../lib/issues-store.js';
@@ -73,6 +75,11 @@ router.get('/users', (_req, res) => {
   res.json({ users });
 });
 
+// 两个模式各自的用量。只读、无参数，控制台顶上那两张卡用。
+router.get('/modes', (_req, res) => {
+  res.json({ modes: modeStats() });
+});
+
 router.patch('/users/:id', (req, res) => {
   const user = getUserById(req.params.id);
   if (!user) return res.status(404).json({ error: 'user not found' });

package/server/api/assets/docx-page.js

@@ -18,6 +18,7 @@ import { promises as fs } from 'node:fs';
 import { pageImage, docPdf } from '../../lib/docx-pages.js';
 import { safeResolveRead } from '../../lib/safe-path.js';
 
+import { msg } from '../../shared/messages.js';
 /** 缩略图宽度上限：再大就不是缩略图了，纯粹是让服务端白干 */
 const MAX_WIDTH = 2000;
 
@@ -37,7 +38,7 @@ export function makeDocxPageHandler({ getSharedDir, guardProject }) {
       if (!abs) return res.status(403).json({ error: 'path escapes workspace' });
 
       let stat;
-      try { stat = await fs.stat(abs); } catch { return res.status(404).json({ error: '找不到这份文档' }); }
+      try { stat = await fs.stat(abs); } catch { return res.status(404).json({ error: msg(req, '找不到这份文档') }); }
 
       // ETag 带 mtime + size：agent 一 rebuild 就换 key，浏览器自然重取
       const w = Math.min(Math.max(0, Number(req.query.w) || 0), MAX_WIDTH);
@@ -51,7 +52,7 @@ export function makeDocxPageHandler({ getSharedDir, guardProject }) {
       } catch (err) {
         console.warn('[docx-page] render failed:', err.message);
         return res.status(err.status || 500).json({
-          error: '渲染失败',
+          error: msg(req, '渲染失败'),
           details: String(err.message || err).slice(0, 300),
         });
       }
@@ -80,7 +81,7 @@ export function makeDocxPdfHandler({ getSharedDir, guardProject }) {
       const abs = await safeResolveRead(root, rel);
       if (!abs) return res.status(403).json({ error: 'path escapes workspace' });
       let stat;
-      try { stat = await fs.stat(abs); } catch { return res.status(404).json({ error: '找不到这份文档' }); }
+      try { stat = await fs.stat(abs); } catch { return res.status(404).json({ error: msg(req, '找不到这份文档') }); }
       const etag = `"${stat.mtimeMs}-${stat.size}-pdf"`;
       if (req.headers['if-none-match'] === etag) return res.status(304).end();
       let out;
@@ -89,7 +90,7 @@ export function makeDocxPdfHandler({ getSharedDir, guardProject }) {
       } catch (err) {
         console.warn('[docx-pdf] render failed:', err.message);
         return res.status(err.status || 500).json({
-          error: '渲染失败',
+          error: msg(req, '渲染失败'),
           details: String(err.message || err).slice(0, 300),
         });
       }

package/server/api/assets/helpers.js

@@ -9,6 +9,7 @@
 
 import { promises as fs } from 'node:fs';
 import { parseChalk } from '../../lib/chalk.js';
+import { jsonPreview } from '../../lib/json-preview.js';
 
 /** 单层路径片段：不含分隔符、不含 `..`、不以点开头、长度可控 */
 export function safeSegment(s) {
@@ -54,6 +55,13 @@ export async function decorateFilePreview(item, absPath) {
     const raw = await fs.readFile(absPath, 'utf8');
     const head = /^---\n[\s\S]{0,1200}?\n---\n?/.exec(raw)?.[0] || '';
     const body = raw.slice(head.length).trimStart();
+    // json 走结构裁剪（08-29 刀 B）：产出仍是合法 json，前端才画得出折叠树。
+    // 硬截断的 json parse 不动，卡面上只能是半行 `{"name":"…`。
+    if (/\.json$/i.test(absPath)) {
+      const shrunk = jsonPreview(body);
+      if (shrunk !== null) { item.preview = shrunk; item.previewKind = 'json'; return item; }
+      // 不是合法 json（写了一半 / 带注释）：退回原样，别假装看得懂
+    }
     item.preview = body.length > 1024 ? body.slice(0, 1024) + '…' : body;
   } catch { /* 读不到就没有预览，卡退回细条 */ }
   return item;