沉浸式AI艺术画廊网站
优秀奖作者朴类型Skill
作品介绍
一份引导AI Agent生成沉浸式AI艺术画廊网站的建站Skill。用户只需描述展览主题或艺术风格，AI自动生成包含作品展示、艺术家介绍、访客留言、数据分析等完整功能的艺术画廊网站，并部署到EdgeOne Makers。支持4种预设视觉主题、响应式画廊、访客留言墙（Edge Functions + KV存储）、实时统计、中英双语等功能。
Skill 内容
所有作品均通过 EdgeOne Makers Skill 生成并部署，具备CDN加速、安全防护能力，可按需接入后端服务。获取 Prompt 或 Skill后，在WorkBuddy中按指引操作（含 EdgeOne Makers Skill 安装步骤等），即可生成并上线你的同款网站。
/---
name: digital-muse-gallery
description: >-
生成沉浸式AI艺术画廊网站的建站Skill。
用户只需描述展览主题或艺术风格，AI自动生成包含作品展示、艺术家介绍、访客留言、数据分析等完整功能的艺术画廊网站，并部署到EdgeOne Makers。
触发词："创建艺术画廊"、"生成展览网站"、"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 Makers。
---
## 项目结构
生成的项目应包含以下结构：
```
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 Makers Skill的关系
| Skill | 职责 |
|-------|------|
| **digital-muse-gallery**（本Skill） | 生成艺术画廊网站 |
| `edgeone-pages-dev` | 添加自定义Edge/Cloud Functions |
| `edgeone-pages-deploy` | 部署到EdgeOne Makers |
推荐安装组合：`digital-muse-gallery` + `edgeone-pages-deploy`
---
## 前置依赖
- Node.js ≥ 18
- npm / pnpm / yarn
- EdgeOne Makers 账号（部署时需要）
---
## 使用示例
```
用户：帮我创建一个AI山水画展的艺术画廊网站
AI：好的！我来帮你创建一个AI山水画展的艺术画廊网站。
首先确认几个细节：
1. 视觉风格偏好？（东方水墨 / 赛博霓虹 / 极简白 / 暗黑奢华）
2. 计划展示多少件作品？（6 / 9 / 12 / 自定义）
3. 是否需要访客留言功能？
4. 网站语言？（中文 / 英文 / 中英双语）
[用户回答后，AI生成完整项目并部署]
```感谢支持
如果你觉得这些作品很酷，给我们的 Github 仓库一个 Star