Skip to content

prd.md

Latest commit

 

History

History
293 lines (222 loc) · 11.8 KB

prd.md

File metadata and controls

293 lines (222 loc) · 11.8 KB
Raw

微信文章 AI 编辑器产品需求与技术方案

1. 文档信息

项目 内容
产品名称 微信文章 AI 编辑器
产品定位 基于 JitWord SDK 的公众号内容创作、智能排版与发布准备工作台
目标用户 公众号创作者、新媒体编辑、品牌运营、知识型内容团队
当前阶段 MVP 设计与工程落地
技术主线 Vue 3 + Vite + TypeScript + Pinia + JitWord SDK + 微信兼容导出引擎

2. 背景与机会

微信公众号创作流程通常横跨选题、写作、润色、排版、预览、复制到公众号后台等多个工具。传统编辑器解决了排版问题，但在 AI 辅助创作、品牌样式沉淀、微信粘贴兼容、团队资产复用方面仍存在明显断点。

JitWord SDK 提供富文档编辑能力，适合作为编辑器核心。项目在此基础上叠加公众号场景能力：微信兼容 HTML 导出、样式内联、模板与主题、AI 写作助手、草稿与版本管理，形成面向公众号运营者的一体化生产工具。

3. 产品定位

3.1 一句话定位

让公众号创作者在一个工作台内完成从文章构思、AI 写作、精细排版到可粘贴发布的完整流程。

3.2 核心价值

  • 降低创作成本：AI 支持标题、摘要、大纲、续写、润色、结构优化。
  • 降低排版成本：内置公众号常用样式块、文章模板、主题系统。
  • 降低发布风险：导出前执行微信兼容检查，复制后尽量保持样式一致。
  • 沉淀内容资产：草稿、版本、模板、主题、AI 指令可持续复用。
  • 保留扩展空间：通过 JitWord SDK 和模块化架构支持后续协同、云端、团队权限。

4. 用户与场景

用户类型 核心诉求 高频场景
个人创作者 快速产出高质量内容 选题生成、文章初稿、标题优化、一键排版
新媒体编辑 稳定产出与减少返工 批量草稿、品牌模板、发布前检查
企业品牌运营 统一品牌表达 主题规范、固定结尾、二维码组件、版本追踪
知识型团队 长文与教程生产 大纲生成、结构优化、代码块、图文混排

5. 产品目标与指标

5.1 北极星指标

单篇文章从初稿到可粘贴发布的平均耗时。

5.2 MVP 成功指标

  • 导出成功率：核心样式复制到公众号后台后保持率达到可接受水平。
  • AI 采纳率：AI 输出被插入、替换或复制的比例。
  • 模板使用率：新建文章中使用模板或样式块的比例。
  • 草稿恢复成功率：自动保存后可恢复内容的比例。
  • 编辑体验稳定性：3000 字文章编辑和导出过程无明显卡顿。

6. 开源设计 skills 选择

本项目不照搬单一竞品，而采用组合式产品设计：

参考方向 借鉴能力 在本项目中的应用
JitWord SDK 富文档、Word-like 编辑、协同扩展、AI 扩展基础 编辑器核心、内容模型、选区能力、后续协同
tiptap-appmsg-editor 微信公众号复制、样式库、模板库实践 微信兼容导出、样式块与模板插入逻辑
Yiitap / Tiptap UI Kit AI 菜单、气泡菜单、Slash 命令、块级体验 AI 指令面板、快捷插入、选区工具
Notion 类编辑体验 结构化内容块、命令菜单、轻量工作流 样式块、模板块、AI 命令入口
Word 类编辑体验 工具栏、标题层级、表格、文档预览 JitWord 主编辑区和文档编辑骨架
shadcn/ui 理念 Headless、可复制、可定制、设计系统化 Vue 侧采用 Tailwind + Headless 组件思想实现工作台 UI

7. 范围规划

