品牌与视觉
把一句品牌主张，铺成一整屏
输入主张 + 3 个调性词，平台输出全屏分镜：首屏主标语控制在一行 22 字内，配色自动落在暖金主色与紫罗兰强调的小面积点缀上，避免大面积高饱和刺眼。
- 首屏字重 800
- 标语 ≤22 字
- 强调色占比 ≤10%
01 / 应用场景
三块全出血画布，接住你不同的创作时刻
每块画布至少占满一屏高度，横向图文卡逐条铺开，先看图，再读参数。
产品与增长
用全屏滚动讲完一个完整故事
为落地页生成 5 到 7 屏的滚动节奏：每屏信息量控制在 3 个要点以内，滚动触发阈值设为视口高度的 60%，避免用户还没读完就翻页。
- 5–7 屏叙事
- 触发阈值 60%
- 每屏 ≤3 要点
内容与自媒体
一条素材，批量长成多屏海报
上传一张主图与一段文案，平台按 16:9 / 4:5 / 1:1 三种比例切出全屏版式，图片统一 object-fit 裁切，圆角保持 20–28px，保证手机端也不跳版。
- 3 种比例
- 圆角 20–28px
- 单次出图 ≤12s
02 / 实用清单
做全屏设计前，先把这 6 件事钉住
都是能在当天落地的做法与阈值，照着调，成稿速度通常能快一半。
-
先定「一屏一件事」
每屏只承载一个主信息，主标题字号
clamp(2.4rem, 1.8rem+3vw, 3.6rem)，正文控制在 60–80 字。屏数超过 8 屏时，把中间两屏合并，否则移动端完成率会从 92% 掉到 70% 以下。 -
配色按 60-30-10 分配
约 60% 用深暖底（背景与大面积块），30% 交给暖金主色（标题高亮、图形），强调色只占 10% 以内，用于按钮、激活态与关键数字。切忌把最高彩度色铺满整条横幅，那会让长时间阅读的疲劳感翻倍。
-
给滚动加「呼吸间隙」
区块之间保留 1px 分隔线与 48–64px 垂直间距；滚动动效时长控制在 0.3–0.6s 的 ease-out，位移不超过 24px。急促弹跳会让阅读节奏断裂，宁可慢一点。
-
图片先裁切，再进入排版
所有配图放进固定宽高比容器（如 16:8、4:3），统一
object-fit:cover并加圆角，hover 放大不超过 1.05 倍。提前裁切能防止加载后布局跳动，把首屏 CLS 压到 0.1 以内。 -
动效要能「关得掉」
环形旋转、路径描边、数字滚动全部写进
@media (prefers-reduced-motion: reduce)降级分支，动画时长压到 0.001ms。前庭敏感用户会感谢这个开关，这也是无障碍验收的硬指标。 -
小屏单独收一遍
640px 以下关闭横向导航、表格转卡片；380px 以下把内边距收到 12px、卡片改单列，任何点按区不小于 44px。发布前用 320px 宽度实测，确保没有横向滚动条。
03 / 工作流程
从一句描述，到一版能上线的全屏页
四步走完，全程约 40 分钟，每一步都有明确的交付物。
写一段「有人味」的输入
描述里带上受众、场景与情绪词，例如「给独立咖啡店主做一版温暖的全屏开页」。关键词越具体，平台给出的科技风/未来感草案越准，第一版可用率能到 70% 左右。
挑一版分镜，别急着改颜色
先比较 3 版全屏分镜的叙事顺序，选出信息密度合适的一版。配色与字体放在第二步之后调，先定结构能省下大量返工。
把令牌对齐到你的品牌
替换配色令牌与圆角、间距变量，确认 60-30-10 的比例没有被打破；强调色只留在按钮、图标与关键数字上，大面积区域回到中性底色。
四档宽度实测后交付
依次在 2560 / 1440 / 768 / 320 四档宽度走查：检查横向溢出、图片裁切、点按区尺寸与焦点样式，全部通过后再交付，返工率通常低于 10%。
04 / 细节特写
把「未来感」拆成看得见的具体参数
未来感并不等于堆特效。把光感、层次与节奏做扎实，页面自然就「往前走」了：环形放射装饰用低透明度描边、卡片用多层柔和暖影、数字用等宽数字体保证跳动时不抖位。
- 多层柔影：用三层低不透明度阴影叠出景深，替代单层硬黑投影，hover 时抬升 2–3px。
- 等宽数字：统计数字加 tabular-nums，滚动计数时宽度不跳，读数更稳。
- 描边动效：手绘箭头用 stroke-dashoffset 从 300 描到 0，1.6s 完成，像有人随手画上去。
- 图片柔化：配图加轻微降饱和与亮度微调，圆角统一 20–28px，视觉上更亲近。
06 / 客户说
他们用起来的真实感受
以前做一版品牌全屏页要两天，现在上午提需求、午休前就能看第一版。最舒服的是它不会硬塞高饱和配色，暖金配一点点紫，客户一眼就点头。
林知远品牌设计负责人
全屏滚动的节奏它帮我们卡得很准，每屏三个要点、滚动阈值 60%，上线后移动端完成率从 68% 提到 91%，返工只在细节上。
苏念产品增长负责人
我最喜欢它的动效降级开关，投屏演示和前台大屏都不会翻车。图片裁切规则统一之后，团队交付的页面第一次做到零跳版。
郑一鸣独立内容创作者
07 / 方案对比
自己手搓 vs. 用平台，差在哪
按一版全屏落地页的完整交付来算，小屏自动转为卡片阅读。
| 对比维度 | 纯手工从零做 | 用本平台 |
|---|---|---|
| 首版耗时 | 16–24 小时 | 约 40 分钟 |
| 配色一致性 | 靠人工核对，易漂移 | 令牌统一，60-30-10 自动校验 |
| 移动端完成率 | 约 68% | 约 92% |
| 布局跳版（CLS） | 常超 0.25 | ≤ 0.1 |
| 无障碍降级 | 常被遗漏 | 动效 / 对比度内置 |
| 改版返工率 | 30% 以上 | 低于 10% |