关于这个模板
DesignPro Academy 是面向教育或社区品牌的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。配色是黑色 #000000 打底、白色 #FFFFFF 给文字、青绿色 #64CEFB 承担强调色，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 800x569，所以画幅在任何一行代码写下去之前就已经定好。这份参考是给这样的教育或社区品牌用的：希望首屏在动手构建之前就已经定下来。收录的提示词记录于 800x569，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 800x569 的画幅一直到最小的间距档。
适合谁
- 给正在做教育或社区品牌首屏、背后还没有设计系统的独立创始人用。
- 用提示词给首屏提需求的人，会把这份 3,038 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和DesignPro Academy一样的内容负责人用。
包含哪些内容
- 顶栏：字标、链接、一个操作. 顶栏装下字标、四到五个链接和一个染成 #64CEFB 的操作，字号压得很低，不跟页面其他地方抢。到了平板断点以下，改由移动端浮层接管。链接比字标小一档，#64CEFB 操作是导航条上唯一有分量的元素。
- 两套字，各有各的活. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。字号档位是固定值，换字体时层级才能原样保住。没有职责的字号不要加。
- 公告胶囊. 公告就是标题上方那枚 #64CEFB 胶囊，字号压得比支撑文案还小，所以它读起来是标签，不是第二个标题。徽标用 #64CEFB，而标题留在正文色上。
- 颜色只配给操作. 强调色的职责在需求简报里就定死了：青绿色 #64CEFB 给操作，黑色 #000000 给画幅。#64CEFB 与黑色 #000000 之间的对比，是强调色在小面积上仍然可读的原因。只留一个强调色，只用给操作。
动效与交互
悬停只给该有反馈的地方
交互只发生在各自的控件上（悬停态只给按钮和链接，而不是每张卡片），页面其他地方不会跟着动。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。这份参考在 800x569 下收录。
有意做成静止
需求简报里没有动画，页面靠 800x569 的版式撑住，唯一的变化是悬停态和按下态。构图保持不动，所以页面得靠层级撑住，而它撑住了。
这份教育需求简报为什么站得住
大多数教育页面都是因为做加法而失败：更多板块、更多渐变、更多主张。 DesignPro Academy 走的是反方向。构图停留在黑色 #000000上，只有操作用青绿色 #64CEFB，这已经足够显得刻意。它给教育读者的是一条通向主张的最短诚实路径。
这个首屏背后的顺序
如果你的页面现在以功能开头，就该照这个顺序改：导航、公告徽标、背景片段放前面，支撑细节跟在后面，800x569 画幅定下两者的距离。教育读者先看到主张，再看到选项。
这个首屏背后的数字
大多数参考只给你结果、把数字留下。这一份反过来：800x569 画幅和页面一起公开，所以结果能被复现，而不是被大致模仿。这个首屏里没有任何一处依赖默认值。
常见问题
DesignPro Academy 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 3,038 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
DesignPro Academy 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
用 DesignPro Academy 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x569 下收录。
