Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Pages.



---



# 数字缪斯 · Digital Muse — 沉浸式AI艺术画廊



## GOAL



构建一个中英双语的沉浸式AI艺术画廊网站，名为「数字缪斯 · Digital Muse」。



这是一个融合东方美学与未来科技感的单页艺术展览网站，展示AI生成的艺术作品。网站应具有以下气质：



- 水墨与赛博朋克的融合

- 沉浸式全屏体验

- 电影级视觉质感

- 东方禅意与未来科技的碰撞

- 每一个滚动都是一次策展体验



这不是一个普通的作品集，不是一个SaaS落地页，不是一个电商模板。



## 品牌设计



### 品牌名

- 中文：数字缪斯

- 英文：Digital Muse



### 色彩体系

使用CSS变量定义，确保全局一致：



```css

:root {

  /* 主色调 - 东方墨色系 */

  --ink-black: #0a0a0f;

  --ink-deep: #12121a;

  --ink-medium: #1a1a2e;

  --ink-light: #2d2d44;



  /* 点缀色 - 赛博霓虹 */

  --neon-cyan: #00f5d4;

  --neon-magenta: #ff006e;

  --neon-gold: #ffd700;

  --neon-violet: #7b2ff7;



  /* 文字色 */

  --text-primary: #e8e6e3;

  --text-secondary: #9a9a9a;

  --text-accent: #00f5d4;



  /* 玻璃态 */

  --glass-bg: rgba(255， 255， 255， 0.03);

  --glass-border: rgba(255， 255， 255， 0.08);

  --glass-blur: blur(20px);

}

```



### 字体

- 标题：使用 Google Fonts 的 Noto Serif SC（中文）+ Playfair Display（英文）

- 正文：使用 Google Fonts 的 Noto Sans SC（中文）+ Inter（英文）

- 代码/标签：JetBrains Mono



### 视觉风格

- 深色背景，水墨质感

- 霓虹色点缀（青色、品红、金色）

- 玻璃态组件（glassmorphism）

- 微妙的粒子效果背景

- 平滑的滚动动画



## 技术栈



- React 19

- Vite

- TypeScript

- Tailwind CSS

- Framer Motion（动画）

- Lucide React（图标）



## 网站结构（共8个区块）



### 区块1：固定导航栏



**结构：**

- 固定在顶部，毛玻璃背景

- 左侧：品牌Logo「数字缪斯」+ 英文副标题

- 中间：导航链接（首页 / 展览 / 艺术家 / 关于 / 联系）

- 右侧：语言切换（中/英）+ 「进入展览」按钮



**行为：**

- 顶部时透明

- 向下滚动时变为毛玻璃背景

- 移动端折叠为汉堡菜单



### 区块2：全屏Hero



**背景：**

- 全屏深色渐变背景

- 粒子效果动画（使用Canvas或CSS动画模拟水墨粒子）

- 缓慢流动的光效



**内容：**

- 主标题：「数字缪斯」（大号，带霓虹发光效果）

- 副标题：「AI × 东方美学 · 沉浸式数字艺术展」

- 英文：「Where Ancient Ink Meets Digital Light」

- 引言：「当千年水墨遇见人工智能，每一笔都是跨越时空的对话」

- CTA按钮：「开始探索」（带霓虹边框动画）

- 向下滚动指示器（带呼吸动画）



**动画：**

- 标题逐字显现（打字机效果）

- 副标题淡入

- 粒子持续运动

- 按钮霓虹脉冲



### 区块3：展览简介



**布局：**

- 左侧：大号引言文字

- 右侧：展览介绍卡片（毛玻璃风格）



**内容：**

- 标签：「关于展览」

- 引言：「艺术是灵魂的语言，AI是新时代的画笔」

- 介绍文字：「数字缪斯是一场跨越时空的艺术对话。我们邀请AI作为共同创作者，以千年水墨为灵感，用算法重新诠释东方美学的精髓。每一幅作品都是人类创意与机器智能的碰撞，是传统与未来的融合。」

