用途:在构建页面功能之前使用,先决定 UI 放在哪里,包括外壳、尺寸、全局区域、可复用区块和组件基元,防止产品沦为互不相关的页面集合。
主要能力:先厘清产品界面类型(落地页、仪表盘、认证流程、文档、设置区或混合应用);在生成任何内容前审计代码库,查找 components/ui、shadcn/ui 文件、Radix 导入、Base UI 导入、Tailwind 配置、全局 CSS token、现有布局组件和路由级布局。若已有设计系统或组件库则直接复用,不重复生成 Button、Input、Dialog、Card、Select、Tooltip 或布局基元;若没有,则推荐最小合适的起点(外部库、无头基元、shadcn 风格自持组件或自定义响应式基元)。随后定义所需布局外壳(如 LandingLayout、DashboardLayout、AuthLayout、DocsLayout、SettingsLayout),并尽量以变量定义尺寸:内容最大宽度、侧边栏宽度、折叠侧边栏宽度、头部高度、区块内边距、卡片宽度、页面边距和响应式断点。
针对不同界面:落地页定义区块骨架(导航、hero、社会证明、功能块、产品演示、定价或转化块、FAQ、页脚,以及页头页脚是否全局);仪表盘定义侧边栏、头部、主内容、响应式抽屉行为、滚动区域及空/加载/错误状态;认证页定义居中卡片宽度、背景、logo/标题位置、表单宽度、恢复状态和无导航外壳。
输出:以“UI layout architecture plan”格式给出界面类型、发现的现有 UI 系统、设计系统/库决策、主要布局外壳、可复用基元、缺失基元或组合、布局尺寸表、页面骨架、响应式行为、实现草图(TSX)和待确认决策。
限制:当每页内容优先级未定、或尚无 UI 系统/库决策时不应使用,需先运行 $content-hierarchy-planner 或 $ui-system-initializer。避免在骨架、最大宽度和区块结构未定时先做整页;避免在已有 shadcn/ui、Radix、Base UI 或自定义基元时重复生成;避免在多处硬编码尺寸;避免每页自定义页头页脚侧边栏;避免只设计理想路径,需包含加载、空、错误和响应式状态。