[AI]：从0开始在 WordPress 上构建个人 AI 云相册(3)

本期内容是分享关于WordPress搭建WP云相册的第二步，通过GPT和豆包实现页面的构建。

我们直接进入主题，其中主要内容包括：

页面风格
动画
网页结构
访问逻辑

工具 / 原料

• 核心工具：豆包 AI（页面构建 + 预览功能）、GPT（辅助开发）
• 输出物：相册页面动画源代码（附于文末）

方法 / 步骤

1. 明确相册效果目标

• 主体风格：纯白亮色背景，大面积留白，搭配简洁导航栏。
• 页面构成：
  • 页面 1（分布式相册）：按城市分类的分布式排版，每个城市为独立入口，点击展开该城市图片列表。
  • 页面 2（诗意单页）：单个城市的独立页面，采用更具设计感的诗意化布局，区别于文件夹式风格。

2. 生成精准提示词

• 核心限定条件：
  • 网页容器尺寸、编排格式（如栅格 / 瀑布流）；
  • 动画效果（如过渡、悬停交互）；
  • 访问逻辑（如点击跳转、返回首页）。
• 提示词关键词：[后续补充具体关键词列表]

3. 豆包 AI 编排工具操作流程

• 步骤 1：将提示词输入多宝 AI 编排工具，通过侧边栏实时预览页面效果，反复调整细节。
• 步骤 2：确认效果后，生成 CSS+JSON 代码包。
• 步骤 3：将代码文件上传至 ModelPress 后台，直接部署为可访问页面。

注意事项

• 保持两个页面风格统一（纯白基底 + 留白），但逻辑区分明确：分布式页面侧重分类效率，诗意页面侧重视觉体验。
• 源代码可直接复制使用，如需调整动画参数，可修改 CSS 中的transition或animation属性。

（文末附：AI 生成的页面动画源代码）