- 统计数据（3组）：

  - 12 — AI艺术作品

  - 6 — 虚拟展厅

  - ∞ — 创意可能



**动画：**

- 滚动触发淡入

- 数字计数动画



### 区块4：精选作品画廊



**布局：**

- 响应式网格：移动端1列，平板2列，桌面3列

- 每个作品卡片包含：图片、标题、AI模型、创作理念



**作品列表（6件）：**



1. **《山水·重生》** — AI模型：Stable Diffusion XL

   - 描述：「以宋代山水为基底，AI重新解构空间与留白的关系」

   - 标签：水墨 · 风景 · 传统



2. **《霓虹禅意》** — AI模型：Midjourney v6

   - 描述：「赛博朋克都市中的禅宗花园，霓虹灯下的枯山水」

   - 标签：赛博朋克 · 禅意 · 建筑



3. **《数字仕女》** — AI模型：DALL·E 3

   - 描述：「唐代仕女图的数字重生，古典优雅与未来科技的对话」

   - 标签：人物 · 古典 · 未来



4. **《量子水墨》** — AI模型：Custom Diffusion

   - 描述：「水墨在量子尺度下的随机漫步，确定性与混沌的边界」

   - 标签：抽象 · 科学 · 水墨



5. **《星际敦煌》** — AI模型：Stable Diffusion XL

   - 描述：「敦煌壁画飞向宇宙，千年神话在星际间重演」

   - 标签：神话 · 宇宙 · 壁画



6. **《AI自画像》** — AI模型：GAN + Diffusion

   - 描述：「AI对自我意识的视觉探索，从数据到灵魂的旅程」

   - 标签：肖像 · 哲学 · 实验



**卡片设计：**

- 图片区域：4:5比例，hover时轻微放大

- 底部信息：标题（白色）+ AI模型标签（霓虹色）

- 点击展开详情（模态框或展开动画）



### 区块5：创作过程



**布局：**

- 水平时间线（桌面端）/ 垂直时间线（移动端）

- 每个步骤一个节点



**步骤：**



1. **灵感采集** — 「从千年艺术史中提取视觉语汇，构建AI学习的文化基因库」

2. **模型训练** — 「用精选数据集训练定制模型，让AI理解东方美学的精髓」

3. **提示工程** — 「精心设计Prompt，引导AI在传统与创新之间找到平衡」

4. **迭代优化** — 「人机协作，反复打磨，直到作品达到策展标准」

5. **数字呈现** — 「通过EdgeOne Pages部署，让全球观众即时体验」



**设计：**

- 节点带霓虹光环

- 连接线带流动动画

- 每个步骤有图标和描述



### 区块6：艺术家介绍



**布局：**

- 居中大号头像区域（可用AI生成的抽象头像）

- 两侧对称排列信息卡片



**内容：**

- 标签：「策展人」

- 名称：「数字缪斯工作室」

- 介绍：「我们是一个由AI研究者、艺术家和策展人组成的跨界团队。我们相信AI不是取代人类创造力，而是扩展它。通过数字缪斯项目，我们探索人工智能在艺术创作中的无限可能。」

- 理念卡片（3张）：

  - 「技术即画笔」— 我们将AI视为创作工具，而非创作主体

  - 「传统即灵感」— 千年美学是永不枯竭的创意源泉

  - 「跨界即常态」— 艺术、科技、哲学的交融是我们的日常



### 区块7：访客留言（Edge Functions + KV）



**这是技术深度的重点区域**



**布局：**

- 居中标题：「留下你的印记」

- 留言输入区域

- 已有留言展示墙



**功能实现：**



**Edge Functions API 端点：**



