tranfu-layout-systems

TranFu 布局系统

使用本 Skill 时，在设计实现或评审页面前，先识别用户的主要活动，再判断页面应采用哪一种主布局系统、页面框架模式和页面模式。

执行所有权与组合调用

• 本 Skill 是 decision-only：MUST 只输出布局决策或布局评审，NEVER 编辑代码、设计文件或品牌资产。
• 页面级实现、组件视觉、响应式细节和 Visual QA 由 $tranfu-website-design 负责。
• 作为 $tranfu-website-design 的依赖运行时，MUST 返回命名布局产物并结束，NEVER 再次调用 $tranfu-website-design。
• 作为顶层 Skill 运行且用户同时要求实现 UI 时，先输出命名布局产物；仅当 $tranfu-website-design 尚未处于活动调用链时，才将该产物交给它继续执行。

职责边界

本 Skill 负责页面级和屏幕级结构，包括：

• 用户主要活动、页面目标和关键操作。
• 信息架构、内容优先级和 Section 顺序。
• 页面外壳、导航模型和主工作区。
• Page Header、Sidebar、Main Content 与 Auxiliary Panel 的组合。
• 信息密度、操作路径和上下文保留方式。
• 桌面端、平板端和移动端的结构重排。
• 会显著改变页面结构的 Loading、Empty、Error 等必要状态。
• 跨页面同类内容的结构一致性和模块锚点。

本 Skill 不负责：

• Logo 设计和品牌资产创建。
• 颜色、字体、间距、圆角、阴影和图标等具体视觉 Token。
• 卡片、按钮、输入框、弹层等组件的最终视觉样式。
• 与布局无关的纯文案任务。
• 任何代码、设计文件或品牌资产修改；本 Skill 在所有模式下都保持 decision-only。

当任务同时要求实现 TranFu UI 时，MUST 先输出布局产物，再按上方调用守卫将其交给 $tranfu-website-design 完成视觉、组件和响应式细节落地。

分类模型

TranFu 的布局决策分为三层：

1. 主布局系统：决定产品外壳、全局导航和整体信息组织。
2. 页面框架模式：决定 Browser Header、Sidebar、Page Header、Main Content 和 Auxiliary Panel 如何组合。
3. 页面模式：决定当前页面的主要任务、内容结构和操作路径。

三层可以组合使用，不应相互替代。

primary_system: app-shell
frame_layout: t-layout
primary_pattern: management-list

上例表示：这是一个应用型产品页面，采用顶部导航、侧边栏和主内容区组成的 T 型框架，当前页面主要用于记录管理。

工作流

CREATE A TODO LIST FOR THE TASKS BELOW，并在执行过程中更新。

1. 校验目标。 若既没有页面、文件、截图、运行目标，也没有足以判断页面任务的描述 → 询问一项最必要的信息并退出。
2. 分类模式。 选择 create、modify、refactor、review、classify 或 visual_qa；若不属于本 Skill → 指向正确工作流并退出。
3. 识别主要活动。 从已有页面、任务描述和用户行为识别页面目标、关键对象和关键操作；若仍无法识别 → 提出一个简短问题并退出。
4. 选择布局。 选择一个主布局系统、一个页面框架模式和一个主要页面模式；只有其他模式显著影响结构时才记录为辅助模式。
5. 加载规则。 读取 references/layout-contracts.md 的选择规则和当前任务所需章节；若文件缺失或不可读 → 输出 TRANFU_LAYOUT_BLOCKER 并退出。
6. 形成结构。 定义导航模型、信息密度、桌面结构、移动结构、必要状态、一致性基准和允许偏移。
7. 按模式派发。 create|modify|refactor|classify → 子流程「布局决策」；review|visual_qa → 子流程「布局评审」；否则 → 输出 TRANFU_LAYOUT_BLOCKER 并退出。
8. 处理组合调用。 若本 Skill 由 $tranfu-website-design 调用 → 返回布局产物；若为顶层调用且用户要求 UI 实现、且 $tranfu-website-design 尚未活动 → 将布局产物交给它；否则 → 直接返回布局产物。
9. 结束。 产出 TRANFU_LAYOUT_DECISION、TRANFU_LAYOUT_REVIEW 或 TRANFU_LAYOUT_BLOCKER，更新 TODO 并结束。