VISUAL PROMPT STUDIO

先把网页
设计清楚。
再交给 AI。

SceneFlow 是一个纯前端视觉编排工作台:用 Scene、风格和功能组件把网页想法摆出来,导入现有 HTML 继续改,最后输出 AI 能直接理解的 Markdown Prompt 或 JavaScript Spec。

DESIGN / FLOW
EDITORIAL / HOME
Good coffee.
No waiting.
Arrange visual intent, interaction and motion without writing the implementation first.
SMART ALIGN
WHY SCENEFLOW

不是画页面。
是定义视觉意图。

把重复工作交给工具,把判断留给设计者:Scene 负责结构,组件负责功能,风格负责视觉语言,AI 负责最终实现。

01 / SCENE

复制整页,也复制模块

Scene 可以一键复制;同功能模块可以多选后批量复制,适合商品卡、功能区、列表等重复结构。

02 / IMPORT

把已有 HTML 继续变成设计

导入 HTML/CSS 文件夹,识别标题、按钮、媒体、表单、列表等语义组件,并放进一个可继续编辑的自定义导入风格。

03 / HANDOFF

最后输出给 AI

位置会转换为相对比例与自然语言约束,媒体地址、动画意图、风格 tokens 和场景关系都能进入 Prompt。

WORKFLOW

四步,
从想法到实现。

01

选模板

从 SaaS、产品官网、作品集、B2B、内容页等常见结构开始。

02

摆组件

图片就是图片,视频就是视频,输入框就是输入框;每个组件有自己的功能属性。

03

定义风格与 Motion

风格真正影响字体、表面、圆角、颜色和质感;不会写动画时直接描述动作即可。

04

交给 AI

导出 Markdown Prompt 或 JavaScript Spec,继续交给你的 AI 编码工具。

STARTING POINTS

常见网站结构,
先选一个再改。

模板参考主流 SaaS、产品官网与设计型网站的通用信息架构,而不是把用户锁死在某一种视觉风格。

Product SaaS

Hero · Features · Proof · CTA

Apple-like Product

Big visual · Story · Comparison

Immersive / Motion

Scroll story · Motion · Showcase

Editorial Commerce

Story · Product · Social proof

MOTION READY

不会写动画?
直接说人话。

例如:“页面滚动到 40% 时,产品从盒子里慢慢展开,鼠标反向移动时动作也跟着倒放。” SceneFlow 把自然语言意图写入动画规格。复杂连续帧动画可以继续接入 Oil Motion 的工作流。

MOTION LIBRARY

动效是响应,
不是额外组件。

每张卡都用它真实的触发方式演示:进入视口、点击、悬停或连续输入。卡片本身不再统一上浮。

进入视口

淡入

内容进入或切换时柔和出现。

进入视口

向上浮入

从下方进入,适合标题与卡片。

进入视口

横向滑入

表达顺序、层级或方向关系。

进入视口

缩放出现

从略小状态回到最终尺寸。

进入视口

模糊聚焦

从轻微模糊聚焦到清晰。

点击体验

按压回弹

点击后确认操作已被接收。

点击开关

弹性开关

开关滑块带轻微物理回弹。

点击位置

水波按钮

从点击位置扩散行动反馈。

点击完成

点击爆散

完成 CTA 后释放短暂粒子。

连续拖动

液态滑块

连续数值变化时柔和回弹。

加载完成

骨架屏落位

占位解析后落到最终位置。

数值变化

数字滚动

指标、进度和数字输入的状态更新。

点击翻面

卡片翻面

点击在正反面之间翻转。

鼠标悬停

悬停弹起

鼠标移入时抬高并加强层级。

鼠标悬停

悬停下沉

鼠标移入时轻微下沉。

滚动进入

滚动进入

长页面下方内容进入视口后淡入上浮。

需要连续的滚动、指针、拖拽或触摸输入时,可继续参考 Oil Motion 的输入驱动与时间线分离方式。