Digitwist AI Builder AI 与 SaaS首屏设计｜版式拆解与提示词

关于这个模板

在动手为AI 或 SaaS 产品重建首屏之前，先读 Digitwist AI Builder：构图和它背后的规格书都在这里。页面自己的标题是“Design at the speed of thought”，整个构图就是围绕这串字搭的。配色控制在亮蓝色 #3054FF 打底、灰调蓝色 #B4C0FF 给文字之内，字体用 Instrument Sans。这一条会把生成页面的技术栈（React、Lucide icons）写出来，而不是藏起来。这个页面的动效控制在0.6s 的过渡。写作时让它开着：能迁移到你页面上的，是那份 6,001 字符的简报。下面引用的每一项都是那份简报里的数值，从 800x556 的画幅一直到最小的间距档。收录的提示词记录于 800x556，所以这一页引用的每个数值都能追回到它。

适合谁

正在做AI 或 SaaS 产品首屏的团队，想要的是量出来的细节（字号从 20px 到 136px、120px 间距），而不是一张可以照抄的截图。
给要改写一版首屏、标题长度又得和Digitwist AI Builder一样的内容负责人用。
要出第一个版本的创始人，宁愿改造一套用 Instrument Sans 排的构图，也不想拼装模板。

包含哪些内容

链接在前，操作在后. 一短行链接加一个操作压在首屏上，尺寸按字号从 20px 到 136px、120px 间距控住，导航条因此永远不会跟它背后的构图抢。导航条悬在 800x556 的构图上，自己没有底色，素材因此从它下面通到两边。
折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Instrument Sans 的最小字阶待在标题上方，没有别的元素来争这个位置。它的位置让标题继续占住构图的正中。让它待在标题上方，不要挪到旁边。
间距档位是写明的. 尺寸是写明的，不是继承来的：字号从 20px 到 136px、120px 间距、0.6s 的过渡。换字体或换文案，这些关系依然成立。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
字重按角色写明. 字体和它的字号是一起写明的（Instrument Sans，跨 20–136px），字体因此在不同的构建之间搬得动。字号越大字距收得越紧，标题行在 20–136px 范围内才能保持完整。展示行留到最后再排。

动效与交互

指针只在有用的地方出现

只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。状态很简单，因此能直接搬进任何组件体系。这份参考在 800x556 下收录。

时长以需求简报为准

控件里的动效短且可重复：每次状态变化都是 0.6s。缓动和时长写在一起（0.6s），复刻时没法悄悄换成另一种手感。状态变化要快，不要滚动时间轴。

这个首屏背后的顺序

你把这些板块打乱，页面照样能打开，但它不再读起来像一个论点：导航、标题、公告徽标、数据行、背景片段是一条序列，字号从 20px 到 136px、120px 间距也只在这个顺序里成立。 SaaS读者先看到主张，再看到选项。

这个首屏背后的数字

如果你要把这页交给开发者，有用的交付物是那份需求简报。它写明字号从 20px 到 136px、120px 间距、0.6s 的过渡，不留任何需要你们两个人各自解读的地方。这个首屏里没有任何一处依赖默认值。

这个首屏在论证什么

主张只说一次，用展示字号说。“Design at the speed of thought”从第一帧起就在做这件事。首屏其余部分都围着这一行排序：导航、标题、公告徽标、数据行、背景片段，没有第二个承诺来抢第一次阅读。 Digitwist AI Builder 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。