制作你的第一个交互原型

第一步：打开内置模板

进入 Community，选择 OpenDesign Landing，先看预览。在 More ways to Use 中选择 Remix，从示例建立可编辑项目。Use 会使用示例需求开始创作；想直接编辑当前示例，选择 Remix。

模板展示的是示例设计。其中的版本号、数量、引语和链接属于案例内容，正式使用前应逐项核对和替换。

第二步：明确页面的用途

从 Design Files 打开 index.html。Preview 查看页面，Code 查看源码。先决定保留杂志式排版、暖纸色、拼贴和章节节奏中的哪些部分，再列出需要替换的产品介绍、按钮和链接。

把这个落地页改成虚构独立设计工作室的介绍页。保留暖纸色、珊瑚色、杂志排版和拼贴。替换首屏、服务、作品与联系文案，全部使用明确的示例内容。导航应跳到对应章节；不要接真实账号和支付。检查桌面与390px手机，交付可编辑HTML及引用资源。

这是一段可改写的需求示例，配图展示的是内置模板及实际手动操作。如果从空白项目开始，在首页选择 Prototype，完成通用 AI 接入设置，再提交需求与参考资料。

第三步：直接编辑一个细节

点击 Edit，选中首屏中的斜体强调词，在 Text 中把 taste, 改成 craft,，然后点击 Save。退出编辑模式并重新加载，确认仍显示 craft,。画布编辑指南中有字体、颜色、尺寸、间距和撤销的完整说明。

第四步：检查其他屏幕尺寸

在画布上方的 Desktop 菜单选择 Mobile（390 × 844）或 Tablet（820 × 1180）。检查换行、导航、间距、图片裁切和可点击区域。这个操作只改变预览尺寸，不会自动修复页面。

第五步：提出明确的修改要求

用 Comment 给具体元素提出要求，或用 Mark 附上截图和说明。例如：“把这个强调词改成珊瑚色，保留斜体、字号和位置。”保存评论不会自动让 AI 开始修改；确认所选反馈后再点 Send to chat。详见评论与标注。

第六步：实测并交付

先退出 Edit、Comment 和 Mark，再实际点击导航与按钮。检查章节跳转和链接去向，然后在 Export 中按需要选择 PDF、图片、ZIP 或独立 HTML。保留引用资源，并在客户端之外打开交付物。其他方式见项目与版本及分享协作。

预览空白怎么办

先等待预览加载，再点 Reload Preview。切到 Code 确认文件内容存在；仍空白时，从 Design Files 重新打开，或导出 HTML 和资源后在浏览器打开。如果外部能显示、客户端内不能，反馈时提供版本、文件和错误。