关于这个模板
Bold Studio 留住了自己的决策链：生成这个首屏的需求简报有 6,067 个字符。它以“FSP DEMO - PODIUM Sharp 4.11”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了红色 #A60D29 打底、白色 #F6E9EB 给文字，正文排的是 Inter。交付形式是 React 和 Tailwind CSS，收录于 640x474，所以画幅在任何一行代码写下去之前就已经定好。动作被收进100ms 的过渡里。写作时让它开着：能迁移到你页面上的，是那份 6,067 字符的简报。收录的提示词记录于 640x474，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 640x474 的画幅一直到最小的间距档。
适合谁
- 给要改写一版首屏、标题长度又得和Bold Studio一样的内容负责人用。
- 整套构图服务的是会换掉标题、需要 Inter 的各字重维持同一节奏的内容团队。
- 正在上线创意机构或工作室首屏的创始人，需要在开发动手之前把 Inter 和整套字阶定下来。
包含哪些内容
- 导航不带底色. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 640x474 的构图上，自己没有底色，素材因此从它下面通到两边。
- 对着视口量出来的. 这里没有一样东西是靠眼睛估的。规格钉死了 30px 间距、100ms 的过渡，剩下的版式都从这些值推导出来。写明的值之间没有凭空插入的中间值，这份测量清单就是整套系统。
- 导航是刻意做细的. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 640x474 的构图上，自己没有底色，素材因此从它下面通到两边。加第六条链接之前，先把收起状态设计好。
- 字阶是钳制的，不是分档跳的. 字号用 11px 到 30px 的 clamp 来处理，而不是写死档位，标题行在各个断点之间因此保持比例，不会跳变。因为字阶是钳制过的，标题行在断点之间从来不会跳变。
动效与交互
短而写明的时长
一个时长覆盖所有交互（100ms），悬停和按下才读成同一套系统。值够短，重建时只要把它拖慢，一眼就能看出来。
悬停只给该有反馈的地方
反馈只落在悬停态只给按钮和链接，而不是每张卡片上，这才让信息密集的首屏不显得拥挤。每个状态只改一个属性，反馈因此保持清楚。状态宁少，但要写全。这份参考在 640x474 下收录。
这个首屏背后的顺序
代价是要读者有耐心：可扫读的栅格会立刻交出的细节，这一页先扣着。换来的是一个导航、标题、公告徽标、数据行、背景片段不会被误读的首屏。创意机构读者先看到主张，再看到选项。这份参考在 640x474 下收录。
创意机构或工作室能从这里得到什么
和模板化的首屏相比，差别在于少了什么：没有卡片栅格、没有轮播、也没有第二个行动号召，只有导航、标题、公告徽标、数据行、背景片段，按30px 间距、100ms 的过渡定尺寸。 Bold Studio 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
在 Bold Studio 里先改什么
如果你的品牌配色更重，先对着画幅测一轮再定。撑住页面的是红色 #A60D29，所以更暗的强调色需要比参考更高的对比。画幅和字阶都保留，该换的是题材。
常见问题
Bold Studio 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 640x474 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Bold Studio 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Bold Studio 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 640x474 下收录。
