docs: fix brand images and add workspace preview

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/brand/anchor-deck-icon.svg" alt="帆页 Anchor Deck 图标" width="112" height="112">
+  <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/brand/anchor-deck-icon-1024.png" alt="帆页 Anchor Deck 图标" width="112" height="112">
 </p>
 
 <h1 align="center">帆页 Anchor Deck</h1>
@@ -16,10 +16,10 @@ AI 很会生成漂亮的 HTML slides，但后续改字、换图、挪布局通
 
 帆页围绕同一套 HTML 检测、转换和浏览器编辑器，提供在线工作台、网页转换器和 MCP 工作区三种入口。在线工作台适合直接续做账户项目；网页转换器和 MCP 则保留本地优先的工作流：
 
-| 网页转换 | MCP 工作区 |
-| --- | --- |
-| <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/images/readme/web-converter.jpg" alt="网页转换截图" width="100%" loading="lazy" decoding="async"> | <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/images/readme/codex-workspace.jpg" alt="MCP 工作区截图" width="100%" loading="lazy" decoding="async"> |
-| 上传 HTML / ZIP / 文件夹，生成可编辑 ZIP。 | 在 Codex、Claude 或 WorkBuddy 里打开本地工作区，直接让 AI 修改当前 deck。 |
+| 在线工作台 | 网页转换器 | MCP 工作区 |
+| --- | --- | --- |
+| <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/images/readme/online-workspace.png" alt="在线工作台截图" width="100%" loading="lazy" decoding="async"> | <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/images/readme/web-converter.jpg" alt="网页转换器截图" width="100%" loading="lazy" decoding="async"> | <img src="https://cdn.jsdelivr.net/gh/wengzige/html-deck-editor@main/docs/images/readme/codex-workspace.jpg" alt="MCP 工作区截图" width="100%" loading="lazy" decoding="async"> |
+| 登录后导入 HTML，在账户项目中继续编辑和同步。 | 上传 HTML / ZIP / 文件夹，生成可编辑 ZIP。 | 在 Codex、Claude 或 WorkBuddy 里打开本地工作区，直接让 AI 修改当前 deck。 |
 
 ## 三种使用方式
 

docs/brand/README.md

@@ -0,0 +1,52 @@
+# 帆页 Anchor Deck 品牌规范
+
+本目录是项目品牌信息与 Logo 资产的唯一标准。README、产品界面、发布说明和宣传内容都应以这里为准。
+
+## 固定品牌信息
+
+| 项目 | 唯一标准 |
+| --- | --- |
+| 中文名 | **帆页** |
+| 英文名 | **Anchor Deck** |
+| 标准组合 | **帆页 Anchor Deck** |
+| 一句话描述 | **让每一页，重新可编辑。** |
+
+机器可读版本见 [`brand.json`](brand.json)。需要在代码、脚本或模板中复用品牌信息时，优先读取该文件，不要另写一套名称或文案。
+
+## Logo
+
+| 用途 | 文件 |
+| --- | --- |
+| 矢量主文件 | [`anchor-deck-icon.svg`](anchor-deck-icon.svg) |
+| 1024 × 1024 位图 | [`anchor-deck-icon-1024.png`](anchor-deck-icon-1024.png) |
+
+图标由演示页面与锚点组成。深松绿色代表稳定、专注，暖象牙白降低工具感，让整体更安静耐看。
+
+### 使用规则
+
+- 应用图标、头像和正方形场景只使用图标本身。
+- 中文场景首次出现时使用“帆页 Anchor Deck”，后文可简称“帆页”。
+- 英文场景使用“Anchor Deck”。
+- 产品分支写作“帆页 Anchor Deck MCP”和“帆页 Anchor Deck 在线版”。
+- 文件名、命令名和软件包名继续使用兼容性标识 `anchor-deck`，不因品牌展示名变化而改动。
+- 不拉伸、旋转、添加阴影或重新绘制 Logo；不使用测试稿和历史方案。
+- 不再使用其他候选中文名。
+
+## 标准视觉
+
+| 角色 | 色值 | 用途 |
+| --- | --- | --- |
+| 深松绿 | `#17624A` | Logo 主色、重点操作、品牌识别 |
+| 暖象牙白 | `#F3F0E7` | Logo 线条、柔和背景 |
+| 墨色 | `#17251F` | 标题和正文 |
+
+中文优先使用苹方或系统无衬线字体，英文优先使用 Inter 或系统无衬线字体。品牌组合中“帆页”作为主名称，字重 600；“Anchor Deck”作为英文名称，字重 500。界面中保持自然字距，不使用全大写中文或装饰字体。
+
+## 标准展示
+
+```text
+帆页 Anchor Deck
+让每一页，重新可编辑。
+```
+
+除正式英文页面外，不单独用英文名替代中文品牌，也不为不同页面重新创作一句话描述。

docs/brand/brand.json

@@ -0,0 +1,22 @@
+{
+  "name": {
+    "zh-CN": "帆页",
+    "en": "Anchor Deck",
+    "display": "帆页 Anchor Deck"
+  },
+  "description": "让每一页，重新可编辑。",
+  "logo": {
+    "svg": "./anchor-deck-icon.svg",
+    "png1024": "./anchor-deck-icon-1024.png",
+    "alt": "帆页 Anchor Deck 图标"
+  },
+  "colors": {
+    "pine": "#17624A",
+    "warmIvory": "#F3F0E7",
+    "ink": "#17251F"
+  },
+  "typography": {
+    "zh-CN": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
+    "en": "Inter, ui-sans-serif, system-ui, sans-serif"
+  }
+}