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存储正常读写 ## 质量标准 结果应该看起来像： - 一个真正的数字艺术展览网站 - 东方美学与未来科技的完美融合 - 沉浸式、电影级的视觉体验 - 每一个细节都经过精心设计 结果不应该看起来像： - 普通的企业官网 - 千篇一律的模板站 - 简单的图片画廊 - 技术演示页面