/---

name: digital-muse-gallery

description: >-

  生成沉浸式AI艺术画廊网站的建站Skill。

  用户只需描述展览主题或艺术风格，AI自动生成包含作品展示、艺术家介绍、访客留言、数据分析等完整功能的艺术画廊网站，并部署到EdgeOne Pages。

 
   触发词："创建艺术画廊"、"生成展览网站"、"AI画廊"、"art gallery"、"create exhibition"、"build portfolio gallery"

metadata:

  author: hueidou

  version: "1.0.0"

---



# Digital Muse Gallery — AI艺术画廊生成器



一句话生成沉浸式AI艺术画廊网站，包含完整的前后端能力。



## ⛔ 关键规则



1. **必须使用 edgeone-pages-skills 完成部署** — 安装方式：`npx skills add TencentEdgeOne/edgeone-pages-skills`

2. **部署前必须询问用户选择中国站或国际站**

3. **所有API端点必须使用Edge Functions实现**

4. **KV存储用于持久化数据（留言、统计、作品配置）**

5. **必须支持中英双语**



---



## 决策流程



当用户触发此Skill时，按以下流程执行：



### 第1步：确认用户意图



询问用户：

1. 是否有自己的展览主题/艺术风格描述？

   - **有** → 解析用户的描述，提取：主题、风格、色彩偏好、作品数量

   - **没有** → 进入引导式问答流程



### 第2步：引导式问答（无Prompt时）



依次询问：

1. **展览主题**：「你想创建什么主题的艺术画廊？例如：AI山水画展、数字雕塑展、赛博朋克摄影展」

2. **视觉风格**：「偏好什么视觉风格？」选项：

   - 东方水墨（深色、禅意、留白）

   - 赛博霓虹（深色、霓虹色、未来感）

   - 极简白（白色、干净、现代）

   - 暗黑奢华（深色、金色、质感）

3. **作品数量**：「计划展示多少件作品？」（6/9/12/自定义）

4. **是否需要留言功能**：「是否需要访客留言墙？」（是/否）

5. **语言**：「网站语言？」（中文/英文/中英双语）



### 第3步：生成项目



使用技术栈生成项目：

- React 19 + Vite + TypeScript

- Tailwind CSS

- Framer Motion

- Lucide React



### 第4步：生成内容



根据用户配置生成：

1. 品牌名称和Logo

2. 色彩方案（CSS变量）

3. 作品数据（标题、描述、标签）

4. 页面文案（中/英）

5. Edge Functions API



### 第5步：本地验证



```bash

npm install

npm run dev

```



确认：

- 所有页面正常渲染

- 动画流畅

- API端点响应正常

- 响应式布局正确



### 第6步：部署



调用 edgeone-pages-deploy Skill 部署到 EdgeOne Pages。



---



## 项目结构



生成的项目应包含以下结构：



```

digital-muse-gallery/

├── public/

│   └── favicon.svg

├── src/

│   ├── components/

│   │   ├── Navbar.tsx

│   │   ├── HeroSection.tsx

│   │   ├── AboutSection.tsx

│   │   ├── GallerySection.tsx

│   │   ├── ArtistSection.tsx

│   │   ├── MessageWall.tsx

│   │   ├── Footer.tsx

│   │   ├── ParticleBackground.tsx

│   │   ├── GlassCard.tsx

│   │   └── NeonButton.tsx

│   ├── hooks/

│   │   ├── useLanguage.ts

│   │   └── useMessages.ts

│   ├── data/

│   │   └── artworks.ts

│   ├── App.tsx

│   ├── main.tsx

│   └── index.css

├── edge-functions/

│   └── api/

│       ├── messages.js

│       ├── stats.js

│       ├── artworks.js

│       └── health.js

├── index.html

├── package.json

├── tsconfig.json

├── vite.config.ts

├── tailwind.config.ts

└── README.md

```



---



## 主题配置



每个主题包含以下配置项：



