返回赛题列表
午夜天气台
入门凌晨 2:13 查看上海天气的安静克制页面，包含当前天气、逐小时趋势、三日概览、穿衣建议和定位失败备用状态。考察模型在"安静氛围感"与"数据密度"之间的平衡能力。
规则说明▼
phase1：禁止依赖任何外部资源（字体、图标库、框架、CDN、API），纯单文件自包含，考察仅靠基础前端能力营造"安静克制"氛围的设计基本功。
phase2：允许使用外部资源（Google Fonts、图标库、CDN 等），测试在资源充足时氛围感和排版品质的提升上限。
phase3：使用 frontend-design skill 作为系统提示词，用户 prompt 与 phase2 相同，测试 skill 对视觉品质和氛围表达的提升效果。
Prompt▼
phase1：▼
做一个"午夜天气台"页面：场景是凌晨 2:13 查看上海天气，当前 14°C，体感 12°C，湿度 72%，降雨概率 30%，风速 11 km/h，空气质量 41，日出 06:11。
未来 6 小时温度依次为 14/13/13/12/12/11，降雨概率依次为 30/35/40/28/18/10。
页面必须包含：当前天气主卡、逐小时趋势、未来 3 天概览、穿衣建议、定位失败的备用状态切换。
整体气质要安静、克制、适合失眠的人，不要做成企业 dashboard。
请直接输出一个完整可运行的单文件 HTML（内联 CSS、原生 JS、可用内联 SVG），同时适配桌面和手机。
禁止依赖外部图片、字体、图标库、框架、CDN 或 API，内容使用真实文案，不要出现 lorem ipsum。
phase2：▼
做一个"午夜天气台"页面：场景是凌晨 2:13 查看上海天气，当前 14°C，体感 12°C，湿度 72%，降雨概率 30%，风速 11 km/h，空气质量 41，日出 06:11。
未来 6 小时温度依次为 14/13/13/12/12/11，降雨概率依次为 30/35/40/28/18/10。
页面必须包含：当前天气主卡、逐小时趋势、未来 3 天概览、穿衣建议、定位失败的备用状态切换。
整体气质要安静、克制、适合失眠的人，不要做成企业 dashboard。
请直接输出一个完整可运行的单文件 HTML，同时适配桌面和手机。
内容使用真实文案，不要出现 lorem ipsum。
可以使用外部字体（如 Google Fonts）、图标库、CDN 资源或外部图片。
phase3（Skill 加持）：▼
**系统提示词（System Prompt）：** 使用 `frontend-design` skill 内容
**用户消息：** 与 phase2 完全相同：
做一个"午夜天气台"页面：场景是凌晨 2:13 查看上海天气，当前 14°C，体感 12°C，湿度 72%，降雨概率 30%，风速 11 km/h，空气质量 41，日出 06:11。
未来 6 小时温度依次为 14/13/13/12/12/11，降雨概率依次为 30/35/40/28/18/10。
页面必须包含：当前天气主卡、逐小时趋势、未来 3 天概览、穿衣建议、定位失败的备用状态切换。
整体气质要安静、克制、适合失眠的人，不要做成企业 dashboard。
请直接输出一个完整可运行的单文件 HTML，同时适配桌面和手机。
内容使用真实文案，不要出现 lorem ipsum。
可以使用外部字体（如 Google Fonts）、图标库、CDN 资源或外部图片。
Gemini 3.1 Pro Preview High Thinking
Google · Vertex AI Studio