01. 什么是 Website Studio
Website Studio 以 页面 → 区块 → 元素 的结构处理网站。画面分为五个区域。
- 站点结构面板 — 页面和区块列表，以及设计系统和素材。
- 画布 — 直接查看网站的实际效果，点击区块或文字即可选中。
- 属性面板 — 修改所选页面、区块或元素的属性。未选中任何内容时显示“请选择要编辑的页面、区块或元素。”。
- PRIME 输入框 — 像“向 PRIME 提出请求（例如：让 Hero 更高级）”这样用文字提出修改。
- 顶部操作按钮 — 保存状态、撤销/重做、构建·部署·发布、下载 ZIP。
02. 开始使用 Website Studio
Website Studio 从 PRIME 对话开始。在对话中描述想要的网站后，PRIME 会准备网站项目，并在对话中显示进入 Website Studio 的按钮。
- 在 PRIME 对话中说明网站类型、主要访客以及访客首先要做的事。如有品牌资料或参考网站，请一并附上。
- 点击对话中出现的打开 Website Studio按钮。
- Website Studio 打开后，查看自动生成的页面和区块并开始编辑。
编辑时如需返回对话，请点击左上角的PRIME 对话。位置可在界面构成的第一张截图中查看。
03. 界面构成
左上 — 工作模式
- PRIME 对话 — 返回 PRIME 对话画面。
- 项目名称 — 点击即可直接修改名称。
- 设计 · 预览 · 代码 — 切换工作模式，也可用键盘 1、2、3 切换。详见预览与代码。
- 结构 · 内容 · 响应式 · 交互 — 在设计模式中选择当前要专注的编辑类型。
左下 — 设计系统与素材
- 设计系统 — 打开管理全站颜色与主题的面板，详见设计系统。
- 全部 · 图片 · 视频 — 按类型筛选项目素材。
- 素材列表 — 显示与项目关联的图片及其所在区块名称。生成失败的项目会标为失败。
- 推荐视觉提示 — 如“推荐视觉 1 个 — 可在下方 PRIME 中生成”，提示还有尚未生成的推荐图片。
04. 管理页面与区块
在站点结构面板上方添加页面，并在每个页面下堆叠区块。
- 页面预设 — 选择由多个区块预先组成的页面结构，详见预设。
- 添加页面 — 添加一个空白新页面。
- 搜索图层 — 区块较多时按名称查找。
- 页面行 — 显示页面名称与路径（例如 /ecommerce）。用右侧的+（添加区块）为该页面添加区块，用···（更多）打开页面菜单。
- 眼睛图标（隐藏）— 不删除区块，暂时在网站中隐藏。再次点击即可显示。
添加区块
点击页面行的+，下方会打开区块类型面板。
- 从预设库选择 — 从设计完成的区块预设中选择并添加。
- 区块类型 — 点击 页眉 · 首屏 · 功能介绍 · 信任背书 · 价格 · 常见问题 · 行动号召 · 页脚 · 自定义 之一，立即添加基础区块。
05. 用预设快速搭建
预设库中包含区块预设，以及由多个区块组成的页面预设。当前画面顶部显示为区块 169 · 页面 26。
- 标签 — 在区块 · 页面 · 行业起步套件 · 收藏 · 最近中选择。
- 总数 — 当前可用的区块与页面预设数量。
- 页面预设卡片 — 显示卡片名称（例如 SaaS 落地页）和其中区块的顺序，右上角显示区块数量。
- 添加为页面 — 将该组合添加为新页面。
画面中的页面预设示例
| 预设 | 包含的区块（按顺序） |
|---|---|
| SaaS 落地页 | 导航·左右分栏 → 首屏·SaaS → 标志·信任·跑马灯 → 功能·便当格 → 功能·标签页 → 价格·三栏突出 → FAQ·固定文案 → CTA·浮动 → 页脚·产品 |
| 初创公司 | 导航·浮动 → 首屏·居中 → 标志·信任·小标志 → 功能·图标编号 → 数据·大数字 → 客户评价·轮播 → CTA·横幅 → 页脚·转化 |
| 企业 | 导航·大菜单 → 首屏·故事 → 数据·左右分栏 → 功能·卡片 → 内容·时间线 → 标志·信任·边框网格 → 联系方式·位置·信息卡片 → 页脚·链接组 |
| 时尚 | 导航·公告栏 → 导航·标志居中 → 首屏·时尚 → 商品·分类 → 图库·Lookbook → 商品·商品网格 → CTA·订阅 → 页脚·电商 |
| 购物商城 | 导航·公告栏＋链接 → 导航·商城 → 首屏·商城 → 商品·商品网格 → 商品·系列 → 评价·跑马灯 → FAQ·两栏 → 页脚·电商 |
向下滚动列表还有代理机构、作品集、创作者、美容等更多页面预设。上表中的预设名称译自韩语画面。
区块预设与更换风格
- 在区块标签中选择一个区块并添加到当前页面，可同时使用搜索（例如 hero, fashion, gallery, pricing …）和分类筛选。
- 只想更改现有区块的外观时，使用区块···菜单或属性面板中的切换风格。
- 行业起步套件可一次性应用按行业推荐的颜色、字体和页面结构。
06. 区块菜单与图层整理
点击区块行右侧的···（更多），打开整理区块的菜单。
- ···（更多）— 打开区块菜单。
- 重命名 · 复制 · 切换风格 · 锁定 · 上移 · 下移 · 删除 — 重命名、复制、更换外观、锁定以防误改、调整顺序、删除区块。
- 移动到其他页面 — 将区块移动到其他页面。
- 区块名称旁的灰色文字（页眉、首屏、功能介绍等）是区块类型。
- 点击行左侧的>可展开区块内的元素列表。
- 已锁定的区块显示已锁定，已隐藏的区块显示已隐藏。
07. 选择区块与属性面板
点击网站结构面板中的区块行或画布上的区块即可选中。选中后，属性面板和 PRIME 输入框会以该区块为对象。
- 选中的区块行 — 在网站结构面板中高亮显示。
- 画布选中标记 — 画布上该区块左上角显示所选区块名称。
- 属性标签 — 布局 · 内容 · 样式 · 素材 · 响应式 · 交互 · 数据。
- 切换风格 · 锁定 — 将所选区块换成其他预设外观，或将其锁定。
- PRIME 选中对象 — 输入框上方会显示当前选中的区块，例如“已选择 全屏首屏”。此时提出的请求会以该区块为对象进行修改。
08. 修改文字
画布下方显示提示“单击选择，双击文字直接编辑，点击图片区域即可更换。”。修改文字时按照此提示操作。
- 在画布上双击要修改的文字（例如菜单名、标题）。
- 直接修改文字。
- 点击文字以外的位置即可应用，顶部的保存状态会随之变化。
也可以请 PRIME 完成同样的操作。选中包含该文字的区块，在 PRIME 输入框中准确写出新的文字，例如：“把顶部菜单的 LOOKBOOK 改成 系列”。
09. 编辑布局与排版
选中区块后，属性面板上方会出现布局，下方是布局工具。
排版
- 排版方式 — 在背景 · 全宽 · 分栏 · 普通中选择图片与文字的基本排列。
- 文字位置 — 点击九宫格之一决定文字的位置。
- 遮罩 · 暗度 — 调整遮罩类型和暗度，让背景图上的文字更易阅读。
- 高度 — 选择区块高度。
- 手机端 — 用手机端隐藏图片以及默认 · 图片在前 · 文字在前设置手机端顺序。
布局工具
- 间距(gap) — 选择区块内元素之间的间距。
- 对齐 — 设置水平（左、中、右）与垂直（上、中、下）对齐。
- 分布 — 将元素水平或垂直均匀分布，或设为等宽。
- 容器 · 最大宽度(px) — 设置内容所占的宽度。
- 定位 · 最小高度 — 设置定位方式和区块的最小高度。
10. 编辑样式
区块的颜色与表面质感在属性面板的区块设置中修改。当前画面有以下项目：
| 项目 | 说明 |
|---|---|
| 背景 | 从设计系统颜色中选择区块背景。 |
| 文字颜色 | 从设计系统颜色中选择区块文字颜色。 |
| 区块间距 | 选择区块上下间距。 |
| 表面样式 | 选择平面、边框、玻璃、浮动卡片等表面样式。 |
| 对齐 | 选择区块内容的默认对齐方式。 |
11. 使用设计系统
设计系统在一处统一管理全站使用的主题和颜色。可从左下角或属性面板中的设计系统按钮打开。
- 主题 — 在浅色 · 深色中选择网站的基础主题。
- 设计方向 — 汇总了网站类型、构成、应避免的元素等设计方向。
- 颜色 — 用色块或 HEX 值修改背景、表面、卡片表面、正文文字、辅助文字、边框、主按钮等颜色。
单独样式与设计系统的区别
| 类别 | 影响范围 | 适用场景 |
|---|---|---|
| 修改设计系统颜色 | 使用该颜色的所有区块 | 更换品牌色或统一全站色调时 |
| 修改区块样式 | 仅所选区块 | 只想让某个区块使用不同背景或文字颜色时 |
12. 检查响应式效果
使用右上角的桌面 · 平板 · 手机按钮，按屏幕尺寸查看画布。位置见保存与撤销截图中的第 5 项。
- 在顶部的响应式模式和属性面板的响应式标签中查看各屏幕尺寸的设置。
- 含图片的区块可在排版的手机端项目中直接设置手机端隐藏图片和手机端顺序。
13. 将区块作为组件复用
如需在多个页面使用同一区块（例如通用页眉、通用页脚），请将其保存为组件。选中区块后，滚动到属性面板底部即可看到。
- 图层 — 用 Z-INDEX 和置于顶层 · 上移一层 · 下移一层 · 置于底层设置叠放顺序。
- 组件 · 全局区块 — 点击保存为组件，该区块即成为可复用组件。按照画面说明，可将同一组件放入其他页面，并通过修改原件（master）同步到所有使用位置。
14. 替换图片
选中含图片的区块后，属性面板最上方会出现视觉区域。在画布上点击图片区域也会跳转到这里。
- 预览 — 显示当前图片及其状态。生成失败时会显示提示文字和重新生成按钮。
- 用 AI 替换 — 用 AI 生成新图片放到此处，会消耗点数。
- 替换为我的图片 — 上传自己的图片文件进行替换。
- 选择已有图片 — 从本项目已有的图片中选择。
- 布局 — 调整图片与文字的排列，详见布局与排版。
15. 用自然语言请 PRIME 修改
除了直接修改属性，也可以通过画面下方的 PRIME 输入框用文字提出请求。
- 在网站结构面板或画布上选中要修改的区块。未选中时，请求以整个网站为对象。
- 确认输入框上方显示“已选择 （区块名称）”（见选择区块截图第 5 项）。
- 用句子写出想要的修改，然后点击发送。
- 在画布上确认结果。不满意时可以撤销或重新提出请求。
请求示例
- 输入框默认示例：“向 PRIME 提出请求（例如：让 Hero 更高级）”
- 选中区块时的示例：“要如何修改 全屏首屏？例如：放一张女性模特图片”
- 像“把这个区块改成三栏卡片”“手机端改成一栏”“把这个按钮改成黑色”这样，同时写明对象和结果。
16. 保存 · 撤销 · 重做
编辑内容会自动保存。请在右上角查看保存状态和撤销按钮。
- 保存状态 — 显示已保存、保存中、保存失败、冲突之一。
- 撤销 · 重做 — 撤销或重新应用上一步修改。快捷键为 Ctrl/Cmd+Z、Ctrl/Cmd+Shift+Z。将鼠标悬停在按钮上可查看对应的操作名称。
- 构建 · 部署 · 发布 — 目前为 即将推出 状态。详见构建 · 部署 · 发布。
- 下载 ZIP — 将网站代码下载为 ZIP 文件，详见ZIP 下载。
- 桌面 · 平板 · 手机 · 编辑标记 — 切换画布的屏幕尺寸，并开关可编辑区域标记。
17. 预览与代码
| 模式 | 用途 |
|---|---|
| 设计 | 使用网站结构面板、画布和属性面板进行编辑的基本模式。 |
| 预览 | 不显示编辑标记，按访客看到的样子查看。 |
| 代码 | 查看生成的网站代码。 |
模式切换按钮的位置见界面构成第一张截图的第 3 项。
18. 构建 · 部署 · 发布
顶部的构建 · 部署 · 发布按钮目前处于禁用状态，鼠标悬停时显示 即将推出。目前无法通过这些按钮发布网站。
如需自行托管完成的网站，请通过ZIP 下载获取代码。
19. ZIP 下载
使用右上角的蓝色按钮将网站下载为 ZIP 文件。按钮上也会显示当前选择的输出格式。
- 下载 ZIP — 以显示的格式（例如 HTML 网站）立即下载。
- ⌄（以其他格式下载）— 打开输出格式列表。
- 输出格式 — 在Next.js（适合 SEO 与多页面 · Next.js App Router（静态导出））、React（交互式应用型界面 · React + Vite）、HTML 网站（无需安装即可打开 · HTML/CSS/JavaScript）中选择。
- 准备状态提示 — 例如“还有 4 张图片未准备好。”，在下载前提示还有尚未生成的图片。
- React会同时显示“静态托管时需将所有路径指向 index.html。”“没有服务器渲染，各页面的搜索信息有限。”等注意事项。
- HTML 网站无需安装即可直接打开。
20. 故障排除
| 情况 | 查看位置与解决方法 |
|---|---|
| 图片位置显示生成失败提示 | 点击视觉区域的重新生成，或修改请求后重新生成。也可以用替换为我的图片或选择已有图片替换。 |
| 素材列表中有失败标记 | 选中使用该图片的区块，在视觉区域重新生成或替换为其他图片。 |
| AI 图片生成无法进行 | 请检查点数余额。AI 生成会消耗点数。 |
| 保存状态为保存失败 | 点击重新保存。 |
| 保存状态为冲突 | 项目已在其他地方被修改。点击加载最新版本会加载最新版本，未保存的修改将丢失。 |
| 撤销结果与预期不同 | 将鼠标悬停在撤销按钮上查看操作名称，逐步撤销。可用重做重新应用。 |
| 手机端布局不自然 | 切换到手机视图，检查排版中的手机端项目和响应式标签。 |
| 应用预设后内容看起来不同 | 在画布上检查标题、说明、按钮和图片，必要时用撤销恢复。 |
| 下载 ZIP 前出现图片提示 | 表示还有尚未准备好的图片。可以先生成图片再下载，或确认提示后直接下载。 |
| 构建·部署·发布按钮无法点击 | 目前为即将推出的功能，请使用 ZIP 下载。 |