7.1 MVP 范围

  • Vue 3 + Vite + TypeScript 工程。
  • JitWord SDK 本地产物接入层，默认从 public/vendor/jitword/ 加载 GitHub/CDN 产物，提供兼容降级编辑器，方便 SDK 文件未就绪时继续开发。
  • 三栏式创作工作台：草稿/模板、编辑器、AI/样式/预览。
  • 本地草稿自动保存。
  • 公众号兼容 HTML 导出、样式内联、一键复制。
  • AI 指令模板与本地模拟输出，预留 OpenAI-compatible API 适配。
  • 内置主题与公众号常用样式块。
  • 发布前检查。

7.2 V1 范围

  • 接入真实大模型流式 API。
  • 增加品牌资产、素材管理、封面图、二维码组件。
  • 增加版本对比、AI 修改对比、文章复制副本。
  • 增强微信兼容规则与测试样例。

7.3 V2 范围

  • 云端账户、团队空间、多设备同步。
  • JitWord 协同编辑能力接入。
  • 微信生态合规集成，如素材同步、草稿辅助发布。
  • 数据分析与团队效率看板。

8. 功能需求

8.1 创作工作台

  • 用户故事：作为编辑，我希望打开产品后能快速找到草稿、模板和最近编辑内容。
  • 功能点：草稿列表、快速新建、模板入口、最近编辑状态、自动保存提示。
  • 验收标准：刷新页面后仍能恢复最近编辑内容。

8.2 JitWord 编辑区

  • 用户故事：作为创作者，我希望像使用文档工具一样编辑公众号文章。
  • 功能点：标题、正文、列表、引用、图片占位、表格、基础工具栏、内容变更事件。
  • 验收标准：编辑内容能同步到状态管理并触发预览刷新。

8.3 AI 助手

  • 用户故事：作为创作者，我希望对选区或全文执行润色、续写、摘要、标题生成。
  • 功能点：AI 指令按钮、Prompt 构建、流式输出预留、结果插入/替换/放弃。
  • 验收标准：每个 AI 指令都能基于当前文章内容生成可用建议。

8.4 公众号样式中心

  • 用户故事：作为新媒体编辑，我希望快速插入常用排版模块并统一文章风格。
  • 功能点：主题切换、样式块插入、引言、卡片、分割线、代码块、结尾引导。
  • 验收标准：插入样式块后预览与导出内容同步变化。

8.5 微信兼容预览与导出

  • 用户故事：作为运营者，我希望复制到公众号后台后样式尽量不丢失。
  • 功能点：HTML 清洗、样式内联、微信兼容白名单、移动端预览、一键复制。
  • 验收标准：标题、段落、列表、引用、卡片、代码块等基础样式可被导出为内联 HTML。

8.6 文档与版本管理

  • 用户故事：作为编辑，我希望文章误操作后能恢复。
  • 功能点：自动保存、版本快照、更新时间、内容恢复。
  • 验收标准：本地至少保存当前草稿和最近版本快照。

8.7 系统设置

  • 用户故事：作为高级用户，我希望配置 AI 模型和导出规则。
  • 功能点：模型地址、API Key、默认主题、导出选项。
  • 验收标准：配置项可被 AI 服务层和导出引擎读取。

9. 信息架构与交互

graph TD
  Home["创作工作台"] --> Drafts["草稿列表"]
  Home --> Editor["JitWord 编辑区"]
  Home --> Panel["右侧能力面板"]
  Panel --> AI["AI 助手"]
  Panel --> Styles["样式中心"]
  Panel --> Preview["微信预览"]
  Editor --> Export["兼容导出"]
  Styles --> Export
  AI --> Editor
Loading

9.1 推荐布局

  • 左侧栏：草稿、模板、主题入口。
  • 中间区：文章标题、JitWord 编辑器、基础工具栏。
  • 右侧栏：AI 助手、样式块、微信预览、兼容检查。
  • 顶部栏：保存状态、主题选择、复制到公众号、设置。

10. 技术架构

graph TD
  User["用户"] --> App["Vue 应用"]
  App --> Editor["JitWord 适配层"]
  App --> Store["Pinia 状态"]
  App --> AI["AI 服务层"]
  App --> Exporter["微信导出引擎"]
  Store --> Draft["本地草稿存储"]
  AI --> Model["OpenAI-compatible API"]
  Exporter --> Clipboard["剪贴板"]
Loading

