关于这个模板
Blog Showcase 收录于 640x478，保留的是一份规格书，而不是一张画廊图片。配色是白色 #FCFCFC 打底、红色 #7D1A4A 给文字，字体用 Outfit。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动作被收进0.5s 的过渡、cubic-bezier(0.33, 1, 0.68, 1)里。借结构，不借题材：这个博客区和它那组数字可以原样搬到你的品牌上。下面引用的每一项都是那份简报里的数值，从 640x478 的画幅一直到最小的间距档。
适合谁
- 给正在做创意机构或工作室博客区、背后还没有设计系统的独立创始人用。
- 用提示词给博客区提需求的人，会把这份 4,151 字符的提示词当作起点。
- 给要改写一版博客区、标题长度又得和Blog Showcase一样的内容负责人用。
包含哪些内容
- 量出来的，不是估的. 版式是对着一组固定值（20px 间距、0.5s 的过渡、cubic-bezier(0.33, 1, 0.68, 1) 缓动曲线）解出来的，首屏在任何宽度下因此都保持成构图。画幅比例和尺寸记在一起，重建时连比例也一起对。拿同一组数值验证重建结果。
- 字号断得很干脆. 字体定在 Outfit 上，需求简报给这套字分配了明确的职责，而不是为了花样去混搭。字重、字距和字号档位全部写明，换字体也不会丢掉层级。数字和界面共用同一套字，统计数据与标签因此属于同一套系统。就算换字体，也保留这些字号档位。
- 页脚是一套完整构图. 链接按列分组，字标单独占一块，再长的页脚也读得下去，而不是变成一串清单。字标单独占一块，长链接列表因此读得下去。这份参考在 640x478 下收录。
- 要栅格，不要长段落. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Outfit 的小字号排，结构始终看得见。面板高度由文案决定，某一句更长也不会破坏这一行的对齐。
动效与交互
短而写明的时长
控件里的动效短且可重复：每次状态变化都是 0.5s。缓动和时长写在一起（0.5s），复刻时没法悄悄换成另一种手感。状态变化要快，不要滚动时间轴。
交互层就是这些控件
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。状态在需求简报里就写明了，页面不依赖任何悬停特效库。这份参考在 640x478 下收录。
这个博客区做对了什么
这套设计在一屏之内就把话说完。素材是 640x478 下的一张静帧。素材负责氛围，文案负责主张，20px 间距、0.5s 的过渡把两者分开。它给创意机构读者的是一条通向主张的最短诚实路径。
这个博客区背后的顺序
如果你的页面现在以功能开头，就该照这个顺序改：标题、公告徽标、卡片栅格、背景片段、页脚放前面，支撑细节跟在后面，20px 间距、0.5s 的过渡定下两者的距离。创意机构读者先看到主张，再看到选项。
这个博客区怎么重排
没有一套单独的移动端设计要维护。字阶是流体的，而不是阶梯式的，同一套层级贯穿到底。移动端是一个决定，不是退而求其次。这份参考在 640x478 下收录。
常见问题
Blog Showcase 背后的提示词到底有多长？
简报是从页面上收录下来的，共 4,151 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Blog Showcase 必须用 React 和 Tailwind CSS 吗？
Blog Showcase 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 Blog Showcase 的过渡、只改时长吗？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.5s 这个区间内缓动是 cubic-bezier(0.33, 1, 0.68, 1)。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
