HTML 产物

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

可交互式 PRD

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

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

编辑原型：

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

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

预览与编辑 HTML 产物

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

编辑产物的步骤如下：

1. 在顶部导航栏右侧，点击 编辑 按钮。
   
   产物进入待编辑模式。
2. 在顶部导航栏中央，选择编辑方式：
   • 点击修改：点击目标元素，然后手动编辑或让 AI 修改。
   • 截图修改：截取需要修改的内容，然后向 AI 提出修改要求。
3. 根据所选方式完成编辑。
   点击修改 截图修改

   4. 点击产物中的目标元素。
      目标元素下方会显示编辑栏。
      
   5. 手动编辑该元素，或让 AI 进行修改。
      • 手动编辑：仅支持文字类元素。你可以通过编辑栏调整字号、加粗状态和对齐方式。
      • AI 编辑：在评论输入框中填写修改意见，然后直接发送给 AI。你也可以先将修改意见添加为评论，再逐条或批量发送给 AI。点击顶部导航栏右侧的 评论 图标，可以查看和管理已添加的评论。
        

   4. 截取需要修改的元素或区域。
      截图下方会显示修改意见输入框。
      
   5. (可选) 使用矩形或箭头标记待修改内容，帮助 AI 准确定位。
   6. 在输入框中填写修改意见。
   7. 将修改意见直接发送给 AI，或添加至评论列表。
      点击顶部导航栏右侧的 评论 图标，可以查看和管理已添加的评论。
      

分享 HTML 产物

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

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