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

# 奇妙设计官网 - 高端印刷设计服务商

## Target（核心功能与目标）

生成一个单文件HTML网站，展示高端印刷设计与创意制作服务商"奇妙设计"的品牌形象。网站需要体现奢华、专业的品牌调性，同时具备出色的视觉冲击力和流畅的动效体验。

**核心目标**：

- 展示六大核心业务（包装定制、画册印刷、宣传物料、商务办公、文创礼品、影像装帧）
- 建立高端品牌形象（服务奢侈品牌客户）
- 引导用户进行咨询转化

---

## Brand（品牌调性与风格要求）

### 品牌定位

- **行业**：高端印刷设计与创意制作
- **客户**：奢侈品、腕表、美妆、酒类等高端品牌
- **调性**：奢华、专业、匠心、可靠

### 色彩规范

```css
:root {
  --primary: #1a1a2e;        /* 深靛蓝 - 主背景 */
  --secondary: #16213e;      /* 深蓝 - 次级背景 */
  --accent: #c9a96e;        /* 香槟金 - 主强调色 */
  --accent-light: #e8c98a;   /* 浅金色 - hover状态 */
  --accent-dark: #b8944f;    /* 深金色 - 边框 */
  --text-dark: #1a1a2e;     /* 深色文字 */
  --text-mid: #4a4a6a;       /* 中灰文字 */
  --text-light: #8a8aaa;     /* 浅灰文字 */
  --text-inverse: #ffffff;   /* 反色文字 */
  --bg-light: #f8f7f4;      /* 浅暖白 */
  --bg-warm: #f2ede6;       /* 暖米色 */
  --bg-white: #ffffff;        /* 纯白 */
  --bg-dark: #0d0d1e;       /* 深黑背景 */
  --border: rgba(201,169,110,0.25);
}
```

### 字体规范

- **中文字体**：Noto Serif SC（标题）、Noto Sans SC（正文）
- **西文字体**：Inter（数字/品牌名）、Cinzel（Logo）
- **引入方式**：Google Fonts CDN

---

## Tech Stack（技术实现要求）

### 必须实现

- **单文件HTML**：所有CSS和JS内联，无外部依赖（除字体和图片）
- **纯CSS动画**：使用CSS `@keyframes`实现所有动效，无JS动画库
- **Intersection Observer**：实现滚动触发的淡入动画
- **CSS Grid + Flexbox**：现代化响应式布局
- **CSS变量**：统一管理所有设计token

### 性能要求

- **首屏加载**：< 3秒（3G网络）
- **动画性能**：使用`transform`和`opacity`，避免重排重绘
- **图片优化**：所有图片使用`object-fit: cover`适配

---

## Layout Constraints（页面布局与交互规则）

### 1. 导航栏（Navigation）

- **定位**：`position: fixed`，滚动时固定顶部
- **毛玻璃效果**：`backdrop-filter: blur(20px)`
- **滚动变化**：添加`.scrolled`类时，调整`padding`和`background`
- **Logo**：左侧金色"M"图标 + "奇妙设计"文字
- **导航链接**：首页、关于我们、服务范围、核心优势、合作案例、合作流程、联系我们
- **CTA按钮**：右侧"立即咨询"胶囊按钮（金色背景）
- **移动端**：汉堡菜单，全屏覆盖式移动菜单

### 2. Hero 首屏区域

**整体布局**：双栏网格（`grid-template-columns: 1fr 1fr`）

**左侧（Hero Left）**：

- **Eyebrow标签**：小字号，金色背景胶囊，`高端设计制作 · 全流程专业服务`
- **主标题**：68px，行高1.25
  - "创意"使用金色渐变（`gradient-text`类）
  - "触手可及"使用纯金色高亮（`highlight`类）
  - 金色下划线动画（`underlineGlow`）
- **副标题**：17px，行高1.9，最大宽度520px
- **CTA按钮**：两个按钮（主按钮渐变金色，次按钮描边透明）
- **动画**：`fadeInUp 0.8s ease`

