TranFu 布局系统

先识别页面的主要活动，再确定外壳、工作区、内容顺序和响应式结构。

什么时候用它

选择页面布局

我在创建官网、SaaS 页面、知识库、落地页、表单、向导、数据看板或详情页，希望在定视觉样式前先选对结构。

评审页面结构

我已有页面、截图、文件或运行界面，希望检查导航、信息层级、主工作区和必要状态是否合理。

规划响应结构

我需要确定页面从桌面端进入移动端时，哪些内容保留优先级，哪些折叠、转为抽屉或拆成独立路径。

不接

它不处理纯文案、Logo、颜色与字体选择、组件样式，或完全不改变页面结构的修改。

它会产出什么

它只做布局决策，绝不会编辑代码、设计文件或品牌资产。

• 布局决策：明确一个主布局系统、页面框架和页面模式，并给出桌面端与移动端结构
• 布局评审：根据实际观察报告结构问题、证据、严重度、一致性和允许偏移
• 阻断记录：活动、证据或必需参考不足时，返回有明确原因的阻断结果
• 实现交接：用户同时要求落地时，可把命名布局产物交给 tranfu-website-design
• 绝不会做：选择具体视觉数值、编造未观察到的界面事实，或修改项目文件

前置条件与边界

前置条件

需要页面描述、文件、截图、运行目标，或足以识别用户主要活动的任务信息。必需的 references/layout-contracts.md 必须可读。

相邻能力分工

需求	交给
视觉样式与实现	tranfu-website-design
提取可复用视觉风格	visual-builder

不接的场景

• 纯文案或品牌资产工作
• 不改变结构的颜色、字体、圆角、阴影或图标调整
• 页面、代码、截图和运行结果之间存在重大冲突的评审

容易混淆的边界

• 信息多不代表一定要使用多面板布局
• 移动端按任务优先级重排，不是把桌面页面整体缩小
• 没有观察到的视口和状态会标记为 not_run，不会猜测为通过