Datacore Booking AI 与 SaaS首屏设计｜版式拆解与提示词

关于这个模板

Datacore Booking 收录于 800x553，保留的是一份规格书，而不是一张画廊图片。它以“Book your perfect stay instantly and hassle-free”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了黑色 #171717 打底、灰色 #D4D4D4 给文字、亮靛蓝色 #7B39FC 承担强调色，正文排的是 Manrope。交付形式是 React 和 Tailwind CSS，收录于 800x553，所以画幅在任何一行代码写下去之前就已经定好。写作时让它开着：能迁移到你页面上的，是那份 2,826 字符的简报。下面引用的每一项都是那份简报里的数值，从 800x553 的画幅一直到最小的间距档。

适合谁

需要先看数字的设计师：14px 间距，全部引自需求简报。
给要改写一版首屏、标题长度又得和Datacore Booking一样的内容负责人用。
在比较SaaS参考的设计负责人，会用黑色 #171717 和亮靛蓝色 #7B39FC 来打破平局。

包含哪些内容

一行到底，不做抽屉. 链接在同一行、同一个字号上排开，#7B39FC 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#7B39FC 操作是导航条上唯一有分量的元素。
间距档位是写明的. 这份清单很短（14px 间距），整套系统因此能靠手一个个核过去。间距和字号用同一套单位写明，两者可以直接比。数值才是设计，其余只是摆放。
靠展示字号说话. 这里字体就是那套样式系统：Manrope 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。字号档位是固定值，换字体时层级才能原样保住。
安静底色上的强调色. 强调色的职责在需求简报里就定死了：亮靛蓝色 #7B39FC 给操作，黑色 #171717 给画幅。#7B39FC 与黑色 #171717 之间的对比，是强调色在小面积上仍然可读的原因。

动效与交互

交互层就是这些控件

交互只发生在各自的控件上（悬停态只给按钮和链接，而不是每张卡片），页面其他地方不会跟着动。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 800x553 下收录。

几乎没有动效

需求简报里没有动画，页面靠 800x553 的版式撑住，唯一的变化是悬停态和按下态。动效被当作反馈，而不是装饰。

这份SaaS需求简报为什么站得住

大多数SaaS页面在首屏不够有力时选择再加一个板块。这一版反过来做减法：导航、标题、公告徽标、数据行、背景片段，就按这个顺序，没有任何重复主张的东西。它给SaaS读者的是一条通向主张的最短诚实路径。这份参考在 800x553 下收录。

这个首屏怎么重排

固定一套桌面端字阶会更省事。需求简报加了96px 到 14px 的 clamp，正是它让展示字在各个宽度之间保持比例。扛过重排的是层级。

这个首屏背后的顺序

注意力是被引导的，不是碰运气。页面直接把这句话说出来了：“Book your perfect stay instantly and hassle-free”。顺序依次是导航、标题、公告徽标、数据行、背景片段，每一站都按14px 间距定尺寸，所以不会有东西乱序出现。 SaaS读者先看到主张，再看到选项。