视觉风格expressive

奢华画册

Luxe Lookbook

时装屋数字旗舰的高级定制美学：瓷白底、墨黑字、一支哑光金；超大高对比 Didone 衬线做标题，通栏丝绸动态视频首屏，画册网格悬停揭图。留白即奢侈，克制即高级，数字如艺术品——像一家敢为一件大衣标价四千欧元的时装屋。

打开交互展示查看实现规则

主色#141210

次色#F7F5F1

强调色 1#9A7B4F

强调色 2#E8E3DB

强调色 3#6B6259

AI 实现规则

你是一个奢华画册（Luxe Lookbook）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 圆角、阴影、渐变装饰（任何一处都拉低身价，改用方角与 hairline）
- 金色用在多处（唯一强调色只落 kicker / 焦点 / 单个 CTA）
- 用 font-bold 造字重（粗细来自 Didone 衬线本身的对比）
- 拥挤排版（留白是奢侈）
- 视频作 LCP 依赖 / 省略海报
- 快速 / 跳变的花哨动效

## 必须遵守

### 调色板
- 瓷白底 #F7F5F1 / 石灰面 #E8E3DB / 墨黑字 #141210 / 灰褐正文 #6B6259
- 唯一哑光金 #9A7B4F：kicker、hairline 焦点、单个主 CTA
- 全站方角 rounded-none，hairline 细线 border-[#141210]/20

### 排版
- 展示用超大高对比 Didone 衬线（Playfair Display），标题 clamp() 可到 ~8rem，line-height ~0.92
- 正文与标签用中性无衬线；标签全大写、字距 0.3em（tracking-[0.3em]）
- 字重靠字体本身，不用 font-bold；行高宽松

### 视频丝绸首屏（poster = LCP）
- video 必带 poster（AVIF 优先）作 LCP；muted loop playsInline preload="none"
- 进视口才 load()/play()（IntersectionObserver），离屏 pause()：
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(()=>{}); } else { v.pause(); }
}, { threshold: 0.25 });
- 文字压视频铺渐变可读性遮罩，保证 4.5:1
- 显式 aspect-ratio / h-screen 防 CLS

### 画册网格（hover 揭图）
- 竖幅 4:5 肖像用 <picture>：<source srcSet=".avif" type="image/avif"><source srcSet=".webp" type="image/webp">
- 懒加载 loading="lazy" decoding="async" + 显式 aspect-[4/5]
- 悬停只用 transform/opacity：group-hover:scale-[1.04]（duration-700 缓入）+ 说明上浮
- 可键盘聚焦（focus-within 同样揭图）

### 降级
- prefers-reduced-motion / Save-Data：不自动播、显海报静帧，给播放按钮
- 移动端可只显海报

## 自检
1. 全站方角、无圆角无阴影无渐变？
2. 金色只出现在极少数处？
3. 标题是 Didone 衬线、留白充足、无 font-bold？
4. 视频海报作 LCP、preload=none、进视口才播、离屏暂停？
5. 画册图片 <picture> AVIF+WebP、显式 4:5、懒加载、悬停 transform 揭图？
6. reduced-motion / Save-Data 降级到海报静帧？

组件预览与实现

组件变体

