> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trae.cn/llms.txt?lang=zh
> Use this file to discover all available pages before exploring further.

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

## 可交互式 PRD {#heYG3E47J}

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

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

::::cols
@col 50
![Image=2632x1874](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ffcaa908a97f4cff8a04b65b413bbf9c~tplv-goo7wpa0wc-topic.webp)

@col 50
![Image=2622x1878](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/51f87d0cb6f44038af9566686078c98d~tplv-goo7wpa0wc-topic.webp)
::::

**编辑原型**：

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

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

## 预览与编辑 HTML 产物 {#dd1c4fae}

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

编辑产物的步骤如下：

1. 在顶部导航栏右侧，点击 **编辑** 按钮。
   ![Image=3024x1891](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/83ebf9cc9fa14aa3b290ab60959edc58~tplv-goo7wpa0wc-topic.webp)
   产物进入待编辑模式。
2. 在顶部导航栏中央，选择编辑方式：
   * **点击修改**：点击目标元素，然后手动编辑或让 AI 修改。
   * **截图修改**：截取需要修改的内容，然后向 AI 提出修改要求。
3. 根据所选方式完成编辑。
   ::::tabs
   @tab 点击修改
   4. 点击产物中的目标元素。
      目标元素下方会显示编辑栏。
      ![Image=850x218](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b2af6b79dd084aeb8f908cbc240419f1~tplv-goo7wpa0wc-topic.webp)
   5. 手动编辑该元素，或让 AI 进行修改。
      * **手动编辑**：仅支持文字类元素。你可以通过编辑栏调整字号、加粗状态和对齐方式。
      * **AI 编辑**：在评论输入框中填写修改意见，然后直接发送给 AI。你也可以先将修改意见添加为评论，再逐条或批量发送给 AI。点击顶部导航栏右侧的 **评论** 图标，可以查看和管理已添加的评论。
         ![Image=2400x502](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8389834958cc43da8b9fcc3d67c3d711~tplv-goo7wpa0wc-topic.webp)
   
   @tab 截图修改
   4. 截取需要修改的元素或区域。
      截图下方会显示修改意见输入框。
      ![Image=2304x694](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3fb3205001724811af94a4fd8cada932~tplv-goo7wpa0wc-topic.webp)
   5. (可选) 使用矩形或箭头标记待修改内容，帮助 AI 准确定位。
   6. 在输入框中填写修改意见。
   7. 将修改意见直接发送给 AI，或添加至评论列表。
      点击顶部导航栏右侧的 **评论** 图标，可以查看和管理已添加的评论。
      ![Image=2400x502](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8389834958cc43da8b9fcc3d67c3d711~tplv-goo7wpa0wc-topic.webp)
   ::::
      


## 分享 HTML 产物 {#hL4wh8dpE}

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

1. 在产物预览页面右上角，点击 **分享** 按钮。
   ![Image=2102x178](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/94b63fb67ec24c08b0231e37439f2993~tplv-goo7wpa0wc-topic.webp)
2. 在 **分享** 弹窗中，点击 **开启分享** 按钮。
   TraeWork 会自动为当前产物生成分享链接。
3. 复制分享链接，并发送给需要访问该产物的用户。