```typescript

interface ThemeConfig {

  name: string;

  nameEn: string;

  colors: {

    background: string;

    surface: string;

    primary: string;

    accent: string;

    text: string;

    textSecondary: string;

  };

  fonts: {

    heading: string;

    body: string;

  };

  style: 'ink' | 'neon' | 'minimal' | 'luxury';

}

```



详见 `references/themes.md`



---



## Edge Functions 规范



所有API端点必须遵循以下规范：



### 数据模型



```typescript

// 作品

interface Artwork {

  id: string;

  title: string;

  titleEn: string;

  description: string;

  descriptionEn: string;

  aiModel: string;

  tags: string[];

  imageUrl: string;

  createdAt: string;

}



// 留言

interface Message {

  id: string;

  nickname: string;

  content: string;

  avatarColor: string;

  createdAt: string;

}



// 统计

interface Stats {

  totalMessages: number;

  totalVisitors: number;

  todayMessages: number;

}

```



### KV存储键设计



| Key模式 | 用途 | 示例 |

|---------|------|------|

| `artwork:{id}` | 作品数据 | `artwork:001` |

| `msg:{timestamp}:{id}` | 留言数据 | `msg:1715234567:abc123` |

| `stats:total_messages` | 总留言数 | `stats:total_messages` |

| `stats:total_visitors` | 总访客数 | `stats:total_visitors` |

| `stats:today:{date}` | 今日数据 | `stats:today:2026-05-09` |

| `config:theme` | 主题配置 | `config:theme` |

| `config:site` | 站点配置 | `config:site` |



详见 `references/edge-functions.md`



---



## 组件规范



### GlassCard（毛玻璃卡片）



```css

.glass-card {

  background: rgba(255， 255， 255， 0.03);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255， 255， 255， 0.08);

  border-radius: 16px;

}

```



### NeonButton（霓虹按钮）



```css

.neon-button {

  border: 1px solid var(--accent-color);

  box-shadow: 0 0 15px rgba(var(--accent-rgb)， 0.3);

  transition: all 0.3s ease;

}

.neon-button:hover {

  box-shadow: 0 0 30px rgba(var(--accent-rgb)， 0.5);

}

```



详见 `references/components.md`



---



## 动画规范



使用 Framer Motion：



```typescript

// 入场动画

const fadeInUp = {

  initial: { opacity: 0， y: 20 }，

  whileInView: { opacity: 1， y: 0 }，

  transition: { duration: 0.6， ease: "easeOut" }，

  viewport: { once: true }

};



// 滚动触发

const scrollTrigger = {

  whileInView: { opacity: 1， y: 0 }，

  viewport: { once: true， margin: "-100px" }

};

```



**禁止：**

- 弹跳效果

- 过度旋转

- 闪烁动画

- 影响布局的动画



---



## 响应式规范



| 断点 | 宽度 | 列数 |

|------|------|------|

| 移动端 | < 768px | 1列 |

| 平板 | 768px - 1023px | 2列 |

| 桌面 | ≥ 1024px | 3列 |



---



## 与其他EdgeOne Pages Skill的关系



| Skill | 职责 |

|-------|------|

| **digital-muse-gallery**（本Skill） | 生成艺术画廊网站 |

| `edgeone-pages-dev` | 添加自定义Edge/Cloud Functions |

| `edgeone-pages-deploy` | 部署到EdgeOne Pages |



推荐安装组合：`digital-muse-gallery` + `edgeone-pages-deploy`



---



## 前置依赖



- Node.js ≥ 18

- npm / pnpm / yarn

- EdgeOne Pages 账号（部署时需要）



---



## 使用示例



```

用户：帮我创建一个AI山水画展的艺术画廊网站



AI：好的！我来帮你创建一个AI山水画展的艺术画廊网站。



首先确认几个细节：

1. 视觉风格偏好？（东方水墨 / 赛博霓虹 / 极简白 / 暗黑奢华）

2. 计划展示多少件作品？（6 / 9 / 12 / 自定义）

3. 是否需要访客留言功能？

4. 网站语言？（中文 / 英文 / 中英双语）



[用户回答后，AI生成完整项目并部署]

```