返回赛题列表
Noodle
入门复刻 Google 风格的搜索引擎界面，考察极简首页设计、搜索结果页信息层级和多 Tab 布局的还原能力
规则说明▼
免责声明： 本赛题为 VibeBench AI 前端代码生成能力评测项目的一部分。页面中所有内容（搜索结果、网站链接、用户信息等）均为虚构假数据，项目不涉及任何商业行为，不盈利、不收集用户数据。「Noodle」为戏仿名称，与任何真实公司、品牌或产品无关。如有任何权利方认为不妥，欢迎联系删除。
两阶段挑战，逐步提升指导精度，对比不同 prompt 策略下模型对 Google 风格的理解与还原能力：
- Phase 1（简单提示）：一句话描述，考察模型对 Google 的固有认知
- Phase 2（详细要求）：给出完整功能与设计规格
Prompt▼
Phase 1：▼
制作一个名叫「Noodle」的搜索引擎界面，参考 Google 的布局风格，包含首页和搜索结果页，使用假数据填充搜索结果。单文件 HTML，内联所有 CSS 和 JS。
Phase 2：▼
制作一个名叫「Noodle」的搜索引擎界面，整体参考 Google 的布局和交互风格，但需要有自己的品牌个性。包含首页和搜索结果页两种状态。单文件 HTML，内联所有 CSS 和 JS。
**页面一：搜索首页**
1. **极简布局**（垂直居中）
- Noodle Logo（大号品牌标识，可用彩色字母样式——每个字母颜色不同，CSS 实现）
- 搜索框（大号圆角输入框，带🔍 搜索图标和🎤 语音图标）
- 搜索框下方两个按钮：「Noodle 一下」「手气不错」
- 搜索框聚焦时下方出现搜索建议下拉（5–6 条假建议，带🕒 历史和🔍 建议图标区分）
2. **顶部导航栏**（简洁）
- 左上角：小字链接（关于、商店）
- 右上角：Gmail、图片、九宫格应用菜单图标、用户头像
3. **底部**
- 上行：国家/地区信息（如「中国」）
- 下行：隐私条款 · 设置 · 广告 链接
**页面二：搜索结果页**（搜索后切换到此页面）
1. **顶部搜索栏**
- 左侧：Noodle 小 Logo（缩小版）
- 中间：搜索框（保留搜索词，带清除按钮和搜索按钮）
- 右侧：用户头像、设置齿轮
- 下方 Tab 栏：🔍 全部（选中）| 📷 图片 | 📰 新闻 | 🎬 视频 | 🗺️ 地图 | ⋯ 更多 | 🛠️ 工具
2. **搜索结果信息**
- 结果统计行：「找到约 1,240,000 条结果（用时 0.42 秒）」
3. **搜索结果列表**（左侧主区域，最大宽度约 650px）
- 每个搜索结果包含：
- 来源网站：小图标 + 网站名 + URL 面包屑（如 `www.example.com › docs › guide`）
- 标题（蓝色大字超链接，hover 变深蓝下划线）
- 摘要文字（2–3 行灰色描述，搜索关键词加粗高亮）
- 可选：站内链接（2×2 网格小链接）
- 至少 8 条搜索结果，内容要合理多样
- 第一条结果可以是「精选摘要」卡片（带边框包裹 + 大段回答文字）
4. **右侧知识面板**（仅桌面端显示）
- 假知识图谱卡片：标题 + 描述文字 + 基本信息表格（成立时间、创始人、总部等）
- 卡片底部：「查看更多」链接
5. **底部分页**
- 经典的 Noodle 分页栏：Logo 字母拆成每个页码（N-o-o-d-l-e-e-e-e-e）
- 「下一页 >」链接
6. **交互要求**
- 首页搜索框输入 → 按回车或点击按钮 → 切换到结果页
- 结果页搜索框可修改搜索词 → 重新搜索
- 搜索建议下拉（首页聚焦时显示、选择后填充搜索框）
- Tab 栏可点击切换（内容可复用或仅切换选中态）
- 暗色/亮色主题切换（Google 有暗色模式）
7. **设计要求**
- 首页的极简美学——屏幕 90% 都是留白，这是 Google 设计哲学的精髓
- Noodle 的品牌色调可以有面条/食物的温暖感（不必照搬 Google 的蓝红黄绿）
- 搜索结果页的信息层级要严格：标题蓝 > URL 绿 > 摘要灰
- 搜索关键词在摘要中的加粗高亮
- 字体要清晰可读，行间距适度
- 分页栏的趣味性（Noodle 字母拆分到每个页码下面）