Kaggle 控制台风格高级仪表盘规范（极简白 × 深灰高对比）

一套 Kaggle / Google 设计语言的仪表盘构建提示词（Streamlit / React 均可描述，落地推荐 React + Tailwind）。整体气质：极简纯白 × 深灰高对比，与「GitHub 深空暗色风」正好凑成明暗两套皮肤方法论。

六段页面骨架

1. 左侧常驻侧边栏

• 顶部品牌 Logo（如 ≡ minerva）
• 全宽纯黑大胶囊主按钮（如 + Create Bounty），整页唯一的重色块，视觉锚点
• 导航项：全圆角胶囊菜单，选中态浅米黄背景 #fbf7ee，不带原生 radio 圆点
• 下方浅灰色分组子菜单（Your Work、Documentation 类）

2. 页面顶栏

全圆角居中药丸搜索框；右侧悬浮圆形用户彩色头像。

3. 抬头横幅（Hero Banner）

• 高度 290px，纯白背景卡片
• 右侧 16:9 高清画作，background-size: auto 100% 且靠右对齐——主体（人物/动物）绝不被裁切
• 左侧叠多段白色平滑渐变遮罩，托底欢迎标题 / 副标题 / 名言
• 右侧画面区域绝不堆叠任何遮挡卡片——留白就是高级感

4. 数据指标横条（Metric Strip）

紧贴横幅下方，上下 1px 细浅灰分割线；单行 Flex 平铺 5-6 个指标单元：图标 + 灰色小标签 + 黑色加粗数据。

5. 焦点引导卡片网格（Focus Cards）

3 列自适应；卡片上半部分柔和暖黄色径向渐变，正中悬浮带黑边框的白色圆形徽章图标；下半部分标题 + 简短说明；悬停 -3px 微上浮 + 投影。

6. 任务 / 内容列表流（Task Feed）

顶部白底浅灰边紧凑下拉过滤器；下方圆角卡片列表，右侧绿色胶囊赏金标签，点击平滑展开查看 Markdown 详细说明。

为什么这是条好提示词

把最容易翻车的审美判断预先写死成数字：290px、-3px、#fbf7ee、auto 100%——AI 没有自由发挥的空间，就没有翻车的空间。

可补的两块

1. 配色只给了米黄高亮，缺正文灰阶 token——建议补 Google 灰一族（正文 #5f6368、次级 #80868b、分割线 #dadce0）
2. Streamlit 的组件自定义度撑不起这套细节，React + Tailwind + Framer Motion 才是对等落地栈；图标可沿用 Lucide 线框（与暗色版规范一致）