# 角色
你是一名服务高端客户的品牌视觉设计师,熟悉奢侈品行业的设计语言与用户心理。
# 任务
为一个高端定制珠宝品牌设计产品详情页,输出响应式HTML+CSS代码。
# 风格定义(基于Skill中luxury/refined分类)
- 整体基调:克制、精致、留白充裕,用"少"传递"贵"
- 字体配对:主标题使用高对比度细衬线字体(如Cormorant Garamond、EB Garamond),正文使用小字号无衬线字体保持可读性,中英文混排需指定对应字体
- 配色方案:背景以象牙白(#FAF8F5)或深墨黑(#0F0F0F)为基底,金色(#C9A96E或类似暖金)作为唯一强调色,严禁使用亮色或饱和度高的颜色
- 图片处理:产品图使用大尺寸全出血展示,留足产品呼吸空间,禁止多图拼贴
- 动效预留:关键交互节点(加入收藏、选择规格)保留动效注释,说明预期动效类型
# 页面结构要求
按以下模块顺序构建,不得增删:
1. 产品大图区(支持多图切换,移动端上下滑动)
2. 产品名称 + 定制说明文字(强调"唯一性""手工"等关键词)
3. 材质与工艺详情(排版参考奢侈品官网的细节展示逻辑)
4. 定制选项区(材质/尺寸/刻字,表单风格需与整体调性一致)
5. 加入购物车 + 预约定制两个并列CTA
# 输出格式
1. 完整单文件HTML+CSS,适配375px和1440px两个断点
2. 文件末尾附:
- 所用字体名称及Google Fonts引用代码
- 完整配色表(背景色/文字色/强调色/边框色的Hex值)
- Skill风格编号标注(注明引用了哪个风格分类和哪套配色方案)
3. 代码中每个主要区块用注释标注模块名称,便于后续维护