关于这个模板
AI Workflow Hero 展示了为AI 或 SaaS 产品做首屏的一种做法，并把生成它的说明一起公开。整套配色是深绿色 #1F2A1D 打底，页面字体是 Inter。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。需求简报把动效预算花在400ms 的过渡、cubic-bezier(0.22,1,0.36,1)上。写作时让它开着：能迁移到你页面上的，是那份 16,580 字符的简报。
适合谁
- 要找代理公司提案的创始人，会用 640x470 的画幅当第一轮的验收标准。
- 给要改写一版首屏、标题长度又得和AI Workflow Hero一样的内容负责人用。
- 要放下更长标题的内容负责人，会把 Inter 的行数而不是字符数当作上限。
包含哪些内容
- 导航是刻意做细的. 导航条就是一行文字加一个操作，尺寸按 10px 间距、400ms 的过渡定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 640x470 的构图上，自己没有底色，素材因此从它下面通到两边。
- 字重按角色写明. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。只要字号和字重留在需求简报放的位置，换字体就是安全的。换字体，留档位。
- 尺寸写在需求简报里，不在一套比例里. 这些值就是规格本身：10px 间距、400ms 的过渡、cubic-bezier(0.22,1,0.36,1) 缓动曲线，是在 640x470 下收录的，而不是从截图里反推的。清单短到审核的人能一个元素一个元素地核。
- 一套字一个职责. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。只要字号和字重留在需求简报放的位置，换字体就是安全的。没有职责的字号不要加。
动效与交互
短而写明的时长
悬停、按下和聚焦都在 400ms 内完成，界面因此显得即时。控件之间复用同一个值，时长就不会各自漂移。
反馈只出现在控件上
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。这份参考在 640x470 下收录。
AI Workflow Hero 里什么在动
这里的每一次过渡都挂着一个数字。所以400ms 的过渡、悬停态与按下态、实时画布可以按值逐个移植，而不用靠手感重调。这个首屏里没有为动而动的动画。
这个首屏背后的顺序
把这一页的顶部和一个典型的SaaS落地页首屏放在一起比：两边都有标题和行动点，但这里的导航、公告徽标、数据行、功能列表、背景片段是固定排序的，而不是用同样的权重互相抢。 SaaS读者先看到主张，再看到选项。这份参考在 640x470 下收录。
这个首屏做对了什么
假设你的素材比文案更吵，这套构图就是为这种情况做的。素材是 640x470 下的一张静帧。画幅保持安静，10px 间距、400ms 的过渡把读者的注意力留在文字上。它给SaaS读者的是一条通向主张的最短诚实路径。
常见问题
AI Workflow Hero 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 16,580 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 AI Workflow Hero 的首屏吗？
AI Workflow Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 AI Workflow Hero 的过渡、只改时长吗？
动效和版式写得一样细：状态切换落在 400ms 区间内使用 cubic-bezier(0.22,1,0.36,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
