NexaCore Results AI 与 SaaS功能区设计｜版式拆解与提示词

关于这个模板

NexaCore Results 展示了为AI 或 SaaS 产品做功能区的一种做法，并把生成它的说明一起公开。页面自己的标题是“NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track”，整个构图就是围绕这串字搭的。配色控制在白色 #EBEBEB 打底、靛蓝色 #C86FFF 承担强调色之内，字体用 Mazzard H。交付形式是 React 和 Tailwind CSS，收录于 640x466，所以画幅在任何一行代码写下去之前就已经定好。对于需要在第一屏就显得刻意的AI 或 SaaS 产品功能区，它是一份合适的参考。

适合谁

如果动效必须砍掉，这版功能区照样读得通，靠字号从 14px 到 18px、36px 圆角撑起层级。
用提示词给功能区提需求的人，会把这份 9,261 字符的提示词当作起点。
给要改写一版功能区、标题长度又得和NexaCore Results一样的内容负责人用。

包含哪些内容

间距档位是写明的. 这份清单很短（字号从 14px 到 18px、36px 圆角、20px 间距），整套系统因此能靠手一个个核过去。间距和字号用同一套单位写明，两者可以直接比。
数字坐在基线上. 一行数据落在折叠线之上，用 Mazzard H 的最高一档字号排，#C86FFF 只留给那些承担主张的数字。数字带 #C86FFF 强调色，周围一切都留在正文色上。
一屏之内的结构. 整套构图装在一屏里，以 React 和 Tailwind CSS 交付，文案、素材和控件都在需求简报里点明了。页面在 640x466 下就是一套完整构图，所以文案变了它依然立得住。需求简报就是规格。
每种宽度都有明确行为. 需求简报给标题用的是 14px 到 18px 的 clamp，长句子才不会在尴尬的位置折行。控件保持足够大的点击面积，文案在任何宽度下都维持同一个阅读顺序。窄屏版式要设计，不要硬挤。

动效与交互

交互区域刻意做小

只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。每个状态只改一个属性，反馈因此保持清楚。这份参考在 640x466 下收录。

有意做成静止

这里没有滚动库：640x466 的构图保持不动，只有会回应你的元素在动。动效被当作反馈，而不是装饰。

把 NexaCore Results 当规格书读

大多数参考只给你结果、把数字留下。这一份反过来：字号从 14px 到 18px、36px 圆角、20px 间距和页面一起公开，所以结果能被复现，而不是被大致模仿。这个功能区里没有任何一处依赖默认值。

NexaCore Results 里什么在动

野心太大的动效通常会让首屏失去可读性。这份简报把悬停态与按下态控制得足够短，文字从来不用等它。这个功能区里没有为动而动的动画。这份参考在 640x466 下收录。

对AI 与 SaaS来说成立的地方

NexaCore Results 是面向AI 或 SaaS 产品的功能区参考，回应的正是这类受众真正遇到的问题。页面直接把这句话说出来了：“NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track”。配色保持克制（白色 #EBEBEB 和靛蓝色 #C86FFF），字体用 Mazzard H，所以构图里没有任何东西依赖借来的潮流。要给别人写构建需求时，这部分最值得抄：一个用主标题字号说出的承诺，支撑细节全部压在它下面。它给SaaS读者的是一条通向主张的最短诚实路径。