企业官网建设流程全解析

从原型到产品

• 功能逻辑
• 数据结构
• 状态流转
• 错误处理
• 技术约束
• 交付标准

功能实现描述要“操作”状态

• ❌：
  • 用户可以管理笔记
• ✅：
  • 用户可对自己创建的笔记执行新建、编辑、归档、删除操作
  • 删除后先进入回收站，7 天内可恢复，超过 7 天永久删除
  • 已归档笔记默认不出现在首页列表，但可通过筛选查看

产品开发提示词

推荐 | 根据 AI 优化的内容人工重新编写

核心考察：

• 是否写清楚了产品目标与用户是谁
• 是否列出了页面清单和页面关系
• 是否描述了每个页面的布局结构
• 是否写清楚了关键组件与其状态
• 是否写清楚了关键交互流程
• 是否补充了空状态、加载状态、错误状态
• 是否定义了核心数据对象和字段(可选)
• 是否写清楚了关键业务规则
• 是否给出了技术栈和交付要求(可选)
• 提示词里是否仍有“简洁点”“高级点”“优化一下”这类模糊表达

让 AI 辅助修改

参见： https://www.kimi.com/share/19dc3348-49d2-8d38-8000-0000f11b2fc6

终稿提示词

你是一位精通 Electron + React/Vue 技术栈的资深桌面端开发工程师。请根据以下产品需求，开发一款名为「碎片成稿」的桌面客户端应用。需求已经过澄清，请严格按描述实现，不要自行删减功能。 ## 1. 产品概述 - 产品名称：碎片成稿 - 产品类型：AI 驱动的灵感捕获与内容创作助手（桌面客户端应用） - 目标用户：内容创作者、自媒体写手、产品经理、研究者、知识工作者等需要持续输出内容的人群 - 核心价值主张：降低"从灵感到成文"的 friction，让碎片信息自动发酵为可发布的内容 - 产品形态：仅桌面端（Windows / macOS），主应用窗口为可调整大小的自由窗口，最小尺寸 800×600，支持自适应布局 ## 2. 页面清单与信息架构 应用包含以下页面/模块，层级与导航关系如下： | 页面/模块 | 层级 | 承担任务 | 入口 | 出口 | |---|---|---|---|---| | 快捷输入浮窗 | L0（全局覆盖层） | 最小化输入入口，支持文字/链接/图片快速投递 | 全局快捷键（默认 `Cmd/Ctrl + Shift + I`，用户可配置） | 提交后自动关闭，或跳转至主应用，或失焦自动隐藏 | | 主应用 - 碎片库 | L1（核心页面） | 展示所有已萃取的信息碎片，支持筛选、搜索、批量操作 | Dock/任务栏图标点击；快捷浮窗"进入应用" | 进入写作台、设置页 | | 主应用 - 写作台 | L1（核心页面） | 基于勾选碎片进行选题分析或文章撰写 | 碎片库"开始写作"按钮；每日提醒通知点击 | 返回碎片库 | | 主应用 - 选题看板 | L1（核心页面） | 展示 AI 推荐的今日/本周可写选题及关联碎片 | 每日推送通知；碎片库顶部 Tab 切换 | 进入写作台；忽略选题 | | 碎片详情页/抽屉 | L2（详情层） | 查看单条碎片的原始输入、萃取结果、AI 标签、关联选题 | 碎片库点击单条卡片 | 返回碎片库 | | 设置页 | L2（配置层） | 配置快捷键、大模型 API、提醒时间、分类偏好、导出格式 | 主应用菜单"设置" | 返回应用，保存设置 | | 每日提醒通知 | L0（系统通知层） | 推送今日选题建议，引导用户进入应用 | 系统定时推送 | 点击跳转选题看板或写作台，关闭通知| 导航方式： - 快捷浮窗 → 独立浮层，无导航栏，提交即走 - 主应用内 → 左侧边栏 Tab 切换（碎片库 / 选题看板 / 写作台）+ 右侧内容区 - 详情/设置 → 右侧抽屉或独立页面覆盖 ## 3. 各页面布局结构 ### 3.1 快捷输入浮窗 - 尺寸：固定 480×320 像素 - 头部：产品 Logo + 产品名"碎片成稿" + 关闭按钮（×） - 内容区： - 多行文本输入框，placeholder 为"随便写点什么..." - 自动识别粘贴内容：若粘贴 URL，下方展开链接预览卡片（显示标题+域名+favicon）；若粘贴图片，显示图片缩略图，支持点击预览，显示文件大小提示 - 操作区： - 标签快捷选择（如 #待读 #想法），用户可点击添加 - 提交按钮 + "打开主应用 →" 跳转入口 - 动效：唤起时 scale 0.95→1 + opacity 0→1，持续 200ms ease-out；关闭时反向 ### 3.2 主应用 - 碎片库 - 顶部导航栏：Logo + "碎片库" / "选题看板" / "写作台" Tab 切换 + 搜索框 + 设置按钮 - 筛选标签栏：全部 / 文章 / 想法 / 待读 / 图片 + 时间排序下拉 - 左侧边栏：分类树（技术 / 产品 / 生活 / ...，支持用户自定义分类） - 内容区：卡片列表，每张卡片展示： - 原始输入摘要（链接显示 URL，图片显示缩略图） - 萃取内容摘要 - AI 自动标签 - 日期（如 04-25） - 左侧勾选框（点击后卡片边框高亮） - 底部批量操作栏（当选中 ≥1 条时浮现）：显示"已选 N 条" + AI 选题分析 / AI 直接成文 / 删除 按钮 - 图片在碎片库中以缩略图形式呈现，鼠标悬浮可放大预览 ### 3.3 主应用 - 选题看板 - 顶部导航与碎片库一致，"选题看板"为激活状态 - 内容区分两区块： - 今日推荐：基于最近碎片分析生成的选题卡片列表，每张卡片显示： - 选题标题（如《AI 工具如何改变个人知识管理》） - 关联碎片数量及标题预览 - 操作按钮：查看碎片 / 开始写作 / 暂时忽略 - 历史选题 / 已忽略：折叠或次级列表展示 - 选题忽略交互：卡片向左滑出 80% + 透明度降低，释放后滑出，出现撤销按钮（3 秒内可撤销） ### 3.4 主应用 - 写作台 - 两栏布局： - 左侧：素材栏（显示已勾选碎片列表，横幅占比1/4） - 每个素材提供两个可选项“仅萃取内容”或“完整内容” - 根据用户勾选项，为写作大模型提供上下文 - 中间：主区域（横幅占比3/4） - 上方输入框为写作要求（追加到已有 AI 写作提示词） - 操作选项：预设风格（下拉菜单：干货教程|资讯解读|工具分享） + 撰写按钮 - 显示/编辑器区域：可编辑文本框，支持 Markdown 格式渲染 - 底部操作栏：重新生成 / 导出 Markdown / 复制全文 - AI 生成文字时显示流式打字机效果逐字输出，光标闪烁，可随时停止生成 ### 3.5 碎片详情页/抽屉 - 从右侧滑出的抽屉面板，宽度约 600px 或占主窗口 50% - 展示内容： - 原始输入区（完整文字 / 链接原文 / 图片原图） - 萃取结果区（结构化摘要、标签、分类） - AI 标签与分类（可编辑） - 关联选题列表 - 操作按钮：重新萃取 / 编辑 / 删除 ### 3.6 设置页（抽屉或独立页面） - 从右侧滑出或独立页面覆盖 - 配置项分组： - 大模型配置：API Key 输入框、模型名输入框、Base URL 自定义 - 图片理解模型配置：同大模型配置，勾选“图片理解”时可填写 - 快捷键自定义：唤起浮窗快捷键输入框，检测系统冲突并提示"该快捷键已被系统占用，请更换" - 提醒时间：每日推送时间选择器、免打扰时段设置 ## 4. 关键交互流程 ### 4.1 灵感捕获流程 1. 用户按下全局快捷键 → 屏幕中央弹出快捷输入浮窗（scale 0.95→1 + opacity 0→1，200ms ease-out） 2. 用户输入文字、粘贴链接或图片 3. 自动识别粘贴内容：URL 展开链接预览卡片（标题+域名+favicon）；图片显示缩略图+文件大小 4. 用户点击"提交"： - 按钮变为加载态（Spinner），浮窗关闭 - 右上角 toast 提示"已保存，正在萃取..." - 碎片状态设为 `pending`，保存至本地 SQLite 5. 后台异步处理： - 文本：调用大模型 API 萃取，输出固定 JSON 格式 `{summary, tags, category, key_points}` - 链接提取：提取网页全文，若遇反爬/JS 渲染失败/超时 10 秒，则标记 `failed`，但在前端仍显示原始链接，并附带明显的 ⚠️ icon 提示"全文提取受限" - 图片：若用户配置了支持图像理解的大模型，先调用图像理解模型理解图片内容，再将描述一并送入大模型萃取；未配置图像理解大模型则仅保存图片，不提取图片信息作为萃取对象 6. 萃取完成后： - 碎片状态更新为 `extracted` - 系统通知气泡："1 条新碎片已萃取完成"，点击可查看详情 - 萃取结束后用户可编辑信息（标签、分类、摘要），也可选择重新萃取 - 触发实时归类：基于大模型分析（非纯关键词）对新碎片进行聚类，更新选题看板 ### 4.2 碎片库浏览与批量操作 1. 用户点击 Dock/任务栏图标进入主应用，默认展示碎片库 2. 加载状态：骨架屏 → 卡片 stagger 渐显（每项延迟 50ms） 3. 空状态：展示引导插画 + 文案"还没有灵感碎片，按 ⌘+⇧+I 开始记录" + 快捷唤起按钮 4. 用户点击卡片左侧勾选框 → 卡片边框高亮，底部浮现批量操作栏 5. 用户点击"AI 选题分析"或"AI 直接成文" → 进入写作台，左侧加载已勾选碎片，右侧显示流式生成内容 6. 批量操作限制：最多一次勾选 10 条碎片；生成文章时按时间顺序排列素材 ### 4.3 选题发现与处理 1. 系统实时分析：每当新碎片萃取完成，基于大模型聚类分析碎片关联性 2. 聚类结果中碎片数 ≥3 且置信度 >0.7 时，生成选题建议，状态为 `suggested` 3. 每日 19:00 系统推送通知（若当日无新碎片则不推送），点击跳转选题看板 4. 用户在选题看板可： - 点击"查看碎片" → 侧栏展示关联碎片 - 点击"开始写作" → 携带关联碎片进入写作台 - 点击"暂时忽略" → 卡片向左滑出，3 秒内显示撤销按钮 - 点击"今日不再提醒" → 当日停止推送 ### 4.4 写作与导出流程 1. 用户进入写作台，左侧素材栏显示已勾选碎片列表 2. 对每条碎片，用户可选择内容粒度： - 勾选"仅萃取内容" → 仅将该碎片的 AI 摘要/关键信息作为上下文传入写作大模型 - 勾选"完整内容" → 将该碎片的原始全文作为上下文传入写作大模型 3. 用户在主区域上方输入框中填写写作要求（该内容将追加至已有 AI 写作提示词末尾） 4. 用户从预设风格下拉菜单中选择目标风格： - 干货教程：对应结构清晰、步骤化表达，适合操作指引类内容的写作提示词 - 资讯解读：对应客观陈述 + 分析视角，适合行业动态类内容的写作提示词 - 工具分享：对应场景化描述 + 使用体验，适合产品推荐类内容的写作提示词 5. 点击"撰写"按钮，系统将左侧所选碎片内容（按用户粒度选择）、写作要求、预设风格提示词合并后发送至写作大模型 6. 编辑器区域以流式打字机效果逐字输出生成内容；用户可随时点击"停止生成"中断输出 7. 生成完成后，用户可在可编辑文本框中直接修改内容，编辑器支持 Markdown 格式实时渲染 8. 如需重新生成，点击"重新生成"按钮，保持当前参数配置重新发起请求（可在重新生成前修改写作要求或切换风格） 9. 点击"导出 Markdown" → 弹出保存对话框，将当前编辑器内容生成 `.md` 文件并保存至用户指定路径 10. 点击"复制全文" → 将编辑器中完整 Markdown 内容写入系统剪贴板 ## 5. 空状态、加载状态、错误状态 ### 5.1 空状态 - 碎片库为空：展示插画 + 文案"还没有灵感碎片，按 ⌘+⇧+I 开始记录" + "立即记录"按钮 - 选题看板为空：文案"暂无推荐选题，多记录一些灵感，AI 会帮你发现写作方向" + 快捷跳转碎片库按钮 - 写作台无素材：文案"请从碎片库勾选素材，或直接进入自由写作模式" - 搜索结果为空：文案"未找到匹配碎片，尝试更换关键词" ### 5.2 加载状态 - 碎片库加载：骨架屏（灰色占位块）→ 卡片 stagger 渐显（每项延迟 50ms） - 快捷浮窗提交：提交按钮变为 Spinner，禁用再次点击 - AI 萃取中：碎片卡片显示 `pending` 状态（顶部进度条或脉冲动画） - AI 生成中：写作台编辑器显示流式输出，底部显示"AI 正在思考..." + 停止按钮 - 链接预览加载：显示小型 Skeleton，加载失败时显示"无法获取预览" ### 5.3 错误状态 - 链接提取失败 / API 超时：碎片卡片显示红色角标，hover 显示失败原因（如"链接抓取超时"或"API 请求失败"），提供"重试萃取"按钮 - OCR 未配置时遇到图片：图片正常保存并显示缩略图，但萃取内容仅显示"图片已保存，配置 OCR 后可提取文字信息"，附带设置入口 - 大模型 API 未配置：用户首次提交时 toast 提示"请先配置大模型 API，否则仅保存原始输入"，点击跳转设置页 - 快捷键冲突：设置页中检测冲突，输入框边框变红，下方文案提示"该快捷键已被系统占用，请更换" - 存储/读写错误：toast 提示"本地存储异常，请检查磁盘权限或剩余空间" ## 6. 关键业务规则 ### 6.1 数据存储规则 - 数据完全本地存储，使用 SQLite 或 LevelDB，不设存储上限 - 图片素材存储在本地文件系统（建议路径：应用数据目录 `/fragments/images/`），数据库中仅保存文件路径 - 无云端同步机制，单设备使用 ### 6.2 萃取规则 - 大模型输出必须为固定 JSON 格式：`{summary: string, tags: string[], category: string, key_points: string[]}` - 链接处理：提取网页全文，超时 30 秒则标记 `failed`，前端显示原始链接 + ⚠️ icon 提示"全文提取受限" - 图片处理：先图片理解（若配置）再萃取；未配置图片理解则跳过文字提取，仅保存图片 - 未配置大模型 API 时，仅保存原始输入，萃取功能不可用，toast 引导用户配置 ### 6.3 归类与选题规则 - 聚类基于大模型分析（非纯关键词匹配），实时执行：新碎片萃取完成后立即触发归类 - 生成选题条件：聚类结果中碎片数 ≥3 且置信度 >0.7 - 分类体系支持用户自定义，AI 归类时参考用户预设分类 ### 6.4 提醒规则 - 每日 19:00 推送选题通知，若当日无新碎片则不推送 - 用户可设置免打扰时段，支持"今日不再提醒" ### 6.5 写作规则 - 最多一次勾选 10 条碎片进入写作台 - 生成文章时按碎片时间顺序排列素材 - 仅支持导出 Markdown 格式 ### 6.6 权限与约束 - 图片单张大小限制 10MB，超出时提示"图片过大，请压缩后重新上传" - 全局快捷键需检测系统冲突，冲突时阻止保存并提示用户更换 ## 7. 技术约束与交付要求 - 技术栈：Electron（跨平台桌面端）+ React + SQLite（本地存储）+ 大模型 API - 响应式：主应用窗口最小 800×600，支持自适应；快捷浮窗固定 480×320 - 文件结构：按功能模块划分 `/src/main`（主进程）、`/src/renderer`（渲染层）、`/src/workers`（后台萃取任务） - 组件复用：碎片卡片、选题卡片、AI 生成加载态、Toast 通知等抽离为通用组件 - 真实接口：接入大模型 API（OpenAI / Claude / DeepSeek / Ollama 等）+ 网页抓取服务 ## 8. 其他要求 1. 大模型相关 API 使用 OpenAI SDK 规范 2. 图像理解大模型请求示例如下

import asyncio import os from volcenginesdkarkruntime import AsyncArk client = AsyncArk( base_url='https://ark.cn-beijing.volces.com/api/v3', api_key=os.getenv('ARK_API_KEY') ) async def main(): local_path = "/Users/doc/ark_demo_img_1.png" response = await client.responses.create( model="doubao-seed-2-0-lite-260215", input=[ {"role": "user", "content": [ { "type": "input_image", "image_url": f"file://{local_path}" }, { "type": "input_text", "text": "Which model series supports image input?" } ]}, ] ) print(response) if __name__ == "__main__": asyncio.run(main())

3. 将所有大模型相关功能设计的提示词统一管理，以方便我集中修改优化。 4. 整体 UI 视觉参考路径下`spacex`中的设计规范 请按以上需求完整实现「碎片成稿」桌面应用，确保所有页面、交互、状态、业务规则均被覆盖。如遇到需求冲突或技术不可行点，请列出具体问题并给出替代方案，不要擅自删减功能。