0. 先和大家打个招呼吧
-
你是谁：金融行业股票研究员；
-
你是怎么用TRAE把Demo做出来的：我先把工作中遇到的问题、可能的 AI 应用场景和产品想法告诉 TRAE，再让它帮我系统化梳理落地方案，拟定开发规划，并一步步实现每个功能。尽管我完全不懂代码，但是用Trae做的东西已经基本可用，Trae正在加速重塑AI时代的工作模式，让AI向每一个工作场景全面渗透。
1. Demo简介
-
是什么：Writing OS是一个AI驱动的结构化写作Web应用，把长文写作拆解为「创建项目→写作地图→逐句写作→全文预览」四步流程。AI负责生成大纲结构、推荐候选句、补写内容，人负责选词定调，让写作从"面对空白文档"变成"沿着结构逐步推进"。
-
面向谁：需要产出中长文的内容创作者——公众号作者、科普作者、行业分析人员、知识工作者，以及所有“知道要写什么但不知从哪开始”的写作者。
-
主要功能：
1、AI写作地图：输入主题、目标读者、写作目的、字数、期望风格后，AI自动生成结构化的节点大纲（每节点含标题、写作目标、建议写法、目标字数），可增删改、插入节点、重新生成。2、逐句AI辅助写作：进入任一节点即可逐句写作，AI根据上下文实时推荐候选句，支持光标位置插入、一键填充当前节点，每句候选都带资料溯源标记。3、底稿与资料溯源：每句内容可关联底稿来源，卡片式展示证据原文与来源链接，支持手动增删改来源，让AI生成内容可追溯、可核查。4、个人风格管理：内置预设风格，支持个人风格与手动输入风格，让AI推荐的候选句贴合你自己的语气和质感。
2. Demo创作思路
-
灵感来源：我自己写长文时最深的痛点是“开局即卡壳”——面对空白文档，脑子里有零散的观点，却组织不成结构。现有的AI写作工具要么直接生成整篇（人失去掌控），要么需要多轮对话修改调校（缺结构把控）。我想要的是一种“人机协作”的中间态：AI帮我把想法拆成结构，我在结构里逐句推进，AI随时给建议，但最终定稿权在我。
-
想解决的问题：
1、开局难：写作者面对空白文档不知从何下笔，缺少结构化的起步脚手架
2、结构散：写到中途容易跑题、比例失衡，缺少对全文结构的可视化和节点级的目标约束
3、AI生成不可控：一键生成整篇质量不可预测，且无法逐句介入调整
4、内容不可溯源：AI写的内容不知道依据从哪来，难以核查可信度
-
为什么做这个方向：写作是高频且真实的需求，但市面工具要么偏“生成”（弱化人的掌控），要么偏“优化”（弱化AI能力）。WritingOS的判断是：把AI嵌入写作流程的每一步，但把决策权留给写作者——AI生成结构、推荐句子、补写内容，人负责选择、修改、定稿。结构化拆解+逐句协作，是让AI真正服务于“写”而非“替写”的关键。
3. Demo体验地址
-
在线体验：Writing OS网页版
备份链接：https://writing-os-ai-mvp.vercel.app/?beta_token=writingos-beta-2026体验说明： 1、打开链接即进入创建项目页（需科学上网） 2、未配置AI时：可点击「载入示例项目」体验完整流程（使用内置Demo数据，不调用真实AI） 3、想体验真实AI：点击底部「去配置」，填入自己的API Base URL/API Key/模型名称（仅保存在当前浏览器本地，不上传服务器），配置后即可用真实AI生成结构、推荐候选句、补写内容 4、完整流程：创建项目（填写主题/读者/目的）→写作地图（查看/编辑AI生成的大纲）→逐句写作（AI候选句/填充+光标插入）全文预览GitHub 地址：GitHub - GreMed/writing-os-ai-mvp: A structured AI-assisted writing workspace · GitHub
4. TRAE实践过程
整个Writing OS使用TRAE IDE开发，技术栈为Next.js14（AppRouter）+TypeScript。以下是关键开发步 骤 ：
Step1：产品定义与页面骨架
从写作流程出发，用TRAE搭建四步页面骨架（创建项目→写作地图→逐句写作→全文预览），建立核心状态模型（ProjectInput、WritingNode、DraftState）。这一步确立了“节点跟随nodeId、状态分层管理、localStorage持久化”的架构基础。
【Session ID】：
2750304326781164:09e87c775ea8a75e186f703b81ac6a41_6a3f82daaa6dea9490388bec.6a3f82daaa6dea9490388bef.6a3f82daaa6dea9490388bed:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/27 15:59:22)
Step2：AI写作地图生成与节点编辑
用TRAE实现AI生成结构化大纲的核心能力：调用/api/generate-writing-map接口，AI返回节点数组（含标题/写作目标/建议写法/目标字数）。同时实现写作地图页的节点卡片增删改、插入节点分割线、重新生成地图等交互。这一步反复用TRAE调试了插入节点的垂直布局统一性和节点列表间距问题。
【Session ID】：
2750304326781164:ff77fe0129829f84169fd0b7904e1df2_6a3f82daaa6dea9490388bec.6a40cc7daa6dea94903895ab.6a40cc7daa6dea94903895a9:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 15:25:49)
Step3：逐句写作与AI候选句推荐
这是产品最核心的交互层。用TRAE实现了：AI根据当前节点上下文推荐候选句、光标位置精确插入、一键填充当前节点、候选句资料溯源标记。同时实现了完整的撤销/重做历史引擎（HistoryEngine），支持手动编辑、候选句插入、填充节点、全文生成四类操作的回溯。
【Session ID】：
2750304326781164:9c7b56fa81b37df55ab9ecd1d7e97f39_6a3f82daaa6dea9490388bec.6a421dbdaa6dea949038a0f2.6a421dbdaa6dea949038a0f0:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 15:24:45)
Step4：资料溯源与底稿匹配
用TRAE实现了GroundingCard组件——每句内容可关联底稿来源，展示证据原文与来源链接，支持手动增删改来源。还实现了Demo模式下的底稿匹配演示，让未配置AI的用 户 也能体验资料溯源能力。
【Session ID】：
2750304326781164:1bc5c7c57ed7e8c2b7f83d188b357c76_6a3f82daaa6dea9490388bec.6a4be32cdaf8fbde1a606e5b.6a4be32bdaf8fbde1a606e59:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 01:17:32)
Step 5 ：用户自配AI与安全守卫
用TRAE实现了用户本地配置AI模型（API Key/Base URL/Model），并加入了多重安全守卫：API Key仅存浏览器本地不进请求body、HTTP/localhost/内网地址校验拒绝、服务端请求头校验、未配置时阻断创建并引导配置或载入示例。这一步还打磨了配置弹窗的双场景区 分 （ 主动配置vs阻断式配置）。
【Session ID】：
2750304326781164:e9a812554c899e19c34b463aabc1a82e_6a3f82daaa6dea9490388bec.6a4d011adaf8fbde1a607c03.6a4d011adaf8fbde1a607c01:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 21:37:30)
Step 6：UI精修与E2E测试
最后用TRAE做了大量UI精修：去按钮化（按元素职责区分轻量按钮与文字/图标入口）、统一下拉箭头样式、统一输入框提示文字、调整textarea高度、修复人像弹窗被overflow裁剪（从absolute改为fixed定位）等。同时编写了18+个Playwright E2E测试覆盖 核 心 流 程，确保每次UI返工不破坏业 务逻辑。
【Session ID】：
2750304326781164:3b192d5311c9119a109576c3ef538d75_6a3f82daaa6dea9490388bec.6a4e2adfdaf8fbde1a60965b.6a4e2adedaf8fbde1a609659:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 18:47:59)
5. 对应的报名审核通过的帖子链接
6. 开发心得
TRAE带来的最大价值是“把想法快速变成可体验的产品”。整个Writing OS从页面骨架到核心AI流程再到UI精修，全程用TRAEIDE的对话式开发完成。几个切身感受：
- 结构化任务拆解很关键：把“做一个写作系统”拆成页面骨架、AI生成、候选句推荐、资料溯源、安全守卫、UI精修等独立任务，每个任务给TRAE 清 晰的边界和“不要做什么”约束，产出质量明显更高。
- UI返工用“按职责区分”原则：早期机械去按钮化导致视觉混乱，后来改为按元素职责区分——该是按钮的做轻 量按 钮，该是文字/图标入口的才去按钮化，视觉效果立刻收敛。
- E2E测试是UI返工的护城河：每次UI改动后跑一遍Playwrig ht 测试，能在几秒内发现是否破坏了业务逻辑，让迭代敢放开手改。
- overflow裁剪要换定位思路：人像弹窗被父级overflow: hidden裁剪，单纯调z-index无效，最终改为position: fixed + getBoundingClientRect()计算位置才彻底解决——这类问题TRAE帮我快速定位了根因。
Writing OS还在持续迭代中，欢迎体验并提出建议。