**右侧（Hero Right）**：

- **4个数据卡片**（2x2网格）：
  - 10+ 年团队经验
  - 50+ 高端项目
  - 85% 客户复购率
  - 99% 成品合格率
  - 数字使用CountUp动画（2秒，三次缓出）
  - Hover效果：上浮6px + 放大1.02倍 + 光效扫过
- **服务品牌区块**（8个品牌，2行4列）：
  - 标题"服务品牌"
  - 第一行：HR 赫莲娜、ZENITH 真力时、Breguet 宝玑、Martell 马爹利
  - 第二行：D&G、Tiffany、修丽可、雅诗兰黛
  - 每个品牌标签等宽（`flex: 1`），hover时金色高亮

**背景效果**：

- 深色渐变背景（`#0a0a1a → #1a1a3e`）
- 网格线装饰（80px间隔，淡金色，径向渐变遮罩）
- 10个浮动金色粒子（从底部飘到顶部，不同延迟和时长）
- 顶部径向光晕（金色，8秒循环动画）

### 3. 关于我们（About Section）

**布局**：左图右文（1:1），移动端单栏

**右侧内容**：

- 小标题 + 主标题（`以细节匠心，诠释高端设计的每一分价值`）
- 品牌介绍文字（突出"最后一公里"价值主张）
- 引用框（左侧金色边框，`关于"最后一公里"的引用`）
- CTA链接（`告诉我们您的难题`）

**左侧配图**：使用 CDN 图片，展示高端印刷工艺细节（金色烫印、模切图案）：
- 主图：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/about-premium-print.png`
- 备图：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/about-tech-design.png`

**底部数据条**：3个核心数据（10+年、50+品牌客户、99.5%合格率），flex布局

**特性卡片**（3个，网格布局）：

- 01 攻克复杂工艺
- 02 快速精准响应
- 03 奢侈品级别标准

### 4. 服务范围（Services Section）

**标题区**：

- Eyebrow：`服务范围`
- 主标题：`六大核心业务`
- 副标题：`从创意设计到批量印制，全流程专业服务，精准传达每一个品牌故事。`

**6个服务卡片**（3x2网格）：

1. **包装定制设计** - 礼盒包装、产品包装、包装盒/纸箱、酒店餐饮包装
2. **画册书刊印刷** - 样本/画册、说明书、单页/折页、书刊、报纸
3. **商业宣传物料** - 海报、活动会务宣传品、酒店餐饮海报、台卡
4. **商务办公物料** - 信封信纸、邀请函、联单
5. **文创礼品定制** - 笔记本、台历、帆布包
6. **影像艺术装帧** - 相册、画框装裱、艺术书籍

**卡片样式**：

- 顶部配图（200px高度），`overflow: hidden`
- 渐变遮罩（底部，`linear-gradient to top`）
- 标签展示（底部，`border-radius: 100px`药丸形状）
- Hover时图片放大1.08倍，整卡上浮8px

### 5. 核心优势（Advantages Section）

**布局**：深色背景（`#1a1a2e → #16213e`渐变），4列卡片网格

**4个优势卡片**：

1. **定制化创意能力** - 拒绝模板化设计，量身打造专属创意
2. **高精度印刷工艺** - 进口海德堡印刷机，色彩还原98%+
3. **奢侈品行业经验** - 与ZENITH、Tiffany等品牌深度合作
4. **严格品控管理** - 12道质检流程，合格率99.5%+

**卡片样式**：

- 半透明背景（`rgba(255,255,255,0.05)`）
- 金色边框（`rgba(201,169,110,0.2)`）
- Hover时背景变亮，边框高亮，上浮效果

### 6. 精选项目展示（Cases Section）

**布局**：白色背景，品牌墙 + 案例卡片

