# 第1轮
```
你是一名顶级前端设计工程师、视觉设计师、交互架构师。请直接生成一个**单文件 HTML** 的高完成度个人网站，页面类型为：

## 网页类型
**营销落地页 - 个人网站（艺术家 / 设计师 / 创意前端工程师 / UX/UI 设计师 / 个人作品集 / 自我介绍站）**

---

## 一、总目标

请生成一个具有以下气质的高端个人网站：

- 审美达到 **Awwwards / Godly / Apple** 级别
- 大气、留白充足、排版松弛
- 信息密度高但不杂乱
- 极简、现代、专业
- 有明显“成熟设计师个人品牌官网”的气质
- **绝对不能有 AI 廉价感**
- 不能像普通模板作品集
- 不能像企业官网
- 不能像 SaaS 官网
- 必须像一位真正有经验、有判断力、有审美的设计师个人站

页面气质关键词：

- refined
- editorial minimal
- portfolio-first
- calm confidence
- premium
- modernist
- mature
- high-trust
- clean but expressive
- personal brand

---

## 二、技术栈要求

必须使用：

- 原生 HTML / CSS / JS
- Tailwind CSS CDN
- GSAP CDN
- FontAwesome CDN

必须输出：

- 完整单文件 HTML
- 所有样式写在 `<style>` 中
- 所有脚本写在 `<script>` 中
- 页面打开即可运行

禁止使用：

- Vue
- React
- 任意框架
- 任意构建工具
- 任意第三方 UI 组件库
- 任意手绘 SVG path
- 任意多文件拆分

---

## 三、视觉风格要求

### 1. 总体视觉风格

页面应像真正上线的高级设计师个人官网，适合以下身份：

- UX/UI Designer
- Product Designer
- Visual Designer
- Creative Front-end Engineer
- Mobile App Designer
- Independent Digital Designer

页面整体必须体现：

- 清晰的大留白
- 强烈但克制的文字层级
- 高级灰阶和深浅背景切换
- 项目展示优先
- 内容有秩序，不卖弄
- 有“专业感 + 可信度 + 设计判断力”

---

### 2. 色彩建议

建议使用：

- 主背景：纯白 / 极浅灰
- 辅助浅背景：温和浅灰
- 深色模块：炭灰 / 深灰 / 近黑
- 主文字：近黑
- 辅助文字：中灰
- CTA：深灰或黑色

整体色彩要求：

- 不要炫彩
- 不要花哨渐变
- 不要霓虹科技感
- 要安静、成熟、克制
- 像高级作品集而不是视觉实验页

---

### 3. 排版硬性约束

必须严格遵守以下规则：

- 绝对不使用 `tracking-wide` / `tracking-widest`
- 不允许依赖大字距制造高级感
- 严禁滥用 `rounded-2xl` / `rounded-3xl`
- 全站圆角统一使用 `rounded-md` 或 `rounded-lg`
- 严禁使用胶囊形状背景框包裹普通文字
- 不允许所有模块都是同一种版式重复堆叠
- 不允许卡片和留白毫无节奏
- 不允许页面像 AI 自动生成的 Dribbble 模板

必须通过以下方式建立高级感：

- Hero 的文字比例
- 大标题与说明文字对比
- 深浅背景切换
- 宽屏项目展示
- 节奏明确的章节切换
- 图片秩序
- 文字与模块之间的留白关系

---

## 四、图片与图标规范

### 图片
所有图片必须：

- 使用 Unsplash 高清图源
- 使用 `object-cover`
- 比例明确
- 构图高级
- 与设计、数字产品、创意行业气质相关
- 项目图必须像作品展示，不要像随机图库

建议比例：

- Hero 头像：正方形裁切圆形
- Hero Gallery：横向展示条，每张图比例统一或近似
- 项目图：`aspect-[4/3]`
- 深色毕业项目区主图：竖向或手机 mockup 感构图
- 评价区头像：圆形头像

### 图标
必须：

- 仅使用 FontAwesome
- 使用 `fa-solid` / `fa-brands`

禁止：

- 手绘 SVG 路径
- 图标乱风格混用
- 图标过量堆砌

---

## 五、页面结构要求

页面必须包含以下完整模块：

---

### 1. 固定顶部导航 Navigation

要求：

- fixed 顶部导航
- 半透明白底 + `backdrop-blur`
- 左侧为个人姓名
- 右侧为导航链接与 CTA
- 桌面端有完整导航
- 移动端允许简化，但必须优雅

建议导航项：

- Projects
- Resume
- About me
- Contact me

导航要求：

- 小字号
- 极简
- 专业
- 有 hover / active 状态
- 不要太重，不要像企业导航条

---

### 2. Hero 首屏

这是页面最重要的模块。

必须包含：

- 一个圆形头像
- 一段超大自我介绍标题
- 一段较长的专业说明文案
- 一组社交图标
- 一条横向作品预览图带

Hero 目标气质：

- 一眼看出这是高级设计师个人网站
- 有明显的个人定位
- 语言成熟
- 视觉干净但不空

标题方向建议：

- I'm [Name], a UX/UI designer specializing in...
- I design thoughtful digital experiences for...
- Product and interface design for modern brands and startups.
- Designing mobile experiences with clarity and elegance.

---

### 3. Hero Gallery Strip

要求：

- 位于 Hero 下方
- 横向滚动展示 4 张左右作品预览图
- 可横向拖动 / 滚动
- 桌面端看起来像宽屏作品条带
- 图片高度统一
- 风格像精选项目预览，而不是普通相册

必须：

- 隐藏原生滚动条
- 支持 snap 或自然滚动
- 保持高级秩序感

---

### 4. Selected Projects 模块

要求：

- 浅灰背景分区
- 标题 + 简短说明
- 下方展示 2 个精选项目
- 每个项目包含：
  - 大图
  - 标题
  - 描述
- 双列布局
- 项目图 hover 有轻微放大

项目方向建议：

- app redesign
- social product concept
- mobile app UX case study
- fintech / fitness / dining / education app design

要求：

- 像“精选案例展示”
- 不要像博客卡片
- 不要像普通商品卡片

---

### 5. Graduation Project / Featured Case 模块

要求：

- 整块深色背景
- 左侧为标题和介绍文案
- 右侧为一张强视觉项目图
- 这部分要像重点案例横幅
- 视觉上要明显和前一部分拉开层级

目标气质：

- 专业
- 稳重
- 像毕业设计 / 代表作 / 核心项目陈列区
- 有“作品被认真呈现”的感觉

---

### 6. Expert Feedback 模块

要求：

- 浅背景
- 标题 + 简短说明
- 下方为横向反馈卡片区
- 至少 3 张反馈卡
- 每张卡包含：
  - 头像
  - 姓名
  - 职位 / 头衔
  - 一段评价文字

要求：

- 评价卡简洁、成熟
- 更像 professional testimonial，而不是社交动态
- 允许横向滚动，桌面端可有轻微超出裁切感
- 风格要像高级设计作品集中的背书模块

---

### 7. CTA 模块

要求：

- 深色背景
- 居中排版
- 一个大标题
- 一句补充说明
- 一个 CTA 按钮

文案方向建议：

- Interested in connecting?
- Let’s talk projects and collaborations.
- Open for freelance, product design, and creative opportunities.

要求：

- 简洁有力
- 不要太营销
- 更像专业邀请，而不是销售按钮区

---

### 8. Footer 模块

要求：

- 深色 footer
- 左侧姓名或品牌标识
- 中间导航链接
- 右侧社交图标
- 底部版权信息

要求：

- 整体简洁
- 有成熟设计师站的收尾感
- 不花哨
- 不空洞

---

## 六、必须实现的 5 个高级动效

请真实实现以下 5 个高级动效，不要只写类名不做：

### 动效 1：GSAP Hero 分层入场
适用于：

- 头像
- Hero 标题
- 说明文案
- 社交图标
- Hero 图带

要求：

- 首屏按层级分组入场
- 使用 y + opacity reveal
- 节奏顺滑
- 不要过快
- 不要炫技
- 体现成熟作品集气质

---

### 动效 2：Hero Gallery Horizontal Reveal
适用于 Hero 下方横向作品条带。

要求：

- 首次进入时整体轻微 fade + upward reveal
- 滑动时保持顺畅
- 图片容器必须隐藏滚动条
- 结构稳，不抖动

---

### 动效 3：项目卡片 Hover Zoom
适用于 Selected Projects 模块。

要求：

- 图片必须在裁切容器内轻微放大
- 过渡平滑
- 鼠标离开自然恢复
- 不允许 hover 导致排版位移
- **严禁 translateY 上浮**

---

### 动效 4：章节 Scroll Stagger Reveal
适用于：

- Selected Projects
- Graduation Project
- Expert Feedback
- CTA

要求：

- 每个区块滚动进入时顺滑 reveal
- 可使用 y / opacity / stagger
- 不夸张
- 不要像模板动效
- 各模块动效逻辑统一

---

### 动效 5：评价卡横向展示动效
适用于 Expert Feedback 模块。

要求：

- 评价卡在进入视口时 stagger reveal
- 若采用横向滚动布局，滚动应顺畅
- 保持高级感，不要像电商轮播
- 卡片内容稳定，不抖动

---

## 七、交互规范

页面所有可点击元素必须具有：

- 默认状态
- hover 状态
- active 状态

明确要求：

- 颜色对比要清晰
- 状态切换自然
- **严禁 hover 使用 translateY 向上位移**
- 禁止任何排版抖动
- 按钮、链接、社交图标、项目卡、评价卡必须都有反馈

允许使用的 hover 方式：

- 背景色变化
- 字色变化
- 边框变化
- 轻微 scale
- 阴影变化
- icon 轻微变化
- opacity 变化

---

## 八、原生组件替换规范

严禁使用：

- `<select>`
- `<input type="date">`
- 默认原生滚动条直接暴露

如果页面里涉及：

- 横向项目条带
- 横向评价卡区
- 任何滚动容器
- 联系方式按钮
- 交互按钮

都必须使用：

- 原生 HTML / CSS / JS
- Tailwind 手写自定义 UI
- 正确的 `z-index`
- 不被遮挡
- 不产生浏览器默认组件的廉价感

---

## 九、文案风格要求

文案必须像真正成熟的设计师个人品牌网站，不要 AI 套话。

禁止出现：

- passionate designer
- I love creating beautiful things
- innovative solutions
- empowering users
- cutting-edge design
- making the world better through design

文案要：

- 简洁
- 专业
- 自信
- 有作品集语境
- 有个人品牌气质
- 让人感到“这个人靠谱且有经验”

---

## 十、代码质量要求

生成代码必须满足：

- 结构清晰
- 模块注释明确
- 无语法错误
- 无无效依赖
- 动画真实可运行
- 所有 hover / active 真实存在
- 响应式完整
- 页面可直接打开
- 不要像模板站堆假内容

---

## 十一、响应式要求

### 移动端
- 导航简化但保留层级
- Hero 标题自然断行
- Hero 图带支持横向滚动
- 精选项目改单列
- 深色重点项目区改为上下布局
- 评价卡区支持横向滑动
- CTA 按钮保持舒适点击尺寸

### 桌面端
- Hero 保持大气
- 头像、标题、社交图标、图带层次清晰
- Selected Projects 为双列
- Graduation Project 为左右分栏
- Expert Feedback 横向卡片区有空间感
- Footer 结构完整、稳重

---

## 十二、最终输出要求

请直接输出：

- 完整单文件 HTML
- 不要输出解释
- 不要输出思路说明
- 不要输出 Markdown 代码块
- 只输出最终 HTML

最终成品必须像一个真正可以上线的高端设计师个人网站，而不是 AI 演示稿或普通作品集模板。
```

