MUSE Design Guide

暗色奢华画廊 · 电影感光影 · 编辑式留白 · 金色微光

一套为人像摄影、作品集、品牌形象、艺术展示场景打造的前端视觉设计规范。页面像一本深色高级摄影画册——暖黑背景、衬线大标题、低饱和图片、金色点缀、缓慢优雅的交互。

项目结构

.
├── MUSE DESIGN.md          # 完整设计规范文档
├── 示例/
│   ├── beauty-gallery-updated-updated.html   # 参考实现（单文件 demo）
│   ├── muse-maintainer.html                  # 内容维护台（可视化编辑工具）
│   └── images/               # 示例图片素材
└── README.md

设计规范概览

MUSE DESIGN.md 涵盖了从视觉语言到代码落地的完整指引：

章节	内容
风格定位	暗色奢华、电影感、克制优雅的核心感受
设计原则	必须保留 & 尽量避免的清单
色彩系统	CSS 变量定义，暖黑背景 + 金色强调色
字体系统	衬线标题 + 无衬线正文 + 中文宋体方案
布局语言	Hero、section 间距、内容最大宽度
组件模式	导航栏、按钮、瀑布流、系列卡片、引言区、跑马灯
图片处理	低饱和滤镜 + hover 恢复色彩
动效系统	逐行 reveal、滚动入场、自定义鼠标、Magnetic 按钮、Lightbox
响应式规则	1024 / 768 / 480 三档断点
文案语气	短句、画面感、中英并置、诗性克制
提示词模板	可直接复制给 AI 模型生成同风格页面
检查清单	上线前逐项确认

核心设计 Token

/* 色彩 */
--bg:       #0e0c0b;   /* 暖黑背景 */
--surface:  #1a1714;   /* 卡片/区块 */
--fg:       #f0ece4;   /* 主文字 */
--accent:   #c9a96e;   /* 金色强调 */
--border:   #2a2520;   /* 细边框 */

/* 字体 */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body:    'Instrument Sans', system-ui, sans-serif;
--font-cn:      'Noto Serif SC', 'STSong', serif;

/* 缓动 */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

示例 Demo

示例/beauty-gallery-updated-updated.html 是基于此设计规范实现的完整单页示例，包含：

• 全屏 Hero（背景图 + 逐行标题 reveal）
• 固定磨砂导航栏（滚动隐藏/显示）
• About 品牌叙事区
• Portfolio 瀑布流作品集（hover 色彩恢复 + 底部渐变文字）
• Quote 引言情绪停顿
• Collections 系列卡片（3D tilt）
• Marquee 品牌关键词跑马灯
• Contact 联系入口
• 自定义鼠标（金色光点 + 光环 + 跟随光晕）
• Lightbox 沉浸式查看
• 完整响应式适配

直接用浏览器打开 HTML 文件即可预览。

内容维护台

示例/muse-maintainer.html 是配套的可视化编辑工具，无需修改代码即可更新站点内容：

• 载入原站 — 一键加载 demo 页面进行编辑
• 导入 HTML — 支持导入自定义 HTML 文件
• 文案编辑 — 筛选、查找替换页面中的所有文字内容
• 图片管理 — 更换首页背景、关于区肖像、批量导入作品图、新增作品位
• 系列卡片 — 管理 Curated Series 系列内容
• 实时预览 — 左侧编辑，右侧即时查看效果
• 导出 — 编辑完成后导出为独立 HTML 文件

用浏览器打开即可使用，适合不熟悉代码的用户快速更新图片和文案。

图片素材说明

示例中的图片来源：

• GPT Image — 借助 AI 图像生成能力创作的人像与氛围图
• Z-Image — 使用 Z-Image 工具生成的风格化素材
• 网络搜集 — 符合暗色画廊调性的精选摄影图

所有图片均经过低饱和度 + 高对比度滤镜处理，统一色温偏暖，与整体设计体系一致。

快速使用

作为设计规范参考

阅读 MUSE DESIGN.md，将其中的 CSS 变量、组件模式和布局规则应用到你的项目中。

作为 AI 提示词

规范文档末尾提供了可直接复制的提示词模板，粘贴给编码模型即可生成同风格页面：

请按照 MUSE Design Guide 设计一个网页。整体风格是暗色奢华画廊、电影感光影、编辑式留白和金色微光……

作为起始模板

复制 示例/beauty-gallery-updated-updated.html，替换图片和文案，快速搭建同风格站点。

用维护台编辑内容

不想改代码？打开 示例/muse-maintainer.html，通过可视化界面替换图片和文案，编辑完成后导出即可。

适用场景

• 人像摄影作品集
• 摄影师 / 艺术家个人品牌站
• 高端美妆 / 时尚品牌官网
• 画廊 / 展览线上展示页
• 奢侈品 / 高定产品页
• 任何需要「高级感、电影感、克制优雅」的展示型页面

License

MIT