功能概览 · 001 / 16

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

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

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

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

— 01

Website Presets

50+ production-ready sites — customize in place, publish to Draftly or your domain. No long prompt required.

Browse presets →
— 02

AI Generation

Trained on 10,000+ professional designs. Outputs images, videos, and layouts from natural-language prompts.

Learn more →
— 03

Scroll Engine

Frame-by-frame playback locked to viewport scroll. No WebGL, no Three.js, no performance tax.

Learn more →
— 04

Production Export

Clean semantic HTML, Tailwind CSS, and JavaScript. Deploy anywhere. Own your code.

Learn more →
网站预设

告别空白 画布。

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

  • 01Production-ready UISaaS, agency, portfolio, and launch templates with motion and layout already dialed in.
  • 02Click-to-editChange text and images directly in the preview — no rebuilding from scratch.
  • 03Publish & custom domainLaunch on *.draftly.space or point your domain with DNS A-records.
  • 04ZIP exportDownload the full project on Pro plans — host anywhere you like.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
AI生成

输入即得。 发布即成。

描述您想要的网站 — 包括情绪、行业、氛围 — Draftly将根据您的描述，自动生成完整的电影级滚动体验。

  • 01Cinematic image generationHero compositions tuned for web-first framing — not square crops, not stock-photo lighting.
  • 02Atmosphere controlsDirect the style: noir, golden hour, brutalist, pastel dream, neon dystopia. Plain English.
  • 03Trained on 10,000+ designsTypography, hierarchy, and spatial rhythm baked in. No "AI website" aesthetic.
  • 04Regenerate any layerDon't like the hero? Swap it. Don't like the palette? Shift it. Keep the rest intact.
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
动效引擎

图像。视频。 帧。

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

  • 01Image-to-videoState-of-the-art video synthesis. Subtle camera moves, particle drift, environmental motion.
  • 02Frame extractionHundreds of optimized frames at the resolution your visitors actually need.
  • 03No WebGL. No Three.js.Native browser scroll. Works on any device, any browser, any year.
  • 04Adaptive qualityFrame count and resolution adjust automatically for low-bandwidth visitors.
// 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模型、任何流程、任何输出。

  • 01Node-based pipelinesChain text-to-image, image-to-video, upscale, background removal, and more.
  • 02Reusable workflowsSave a pipeline once. Run it on a hundred briefs. Consistent output across a brand.
  • 03Honest about the curveNodes take a few hours to learn. We've put a starter pack in the docs.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
滚动播放

电影般体验，由 滚轮控制。

每次滚动事件推进一帧。每帧都经过预渲染。结果如电影般流畅，性能媲美静态网站，甚至可在五年旧手机上运行。

  • 01Frame interpolationButtery 60fps playback even on mid-range hardware.
  • 02Parallax depth layersForeground, midground, background — each scrolls at its own speed.
  • 03Mobile-first physicsTouch-scroll behavior tuned per device. No janky momentum.
  • 04Sub-2s load timeAggressive frame compression. Lazy-loaded sequences.
// scroll playback
↓ scroll
cinematic
depth
↑ release
生产级导出

您的网站。 您的代码。

下载ZIP文件。部署到Vercel、Netlify或您自己的服务器。Draftly不提供托管，不锁定用户，不按访客收费。代码完全属于您。

  • 01Semantic HTML5Accessible markup. Screen-reader friendly. SEO-ready out of the box.
  • 02Tailwind CSSThe framework your team already uses. Customize anything in your editor.
  • 03Express API starterOptional backend included. Push to GitHub. Deploy in one click.
  • 04One-click deploy targetsPre-configured for 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 显示器和 360 像素手机上都能呈现精心设计的效果。

  • 01Fluid typographyHeadlines scale with viewport, not abrupt breakpoint jumps.
  • 02Adaptive frame qualityMobile gets 480p frames. Desktop gets 1080p. Automatic.
  • 03Touch-first interactionsScroll, tap, swipe — all behave like a native app.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

流程

两种路径。 一个平台。

i

步骤 01

Presets

ii

步骤 02

Prompt

iii

步骤 03

Image

iv

步骤 04

Video

v

步骤 05

Frames

vi

步骤 06

Ship

入门提示

告别空白页。 意图先行。

SaaS Landing

Hero · Features · Pricing

Studio Portfolio

Editorial · Case studies

Luxury E-com

Product · Story · Cart

Agency Site

Manifesto · Work · Contact

对比

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
真实案例

由创始人、 工作室、独立开发者交付。

“We pitched a $40k brand site using a Draftly export. The client thought we'd hired a Three.js team. We hadn't.

Mara VelascoFounder · Northbound Studio

“Our hero section used to take a designer two weeks. Now it takes a prompt and an espresso.

Daniel ParkHead of Growth · Lumen Labs

“The exported code is cleaner than what most agencies hand off. We host it ourselves. No platform lock.

Priya IyerEngineering Lead · Fold & Co.
技术规格

枯燥的细节， 坦诚相告。

Browser Support

Chrome, Safari, Firefox, Edge — last two versions. Tested on iOS 14+ and Android 9+.

Export Format

ZIP archive containing HTML, CSS (Tailwind), JS, frame sequences (WebP or AVIF).

Typical File Size

2–6 MB per site, depending on frame count and resolution. Aggressive compression.

Self-Host Requirements

Optional. 8GB VRAM minimum for local AI inference. Supports Gemini and Fal.ai keys.

API Access

Pro plan and above. REST endpoints for programmatic generation and pipeline triggers.

Performance

Target LCP under 1.5s. Lazy frame loading. Adaptive quality per connection.

常见问题

您问， 我们答。

Does Draftly host my site?

+
No. You export a ZIP and deploy anywhere — Vercel, Netlify, Cloudflare Pages, your own server. No platform lock-in.

Who owns the exported code?

+
You do. The HTML, CSS, JS, and frame assets are yours to modify, resell, white-label, or open-source as you see fit.

Do I need to know WebGL or Three.js?

+
No. The scroll engine runs on native browser scroll plus frame playback. No 3D library is required at runtime.

Can I bring my own AI keys?

+
Yes. Connect Gemini, Fal.ai, or self-hosted open-source models. You control the inference budget.

Do I need a paid plan to start?

+
Yes. Choose Basic ($25/mo) or higher on the pricing page to unlock 3D Builder, Studio credits, and monthly generation limits.

别再花 $5,000 购买 主页横幅了。

描述您的需求。Draftly 在几分钟内构建一个滚动驱动的 3D 网站。免费开始。即刻发布。

免费开始构建 →查看定价