# 第2轮
```
好，在现在的基础上修改，编码是UTF-8，不要把注释改成乱码：1.My graduation project这个为什么gsap不reveal呢，我看父级是opacity: 0; transform: translate(-50px, 0px);，你看看是哪出问题了，修一下   2.hero下面那个四张图的，改成循环跑马灯，然后图片别一张图了，多换几张，好看的
```

# 第3轮
```
1.给所有按钮加上磁吸效果，鼠标进入按钮范围后，按钮根据鼠标在按钮内部的位置做轻微位移，运动范围不要过小，25px，整体跟手、顺滑、持续响应。鼠标离开后按钮要自然回弹到原位。按钮整体需要一起移动，而不是单按钮的文字，不要让按钮卡顿，不要和 click、hover、active、gsap 状态互相打架。         2.给Selected projects 里面的图片加入 hover 时基于鼠标位置的内部视差运动。鼠标移动时，外层图片容器保持不动，图片内容在容器内部做轻微位移，并且hover时轻微放大，形成画面被鼠标带动的感觉。位移范围要小，离开后平滑回正。图片不能露出边界，不能让容器跟着跑，也不能出现 hover 之后完全没有反应的情况。
```

# 第4轮
```
给My graduation project 右侧的图片加入hover时3D卡片倾斜的效果，倾斜角度明显但不过大，有透视感，近大远小。离开时用弹性缓动恢复到初始状态。不要只有内部内容在转、外框不转，也不要让卡片过度晃动。函数分开写，别和别的效果函数混了，而且不要和gsap打架
```

# 第5轮
```
1.这个只是图片有3D倾斜，那个带点点的背景是静止的   2.Expert feedback怎么又看不到了，不reveal了？
```

# 第6轮
```
Expert feedback的卡片加入hover时卡片翻转，背面是就职的公司、职位和时间
```

# 第7轮
```
卡片怎么扁了？
```

# 第8轮
```
现在有个问题，这个卡片像是被遮罩上下挡住一样，而且还是带圆角的遮罩，这就说明你写成子集了
```

# 第9轮
```
我要的不是子集翻转，我要的是卡片翻转
```

# 第10轮
```
现在都不翻了，卡死了
```

# 第11轮
```
首屏的London, UK加个span，颜色特殊显示，鼠标hover的时候指针会变成一张带白色边框的圆角矩形图片，图片是London地标unsplash图，cursor过度顺滑
```

# 第12轮
```
帮我整理我们本次对话中我发送的所有指令（Prompt），严格按照按“第1轮；第2轮；第3轮……”的序号命名方式排序，输出为 Markdown 格式，只保留我发的prompt，保留原文不做任何修改和删减，但忽略你的回复，保存至这个项目的文件夹内
```
