功能概览 · 001 / 16

构建 影院级 3D网站所需的一切工具。

从精美预设开始，直接编辑——或通过一个提示词构建沉浸式3D滚动网站。无需WebGL知识。无需设计学位。告别无休止的空白画布提示。

免费开始构建 →浏览预设查看定价
001
031
061
091
121
151
181
211
四大支柱

一个工作流。三层 创意控制。

— 01

网站预设

50+生产就绪网站——直接定制，发布到Draftly或您的域名。无需冗长提示词。

浏览预设 →
— 02

AI生成

基于10,000+专业设计训练。通过自然语言提示词输出图像、视频和布局。

了解更多 →
— 03

滚动引擎

逐帧播放，与视口滚动锁定。无需WebGL、Three.js，无性能开销。

了解更多 →
— 04

生产级导出

简洁的语义化HTML、Tailwind CSS和JavaScript。可部署到任何地方。代码归您所有。

了解更多 →
网站预设

告别空白 画布。

选择一个精美预设，点击编辑文案和媒体，并发布到免费的Draftly子域名或连接您自己的DNS——与3D构建器相同的发布流程。

  • 01生产就绪UISaaS、代理、作品集和发布模板，内置动效和布局。
  • 02点击编辑直接在预览中更改文本和图像 — 无需从头重建。
  • 03发布与自定义域名在 *.draftly.space 上发布，或使用 DNS A 记录指向您的域名。
  • 04ZIP 导出在专业版方案中下载完整项目 — 可在任何您喜欢的地方托管。
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
AI 生成

输入它。 发布它。

描述您想要的网站 — 情绪、行业、氛围 — Draftly 将仅凭您的文字，构建完整的电影级滚动体验。

  • 01电影级图像生成针对网络优先构图调整的英雄图像 — 非方形裁剪，非图库照片光线。
  • 02氛围控制指导风格：黑色电影、黄金时段、粗野主义、柔和梦幻、霓虹反乌托邦。纯英文描述。
  • 03经过 10,000+ 设计训练内置排版、层级和空间韵律。没有“AI 网站”美学。
  • 04重新生成任意图层不喜欢英雄图像？替换它。不喜欢调色板？调整它。其余保持不变。
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
动态引擎

图像。视频。 帧。

四阶段流程将静态概念转化为八秒电影级动态，然后将该动态切片成数百帧，浏览器可即时播放。

  • 01图像转视频尖端视频合成。微妙的镜头移动、粒子漂移、环境动态。
  • 02帧提取数百个优化帧，分辨率符合访客实际需求。
  • 03无 WebGL。无 Three.js。原生浏览器滚动。适用于任何设备、任何浏览器、任何年份。
  • 04自适应质量帧数和分辨率自动调整，以适应低带宽访客。
// frame sequence240 / 240
001
060
120
180
240
01 ▸ generate cinematic still
02 ▸ animate to 8-second video
03 ▸ extract 240 frames
04 ▸ encode scroll-locked playback
可视化工作室

当提示词 不足时。

发布第一个网站后，节点工作室是您以不同方式构建第二个网站的地方。连接任何 AI 模型、任何流程、任何输出。

  • 01基于节点的流程串联文本转图像、图像转视频、放大、背景移除等。
  • 02可复用工作流保存一次流程。在一百个简报上运行。品牌输出保持一致。
  • 03坦诚学习曲线学习节点需要几个小时。我们已在文档中提供了入门包。
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
滚动播放

影片，由 滚轮控制。

每次滚动事件推进一帧。每帧都经过预渲染。结果感觉像一部影片，性能媲美静态网站，甚至能在五年旧的手机上运行。

  • 01帧插值即使在中端硬件上也能实现流畅的 60fps 播放。
  • 02视差深度层前景、中景、背景——各自以不同速度滚动。
  • 03移动优先物理效果针对每台设备优化的触控滚动行为。无卡顿惯性。
  • 04小于 2 秒的加载时间激进的帧压缩。延迟加载序列。
// scroll playback
↓ scroll
cinematic
depth
↑ release
生产导出

您的网站。 您的代码。

下载 ZIP 文件。部署到 Vercel、Netlify 或您自己的服务器。Draftly 不托管您，不锁定您，也不按访客收费。代码归您所有。

  • 01语义化 HTML5可访问标记。屏幕阅读器友好。开箱即用的 SEO。
  • 02Tailwind CSS您的团队已在使用的框架。在编辑器中自定义任何内容。
  • 03Express API 启动器包含可选后端。推送到 GitHub。一键部署。
  • 04一键部署目标预配置支持 Vercel、Netlify、Cloudflare Pages。