10.1 前端技术栈

  • 框架：Vue 3 + TypeScript。
  • 构建：Vite。
  • 状态：Pinia。
  • 样式：Tailwind CSS 与 CSS 变量。
  • 图标：Vue 侧建议 lucide-vue-next 或纯 SVG，避免使用表情符号充当图标。
  • 测试：Vitest。

10.2 核心模块

模块 职责
jitwordAdapter 加载本地 JitWord SDK 产物，封装初始化、内容读写、选区与命令，并在加载失败时降级到基础编辑器
articleStore 管理当前文章、草稿、版本、主题、保存状态
wechatExporter HTML 清洗、样式内联、兼容检查、复制到剪贴板
aiService Prompt 构建、模型调用、模拟输出、后续流式响应
themePresets 公众号主题与样式块配置

11. 数据模型

interface ArticleDraft {
  id: string;
  title: string;
  summary: string;
  contentHtml: string;
  plainText: string;
  themeId: string;
  status: 'draft' | 'ready';
  updatedAt: string;
  version: number;
}

interface ThemePreset {
  id: string;
  name: string;
  primaryColor: string;
  textColor: string;
  backgroundColor: string;
  css: string;
}

interface BlockTemplate {
  id: string;
  name: string;
  category: string;
  html: string;
}

12. 关键流程

12.1 编辑与自动保存

graph TD
  Input["用户编辑"] --> Change["内容变更"]
  Change --> Store["更新 Pinia"]
  Store --> Save["本地自动保存"]
  Store --> Preview["刷新预览"]
Loading

12.2 AI 写作

graph TD
  Select["选择指令"] --> Context["获取上下文"]
  Context --> Prompt["构建 Prompt"]
  Prompt --> Generate["生成结果"]
  Generate --> Apply["插入或替换"]
Loading

12.3 微信导出

graph TD
  HTML["编辑器 HTML"] --> Clean["HTML 清洗"]
  Clean --> Inline["样式内联"]
  Inline --> Check["兼容检查"]
  Check --> Copy["复制到剪贴板"]
Loading

13. 非功能需求

  • 性能：3000 字文章导出处理时间目标控制在 1 秒级。
  • 可靠性：AI 失败不破坏原文，复制失败提供 HTML 手动复制兜底。
  • 安全性：导出前移除脚本、事件属性、危险链接。
  • 可扩展性：新增 AI 指令、主题、样式块不应修改编辑器核心。
  • 兼容性：优先保障现代 Chrome、Edge、Safari。

14. 实施里程碑

阶段 目标 交付物
Task A 项目初始化 Vite + Vue + TS + Pinia 工程
Task B 编辑器工作台 三栏布局、草稿、本地保存
Task C 公众号导出 内联 HTML、预览、复制、检查
Task D AI 助手 指令模板、模拟生成、写入编辑器
Task E 模板主题 主题切换、样式块插入
Task F 质量验收 单元测试、构建脚本、运行说明

15. MVP 验收标准

  • 能创建和编辑文章草稿。
  • 能切换主题并插入公众号常用样式块。
  • 能执行 AI 润色、续写、标题生成、摘要生成的模拟链路。
  • 能生成微信兼容的内联 HTML 并复制。
  • 能进行发布前检查并给出风险提示。
  • 刷新页面后能恢复最近编辑内容。
  • 工程具备 dev、build、test 脚本。

16. 后续风险与决策点

  • JitWord SDK 本地产物与全局 API 细节：开源版优先采用 GitHub/CDN 产物本地化接入，默认加载 arco.css、px-editor.css、vue.global.prod.js、arco-vue.min.js、arco-vue-icon.min.js、echarts.min.js、mind-elixir.js、px-editor.standalone.js 等文件；官方示例入口为 window.PxEditor.Jitword，需确认初始化参数、内容读写 API 和协同服务配置；当前工程以适配层隔离这些变化。
  • 微信公众号粘贴兼容：不同后台版本可能存在差异，需要建立真实粘贴测试样例。
  • AI 成本与隐私：生产环境建议后端代理模型请求，不在前端暴露密钥。
  • 样式隔离：应用 UI 样式与导出正文样式必须分离，避免 Tailwind 类名污染导出 HTML。