doubao-seed-2-0-code 在「Container Queries 布局」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：doubao-seed-2-0-code
  • 用例名称：Container Queries 布局
  • 测试类型：网页生成
  • 评测维度：响应式布局

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，专注于现代 CSS 布局技术，尤其擅长 CSS Container Queries 的实践应用。 回答要求： 1. 所有代码必须整合在单一 HTML 文件中，可直接在浏览器运行，无需任何外部依赖。 2. 必须使用原生 CSS Container Queries（container-type + @container），严禁用 JavaScript 或 Window 级别的 Media Queries 替代容器查询逻辑。 3. 每个演示组件的父容器必须显式声明 container-type: inline-size，@container 规则才能生效。 4. 代码结构清晰，CSS 注释需标注各断点的触发条件，便于阅读和理解。 5. 滑块控件必须通过 JavaScript 实时修改容器宽度，并同步显示当前宽度数值，让布局变化直观可见。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

# CSS Container Queries 基础演示页面 请生成一个完整的单文件 HTML 页面，通过可拖动滑块实时演示 CSS Container Queries 的核心用法。 ## 功能要求 ### 演示组件（共 3 个） **1. 产品卡片组件** 根据容器宽度呈现三种布局： - 容器宽度 < 200px：极简模式，仅显示商品图片（用色块占位）和价格 - 容器宽度 200px ~ 400px：垂直布局，图片在上，商品名称 + 描述 + 价格在下 - 容器宽度 > 400px：水平布局，图片在左，文字信息在右 **2. 用户信息组件** 根据容器宽度呈现三种布局： - 窄容器（< 200px）：仅显示圆形头像（色块占位）+ 用户名 - 中容器（200px ~ 400px）：头像 + 用户名 + 职位标签 - 宽容器（> 400px）：完整信息卡片，包含头像、用户名、职位、简介文字和联系按钮 **3. 统计数据组件** 根据容器宽度呈现三种布局： - 窄容器（< 200px）：仅显示大号数字 - 中容器（200px ~ 400px）：数字 + 指标标签（如「月销售额」） - 宽容器（> 400px）：数字 + 标签 + 用 CSS 绘制的简易趋势条形图 ### 交互控件 - 页面顶部放置一个范围滑块（range input），范围 100px ~ 600px，默认值 300px - 滑块旁实时显示当前容器宽度数值（如「当前宽度：300px」） - 拖动滑块时，三个演示组件的父容器宽度同步变化，组件布局随之切换 ## 技术规范

评测结果

综合得分

该模型在此用例的得分为：84.5 分（满分 100 分），已通过

基础难度评测结果

  • 得分：84.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

