用途:在任何页面内容构建之前,先搭建基础布局(base layout),所有页面都继承并复用它,避免每个页面重复声明布局。
执行流程:先读 progress.txt 做入口检查——若 templates_scaffolded: true 则整体跳过;若 has_frontend: false 则跳过(纯后端项目无需模板)。随后读取 ./docs/PRD.md 与 ./docs/APP_FLOW.md,按指标判定项目类型:内容/博客、电商、SaaS/应用、落地页、后台/管理、作品集。若某类型有 2 个以上指标明确匹配则自动采用;不明确或并列时向用户询问站点类型。类型确认后,依据 APP_FLOW.md 的 Screen Inventory 为每一个屏幕创建页面外壳,而非仅创建默认页面。
主要能力:按项目类型生成对应的布局与共享组件,例如内容/博客的 Header、Footer、ContentLayout、Sidebar;电商的带购物车 Header、CategoryNav、CartDrawer、ProductCard 及商品/购物车/结算等页面壳;SaaS 的 AppLayout(侧边栏+顶栏+主体)、PublicLayout、Modal、Toast 及登录/注册/仪表盘壳;落地页的粘性 Header、Hero/Features/Pricing/CTA 分节组件;后台的 DashboardLayout、可折叠 Sidebar、StatCard、DataTable;作品集的极简 Header、Footer、ProjectCard。
使用方式与约定:模板默认按 Next.js App Router 路径给出;Vite 将 app/layout.tsx 替换为 src/App.tsx、app/[route]/page.tsx 替换为 src/pages/[Route].tsx,路由组改用 react-router-dom 嵌套路由;Remix/SvelteKit/Astro 等按各自路由约定适配,布局结构与组件清单保持不变。生成的组件壳统一为 FC<{ className?: string }> 形式,只使用设计令牌(如 bg-background、border-border、z-sticky),不写硬编码颜色或十六进制值,始终包含 className 属性,并采用移动优先内边距 px-4 sm:px-6 lg:px-8。完成后写入 progress.txt(templates_scaffolded、project_type、template_date、layout_files、page_shells)并输出脚手架报告。
限制:仅负责布局与组件外壳的脚手架,不含页面内容;依赖 docs/PRD.md 与 docs/APP_FLOW.md 作为判定依据;每个新页面必须使用基础布局,不得在页面内重新声明布局。其他框架的具体适配细节及页面内容实现方式,资料暂未提供。