区块级组件拼的是整页Block
基础组件 vs 页面区块零件小，区块大
核心
基础篇认的是 Button / Card / Input 这类可嵌进任意区域的小零件。 本课认的是 Block（区块）：通常横跨一栏或整屏，决定「这一页先看见什么」。 和 AI 说需求时，先报区块（Hero + Navbar + 三列 Feature），再填区块里的基础组件，层次才对。
Hero 主视觉像接口文档的 Overview 首屏
页面最上方的大块介绍区：大标题、一句价值主张、主 CTA、可选配图或徽章。官网首页、落地页几乎都有；后台系统通常没有 Hero。
给 AI 的描述模板
首页顶部做一个 Hero：左侧大标题 + 副文案 + 主按钮「开始」和次按钮「了解更多」；右侧放产品截图。背景用浅色，标题不超过两行。
新课上架
把前端需求讲清楚
给后端同学的战术手册——结构、样式、交互、组件、布局。
Navbar 导航栏像系统的全局入口（API 网关）
顶栏全局导航：Logo、一级菜单、搜索/登录等。类似 API 网关暴露的一组顶层路径，几乎每页都在。
给 AI 的描述模板
请生成一个顶部导航栏，左侧是 Logo，中间是菜单，右侧是搜索框和登录按钮。当前页菜单项高亮。
SchemaX
Sidebar 侧边栏像后台应用的路由索引
帮助用户在不同模块之间切换，常见于管理后台；和 Navbar 可以同时存在（顶栏全局 + 侧栏模块）。
给 AI 的描述模板
请生成一个管理后台左侧 Sidebar，包含分组标题、当前高亮态和折叠态。
和 AI 说话时先区块，再零件
好的顺序：
- 报骨架：本页有 Navbar + Hero + 三列卡片区 + Footer
- 填区块：Hero 要标题 / 副文 / 两个 CTA
- 落零件：CTA 用主/次 Button；卡片区用 Card 网格
基础课的 Button / Card 在这里被组装进区块；布局课的 header + main + footer 则是这些区块的槽位。