**品牌墙**（8个合作品牌，居中显示）：ZENITH / BREGUET / TIFFANY / ESTÉE LAUDER / HELENA RUBINSTEIN / SKINCEUTICALS / MARTELL / DOLCE&GABBANA

**案例卡片**（2x2网格）：

1. **叠川烈酒包装设计** - 包装设计
2. **雅诗兰黛小棕瓶发布会物料** - 宣传物料
3. **ZENITH×Tiffany腕表包装** - 奢侈品包装
4. **Martell马爹利品牌物料** - 品牌物料

**卡片元素**：

- 配图（280px高度）
- 类别标签（左上角，黑色半透明胶囊）
- "长按保存"提示（右下角，hover时显示）
- 标题 + 描述 + 浏览量

### 7. 合作流程（Process Section）

**布局**：暖色背景（`#f2ede6`），4步骤横向流程

**4个步骤**：

1. **需求沟通** - 深入了解项目需求与品牌调性
2. **方案设计** - 专业团队输出定制化设计方案
3. **打样确认** - 高精度打样，确认最终效果
4. **批量生产** - 严格品控，准时交付

**连接线**：步骤间有金色渐变连接线（`::before`伪元素）

**步骤编号**：88x88px圆形，金色边框，内部数字

### 8. 联系我们（Contact Section）

**布局**：左信息右表单（1:1）

**左侧**：

- Eyebrow + 标题（`开启您的创意之旅`） + 副标题
- 联系信息（电话、邮箱、地址），使用SVG图标
- 右侧装饰卡片（"开启创意之旅"视觉区）

**右侧表单**：

- 姓名 / 电话（第一行，2列）
- 需求类型 / 预算区间（第二行，2列下拉框）
- 留言（文本域）
- 提交按钮（金色，全宽）

### 9. 页脚（Footer）

- 深色背景（`#0d0d1e`）
- Logo + 导航链接 + 版权信息

---

## Assets（所需视觉与功能资源）

### 图片资源清单（CDN）

> **所有图片已上传至 CDN，直接使用以下 URL，无需本地存储。**
>
> CDN 基础路径：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao`

```javascript
const CDN_BASE = 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao';
```

| 用途 | CDN 地址 |
|------|----------|
| Hero 创意展示背景 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/hero-creative-showcase.png` |
| 关于我们 - 印刷工艺（主图） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/about-premium-print.png` |
| 关于我们 - 设计技术（备图） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/about-tech-design.png` |
| 服务 - 包装定制 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-gift-box.png` |
| 服务 - 画册印刷 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-printed-book.png` |
| 服务 - 宣传物料 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-business-cards.png` |
| 服务 - 商务办公 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-desk-office.png` |
| 服务 - 文创礼品 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-creative-notebook.png` |
| 服务 - 影像装帧 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/service-photo-album.png` |
| 案例 - 叠川烈酒包装 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/case-whiskey-bottle.png` |
| 案例 - 雅诗兰黛物料 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/case-cosmetic-product.png` |
| 案例 - 腕表包装 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/case-watch-luxury.png` |
| 案例 - 马爹利干邑物料 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/qimiao/case-brandy-bottle.png` |

在 HTML 代码中，`<img src="">` 直接填写上表中的完整 CDN URL。图片加载失败时使用深金色渐变背景 fallback。**禁止使用 Unsplash/Picsum 占位图。**

### 交互功能

- **导航滚动效果**：监听`scroll`事件，添加/移除`.scrolled`类
- **移动菜单切换**：点击汉堡图标，切换`.mobile-menu.active`
- **滚动淡入动画**：Intersection Observer + `.reveal`类
- **数字CountUp**：Intersection Observer + `requestAnimationFrame`
- **表单提交**：模拟提交成功，显示成功提示

---

## Animation Specifications（动效规范）

### 1. 页面加载动画

```css
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
```

### 2. 滚动触发动画

- 初始状态：`.reveal { opacity: 0; transform: translateY(32px); }`
- 可见状态：`.reveal.visible { opacity: 1; transform: translateY(0); }`
- 延迟类：`.reveal-delay-1`到`.reveal-delay-6`（0.1s到0.6s）