下面是一个完整的 CSS Container Queries 基础演示页面，包含了您要求的所有功能和交互控件： ```html CSS Container Queries 基础演示 /* 全局样式重置 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f5f5; padding: 2rem; line-height: 1.6; } h1 { text-align: center; color: #333; margin-bottom: 2rem; } /* 滑块控制区域 */ .control-panel { max-width: 800px; margin: 0 auto 3rem; padding: 1.5rem; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); text-align: center; } .slider-container { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1rem; } input[type="range"] { width: 300px; cursor: pointer; } .width-display { font-weight: bold; color: #0078d4; min-width: 150px; } /* 演示区域 */ .demo-area { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } /* 组件容器样式 - 这里设置 container-type */ .component-container { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 1rem; width: 300px; /* 默认宽度，将通过 JavaScript 动态修改 */ margin: 0 auto; /* 关键：设置容器类型为 inline-size */ container-type: inline-size; container-name: demo-container; } .component-title { text-align: center; margin-bottom: 1rem; color: #666; font-size: 0.9rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; } /* ========== 产品卡片组件样式 ========== */ .product-card { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; } .product-image { width: 100%; height: 120px; background-color: #4CAF50; border-radius: 4px; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .product-info { text-align: center; width: 100%; } .product-name { font-weight: bold; margin-bottom: 0.3rem; display: none; /* 默认隐藏 */ } .product-description { font-size: 0.8rem; color: #666; margin-bottom: 0.5rem; display: none; /* 默认隐藏 */ } .product-price...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现基本完成了CSS Container Queries演示页面的核心需求，三个组件均使用了container-type: inline-size和@container规则，滑块交互功能正常。主要不足在于：三个容器共用同一container-name导致规范性欠佳；极简模式的处理依赖默认样式而非显式容器查询规则；宽容器下用户信息组件的水平布局实现不够完整；demo-area的grid布局与动态宽度容器之间存在潜在的布局冲突。代码结构清晰，注释到位，整体是一个功能基本完整但细节有待打磨的实现。 【GEMINI】这是一个高质量的演示页面，精准地展示了 CSS Container Queries 的核心特性。代码结构严谨，逻辑清晰，完全满足了所有功能性与技术性约束，是一个非常标准的教科书级实现。 【KIMI】这是一个高质量的CSS Container Queries演示实现，完整满足了所有功能需求，技术实现规范，代码结构清晰可直接运行。三个组件的响应式行为正确，滑块交互流畅。建议在UI层面增加当前布局状态的视觉指示，并优化外层容器结构以增强组件独立性，但整体已达到优秀水平。

进阶难度评测结果

  • 得分：60.8 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html CSS Container Queries 交互演示页面（进阶版） /* ==================== 全局变量与重置 ==================== */ :root { --color-primary: #6366f1; --color-primary-light: #818cf8; --color-secondary: #10b981; --color-bg: #f8fafc; --color-card-bg: #ffffff; --color-text: #1e293b; --color-text-light: #64748b; --color-border: #e2e8f0; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --transition-fast: 0.2s ease; --transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; } /* ==================== 页面主体响应式布局（仅用媒体查询做页面级排列） ==================== */ .page-wrapper { max-width: 1400px; margin: 0 auto; padding: var(--spacing-lg); display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); } /* 窗口级断点（非组件内部） */ @media (min-width: 480px) { .page-wrapper { padding: var(--spacing-xl); } } @media (min-width: 768px) { .page-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .page-wrapper { grid-template-columns: repeat(3, 1fr); gap: calc(var(--spacing-xl) * 1.2); } } /* ==================== 通用演示卡片样式 ==================== */ .demo-card { background-color: var(--color-card-bg); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: var(--spacing-md); } .demo-card__header { display: flex; flex-direction: column; gap: var(--spacing-xs); } .demo-card__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); } .demo-card__desc { font-size: 0.875rem; color: var(--color-text-light); } .demo-card__control { margin-top: var(--spacing-xs); } .demo-card__slider {...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该生成结果在 CSS 技术选型和规范遵守方面表现良好，正确使用了 container-type: inline-size、@container 命名容器、CSS 变量、Grid/Flexbox 混合布局等现代 CSS 技术，代码风格清晰、注释完善。然而，代码在关键位置被截断，缺少完整的 HTML body 结构、JavaScript 滑块交互逻辑以及部分容器查询规则，导致页面完全无法在浏览器中运行，核心演示功能（通过滑块实时调整容器宽度）无法实现。这是一个「高质量的半成品」，已完成部分约占预期完整实现的 40-50%。 【GEMINI】这是一份高质量的 CSS 演示代码。它不仅准确实现了 Container Queries 的核心语法，还通过良好的工程实践（如 CSS 变量、Grid 布局、平滑动画）展示了现代前端开发的标准。唯一的遗憾是由于长文本输出限制，代码在结尾处未能完全闭合，但核心逻辑和前两个组件的实现已经非常完整。 【KIMI】该代码展示了扎实的 CSS Container Queries 技术功底，三个演示组件的设计具有代表性，CSS 架构清晰规范。主要问题是代码完整性受损——统计卡片组在关键位置被截断，且缺少 JavaScript 交互逻辑的实现，这使得「滑块实时调整」这一核心交互无法验证。修复截断问题并补充 JavaScript 后，将是一个优秀的 Container Queries 教学演示页面。建议在容器查询断点设置上采用更标准的 min-width 递进方式，避免相邻断点的间隙问题。

困难难度评测结果

  • 得分：65.2 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

CSS Container Queries Advanced Demo /* 全局重置和基础样式 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* 颜色系统 */ --color-primary: #3b82f6; --color-primary-dark: #2563eb; --color-secondary: #10b981; --color-accent: #f59e0b; --color-danger: #ef4444; --color-bg: #f8fafc; --color-surface: #ffffff; --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; /* 排版token */ --font-size-xs: clamp(0.75rem, 1.5cqw, 0.875rem); --font-size-sm: clamp(0.875rem, 2cqw, 1rem); --font-size-base: clamp(1rem, 2.5cqw, 1.125rem); --font-size-lg: clamp(1.125rem, 3cqw, 1.5rem); --font-size-xl: clamp(1.5rem, 4cqw, 2rem); --font-size-2xl: clamp(2rem, 6cqw, 3rem); /* 间距token */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* 过渡时间 */ --transition-fast: 150ms; --transition-base: 300ms; --transition-slow: 500ms; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); padding: var(--spacing-lg); } /* 页面标题 */ .page-title { text-align: center; margin-bottom: var(--spacing-xl); font-size: var(--font-size-2xl); color: var(--color-primary); } .page-subtitle { text-align: center; margin-bottom: var(--spacing-xl); color: var(--color-text-muted); font-size: var(--font-size-lg); } /* 演示区域容器 */ .demo-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); max-width: 1400px; margin: 0 auto; } /* 演示区域 */ .demo-zone { background-color: var(--color-surface); border-radius: 0.5rem; padding: var(--spacing-lg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .demo-zone-title { font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); color: var(--color-primary); } /* 滑块容器 */ .slider-container { margin-bottom: var(--spacing-lg); padding: var(--spacing-md);...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该生成结果存在严重的代码截断问题，输出在用户信息组件宽容器Grid布局的CSS属性中途中断，导致整个HTML文件无法运行。已完成部分展示了较好的Container Queries技术基础：具名容器声明规范、cqw/cqi单位使用正确、clamp()流体排版有所体现、三阶段布局逻辑清晰。但Stats Widget组件、双演示区域完整结构、滑块JS交互系统、计数动画、SVG趋势图等核心需求均未实现。这是一个有技术深度但严重不完整的输出，实际可用性为零。 【GEMINI】该生成结果在技术深度上表现优异，完美展示了 CSS Container Queries 的高级特性，包括具名容器、容器查询单位和流体排版。UI 设计精美且具有功能性（如断点颜色标注）。唯一遗憾的是由于输出长度限制，代码在完成第二个组件后中断，导致第三个组件（统计插件）及部分 JS 逻辑缺失，但已展示的部分足以证明其极高的技术水准。 【KIMI】该实现展示了较好的 Container Queries 技术理解和应用能力，Product Card 和 User Profile 组件的三阶段布局基本实现，滑块控制系统和视觉设计也有不错的基础。但致命问题是代码被截断，Stats Widget 组件完全缺失，导致功能完整性严重不足，无法作为完整可运行的 HTML 文件交付。此外，部分技术细节（如断点边界值、transition 属性精确度）有待优化。若代码完整，评分会有显著提升。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%