关于这个模板
把 LaunchEx About 当作关于页规格书来读:这些数值在页面动手之前就先写下来了。整套配色是白色 #F0F5F7 打底、青绿色 #154359 给文字、青绿色 #4BBDF0 承担强调色,页面字体是 Inter。实现用的是 React 和 Tailwind CSS;里面的每个尺寸都写了下来,这正是它可复用的原因。把它当作面向创意机构或工作室做关于页的需求简报:它要经得起复刻,而不只是第一眼好看。
适合谁
- 先把 640x464 的画幅和字号从 14px 到 54px、100vh 高的板块从这版关于页里拿走,再考虑别的。
- 用提示词给关于页提需求的人,会把这份 6,908 字符的提示词当作起点。
- 给要改写一版关于页、标题长度又得和LaunchEx About一样的内容负责人用。
包含哪些内容
- 字和画幅共用一套档位. 这些值就是规格本身:字号从 14px 到 54px、100vh 高的板块、14px 间距,是在 640x464 下收录的,而不是从截图里反推的。写明的值之间没有凭空插入的中间值,这份测量清单就是整套系统。
- 用一行数据代替一句自夸. 一行数据落在折叠线之上,用 Inter 的最高一档字号排,#4BBDF0 只留给那些承担主张的数字。数字带 #4BBDF0 强调色,周围一切都留在正文色上。数字控制在一行。
- 每个尺寸都写下来了. 这些值就是规格本身:字号从 14px 到 54px、100vh 高的板块、14px 间距,是在 640x464 下收录的,而不是从截图里反推的。写明的值之间没有凭空插入的中间值,这份测量清单就是整套系统。搬运页面时保留这些写明的数值。
- 证据就一行. 一行数据落在折叠线之上,用 Inter 的最高一档字号排,#4BBDF0 只留给那些承担主张的数字。数字带 #4BBDF0 强调色,周围一切都留在正文色上。一个数字要靠一段话才说得清,那它就不是数据点。
动效与交互
只有一个元素入场
入场动效只集中在一个元素上:每一行从裁切窗口里升起。页面加载时,其他东西都已经就位。时长从一个值推出来,所以文案一长,动画自然跟着变长,不用手调。这份参考在 640x464 下收录。
反馈只出现在控件上
交互只发生在各自的控件上(悬停态只给按钮和链接,而不是每张卡片),页面其他地方不会跟着动。状态很简单,因此能直接搬进任何组件体系。这份参考在 640x464 下收录。
LaunchEx About 怎么安排第一次阅读的顺序
在这里,顺序就是设计。数据行、卡片栅格的摆放让主张先于证据落地,字号从 14px 到 54px、100vh 高的板块定下两者之间的距离。创意机构读者先看到主张,再看到选项。
这个关于页背后的数字
把这个关于页拆开,这些数值依然能描述它:字号从 14px 到 54px、100vh 高的板块,管住画幅和下面的节奏。这个关于页里没有任何一处依赖默认值。
在 LaunchEx About 里先改什么
可复用的是构图,题材是你自己的。换掉标题,保留字阶(字号从 14px 到 54px),再在你的素材上重新测一遍 #4BBDF0 强调色。如果新加的元素不能帮助说明产品主张或下一步动作,它就该放到折叠线以下。替换比重新构图便宜,这正是重点。
常见问题
LaunchEx About 背后那份需求简报里到底有什么?
简报是从页面上收录下来的,共 6,908 个字符,覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本,发给 Studio 则会用同一份描述把请求预先填好。
LaunchEx About 有多少地方依赖 React 和 Tailwind CSS?
LaunchEx About 是用 React 和 Tailwind CSS 构建的,条目标注只是说明出处。简报写的是位置、尺寸和时长,所以任何能设字体、能摆元素的前端框架都能重建。
LaunchEx About 里不足一秒的过渡是怎么动的?
动效和版式写得一样细:状态切换落在不足一秒区间内。先复刻构图、再对时长,因为版式立住之后时长更好对。这份参考在 640x464 下收录。






