构建器概览

3D 构建器每次生成都会从一个提示词中产生五项交付物：

所有五项都在一个工作流程中创建。您无需手动组合任何内容。

Draftly 采用分块式流水线而非一次性大型 AI 调用。这确保了质量和完整性：

阶段 0 — 规划（约 5 秒） AI 读取您的提示并输出网站蓝图：品牌名称、标语、主视觉标题、主视觉 CTA、色彩风格、字体风格、3-7 个部分以及 3-5 个具体差异化因素（关于您业务的独特事实，而非通用文案）。

阶段 1 — 骨架（约 20 秒） 生成导航栏、主视觉部分、CSS 变量、滚动帧引擎以及各部分和页脚的占位符锚点。

阶段 2 — 各部分（并行，约 30 秒） 每个部分（功能、定价、客户评价等）都在单独的并行 AI 调用中生成。一个 6 个部分的网站与一个 3 个部分的网站所需时间相同。

阶段 3 — 页脚（约 10 秒） 单独生成页脚，确保其始终存在。页脚不计入部分预算，也永远不会被截断。

阶段 4 — 组装（约 5 秒） 所有部分拼接在一起。注入 SEO 元标签、Open Graph 标签、JSON-LD 结构化数据、H1 保证和规范 URL。

左侧面板 — 聊天与控制 - 底部聊天输入框：描述您的网站或请求编辑 - 上方系统日志：显示每个生成阶段的时间和状态 - 操作按钮：全屏预览、编辑文本、更改颜色、发布上线 - 标签栏：日志、图像、视频、帧、代码、历史记录、商业操作系统

右侧面板 — 实时预览 - 您的生成网站在 iframe 中渲染，并激活滚动动画 - 点击任意文本进行内联编辑（免费，不消耗积分） - 工具栏：宽高比切换（16:9 / 9:16）、查看/编辑/编辑中模式、全屏、重新生成

顶部栏 - 项目名称 — 点击重命名 - 保存状态指示器 — 实时显示“已保存”/“正在保存...”/“正在处理...” - 积分追踪器 — 本账单周期剩余积分

Draftly 通过两层机制持续自动保存您的项目：

顶部栏中的保存状态指示器： - 已保存 — 所有更改已同步到云端 - 正在保存... — 云端同步进行中 - 正在处理... — 生成进行中

如果您在生成过程中关闭标签页，当您重新打开项目时，将出现自动恢复横幅 — 点击它即可从生成中断处继续。您的工作永不丢失。

日志 — 实时生成动态。查看每个流水线阶段、时间及警告。

图像 — 您的主视觉静态图。下载原始图像或触发新的图像生成。

视频 — 动态视频。下载 MP4 或使用不同质量设置重新生成。

帧 — 从视频中提取的约 200 个滚动帧。它们驱动视差滚动效果。

代码 — 您生成网站的原始 HTML。复制、下载为 ZIP 或推送到 GitHub。

历史记录 — 版本检查点。每次重新生成或重大编辑都会创建一个恢复点。点击任意版本即可回滚 — 免费，不消耗积分。

商业操作系统 — 您的品牌 AI 商业智能仪表板 (Pro+)。包括内容建议、分析上下文等。

点击工作室顶部栏中的预览或预览工具栏中的新标签页，即可在单独的浏览器标签页中打开您的发布质量网站 — 不带构建器界面 — 同时您可以在工作室中继续编辑。

AI HTML 网站从内存中的预览 URL 加载，并注入您的滚动帧和视频。

预设项目打开 /presets/live/[projectId]，并通过 opener 传递您的帧。

如果弹出窗口被阻止，请允许 draftly.space 的弹出窗口并重试。自动保存将在原始标签页中继续。

在主视觉图像、视频、帧提取和网站 UI 生成过程中，预览会显示一个进度卡片，其中包含：

典型总计：主视觉约 2-3 分钟，视频约 3-4 分钟，帧约 1-2 分钟，网站 UI 约 2-3 分钟。

如果任务超出估算时间，卡片会显示“耗时比平时长” — API 调用将继续直到完成。使用取消生成可提前停止。

工作室聊天仅限于您的网站和 Draftly 构建器 — 而非通用 AI 聊天。

网站编辑（直接命令）：“将主视觉标题更改为…”，“添加常见问题部分”，“深色主题搭配金色点缀”。

操作指南问题可获得即时答案：“如何发布？”，“滚动模式如何工作？”，“为什么我的网站有 4 个视频时会很慢？”

离题消息（天气、作业、不相关的编码）将通过链接重定向到指南和文档。

打开指南（顶部栏）查看完整教程，或以提问形式在聊天中咨询。

点击预览工具栏中的减少动态效果可最小化工作室 UI 动画。相同的偏好设置存储在设置 → 外观 → 减少动画中。

生成的网站包含 prefers-reduced-motion CSS 回退，因此具有操作系统辅助功能设置的访问者将看到静态显示而非动态效果。