--- type: feature title: "用于审查店铺前台改动的 AI 网站编辑器" description: "使用 AI 网站编辑器，结合店铺前台背景、参考图片、选中元素、源文件改动和响应式预览，逐项审查网站修改。" category: ai-websites h1: "专为店铺前台审查打造的 AI 网站编辑器" image: "https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media" keyword: "ai website editor" legacyKind: structured --- 一款 **AI 网站编辑器** 应该让店铺前台的改动在公开前清楚可查。Runner AI 会结合当前店铺项目、范围明确的简报、可选参考图片和你选中的元素进行编辑。它会返回源文件改动和响应式预览，供你检查、修订和保存，而发布仍是独立的决定。 ![在 AI 编辑工作区中选中店铺前台首屏，并显示响应式预览和改动文件](https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media) ## 给 AI 网站编辑器一份范围明确的店铺前台简报 先说明需要改动的页面和顾客操作。写清当前问题、期望看到的结果，以及店铺中必须保持稳定的部分。例如，你可以要求 Runner AI 让首页上的某个分类更容易被发现，同时保留现有导航、商品数据、购物车路径和品牌语言。不要只提出笼统的优化要求，还应列出需要检查的设备状态和点击路径。 输入可以包括当前店铺前台文件、已核实的商品目录事实、获准使用的文案、品牌规则、参考图片，以及本次涉及的路由或区块。参考图片只能作为外观依据，不能代替商品事实。只要结果涉及商品、价格、库存规则、政策、目标链接或归属边界，Runner 仍需要准确的信息。如果来源图片或示例属于他人，只能在项目具备所需权利和许可时使用。 每次请求只设定一个连贯的结果。如果第一版偏离目标，请指出确切区块、说明预期状态，并在需要时提供更清楚的参考。这样可以围绕一项具体改动形成审查记录，而不必反复重新生成整个网站。如果项目不是从现有店铺区块开始，而是从获准使用的公开 URL 开始，[AI 网站克隆](/zh/ai-website-cloning) 介绍了独立的采集到代码工作流及其权利边界。 ## 选中店铺前台元素并保留代码背景 Runner AI 的 Design Mode 用于在当前已就绪的店铺前台版本中进行局部视觉编辑。在桌面端，你可以打开店铺前台、进入 Design Mode，并选择一个可见元素。选中元素及其周围代码背景可以随 Ask Runner AI 指令一起提交，把请求限定在你实际选择的组件上。当“修改这个标题”或“替换这张图片”比凭记忆描述位置更清楚时，这种方式尤其有用。 直接控件支持特定的间距、图片、文本和删除改动。对于受支持的媒体元素，图片面板可以提供上传和 AI 生成选项；文本控件可以调整字号、字重、字体、颜色、不透明度和对齐方式等属性。撤销和重做只作用于当前尚未保存的 Design Mode 历史记录。由于 AI 请求开始处理时会重置选区和未保存的直接编辑历史，从直接控件切换到 Ask Runner AI 前，请先保存待处理的直接改动。 是否可用取决于项目状态。当最新店铺前台版本尚未就绪、正在预览旧版本、另一个请求仍在运行、工作区未启用该功能，或当前不是桌面布局时，Design Mode 可能不可用。涉及多个页面、新行为或更广泛功能的工作，仍应使用常规 Runner 聊天。不能把编辑器描述成可以绕过项目就绪状态或功能开关的通用控制工具。 ## 审查源文件改动和响应式预览 保存视觉编辑会把待处理改动写入项目；如果当前工作流支持，也可以记录新的版本快照。随后预览会重新加载，供你再次检查可见结果。请分别在 PC、平板和手机布局中查看页面，并沿着简报中指定的顾客操作逐步检查。一个区块即使在某个宽度下显示正确，也可能在其他位置裁切文字、隐藏控件、破坏路由，或让商品操作落入不自然的顺序。 Runner 还提供按条件开放的代码编辑器，用于检查预览背后的店铺前台文件。它的 Git 视图会区分已保存文件、差异、暂存、提交和推送。这些步骤之间的区别很重要：保存文件不会自动提交，提交不会自动推送，而这些操作都不会自动发布店铺前台。请检查预期的文件差异，不要因为无关改动恰好位于同一工作区，就把它们合并处理。 响应式预览只能证明当前项目状态，不能证明所有相连系统都正确。请在相应的事实来源中核实真实商品数据、链接、搜索、购物车行为、结账归属、分析、无障碍和公开路由。如果改动属于导航、页面层级和内容的更大范围调整，[电商网站改版](/zh/ecommerce-website-redesign) 说明了如何让改版依据当前店铺证据，而不是沦为通用的视觉翻新。 ## 将保存、版本审查和发布彼此分开 当每个关键步骤都保持明确时，AI 网站编辑器会更安全。在 Design Mode 中，直接改动可以先通过撤销和重做检查，再执行保存。保存后，常规店铺前台预览会显示当前结果。如果项目支持版本历史，你还可以借此检查或恢复较早的店铺前台工作，而不必把每一份已保存方案都当成最终公开版本。 发布是另一个独立决定。发布前，请把结果与原始简报对照，并确认选中区块仍能配合商品目录、周围页面、各设备布局和顾客路径正常工作。任何事实性文案都应向其归属系统核对。生成的描述不能证明库存，预览不能证明支付可用，文件成功写入也不能证明每条路由或每个集成都能正确运行。 这条审查边界正是 Runner AI 对电商团队的实用价值。编辑器在店铺前台项目内部工作，可以把选中元素与源代码背景连接起来，但操作者仍能检查具体改动，并决定结果是否就绪。产出不只是一张扁平效果图，也不是一项无法解释的视觉变化，而是带有可见文件和预览的可编辑项目改动，支持审慎的批准流程。 ## AI 网站编辑器常见问题 ### 编辑网站时，我可以向 Runner AI 提供哪些输入？ 请提供当前店铺项目、涉及的页面或元素、希望改善的顾客操作、已核实的商品目录或内容事实，以及必须保留的边界。外观很重要时，可以补充一张获准使用的参考图片。在 Design Mode 中，选中元素还可以把该元素及其周围代码背景附加到范围明确的 Ask Runner AI 请求中。 ### 不手动改代码也能编辑店铺前台吗？ Design Mode 为受支持的间距、图片、文本和元素删除提供直接控件，也提供针对选中元素的 Ask Runner AI 输入框。范围更广的改动可以在常规聊天中提出。需要检查代码或进行局部文件编辑时，可以使用按条件开放的代码编辑器，但并非每项视觉调整都必须使用它。 ### 保存编辑后会立即发布吗？ 不会。保存只会更新项目工作区并重新加载当前预览。提交、推送和发布仍是独立操作，各自具有相应的权限和检查。决定发布店铺前台前，请在桌面端、平板和手机上检查受影响的页面，查看相关文件改动，并验证顾客路径。 ### 这与普通的 AI 网站生成器有什么不同？ 普通生成器通常从一段空白提示词开始，强调第一次生成的完整网站。Runner AI 的编辑工作流可以从当前电商项目、选中的店铺前台元素、周围源代码背景、参考图片和已核实的店铺事实开始。可审查的产出包括改动文件和响应式预览，因此可以检查局部修订，而不会把生成、保存和发布当成同一件事。 ## 编辑当前店铺前台并获得可审查的产出 准备好当前店铺前台、确切页面或选中元素、已核实的商品目录和品牌事实、可选参考图片，以及必须保持完整的顾客操作。要求 Runner AI 返回改动后的源文件和 PC、平板、手机预览，以便在决定是否发布前检查结果。 [在 Runner AI 中打开 AI 网站编辑工作流](https://www.runnerai.com/zh/auth/login?prompt=%E4%BD%BF%E7%94%A8%E6%88%91%E5%BD%93%E5%89%8D%E7%9A%84%E5%BA%97%E9%93%BA%E5%89%8D%E5%8F%B0%EF%BC%8C%E4%BB%A5%E5%8F%8A%E6%88%91%E6%8C%87%E5%AE%9A%E7%9A%84%E9%A1%B5%E9%9D%A2%E6%88%96%E9%80%89%E4%B8%AD%E5%85%83%E7%B4%A0%EF%BC%8C%E7%BB%93%E5%90%88%E5%B7%B2%E6%A0%B8%E5%AE%9E%E7%9A%84%E5%95%86%E5%93%81%E7%9B%AE%E5%BD%95%E5%92%8C%E5%93%81%E7%89%8C%E4%BA%8B%E5%AE%9E%EF%BC%8C%E5%B9%B6%E5%9C%A8%E9%9C%80%E8%A6%81%E6%97%B6%E5%8F%82%E8%80%83%E6%88%91%E6%8F%90%E4%BE%9B%E7%9A%84%E5%9B%BE%E7%89%87%EF%BC%8C%E5%AE%8C%E6%88%90%E4%B8%80%E9%A1%B9%E8%8C%83%E5%9B%B4%E6%98%8E%E7%A1%AE%E7%9A%84%E7%BC%96%E8%BE%91%E3%80%82%E8%AF%B7%E8%BF%94%E5%9B%9E%E4%BF%AE%E6%94%B9%E5%90%8E%E7%9A%84%E6%BA%90%E6%96%87%E4%BB%B6%EF%BC%8C%E4%BB%A5%E5%8F%8A%20PC%E3%80%81%E5%B9%B3%E6%9D%BF%E5%92%8C%E6%89%8B%E6%9C%BA%E9%A2%84%E8%A7%88%EF%BC%8C%E4%BE%9B%E6%88%91%E5%9C%A8%E5%8F%91%E5%B8%83%E5%89%8D%E5%AE%A1%E6%9F%A5%E9%A1%BE%E5%AE%A2%E8%B7%AF%E5%BE%84%E5%92%8C%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C%E3%80%82) ## 相关功能 - [将获准使用的参考转化为店铺前台代码](/zh/ai-website-cloning) - [规划基于当前店铺的电商网站改版](/zh/ecommerce-website-redesign) - [探索 Runner AI 全部功能](/zh)