### 3. 悬浮交互

- **卡片Hover**：`transform: translateY(-8px); box-shadow: 0 12px 40px ...`
- **图片Hover**：`transform: scale(1.05);`（案例）或`scale(1.08)`（服务）
- **按钮Hover**：`transform: translateY(-3px);`，光效扫过（`::before`伪元素，left -100% → 100%）
- **品牌墙Hover**：`filter: grayscale(0%); opacity: 1;`

### 4. 粒子动画

```css
@keyframes floatParticle {
  0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
  5% { opacity: 0.8; }
  50% { opacity: 0.6; }
  95% { opacity: 0.8; }
  100% { transform: translateY(-15vh) scale(1.2); opacity: 0; }
}
```

- 10个粒子，不同`left`位置、`animation-delay`和`animation-duration`

### 5. 数字滚动动画

```javascript
function animateCount(el, target) {
  const duration = 2000;
  const startTime = performance.now();
  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easeOut = 1 - Math.pow(1 - progress, 3);
    const current = Math.floor(start + (target - start) * easeOut);
    el.textContent = current;
    if (progress < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}
```

---

## Responsive Breakpoints（响应式断点）

### 1024px 及以下

- Hero区域单栏（`grid-template-columns: 1fr`）
- Hero右侧移到左侧（`order: -1`）
- 关于我们单栏
- 服务卡片2列
- 优势卡片2列
- 案例卡片单栏
- 流程步骤2列

### 768px 及以下

- 导航链接隐藏，显示汉堡菜单
- Hero标题56px
- Section标题36px
- 服务卡片单栏
- 关于数据条换行

### 480px 及以下

- Hero标题36px
- 数据卡片单栏
- 流程步骤单栏
- 联系表单单栏
- 品牌墙2列

---

## Content Template（内容文案模板）

### Hero

- **Eyebrow**：`高端设计制作 · 全流程专业服务`
- **标题**：`让创意真正触手可及`
- **副标题**：`专注包装定制、画册印刷、宣传物料、商务办公、文创礼品与影像装帧六大业务领域。用卓越工艺与创意，为品牌注入持久视觉价值，助力您在市场竞争中脱颖而出。`

### About

- **标题**：`以细节匠心，诠释高端设计的每一分价值`
- **引用**：`"很多设计稿到了制作环节就变形了——奇妙设计的价值，正是打通从创意到实物的最后一公里，确保每一个细节都与设计稿高度还原。"`

### Advantages

- **标题**：`为何选择奇妙设计`

### Cases

- **标题**：`精选项目展示`

### Process

- **标题**：`标准化流程确保每个环节高效协同`

---

## Quality Checklist（质量检查清单）

### 视觉检查

- [ ] 导航栏毛玻璃效果正常
- [ ] Hero区域渐变背景和粒子动画正常
- [ ] 标题渐变色和下划线动画正常
- [ ] 数据卡片悬浮效果正常
- [ ] 服务品牌两行四列对齐
- [ ] 品牌墙居中显示
- [ ] 所有 CDN 图片正确加载
- [ ] 响应式布局在各个断点正常

### 动效检查

- [ ] 滚动触发淡入动画正常
- [ ] 卡片悬浮上浮效果正常
- [ ] 按钮光效扫过动画正常
- [ ] 品牌墙灰度切换正常
- [ ] 数字CountUp动画正常

### 内容检查

- [ ] 所有文字内容完整
- [ ] CTA链接跳转正确
- [ ] 表单元素可交互
- [ ] 手机端导航菜单正常

---

## Deployment Notes（部署说明）

1. 生成单文件HTML后，使用EdgeOne Makers Skills进行部署
2. 图片全部从 CDN 加载，无需上传本地图片资源
3. 部署后检查线上版本的所有功能
4. 确保Google Fonts在线上环境可访问