关于这个模板

Convix Software 留住了自己的决策链:生成这个首屏的需求简报有 5,587 个字符。颜色只用了白色 #EDEDED 打底、深蓝色 #0B0F1A 给文字、亮红色 #EF4D23 承担强调色,正文排的是 Inter。这份参考用 React、Lucide icons 构建,但版式上的决定都独立于它写清楚了。写作时让它开着:能迁移到你页面上的,是那份 5,587 字符的简报。下面引用的每一项都是那份简报里的数值,从 800x578 的画幅一直到最小的间距档。收录的提示词记录于 800x578,所以这一页引用的每个数值都能追回到它。

适合谁

  • 接手这版首屏的市场人员,会用固定 22px 的标题字号、100vh 高的板块检查改稿有没有保住原来的尺度。
  • 给要改写一版首屏、标题长度又得和Convix Software一样的内容负责人用。
  • 给已经选好 #EF4D23、首屏其他部分都还没定的创始人用。

包含哪些内容

  • 导航条落在页面栅格上. 链接在同一行、同一个字号上排开,#EF4D23 操作收在行尾右侧,视线正好在导航结束的地方停下。链接比字标小一档,#EF4D23 操作是导航条上唯一有分量的元素。链接控制在四到五个,这一行的尺寸就是照这个定的。
  • 数值一路带进构建. 需求简报里的每个尺寸都是能反测量回去的数值:固定 22px 的标题字号、100vh 高的板块、13px 间距。每个值对应一件事:一个字号档位、一段间距、一个圆角或一次过渡。
  • 顺序由栅格定. 栅格就是结构:面板同样大小,用 Inter 排,排得让视线横向移动,而不是向下。面板内的小标题比自己那块正文高一档,而不是比页面标题低一档。
  • 公告胶囊. 一枚徽标只说一件事:胶囊用 Inter 的最小字阶待在标题上方,没有别的元素来争这个位置。徽标用 #EF4D23,而标题留在正文色上。

动效与交互

不挡路的动效

这一份交付的是 800x578 下的静态构图,所以层级必须不靠动效也成立,它确实成立。构图保持不动,所以页面得靠层级撑住,而它撑住了。

几乎没有动效

这一份交付的是 800x578 下的静态构图,所以层级必须不靠动效也成立,它确实成立。构图保持不动,所以页面得靠层级撑住,而它撑住了。静止是一个成立的选择。

这个首屏背后的时序

动效是一张短清单,不是一套系统。需求简报点名了悬停态与按下态,页面其余部分都不动。这个首屏里没有为动而动的动画。这份参考在 800x578 下收录。

把这个首屏变成你自己的

一行标题、一个字体、一个强调色:这三处替换对设计的改变最大。固定 22px 的标题字号、100vh 高的板块、13px 间距是那组不该动的值。画幅和字阶都保留,该换的是题材。

这个首屏背后的数字

把它和一个把间距称作“偏好”的模板比:这里同样的值是写明的(固定 22px 的标题字号、100vh 高的板块、13px 间距),所以一次修改要么保住它们,要么明显破坏构图。这个首屏里没有任何一处依赖默认值。

常见问题

Convix Software 的提示词是定稿规格,还是只是一个起点?

它是构建简报,不是感觉描述:写明 800x578 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。

能用别的技术栈重建 Convix Software 的首屏吗?

不需要。需求简报是规格说明,不是依赖清单。它当初是按 React、Lucide icons 写的,但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。

Convix Software 的设计是从哪来的?

简报是描述,不是转授权别人素材的许可。结构和数值可以留下,素材和品牌标识要换成你自己的;客户问起版式出处时,说明来源即可。这份参考在 800x578 下收录。

在 Studio 里复刻

先拿参考,再到 Studio 里替换内容与视觉细节。