用途：帮助构建结构清晰、视觉有吸引力的网页与 UI 布局，覆盖网格系统、视觉层级、留白以及现代 CSS 布局模式（grid、flexbox、bento、容器查询）。使用前需阅读 .agents/design-context.md 获取间距系统（4px/8px 基准）、圆角、风格原型与平台优先级；间距令牌遵循设计系统尺度（--space-N = N × 4px），颜色复用 color-palette 中的 --brand-* / --gray-* 变量。先判断内容类型（重文本、重媒体、仪表盘、营销）再选模式。
主要能力与用法：提供 12 列网格、auto-fit 自适应网格、命名网格区域三种 Grid 模式；Flexbox 导航栏、居中页面、等高卡片行模式；基础与特性展示型 bento 网格及卡片样式；基于 clamp 的区块留白与密度指南（密集 UI、标准 UI、营销/编辑、奢华）；视觉层级按影响力排序（尺寸、色彩对比、字重字体、位置、邻近分组、负空间）并给出区块标题样式；F 型与 Z 型阅读模式；三分法与不对称布局（2fr/1fr、1.5fr/1fr、错位网格）；响应式堆叠与回流模式（含断点）；容器查询布局；用 aspect-ratio 统一媒体比例。末尾附内容类型到推荐布局的速查表。
验证：使用 Playwright 在 375、768、1440 三种宽度截图检查：每区块一个焦点、左边缘与间距一致、无水平溢出（document.documentElement.scrollWidth > innerWidth 必须为 false）、移动端堆叠顺序合理、最后一行不出现孤立单卡，修复后重新截图。
限制：仅依据公开技能文档整理；具体的官方定价、平台支持范围与效果数据暂未提供。