inline-flex items-center justify-center rounded-none uppercase tracking-[0.2em] text-xs transition-all duration-500 ease-out bg-[#141210] text-[#F7F5F1] hover:bg-[#9A7B4F]

button

Button

Squared ink CTA and a hairline outline

<button className="inline-flex items-center justify-center
  px-9 py-4 rounded-none
  bg-[#141210] text-[#F7F5F1]
  uppercase tracking-[0.2em] text-xs
  hover:bg-[#9A7B4F]
  transition-all duration-500
">
  Book an appointment
</button>

<button className="inline-flex items-center justify-center px-9 py-4 rounded-none
  bg-transparent text-[#141210] border border-[#141210]
  uppercase tracking-[0.2em] text-xs
  hover:bg-[#141210] hover:text-[#F7F5F1] transition-all duration-500">
  View the collection
</button>

card

Card

Editorial lookbook card with a portrait plate and hairline caption

<article className="group bg-[#F7F5F1]">
  <div className="relative aspect-[4/5] overflow-hidden bg-[#E8E3DB]">
    <picture>
      <source srcSet="/look-01.avif" type="image/avif" />
      <source srcSet="/look-01.webp" type="image/webp" />
      <img src="/look-01.webp" alt="The camel coat" loading="lazy" decoding="async"
        className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]" />
    </picture>
  </div>
  <div className="pt-6 border border-[#141210]/15 mt-6">
    <p className="uppercase tracking-[0.3em] text-xs text-[#9A7B4F] mb-2">Look 01</p>
    <h3 className="font-serif text-2xl text-[#141210]">The Camel Coat</h3>
  </div>
</article>

input

Input

Underline field for the newsletter and appointment forms

<input type="email" placeholder="Your email"
  className="w-full px-0 py-3 rounded-none
    bg-transparent border border-[#141210]/25
    text-[#141210] placeholder-[#141210]/40
    uppercase tracking-[0.15em] text-xs
    focus:outline-none focus:border-[#9A7B4F]
    transition-all duration-500" />

nav

Navigation

Serif masthead over the film, with letter-spaced links

<nav className="fixed top-0 inset-x-0 z-50 bg-gradient-to-b from-[#F7F5F1]/80 to-transparent">
  <div className="max-w-6xl mx-auto px-6 md:px-10 h-20 flex items-center justify-between">
    <span className="font-serif text-2xl tracking-tight text-[#141210]">Maison</span>
    <div className="flex items-center gap-8 uppercase tracking-[0.25em] text-xs text-[#141210]">
      <a href="#lookbook" className="hover:text-[#9A7B4F] transition-colors duration-500">Lookbook</a>
      <a href="#atelier" className="hover:text-[#9A7B4F] transition-colors duration-500">Atelier</a>
    </div>
  </div>
</nav>

hero

Hero

Poster-first silk-motion film hero: LCP poster, in-view autoplay, scrim, reduced-motion fallback

function FilmHero() {
  const ref = useRef(null);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; // keep poster still
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { v.load(); v.play().catch(() => {}); }
      else { v.pause(); }
    }, { threshold: 0.25 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <section className="relative h-screen overflow-hidden bg-[#F7F5F1]">
      <video ref={ref} poster="/poster.avif" muted loop playsInline preload="none" aria-hidden="true"
        className="absolute inset-0 w-full h-full object-cover">
        <source src="/silk.mp4" type="video/mp4" />
      </video>
      <div className="absolute inset-0 bg-gradient-to-t from-[#141210]/50 via-transparent to-[#141210]/20" />
      <div className="relative z-10 h-full max-w-6xl mx-auto px-6 md:px-10 flex flex-col justify-end pb-24">
        <p className="uppercase tracking-[0.3em] text-xs text-[#F7F5F1]/80 mb-5">Autumn Maison</p>
        <h1 className="font-serif text-[#F7F5F1] text-6xl md:text-8xl leading-[0.95] max-w-4xl">
          The Silk Season
        </h1>
      </div>
    </section>
  );
}

footer

Footer

Quiet maison footer with complete hairline frame and letter-spaced columns

<footer className="border border-[#141210]/15 bg-[#F7F5F1] py-16">
  <div className="max-w-6xl mx-auto px-6 md:px-10 flex flex-wrap items-end justify-between gap-8">
    <span className="font-serif text-3xl text-[#141210]">Maison</span>
    <p className="uppercase tracking-[0.25em] text-xs text-[#6B6259]">Paris - Milan - Tokyo</p>
  </div>
</footer>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

奢华画册的信条：奢侈不是加法，是减法。真正的时装屋从不喧哗——它靠留白、靠克制、靠一件单品占满整屏来说话。数字旗舰就是一本会动的画册：图片是主角，文字是低语，金色只落在一处。

核心理念：

- 留白即奢侈：巨量负空间不是浪费，是底气。敢让一个标题独占半屏、敢让一张大衣照片四周全空，才像卖四千欧元的屋子

- 画册是叙事：lookbook 不是商品陈列，是一季的故事。每张竖幅肖像按顺序铺陈，悬停缓缓揭开，像翻动纸质画册

- 动态如丝绸不似烟花：首屏丝绸流动的循环视频给静态页面注入呼吸，但运动必须慢、必须无缝，是绸缎垂落不是特效炸裂

- 一支哑光金：整站唯一强调色是 #9A7B4F 哑光金——落在 kicker、hairline 焦点、单个 CTA。多一处就俗

- 数字即艺术：超大高对比 Didone 衬线（Playfair Display）把标题和编号当版画来排，字重靠字体本身的粗细对比，不靠 bold

- 编辑式克制：全站方角、hairline 细线（1px #141210/20）分栏、大写字母 0.3em 字距的标签。任何圆角、阴影、渐变都会拉低身价

设计原则：

- 性能红线：视频海报帧作 LCP（AVIF 优先），preload="none"，进视口才静音自动播、离屏暂停；显式宽高比防 CLS

- 降级：prefers-reduced-motion / Save-Data 只显海报静帧，给播放按钮

- 图片：竖幅 4:5 肖像用 <picture> AVIF+WebP，懒加载 + 显式宽高比；悬停只用 transform/opacity（scale 1.04 + 说明上浮）

- 排版层级：Didone 衬线做展示，中性无衬线做正文与标签；正文行高宽松，标签全大写宽字距

应该这样做

瓷白底 #F7F5F1 + 墨黑字 #141210 + 唯一哑光金 #9A7B4F 强调
超大高对比 Didone 衬线（Playfair Display）做标题，clamp() 最大可到 ~8rem
巨量留白：让单个标题或一张竖幅照片独占大半屏
画册网格：4:5 竖幅肖像用 <picture> AVIF+WebP，悬停 scale(1.04) 缓慢揭图 + 说明上浮
视频首屏海报优先：poster AVIF 作 LCP，preload=none，进视口才静音自动播、离屏暂停
hairline 细线（1px #141210/20）分栏，全站方角（rounded-none）
大写标签 0.3em 字距，中性无衬线做正文与标签，衬线只做展示
prefers-reduced-motion / Save-Data 下不自动播、显海报静帧

避免这样做

禁止圆角、阴影、渐变（任何一处都拉低身价，改用方角与 hairline）
禁止把金色用在多处（唯一强调色只落在 kicker / 焦点 / 单个 CTA）
禁止用 font-bold 造字重（粗细来自 Didone 衬线本身的对比）
禁止拥挤排版（留白是奢侈，密集是廉价）
禁止视频作 LCP 依赖或省略海报（首屏白屏、LCP 爆炸）
禁止快速 / 跳变的花哨动效（动态是丝绸垂落，不是特效炸裂）

全局 CSS

/* Luxe Lookbook Global Styles */

:root {
  --ll-porcelain: #F7F5F1;
  --ll-stone: #E8E3DB;
  --ll-ink: #141210;
  --ll-gold: #9A7B4F;
  --ll-taupe: #6B6259;
  --ll-hairline: rgba(20, 18, 16, 0.2);
  --ll-serif: "Playfair Display", "Times New Roman", Georgia, serif;
}

/* Load the Didone display face from the CN mirror */
@import url("https://fonts.loli.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&display=swap");

.ll-display {
  font-family: var(--ll-serif);
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Oversized editorial title */
.ll-hero-title {
  font-family: var(--ll-serif);
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.92;
}

/* Airy uppercase label */
.ll-label {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: var(--ll-gold);
}

/* Hairline rule */
.ll-rule {
  border: 0;
  border: 1px solid var(--ll-hairline);
}

/* Full-bleed film cover */
.ll-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability scrim over the film */
.ll-scrim {
  background: linear-gradient(to top, rgba(20,18,16,0.5), rgba(20,18,16,0) 55%, rgba(20,18,16,0.2));
}

/* Lookbook plate: slow reveal on hover, transform/opacity only */
.ll-plate img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ll-plate:hover img,
.ll-plate:focus-within img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .ll-plate img { transition: none; }
  .ll-plate:hover img,
  .ll-plate:focus-within img { transform: none; }
}

布局、色板与 Tokens

主色#141210

次色#F7F5F1

强调色 1#9A7B4F

强调色 2#E8E3DB

强调色 3#6B6259

{
  "border": {
    "width": "border",
    "color": "border-[#141210]/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-[0_30px_80px_-40px_rgba(20,18,16,0.35)]",
    "none": "shadow-none",
    "hover": "hover:shadow-none",
    "focus": "focus-visible:ring-1 focus-visible:ring-[#9A7B4F]/60",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-out",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:opacity-70"
  },
  "typography": {
    "heading": "font-serif text-[#141210] tracking-tight",
    "body": "text-[#6B6259] leading-relaxed",
    "mono": "uppercase tracking-[0.3em] text-[#9A7B4F] text-xs",
    "sizes": {
      "hero": "text-6xl md:text-8xl",
      "h1": "text-5xl md:text-7xl",
      "h2": "text-3xl md:text-5xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-40",
    "container": "px-6 md:px-10",
    "card": "p-8",
    "gap": {
      "sm": "gap-6",
      "md": "gap-10",
      "lg": "gap-16"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#F7F5F1]",
      "secondary": "bg-[#E8E3DB]",
      "accent": [
        "bg-[#9A7B4F]"
      ]
    },
    "text": {
      "primary": "text-[#141210]",
      "secondary": "text-[#6B6259]",
      "muted": "text-[#141210]/50"
    },
    "button": {
      "primary": "bg-[#141210] text-[#F7F5F1]",
      "secondary": "bg-transparent text-[#141210] border border-[#141210]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "rounded-full",
      "rounded-lg",
      "rounded-xl",
      "shadow-lg",
      "shadow-xl",
      "font-bold"
    ],
    "patterns": [
      "^rounded-(lg|xl|2xl|full)$",
      "^from-(indigo|purple|pink|fuchsia)-",
      "^shadow-(md|lg|xl|2xl)$",
      "^drop-shadow-"
    ],
    "reasons": {
      "bg-gradient-to-r": "The maison never decorates with gradients; restraint and negative space carry the luxury",
      "rounded-full": "Couture reads in crisp square corners and hairline rules, not pill shapes",
      "rounded-lg": "Any corner radius softens the editorial precision; keep edges square",
      "shadow-lg": "Heavy shadows feel commercial; luxury sits flat on the porcelain ground",
      "font-bold": "Weight comes from the high-contrast Didone serif, not from bold utility classes"
    }
  },
  "required": {
    "button": [
      "rounded-none",
      "uppercase tracking-[0.2em]",
      "transition-all duration-500"
    ],
    "card": [
      "rounded-none",
      "bg-[#F7F5F1]"
    ],
    "input": [
      "rounded-none",
      "bg-transparent",
      "border border-[#141210]/25",
      "text-[#141210] placeholder-[#141210]/40",
      "focus:outline-none focus:border-[#9A7B4F]",
      "transition-all duration-500"
    ]
  }
}

示例提示词

时装屋秋季画册首屏

丝绸动态视频开场的时装屋落地页

Create a fashion-maison lookbook landing page with:
1. A full-bleed silk-motion film hero: a <video muted loop playsInline preload="none"> with a poster AVIF as the LCP; load()/play() only in view via IntersectionObserver, pause offscreen; a gradient scrim so the serif headline stays legible
2. Porcelain #F7F5F1 ground, ink #141210 type, one muted gold #9A7B4F accent only on the kicker and a single CTA
3. Oversized high-contrast Didone serif (Playfair Display) title using clamp() up to ~8rem, line-height ~0.92; uppercase tracking-[0.3em] labels
4. A lookbook grid of four 4:5 portrait plates via <picture> AVIF+WebP, lazy-loaded with explicit aspect-ratio; hover reveals with group-hover:scale-[1.04] and a caption rise (transform/opacity only), keyboard-focusable
5. Square corners everywhere (rounded-none), hairline rules (1px #141210/20), vast whitespace; no radius, shadow, or gradient decoration
6. prefers-reduced-motion / Save-Data: no autoplay, show the poster still with a play button

高级成衣产品页

编辑式留白的单品详情页

Create a couture ready-to-wear product page with:
1. A 4:5 portrait plate of the garment via <picture> AVIF+WebP occupying most of the screen, vast whitespace around it, explicit aspect-ratio and lazy loading below the fold
2. Porcelain #F7F5F1 ground, ink #141210 Didone serif garment name (Playfair Display), taupe #6B6259 body copy, one muted gold #9A7B4F line on the "Book an appointment" CTA
3. Uppercase tracking-[0.3em] labels for price and materials, separated by hairline rules (1px #141210/20)
4. Square-cornered underline inputs for the appointment form; no radius, shadow, or gradient
5. A small hover-reveal lookbook strip of related looks at the foot, transform/opacity only