用途：Layout Designer 是面向页面布局与网格系统设计的技能，帮助把设计理论、响应式模式与现代 CSS 能力结合，产出跨设备、跨内容类型的页面构图方案。
主要能力：提供四类工作流——落地页布局（划分 Hero、功能、社会证明、定价/CTA、FAQ/页脚等区块并规划断点）、仪表盘/应用布局（信息架构、侧边栏+内容、圣杯、分栏、卡片网格等系统）、编辑/内容布局（阅读体验、行宽 60-75 字符、单栏/多栏/非对称/模块化网格）、网格系统创建（列数、间距、容器、间距刻度与框架配置）。另含布局模式库（Hero、卡片网格、交替行、Bento 等）、设计原则（层级、留白、对齐、邻近、平衡、对比）、最佳实践、12/16 列与模块化/基线网格、8px 间距刻度、常见响应式断点，以及布局规格交付格式。
使用方式：以自然语言触发，如“Design a landing page for [product]”“Create dashboard layout for [use case]”“Design a blog post layout”“Build a grid system for [project]”“Improve the layout of [page/section]”“Make this layout responsive”。可配合 ui-builder 实现 Tailwind 布局、Playwright 在真实浏览器测试、WebSearch 找灵感、Midjourney 生成情绪板。
适用场景：SaaS 落地页、博客、作品集、仪表盘、电商、文档等。
限制：资料未提供具体收费、价格、平台支持范围与效果保证；实际输出质量取决于输入需求与所用工具环境。