// export
index.html · 4.2KB
<!-- Draftly export · scroll-locked sequence -->
<section class="hero" data-frames="240">
  <div class="scroll-stage">
    <canvas id="frame-canvas" />
    <div class="overlay">
      <h1>Built with Draftly</h1>
    </div>
  </div>
</section>

// 240 frames · 1.8MB total · LCP 1.2s
响应式

一次构建。 适配所有屏幕。

Tailwind 断点、流体排版比例和自适应帧分辨率，意味着您的网站在 4K 显示器和 360px 手机上都能呈现出精心设计的效果。

  • 01流体排版标题随视口缩放，而非突兀的断点跳跃。
  • 02自适应帧质量移动设备获得 480p 帧，桌面设备获得 1080p 帧。自动完成。
  • 03触控优先交互滚动、轻触、滑动——都像原生应用一样运行。
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

工作流

两条路径。 一个平台。

i

步骤 01

预设

ii

步骤 02

提示

iii

步骤 03

图片

iv

步骤 04

视频

v

步骤 05

帧

vi

步骤 06

发布

入门提示

告别空白页。 从意图开始。

SaaS 落地页

主视觉 · 功能 · 定价

工作室作品集

编辑 · 案例研究

奢侈品电商

产品 · 故事 · 购物车

代理机构网站

宣言 · 作品 · 联系方式

对比

Draftly 的定位 技术栈。

Draftly		FramerWebflowSpline
Website presets gallery● 50+ templates———
AI prompt-to-site● Full pipelinePartial——
3D motion (no WebGL)● Native scroll——WebGL required
Code export● HTML/CSS/JSCode componentsYes (paid)React only
Hosting required● OptionalBundledBundledBundled
Bring your own AI model● Yes———
Entry price● $0 / $25$15$18$0 / $9
真实案例

由创始人、 工作室和独立开发者发布。

“我们使用 Draftly 导出的内容成功推销了一个价值 4 万美元的品牌网站。客户以为我们聘请了 Three.js 团队，但我们没有。

Mara Velasco创始人 · Northbound Studio

“我们网站的主视觉部分以前需要设计师两周时间。现在，只需一个提示和一杯意式浓缩咖啡即可完成。

Daniel Park增长主管 · Lumen Labs

“导出的代码比大多数代理机构交付的更简洁。我们自己托管，没有平台锁定。

Priya Iyer工程主管 · Fold & Co.
技术规格

枯燥的细节， 坦诚相告。

浏览器支持

Chrome、Safari、Firefox、Edge — 最近两个版本。已在 iOS 14+ 和 Android 9+ 上测试。

导出格式

包含 HTML、CSS (Tailwind)、JS、帧序列 (WebP 或 AVIF) 的 ZIP 压缩包。

典型文件大小

每个站点 2–6 MB，具体取决于帧数和分辨率。采用激进压缩。

自托管要求

可选。本地 AI 推理至少需要 8GB 显存。支持 Gemini 和 Fal.ai 密钥。

API 访问

专业版及以上套餐。提供 REST 端点，用于程序化生成和管道触发。

性能

目标 LCP 小于 1.5 秒。帧懒加载。根据连接自适应质量。

常见问题

您问， 我答。

Draftly 会托管我的网站吗？

+
不会。您可以导出 ZIP 文件并部署到任何地方 — Vercel、Netlify、Cloudflare Pages 或您自己的服务器。没有平台锁定。

谁拥有导出的代码？

+
您拥有。HTML、CSS、JS 和帧资源归您所有，您可以根据需要修改、转售、贴牌或开源。

我需要了解 WebGL 或 Three.js 吗？

+
不需要。滚动引擎基于原生浏览器滚动和帧播放运行。运行时无需 3D 库。

我可以使用自己的 AI 密钥吗？

+
可以。连接 Gemini、Fal.ai 或自托管的开源模型。您控制推理预算。

我需要付费套餐才能开始吗？

+
是的。在定价页面选择基础版（25 美元/月）或更高版本，以解锁 3D 构建器、工作室积分和每月生成限制。

别再花 5,000 美元购买 英雄区了。

描述您的需求。Draftly 在几分钟内构建一个滚动驱动的 3D 网站。订阅即可发布。

查看定价 →查看定价