TraeWork HTML 产物

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

可交互式 PRD

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

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

Image=2632x1874

Image=2622x1878

编辑原型：

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

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

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

编辑产物的步骤如下：

在顶部导航栏右侧，点击编辑按钮。产物进入待编辑模式。
在顶部导航栏中央，选择编辑方式：
- 点击修改：点击目标元素，然后手动编辑或让 AI 修改。
- 截图修改：截取需要修改的内容，然后向 AI 提出修改要求。
根据所选方式完成编辑。 点击修改
1. 点击产物中的目标元素。目标元素下方会显示编辑栏。
2. 手动编辑该元素，或让 AI 进行修改。
  - 手动编辑：仅支持文字类元素。你可以通过编辑栏调整字号、加粗状态和对齐方式。
  - AI 编辑：在评论输入框中填写修改意见，然后直接发送给 AI。你也可以先将修改意见添加为评论，再逐条或批量发送给 AI。点击顶部导航栏右侧的评论图标，可以查看和管理已添加的评论。
截图修改
1. 截取需要修改的元素或区域。截图下方会显示修改意见输入框。
2. (可选) 使用矩形或箭头标记待修改内容，帮助 AI 准确定位。
3. 在输入框中填写修改意见。
4. 将修改意见直接发送给 AI，或添加至评论列表。点击顶部导航栏右侧的评论图标，可以查看和管理已添加的评论。

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