```

GET /api/messages

- 从KV存储获取所有留言

- 返回JSON数组，按时间倒序

- 支持分页：?page=1&limit=10



POST /api/messages

- 接收：{ nickname， message， avatar_color }

- 验证：昵称2-20字，留言1-200字

- 存储到KV

- 返回：{ success: true， id: "msg_xxx" }



GET /api/stats

- 返回：{ total_messages: N， total_visitors: N， today_messages: N }

- 数据存储在KV中

```



**KV存储设计：**

- Key: `msg:{timestamp}:{id}` — 存储留言

- Key: `stats:total_messages` — 总留言数

- Key: `stats:total_visitors` — 总访客数

- Key: `stats:today:{date}` — 今日留言数



**前端功能：**

- 留言表单：昵称输入 + 留言内容 + 头像颜色选择（6种霓虹色可选）

- 提交后实时更新留言墙

- 留言卡片：毛玻璃风格，显示昵称、内容、时间、头像色块

- 留言墙：瀑布流或网格布局

- 加载状态和错误处理



### 区块8：页脚



**内容：**

- 左侧：品牌Logo + 版权信息「© 2026 数字缪斯 Digital Muse」

- 中间：快速链接（首页 / 展览 / 艺术家 / 联系）

- 右侧：社交链接（GitHub / 微信 / 邮箱）

- 底部：技术声明「Powered by EdgeOne Pages × WorkBuddy」



## Edge Functions 完整列表



```

edge-functions/

├── api/

│   ├── messages.js      # GET/POST 留言

│   ├── stats.js         # GET 统计数据

│   ├── artworks.js      # GET 作品列表

│   └── health.js        # GET 健康检查

```



### GET /api/artworks

返回作品列表JSON，包含：

- id， title， titleEn， description， aiModel， tags， imageUrl



### GET /api/health

返回：{ "ok": true， "timestamp": "ISO时间" }



## 组件结构



```

src/

├── components/

│   ├── Navbar.tsx           # 固定导航栏

│   ├── HeroSection.tsx      # 全屏Hero

│   ├── AboutSection.tsx     # 展览简介

│   ├── GallerySection.tsx   # 精选作品画廊

│   ├── ProcessSection.tsx   # 创作过程

│   ├── ArtistSection.tsx    # 艺术家介绍

│   ├── MessageWall.tsx      # 访客留言墙

│   ├── Footer.tsx           # 页脚

│   ├── ParticleBackground.tsx  # 粒子背景

│   ├── GlassCard.tsx        # 毛玻璃卡片

│   ├── NeonButton.tsx       # 霓虹按钮

│   └── LanguageToggle.tsx   # 语言切换

├── hooks/

│   ├── useLanguage.ts       # 多语言hook

│   └── useMessages.ts       # 留言数据hook

├── data/

│   └── artworks.ts          # 作品数据

└── styles/

    └── globals.css          # 全局样式和CSS变量

```



## 动画规范



- 使用 Framer Motion

- 入场动画：淡入 + 上移（y: 20 → 0）

- 滚动触发：使用 whileInView

- 时长：0.6-0.8秒

- 缓动：easeOut

- 不使用弹跳效果

- 粒子效果使用 requestAnimationFrame



## 响应式断点



- 移动端：390px

- 平板：768px

- 桌面：1024px

- 大屏：1440px



## 布局规则



- 所有内容使用居中容器：max-w-7xl mx-auto px-6

- 区块间距：py-24 md:py-32

- 保持垂直节奏一致

- 不使用重叠布局

- 不使用负边距

- 确保在所有断点下无溢出



## 部署要求



1. 使用 edgeone-pages-skills 完成部署

2. 部署前询问使用中国站还是国际站

3. 部署后返回完整的预览链接

4. 确保所有API端点正常工作

5. 确保KV存储正常读写



## 质量标准



结果应该看起来像：

- 一个真正的数字艺术展览网站

- 东方美学与未来科技的完美融合

- 沉浸式、电影级的视觉体验

- 每一个细节都经过精心设计



结果不应该看起来像：

- 普通的企业官网

- 千篇一律的模板站

- 简单的图片画廊

- 技术演示页面