关于这个模板
Tech-Noir About 交给了AI 或 SaaS 产品一个已经做完的首屏，以及做出它的那组数字。整套配色是红色 #C40010 打底、亮红色 #FF0000 承担强调色，页面字体是 Manrope。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。当这个关于页需要在新增任何板块之前先定下顺序时，就拿它来用。
适合谁
- 这个关于页要服务的，是需要让 640x470 画幅撑过三轮客户修改的代理公司。
- 这个关于页回答的是想知道字号从 16px 到 120px、100px 间距在布局里到底管哪一块的构建者。
- 用提示词给关于页提需求的人，会把这份 3,555 字符的提示词当作起点。
包含哪些内容
- 尺寸写在需求简报里，不在一套比例里. 这里没有一样东西是靠眼睛估的。规格钉死了字号从 16px 到 120px、100px 间距，剩下的版式都从这些值推导出来。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 颜色也有职责说明. 配色就是一个底色加一个信号（红色 #C40010 和亮红色 #FF0000），第二个颜色专留给操作。其余一切都落在红色 #C40010 上，高饱和配色才保得住可读性。如果再出现第二个颜色，它必须承载信息。
- 构图即内容. 折叠线以上的每样东西都得挣到自己的位置。需求简报点明了文案、640x470 画幅和字号，没有留下任何装饰物跟它们抢。页面在 640x470 下就是一套完整构图，所以文案变了它依然立得住。
- 字号断得很干脆. 气质来自需求简报里的字号档位和字距：Manrope 用收紧的展示字号，然后干净地掉到支撑句。字号越大字距收得越紧，标题行在 16–120px 范围内才能保持完整。
动效与交互
有意做成静止
这里没有滚动库：640x470 的构图保持不动，只有会回应你的元素在动。只有响应指针的元素会动。动效只留在控件上。
不挡路的动效
这里没有滚动库：640x470 的构图保持不动，只有会回应你的元素在动。只有响应指针的元素会动。
这个关于页背后的顺序
把你自己的文案放进这个关于页，顺序依然成立，因为这些元素不能互换：背景片段各自只负责一件事。 SaaS读者先看到主张，再看到选项。这份参考在 640x470 下收录。
这个关于页怎么重排
把这个关于页先在 640x470 下测，再在手机宽度下测：顺序一样成立，只是字阶是流体的，而不是阶梯式的。直接挤小更省事，但撑不住。
把 Tech-Noir About 当规格书读
截图告诉你页面长什么样，需求简报告诉你为什么。字号从 16px 到 120px、100px 间距把这两者之间的差补上。这个关于页里没有任何一处依赖默认值。
常见问题
Tech-Noir About 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 3,555 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Tech-Noir About 有多少地方依赖 React 和 Tailwind CSS？
Tech-Noir About 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
为什么 Tech-Noir About 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 3,555 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
