关于这个模板
CodeNest Coding Platform 是面向教育或社区品牌的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。整套配色是黑色 #000000 打底、绿色 #5ED29C 承担强调色，页面字体是 Instrument Serif。交付形式是 React 和 Tailwind CSS，收录于 800x576，所以画幅在任何一行代码写下去之前就已经定好。写作时让它开着：能迁移到你页面上的，是那份 2,581 字符的简报。下面引用的每一项都是那份简报里的数值，从 800x576 的画幅一直到最小的间距档。收录的提示词记录于 800x576，所以这一页引用的每个数值都能追回到它。
适合谁
- 在这版首屏上继续加块的内部小组，需要把 50px 间距原样带进新块里。
- 给要改写一版首屏、标题长度又得和CodeNest Coding Platform一样的内容负责人用。
- 把 #000000 和 #5ED29C 定成品牌的两个颜色，再在这个限制里重建首屏。
包含哪些内容
- 导航条上不留多余. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #5ED29C 操作，全部悬在首屏之上，自己没有底色。链接比字标小一档，#5ED29C 操作是导航条上唯一有分量的元素。字标占的位置不超过它那行字需要的宽度。
- 尺寸钉在需求简报里. 需求简报里的每个尺寸都是能反测量回去的数值：50px 间距。清单短到审核的人能一个元素一个元素地核。
- 要面板，不要段落. 栅格就是结构：面板同样大小，用 Instrument Serif 排，排得让视线横向移动，而不是向下。面板共用同一套界面字体、同一个字号，栅格因此不会变成第二套版式。
- 一条会主动让开的导航. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #5ED29C 操作，全部悬在首屏之上，自己没有底色。链接比字标小一档，#5ED29C 操作是导航条上唯一有分量的元素。加底色之前，先把自己的素材垫在导航条下面测一遍。
动效与交互
指针只在有用的地方出现
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。交互状态不会推动版式，指针底下不会有东西跳。这份参考在 800x576 下收录。
几乎没有动效
这一份交付的是 800x576 下的静态构图，所以层级必须不靠动效也成立，它确实成立。构图保持不动，所以页面得靠层级撑住，而它撑住了。不需要滚动时间轴。
这份教育需求简报为什么站得住
如果你的首屏现在要解释三件事，这一版只解释一件。导航、标题、数据行、卡片栅格、背景片段按阅读顺序依次摆开，50px 间距定下节奏。 CodeNest Coding Platform 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个首屏背后的顺序
这份需求简报有 2,581 个字符，把阅读顺序明写出来：导航、标题、数据行、卡片栅格、背景片段，中间用50px 间距隔开。教育读者先看到主张，再看到选项。
这个首屏怎么重排
没有一套单独的移动端设计要维护。导航收进移动端菜单，同一套层级贯穿到底。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。这份参考在 800x576 下收录。
常见问题
CodeNest Coding Platform 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 800x576 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
CodeNest Coding Platform 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
CodeNest Coding Platform 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x576 下收录。
