网站预设
Draftly 从 50 多个可直接用于生产的模板开始，涵盖 SaaS、代理、作品集、发布、工作室、编辑、案例研究、奢侈电商、产品、故事、购物车、宣言、工作和联系等布局。用户可以点击编辑文案和媒体，而无需从零重建页面。
Draftly
认领Draftly 是一款 3D 网站构建器，可通过提示词或预设快速创建电影感、滚动驱动的网站。支持生成动效页面，并导出可部署到自定义域名或主机平台的代码。
概述
Draftly 是一款 3D 网站构建器，可通过提示词或预设创建电影感、滚动驱动的网站。首页将其定位为可在几分钟内构建生产环境 HTML 的方式，而功能页面还补充说，用户也可以从 50 多个模板开始，并直接在原处编辑。
该产品结合了 AI 生成、基于帧的动效播放和代码导出。其工作流程从简报或预设开始，进入生成视觉内容、与滚动联动的动画序列，最后输出可下载的网站，可部署到自定义域名或 Vercel、Netlify 等平台。
功能
基于提示词的生成
AI 生成功能可将自然语言简报转化为电影感的滚动体验，并输出图片、视频和布局。网站说明该系统基于 10,000+ 专业设计训练，并支持 noir、golden hour、brutalist、pastel dream 和 neon dystopia 等风格方向。
滚动锁定动效引擎
Draftly 的动效引擎会将静态概念转换为 8 秒视频，然后切分为随滚动播放的帧。网站明确说明该体验使用原生浏览器滚动，而不是 WebGL 或 Three.js。
生产环境导出
导出流程会生成语义化 HTML、Tailwind CSS 和 JavaScript，功能页面还说明代码可部署到任何地方。页面也提到可选的 Express API starter，以及 Vercel、Netlify 和 Cloudflare Pages 等一键部署目标。
基于节点的流水线
节点工作室允许用户连接 AI 模型，并串联文本生成图像、图像生成视频、放大、背景移除和帧生成等步骤。Draftly 将其描述为在完成第一个项目后构建可复用流水线的地方。
自适应播放与响应式交付
Draftly 会根据访问者的设备和网络连接，自适应调整帧数、帧分辨率和播放行为。网站说明移动设备使用较低分辨率帧，桌面设备使用较高分辨率帧，且序列采用懒加载以加快加载时间。
使用场景
基于模板的营销页面
从 SaaS、代理、作品集、发布或编辑页面模板开始，然后点击编辑文本和媒体再发布。这适合希望获得精致起点、而不是从零编写提示词的团队。
提示词驱动的概念搭建
为品牌落地页撰写自然语言简报，让 Draftly 生成布局、视觉内容和动效序列。该产品面向希望获得电影感首页或英雄区、但又不想在 WebGL 中工作的用户。
电影感叙事页面
为产品故事、奢侈品牌页面或案例研究创建滚动驱动体验，让动效成为呈现的一部分。动效引擎围绕逐帧播放构建，并跟随浏览器滚动位置。
自托管部署
将完成的网站导出为 HTML、Tailwind CSS 和 JavaScript，然后部署到 Vercel、Netlify、Cloudflare Pages 或自托管服务器。该流程适合希望拥有代码并保持托管控制权的团队。
可复用的创意流水线
在发布第一个站点后，进入节点工作室，将图像生成、视频生成、放大和背景移除等模型步骤串联起来。这种设置面向可重复的创意流水线，而不是一次性页面。
Pros and Cons
Pros
- 同时支持先提示词后预设的工作流。
- 导出干净的语义化 HTML、Tailwind CSS 和 JavaScript，便于代码归属和自定义部署。
- 使用原生浏览器滚动播放，而不是 WebGL 或 Three.js。
- 可针对不同设备和带宽条件自适应调整帧质量和分辨率。
- 提供多种模板和可编辑预设，帮助更快开始。
Cons
- 某些高级工作流程，例如基于节点的流水线，被描述为有一定学习曲线。
- 定价页面显示 ZIP 导出与 Pro 方案绑定，因此最低阶方案并不包含所有导出选项。
- 在提供的来源中，文档和 API 参考页面不可用，因此除网站自身的导出和部署目标外，集成细节有限。
FAQ
Draftly 有什么用途？
Draftly 是一款用于通过提示词或预设创建电影感 3D 网站和滚动驱动落地页的网站构建器。源内容描述的流程是从提示词或预设开始，经过 AI 生成、滚动播放，最后导出生产环境代码。
Draftly 提供免费试用或付费方案吗？
定价页面显示提供为期 2 天的免费试用，且需要借记卡，之后是付费方案。页面还显示了不同方案层级，包含 AI 点数、生成限制，以及在更高方案中提供自定义域名和 ZIP 导出等功能。
我可以自己导出并托管 Draftly 站点吗？
功能页面说明 Draftly 可导出干净的语义化 HTML、Tailwind CSS 和 JavaScript，且网站表示 Pro 方案可使用 ZIP 导出。导出目标包括 Vercel、Netlify、Cloudflare Pages，或你自己的服务器。
在 Draftly 中如何开始一个项目？
Draftly 支持从网站预设或提示词开始。功能页面描述了适用于 SaaS、代理、作品集、发布、工作室、编辑、案例研究、奢侈电商、产品、故事、购物车、宣言、工作和联系等风格页面的预设。
Draftly 是否需要 WebGL 或特殊的浏览器支持？
源内容说明 Draftly 使用原生浏览器滚动播放，不需要 WebGL 或 Three.js。功能页面还提到，帧质量和分辨率会针对低带宽访问者自动调整。
Quick Facts
- 类别
- 3D 网站构建器
- 主要工作流
- 从提示词或预设生成滚动驱动的网站
- 输出
- 语义化 HTML、Tailwind CSS、JavaScript 和帧序列
- 托管
- 支持自定义域名，以及 Vercel、Netlify 和 Cloudflare Pages 等部署目标
- 源域名
- draftly.space
- 定价
- 免费 2 天试用，之后为付费方案