用途：Layout Designer 是面向页面布局与网格系统设计的技能，帮助创建兼顾美观与可用性的页面构图，覆盖落地页、仪表盘/应用、编辑内容及通用网格系统四类工作流。
主要能力：可定义页面分区（如 Hero、功能、社会证明、定价、FAQ/页脚），选择布局模式，规划网格结构、间距节奏与视觉层级，并设定响应式断点（移动端单列堆叠、平板双列混合、桌面多列）。提供布局模式库，包括全宽/分栏/非对称 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 落地页、博客/文章、作品集、仪表盘、电商、文档等页面布局设计。
限制：资料未提供具体收费、价格、平台支持范围与效果保证；实际输出质量取决于输入需求与所用工具环境。