关于这个模板
在动手为创意机构或工作室重建首屏之前，先读 Taskly：构图和它背后的规格书都在这里。标题是“Work smarter, achieve faster”，首屏其余部分都围着它排。整套配色是蓝色 #60B1FF 打底、深蓝色 #041320 给文字、亮橙色 #FF801E 承担强调色，页面字体是 Inter。交付就是单个组件：一个页面，没有插件，你和设计之间不隔任何构建工具链。从收录的需求简报起步，然后改这个首屏，而不是从零重建。收录的提示词记录于 800x592，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 800x592 的画幅一直到最小的间距档。
适合谁
- 这个首屏服务的是要把单个组件的构建交给工程师、希望动效被写下来的设计师。
- 给加入一个已经在用单个组件的现成项目、只需要把文案换掉的设计师用。
- 如果构建从单个组件起步，先拾起 16px 间距，栅格定下来之前别碰配色。
包含哪些内容
- 一条会主动让开的导航. 链接在同一行、同一个字号上排开，#FF801E 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#FF801E 操作是导航条上唯一有分量的元素。
- 间距档位是写明的. 这些值就是规格本身：16px 间距，是在 800x592 下收录的，而不是从截图里反推的。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。搬运页面时保留这些写明的数值。
- 字号断得很干脆. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。字重按角色分配，层级在搭建时就不用靠猜。
- 字和画幅共用一套档位. 这些值就是规格本身：16px 间距，是在 800x592 下收录的，而不是从截图里反推的。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。先量，再调。
动效与交互
滚动编排整个序列
吸顶定位是需求简报里唯一的滚动行为，页面因此不会像一串互不相干的特效。构图不依赖这个效果触发，快速滚过也不会损失什么。这份参考在 800x592 下收录。
指针只在有用的地方出现
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片、内容在下方移动时保持原位的吸顶元素），而不是交给一层全局动画。按下态和悬停态一样写明，轻点一下和点击得到的确认是一样的。这份参考在 800x592 下收录。
把 Taskly 当规格书读
复刻通常从一张截图加一个猜测开始。这里从 2,465 个字符的规格开始：画幅、间距和动效都在第一行代码之前就写下来了。这个首屏里没有任何一处依赖默认值。
Taskly 里什么在动
动画预算写得很清楚：吸顶元素、悬停态与按下态。这个首屏里没有任何东西在动却没有对应的数值。这个首屏里没有为动而动的动画。这份参考在 800x592 下收录。
这个首屏背后的顺序
导航先确立产品身份，并给回访者一条熟悉的路。页面的顺序是刻意安排的。标题占主标题字号，支撑句说明产品能做什么，亮橙色 #FF801E强调色标记主操作，下一步从不会有疑问。除此之外没有别的东西抢注意力：第一个决策点之前没有卡片栅格，这正是首屏在创意机构类项目里不显沉重的原因。创意机构读者先看到主张，再看到选项。
常见问题
能用别的技术栈重建 Taskly 的首屏吗？
Taskly 是用单个组件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Taskly 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 2,465 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
复制 Taskly 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 800x592 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
