Design to Code

将设计稿/截图转换为前端代码时，严格按照以下三阶段顺序执行，不可跳步。

Phase 1: 布局骨架分析

只看空间划分，忽略具体内容。

1. 识别页面的整体方向（纵向流式 / 横向分栏 / 混合）
2. 从外到内逐层拆分区域，标注每个区域的：
   • 排列方向（纵向 / 横向）
   • 嵌套层级关系
3. 用 mermaid 树状图输出布局骨架，示例：