HTML 产物管理

TRAE Work 支持生成、预览、编辑和分享 HTML 产物。你可以将需求文档、产品原型、分析报告等内容生成为可直接预览的 HTML 页面，并在 TRAE Work 中完成检查、修改和分享。

可交互式 PRD

TRAE Work 可以生成 HTML 格式的可交互式 PRD。例如，你可以输入：“帮我生成一份 XX 产品的可交互 PRD，并生成相应的原型”。生成后，预览页面通常包含两个部分：可交互原型预览和 PRD 文档全文。

• 原型预览：左侧为原型预览面板，你可以像使用真实产品一样点击页面中的按钮、入口或模块。右侧为产品需求展示面板，用于查看当前页面或模块对应的需求说明。点击原型中的某个部分后，右侧会自动定位到 “需求详情” 页签中对应的需求内容。
• 文档全文：展示结构化的 PRD 全文，通常包含产品背景、目标用户、核心流程、功能需求、页面说明、交互规则和异常状态等信息。

编辑原型：

如果你需要调整原型中的页面文案、模块布局、交互逻辑等，可以在 HTML 产物预览页签中开启编辑模式。修改原型中的某个部分后，TRAE Work 会根据你的修改同步更新 PRD 中对应的内容。

关于具体的编辑方式，参考下文 “预览与编辑 HTML 产物” 部分。

预览与编辑 HTML 产物

TRAE Work 完成 HTML 产物生成后，你可以在工具面板的预览页签中预览产物，包括查看页面效果，体验交互流程，检查内容是否符合预期等。对于不符合预期的部分，可让 AI 协助你编辑或由你直接编辑。

编辑 HTML 产物的步骤如下：

1. 在 HTML 产物预览页签的右上方区域中，点击 编辑 按钮。
   
   HTML 产物编辑模式已开启。
2. 在预览页面中选择需要编辑的元素。
   页面会显示可用的编辑操作。
3. 选择合适的修改方式，并完成相应操作：
   • 评论转对话：在评论输入框中填写修改意见后，可直接发送给 AI 处理；也可以先添加多条评论，再在对话输入框顶部的评论列表中逐条发送给 AI 处理。适合一次性整理多个修改点，再让 AI 分批处理。
   • 直接编辑：仅支持文字类元素。你可以在编辑栏中直接修改文本的属性，包括字号、加粗状态和对齐方式。
     

分享 HTML 产物

你可以通过分享链接，将 TRAE Work 生成的 HTML 产物分享给他人。获得链接的用户可以访问该产物；若你后续更新产物，对方仍可通过同一链接查看最新内容。

1. 在产物预览页面右上角，点击 分享 按钮。
   
2. 在 分享 弹窗中，点击 开启分享 按钮。
   TRAE Work 会自动为当前产物生成分享链接。
3. 复制分享链接，并发送给需要访问该产物的用户。