premium-web-design

高端网页设计

创建 React（.jsx）组件，让它们看起来像出自 Awwwards——让人忍不住问“这是哪位设计师的作品？”这类网站的每个像素都经过精心设计，每段动画都经过编排，整体给人的印象是：背后投入了真正的创意才华和充足的预算。

AI 美学问题

大多数 AI 生成的网站都有着一眼可辨的共同特征。要避免这些特征，就得确切了解它们是什么样子。

黑名单——绝对不要这样做

字体方面的错误

• 将 Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit 用作主字体——这些字体一看就像“AI 模板”。（注意：Inter Tight 是一个独立的字体系列，字宽指标不同，可以使用。）
• 所有内容都使用同一个字体系列
• 字号层级整齐划一、毫无变化（64px → 32px → 18px → 14px）
• 所有地方都使用默认的字间距和行高
• 到处使用居中文字块，尤其是多行段落

颜色方面的错误

• 紫色到蓝色的渐变（AI 设计中最陈腐的套路）
• 没有具体情境理由，却把靛蓝色／紫罗兰色作为品牌主色
• 白色背景 + 一种强调色 + 灰色文字（SaaS 入门模板）
• 毫无理由地在按钮或卡片上使用渐变
• 用不透明度或半透明叠层代替真正的配色选择
• 深色背景上的霓虹强调色（“开发者作品集”风格）

布局方面的错误

• 首屏 → 三栏功能网格 → 用户评价 → CTA → 页脚（默认的 SaaS 落地页）
• 首屏 → 数据栏 → 作品网格 → 关于我们分栏 → CTA → 页脚（“高端 AI”落地页，同样套路化）
• 任何可在不同网站间互换的、按固定顺序从上到下排列的区块。每个网站都必须拥有独特的结构基因——区块数量各不相同，排序逻辑各有特点，区块之间也不必整齐地归入某种类别
• 完全对称、卡片尺寸相同的网格
• 所有内容都居中，所有内容都塞进最大宽度容器
• 把带阴影的圆角矩形作为主要 UI 元素
• 将图标 + 标题 + 段落卡片排成一行，共 3 或 4 个
• 泛泛的首屏：标题 + 副标题 + 两个并排按钮
• 静态、扁平、只有文字的首屏区块——首屏应该是沉浸式的空间体验

动效方面的错误

• 元素在滚动时从下方淡入（被滥用的 AOS 效果）
• 所有元素都使用相同的过渡效果（时长、缓动和方向都相同）
• 悬停效果只是放大元素或增加阴影
• 用加载旋转图标代替骨架屏或编排好的渐显效果

图像与装饰方面的错误

• 用 Blob 形状作背景装饰
• 把浮动的几何形状（圆形、三角形）当作“设计元素”
• 泛泛的渐变网格背景
• 使用纵横比统一的图库照片网格
• 用表情符号或通用线条图标标记区块

---

真正的高端设计是什么样子

高端网页设计通过克制、惊喜和对细节近乎执着的关注，展现精湛技艺。

以字体彰显个性

字体是区分价值 500 美元的网站和价值 50,000 美元的网站的头号因素。

字体选择理念：

• 标题使用有辨识度的衬线字体或展示字体——选择个性鲜明、富有主张的字体。可以从这些字体入手：衬线字体如 Playfair Display、Cormorant Garamond、DM Serif Display、Fraunces、Instrument Serif；不过度泛滥的无衬线字体如 Syne、General Sans、Satoshi、Switzer、Cabinet Grotesk、Nacelle、Inter Tight、IBM Plex Sans、Manrope、Archivo、Work Sans、Instrument Sans。
• 将个性鲜明的展示字体与中性而精致的正文字体搭配。
• 将等宽字体用作点缀排版（用于标签、类别、日期），能增添编辑风格——例如 JetBrains Mono、IBM Plex Mono、Space Mono。
• 大胆混搭字重——900 字重的标题搭配 300 字重的正文，能营造视觉张力。

字体排版实践：

• 使用 clamp() 实现流畅的字号缩放，而不是在断点处突然跳变
• 拉开字号差距——桌面端标题可以达到 8vw 及以上
• 大标题使用负字间距（-0.03em 到 -0.06em）
• 正文采用宽松的行高（1.6–1.8），标题则保持紧凑（0.9–1.1）
• 混合对齐方式——正文左对齐，偶尔搭配右对齐标签或不对称标题
• 为段落设置 max-width（45–75ch），并对标题使用 text-wrap: balance
• 类别、日期、元数据使用大写微型标签，并设置较宽的字间距（0.1em 及以上）

以色彩营造氛围

• 从黑白开始。只有在色彩确有必要时才加入。
• 有意选择一种主色——“这种颜色表达了怎样的情感？”
• 米白色和暖灰色（而非纯 #ffffff 或 #000000）更显设计感——可以尝试 #FAFAF8、#F5F0EB、#1A1A1A、#0D0D0D
• 采用单色或类似色配色，并点缀一处对比色，比彩虹配色更显精致
• 深色主题要精心设计：不能只是“深灰底上放白字”，还要考虑背景层次，并加入细腻的暖色或冷色调
• 少量使用色彩，效果更突出——黑白画面中一个红色链接，比满屏红色更有力量

以布局讲述故事

这项技能最常见的失败，是制作出表面看起来不同，底层结构却如出一辙的网站——一个主视觉区、三个编辑风格的内容区块、一段引述、一个表单和一个出版信息栏。一批网站看下来，就会开始让人觉得它们只是换了颜色的模板。要积极、有意识地避免这种情况。

结构 DNA 独特性规则：

开始编写任何标记之前，先明确说出主要结构概念——用一个名词短语概括，例如 “索引手稿” 或 “粘性横向立体场景”。在同一批网站中，**不能有两个网站采用相同的主要结构概念。**如果上一个网站采用了粘性滚动叙事，这一个就不能采用。如果上一个网站采用了 33/67 的垂直分栏，这一个就不能采用。用户最先注意到的是结构创意——只改变颜色而不改变结构，不过是表面功夫。

结构 DNA 目录

以下是彼此不同的主要结构。每次调用此技能时，都应选择一个概念并贯彻到底。不要在同一个网站中混用两种结构（这会削弱两者的效果）。

1. 索引式手稿 — 单一的长篇编辑栏，没有分节。从顶部到底部保持一种排版节奏。整页读起来像一份恰好做成了网站的手稿。（适用于：厨师的菜单、调香师的信、宣言。）
2. 粘性横向全景 — 页面纵向滚动很长，但滚动时看到的内容是一个横向平移的场景。使用 position: sticky + 由滚动驱动的 translateX。（适用于：委托项目时间线、分阶段的流程、藏品展示。）
3. 双栏固定分屏 — 页面始终按 50/50（或 38/62）分栏；一栏固定，另一栏滚动。导航在栏内进行，不滚动整个页面。（适用于：带实时更新索引的档案、图书管理员的目录。）
4. 幻灯片序列 — 每屏一张全视口高度的“幻灯片”，并启用滚动吸附。每张幻灯片的构图都截然不同。（适用于：摄影师的专著、画廊导览、编辑风格的造型画册。）
5. 基座上的展示物 — 单个 3D/图像主体居中展示，可旋转；页面其余部分都是围绕主体展开的边注。（适用于：单品品牌——手表、香水瓶、瓶子。）
6. 固定叙事（滚动叙事） — 一个高达 2–4 屏的区域固定在原位，其内容以离散状态逐步推进（图像切换、文本切换、进度变化）。在页面中仅使用一次，作为核心展示内容。（适用于：任务概况、生产流程、建筑坍塌研究。）
7. 横向导航 — 页面主要沿水平方向滚动。各部分从左向右展开。垂直滚动被禁用，或仅用于展示细节。（适用于：钟表档案、博物馆展馆、电影制片厂的项目清单。）
8. 侧边栏 + 内容栏 — 持续显示的左侧边栏不滚动（导航、元数据、页脚信息）；右侧内容栏构成整个网站。（适用于：法律事务所、研究机构、学术出版商。）
9. 章节分隔 — 全视口章节分隔页，将风格迥异的区域隔开。每个章节都有自己的背景色、字体粗细和布局节奏。页面向下滚动时，风格随之改变。（适用于：多领域工作室、回顾展。）
10. 账簿 / 登记册 — 页面呈现为一份老式文件——提单、登记册或船舶清单。表格行占据主导，排版风格如同账簿。（适用于：候补名单、批次登记册、探险清单。）
11. 拼贴 / 网格打破者 — 杂志风格的不对称网格，并刻意打破常规——超大图像延伸至多个栏位、引言跨越栏间距、脚注置于页边。（适用于：编辑出版物、文化杂志、创意工作室。）
12. 单一物件，无界面元素 — 网站只有主体，可供旋转，下方配有一句简短说明。没有导航栏，没有页脚，几乎没有任何 UI。（适用于：艺术家单件作品发布、宣言式作品。）
13. 产品 UI 展示 — 首屏是对产品自身界面的逼真模拟（仪表板卡片、差异视图、命令面板）。适用于产品本身就是 UI 的科技/AI 品牌。（适用于：AI IDE、开发工具。）
14. 仪表板卡片网格 — 整个页面采用仿实时仪表板结构，包含实时计数器、迷你趋势图和闪烁指示点。（适用于：基础设施、网络安全、可观测性。）
15. 对话时间线 — 页面会随着用户滚动，播放一段模拟对话/文字记录/通话。功能说明固定在特定时刻。（适用于：语音 AI、支持平台、法律访谈。） 如何挑选概念：

• 从客户的核心事实出发。整家餐厅的身份都系于一份九道菜菜单，可选 索引手稿。以精准和单一机芯为身份标识的制表师，可选 基座上的陈列物件。品牌核心是一年一度旅程的探险公司，可选 钉住的叙事。
• 如果本次会话中上次用的就是这个概念，就不要选它。改选次优方案。
• 在编写任何 JSX 之前，先记下所选概念和一句理由。将它保留在提示词文件中，确保随时可见。

布局原则（适用于你选择的任何结构概念）：

• 有意打破网格。全宽内容之后接窄文本栏；超大图片延伸至屏幕之外；非对称双栏分屏（60/40、70/30）。
• 宽敞的留白不是浪费空间，而是奢华感的信号。各版块之间留出 8rem 以上的间距。
• 作品集或画廊可使用横向滚动版块（要做好，但不要用作主要导航模式——除非你有意选择了 横向导航）。
• 使用重叠元素：文字叠加在图片上、图片延伸出容器、元素跨越版块边界。
• 使用随滚动而移动的粘性元素——例如内容滚过时仍保持不动的标签。

彰显高级质感的具体微模式：

• 视觉内容使用砌体式或错落排列的网格，而非规整网格。
• 文字与图片重叠，并使用 mix-blend-mode 营造编辑式效果。
• 使用带编号或索引的版块，呈现清晰的推进顺序。
• 展示网格系统（使用低调的线条或列），并偶尔打破它。
• 内容随滚动而变化——不仅仅是出现，还会变形、缩放和重新定位。
• 列表（批次、清单、登记册）使用表格式／账簿式行，而非卡片网格。
• 表单字段应像编辑文档的组成部分，而非 SaaS 表单——衬线体输入框上方用小号等宽字体显示标签，不设轮廓线，只保留底边框。

禁止重复的设计（在同一技能会话中）：

• 不要让两个网站都采用“左侧栏固定＋右侧栏滚动”的流程版块。一个网站可以用，另一个要另想办法。
• 不要让两个网站都以 33/67 非对称主视觉开场。如果一个网站用了，另一个就改用居中舞台、全出血背景、账簿式布局，或者干脆不设主视觉。
• 不要让两个网站都以相同的“询价表单＋出版说明网格”组合收尾。改变结尾设计。

导航栏多样性——要留意这个不易察觉的失败模式。

最容易采用的默认方案，是一个 grid-template-columns: auto 1fr auto 顶栏，搭配“左侧品牌标记、中间放置内容、右对齐内容，并使用 mix-blend-mode: difference”。用了三个网站之后，这就开始像是品牌惯用风格，而非设计选择。在每次会话中，都要大幅改变导航设计：

• 完全不设导航（Single Object、No Chrome 品牌）。
• 将导航融入粘性侧栏（Sidebar + Column 品牌）。
• 底部固定的命令栏，样式类似 ⌘K 启动器（科技产品品牌——Cursor / Linear / Arc）。
• 居中嵌入的字标，下方以次级横条展开标签。
• 全宽横向滚动索引，兼作导航。
• 跑马灯导航——版块名称持续滚动。
• 左侧竖排导航，文字自下而上。
• 带实时运行指示点的状态栏导航。
• 跑马灯条带（基准价格、指标）加纤细的顶栏。

选择符合品牌和结构基因的导航——不要默认采用三栏顶栏。

避免默认采用编辑式奢华风格。 这项技能在压力下往往会偏向：暖奶油色底色、衬线展示字体（Fraunces / Cormorant）、等宽字体元数据、单一黄铜色点缀、字距较宽的全大写微型标签，以及 ◦ 项目符号。这确实是一种美学风格，适合高级定制、香水、高级料理和钟表业。但它不适合科技、AI、网络安全、消费电子、SaaS 或开发者工具；反复采用这种默认风格，会让一批网站看起来像是出自同一家代理公司。

如果领域是科技，美学风格应倾向于：纯白或近黑底色（而不是奶油色）；以新哥特式无衬线字体（Söhne 风格、Inter Tight、IBM Plex Sans、Instrument Sans）作为展示字体；将等宽字体用作展示字体，而不只是元数据；渐变发光边缘、已发布的 UI 截图、充满实时感的仪表盘卡片、与文案并列的键盘快捷键标签、作为主视觉呈现的代码块，以及虹彩／镀铬／玻璃质感，而非黄铜与纸张。请参考 Vercel、Cursor、Linear、Windsurf、Stripe、Figma、Arc、Zed、Raycast、Supabase、v0.dev、Anthropic、OpenAI。

3D 组件 — 核心差异化因素

使用这项技能构建的每个网站都包含 3D 组件。这是这些网站脱颖而出、区别于扁平设计的关键。但 3D 必须显得专业而精致——业余的 3D 还不如没有 3D。

不要使用 Three.js 几何图元（方块、圆柱体、圆锥体、球体）来构建 3D 对象。用方块搭出的汽车看起来像玩具，用圆柱体搭出的火箭看起来像示意图，用圆锥体搭出的火焰则很糟糕。Three.js 几何图元仅可用于微妙的氛围背景效果（粒子场、网格平面、漂浮圆点），绝不能作为主视觉。

步骤 1：深入研究行业

许多 AI 生成的“高端”网站看起来千篇一律，因为跳过了研究步骤，或研究得过于浅显，只写了两句话。真正搜集参考案例，是这项技能中提升质量最有效的手段。

深度要求： 至少研究 5 个真实的参考网站（不是 2 个）——既要涵盖最显而易见的行业领导者，也要包括同一领域中不那么知名的编辑类／文化类运营者。独特的设计手法通常来自那些不太知名的参考案例；知名案例则为配色奠定基础。

起始参考集合（继续扩展，别止步于此）：

• AI 工具／开发者工具／IDE → Vercel、Cursor、Windsurf、Linear、Stripe、Figma、Arc Browser、Zed、Raycast、Supabase、Replit、v0.dev、Anthropic、OpenAI。注意：优先采用深色主题或纯白主题、将等宽字体用于展示（而不只是元数据）、精确的网格、键盘快捷键界面元素（⌘K、⌘↵）、渐变发光边缘、首屏中带动画的代码块、仪表盘磁贴网格、小型大写等宽字体子章节标题、采用 <code> 样式的重点提示。交互式首屏通常呈现动态的产品 UI 快照，而不是静态图片。
• 网络安全／基础设施 → Cloudflare、Tailscale、1Password Business、Chainguard、CrowdStrike、Datadog Security、HashiCorp、Teleport。注意：扫描光束首屏动画、镶嵌式防御网格、富有实时感的状态指示器、绿色／琥珀色的“运行正常”指示灯、高密度数据呈现，而非大面积留白。
• 企业 AI／语音 → Anthropic、OpenAI Platform、ElevenLabs、Vapi、Retell AI、Bland AI、Cohere、Deepgram、Cartesia。注意：暖调近黑色底色、编辑风格衬线展示字体、将实时转录内容作为首屏元素、将延迟数字作为排版元素。
• 航空航天／国防 → SpaceX、Rocket Lab、Blue Origin、Sierra Space、Axiom、The Planetary Society、Royal Aeronautical Society。注意：深色主题、简洁的无衬线字体、全幅摄影、任务剖面图、极简的色彩点缀。
• 汽车 → Porsche、Rivian、Lucid、Singer Vehicle Design、Pagani、David Brown Automotive、Coachbuild.com。注意：富有戏剧感的产品摄影、机械图纸、沉浸式全屏首屏。
• 时尚／奢侈品 → Bottega Veneta、Celine、The Row、Margiela、Lemaire、A.P.C.、Phoebe Philo、Hermès。注意：极度克制的排版、衬线展示字体、近乎无声的留白。
• 美食／餐厅 → Noma、Eleven Madison Park、Alinea、Central (Lima)、Atomix、Chefs Club、René Redzepi's archive。注意：编辑风格摄影、柔和色调、手稿式菜单排版、按菜品逐道呈现的节奏。
• 香氛／香水 → Le Labo、Byredo、Frédéric Malle、Lubin、Maison Francis Kurkdjian、Diptyque、Santa Maria Novella。
• 建筑 → 2x4、Olson Kundig、Herzog & de Meuron、Kengo Kuma、SANAA、David Chipperfield。
• 制表 → F.P. Journe、A. Lange & Söhne、Philippe Dufour、Akrivia、Grönefeld、Urban Jürgensen。
• 艺术／画廊 → David Zwirner、Gagosian、Hauser & Wirth、Galerie Lelong、White Cube、Pace。
• 出版／编辑 → New York Review of Books、Granta、The Paris Review、Apartamento、Zeit Online、MIT Press。
• 音乐／唱片公司 → ECM Records、Warp、Mute、Nonesuch、Erased Tapes、Kompakt、Sub Pop。
• 私人财富／金融科技 → Addepar、Masttro、Pictet、Edmond de Rothschild、BlackRock Aladdin、Stripe。

如何开展调研：

1. 找到 5 个网站。 使用 web_search："[field] award-winning website"、"[field] Awwwards"、site:awwwards.com [field]、"[field] FWA winner"。5 个网站中至少有 2 个应是较少被关注的编辑／文化类参考，而非行业巨头。
2. 使用 web_fetch 逐一研究。 提炼模式，而不是凭感觉。对每个网站，具体记录：主要展示字体、次要正文字体、以十六进制近似值表示的配色、结构特征（目录中的哪个概念）、该网站独有的一项标志性设计手法。
3. 在编写代码前，先写一份 6–10 行的设计简报。 在 prompt.md 中写一个“Design reference pull”区块，列出 5 个网站、要借鉴的 3 个具体模式（并注明出处网站）、配色（十六进制）、字体栈，以及选定的结构特征。
4. 不要照搬，要进行组合。 从每个参考中各取一个元素；将它们组合起来，才能让网站显得原创，而不是克隆品。 你构建的设计应当让人觉得它与这些真实的竞品相得益彰——既不格格不入，也不照搬其中任何一家。

步骤 2：从 Spline 获取与主题相关的 3D 场景

Spline（spline.design） 是一个 3D 设计平台，拥有大型社区素材库，提供专业且可嵌入的 3D 场景。只有当访客瞥一眼就能立即明白它代表什么时，Spline 场景才配得上出现在高端网站上。与主题毫无关联的精美场景，比没有场景还糟——它会削弱「每个像素都经过精心设计」的感觉，让人觉得「设计师随手找了个很酷的 3D 场景」，这与高端感背道而驰。

绝不使用真实品牌产品场景

Spline 社区场景经常描绘真实的注册商标产品：Nike Air Jordan、Sony WH-1000XM5、Apple Watch、Beats Studio、Samsung Galaxy、Tesla Cybertruck。**这些场景不能用于虚构品牌的网站。**使用它们会引发三个相互叠加的问题：

1. **法律问题。**真实品牌产品拥有商标、外观设计专利和许可协议。在虚构的「Trio Nord」鞋履品牌网站上放一只 Nike 球鞋，至少会造成商标混淆，最坏的情况则是构成侵权。
2. **叙事问题。**认出产品的访客——而且多数人都会认出来——会立刻知道这个网站在骗人。一旦被认出，奢华的幻象就会崩塌。
3. **缺乏特色。**一个因为 Nike 设计师或 Sony 可视化设计师制作了它而存在的场景，看起来只会像「有人在 Spline 上复刻了一款知名产品」，永远不会像是我们的产品。

规则：在决定采用某个 Spline 场景之前，先问自己：*这个场景中的物品，是真实品牌推出的、可明确识别的产品吗？*如果是——无论渲染效果多好，都要放弃。改为寻找抽象、能代表品类或原创设计的场景：

• 不要用 Nike Air Jordan，改用普通的手工楦制皮鞋，或抽象的鞋履轮廓。
• 不要用 Sony 耳机，改用抽象的悬浮音频环几何造型，或普通的极简包耳式耳机。
• 不要用 Apple Watch，改用无品牌标识的表圈／表盘，或机械机芯示意图。

如果找不到适用于该主题的无品牌替代方案，可以 (a) 改用普通无品牌产品的摄影图，(b) 制作 SVG 插画，或 (c) 选择其他领域。

先定领域，而不是先找场景——素材获取的方向很重要

一个常见的误区是：手头已经有可用的 Spline URL，于是编造一个领域来为它找理由。这会显得很牵强。「钢笔墨水制造商」之所以能成为高端品牌，并不是因为有人想要一个这样的品牌——而是因为你有一个暗色液体场景，就围绕它搭起了纸牌屋。提示词会暴露这一点。

正确顺序是：

1. **选择领域。**选择一个真实可信的奢侈／高端行业，例如汽车、制表、高级时装、香水、烈酒、鞋履、音频、眼镜、家具、酒店服务、皮具、餐具、护肤、私人医疗等。用户看到完成的网站后，应当能立刻认可这属于一家真实的企业。钢笔墨水不属于此类。
2. **明确该领域内的产品。**具体来说，主题是什么？戒指、运动鞋、一副包耳式耳机，还是一把厨师刀。
3. **然后再在 Spline 中搜索该产品。**使用关键词映射扩展。my.spline.design/ 和 prod.spline.design/ 这两类 URL 都要用。
4. 如果找不到与主题相关的场景，就更换领域——不要反过来扭曲领域来迁就已有场景。

一批健康的网站应涵盖读者能够辨认的、真正不同的行业。如果一批网站的共同点是「现有 Spline URL 暗示的是什么领域，就做什么领域」，那就不能称为作品集，只能算是在为选择找理由。

场景唯一性——同一会话内不得复用

在单次会话／一批网站中，任何两个网站都不得使用相同的 Spline 场景 URL。 在多个网站中重复使用同一场景，就像透出了素材库里的库存图片，也会彻底推翻 SKILL 所声称的“每个网站都拥有独特身份”。

• 如果你在一个网站上用了 worldplanet，下一个网站就不要再用，无论它与新领域看起来多么“契合”。另找一个场景。
• 如果找不到适用于新领域的独特场景，就改用摄影图片或确定性的 SVG／CSS 插图——绝不要重复使用。
• 即使两个场景看起来可以互换（两个不同的地球场景、两个不同的流体场景），也不要在同一批网站中都使用。每批只用一个地球场景、一个流体场景。
• 每次新建 prompt.md 时，都要在文件顶部列出本次会话中之前的网站已使用的 Spline URL。确认新网站的 URL 不在列表中。

首要原则：主题要字面对应，而非隐喻对应

只有当 Spline 场景如实呈现网站品牌的主题时，才可以使用。即使隐喻很诗意，也不接受：

• 流体场景适用于墨水制造商（流体就是墨水），但不适用于餐厅（菜单旁边的黑色流体不能用汤汁来解释）。
• 地球场景适用于航天公司（地球是乘客看到的景象）或制图师（地球是他们绘制地图的对象），但不适用于“业务遍及全球”的家族办公室（这种关联只是隐喻）。
• 手表场景适用于钟表匠，不适用于“珍惜时间”的咨询公司。

使用任何 Spline 场景前，都要在 prompt.md 中明确写出：“场景呈现的是 X。我的网站主题是 X。”如果这两个 X 不是同一个名词，就拒绝使用该场景。品牌本身必须从事场景所呈现的事物，而不只是象征性地提及它。

**两秒测试仍然适用：**不看说明文字，观众应该能说出场景的主题。“好看的抽象构图”不算主题。

主题协调性——场景与网站的视觉风格必须相融

Spline 场景在渲染时已经自带背景色和光照氛围。 如果背景与网站的配色冲突，场景看起来就会像被抠出来贴上去一样——无论 3D 本身多么高级，效果都会显得业余。确定使用某个场景前，请检查：

• 深色场景搭配深色网站——可行。场景的黑色边缘会融入页面。
• 浅色场景搭配浅色网站——可行。场景的浅色背景会延展页面的纸面质感。
• 深色场景搭配浅色网站——通常不合适（看起来像页面上被打了个洞）。只有采用刻意设计的带框视口处理方式时才可接受（比如像挂在墙上的照片一样，用一个带边框的“窗口”展示深色场景）。
• 浅色场景搭配深色网站——同样不合适，只是情况相反。缓解方法也相同。

在 prompt.md 中写明场景的原生背景色和网站的基底色。如果两者明暗相反，且没有采用带框视口处理方式，就换一个场景或换一种主题。

搜索前扩展搜索词汇

在 Spline 中搜索时，绝不要只搜主题词。单个关键词会漏掉 90% 的相关场景——大多数创作者会用作品中的具体元素（车轮、轮胎、车头灯）命名，而不是用类别名称。

搜索前，先构建一个包含至少 8–12 个词的关键词列表，涵盖：

• 主题本身——汽车、手表、香水瓶
• 同义词／类别词——轿车、跑车、车辆、超级跑车；时计、计时码表；香水、香精、香氛
• 标志性部件和特写——车轮、轮胎、轮辋、发动机、排气管、仪表盘、方向盘、车头灯；齿轮、陀飞轮、表冠、表盘、机芯；瓶子、玻璃、液滴、喷雾器
• 材料和表面——铬、金属、皮革、碳纤维；黄铜、铂金、黄金、钢；水晶、玻璃、琥珀色液体
• 工艺／环境——组装、工作室、赛道、展厅；工坊、制造、放大镜；药剂师、实验室
• 象征／隐喻——地平线、运动线条；轨道、星座、星星；花朵、烟、蒸汽

还要搜索 Awwwards、Codrops、Tympanus、Dribbble、Twitter/X，以及生产站点 HTML（"<iframe" "my.spline.design"、"<spline-viewer" "scene.splinecode"、site:codepen.io "my.spline.design"、site:github.com "my.spline.design"）。从在线站点中正常工作的 iframe 找到的 URL 保证可以渲染。

至少进行三轮搜索：

1. Slug／主题搜索——对关键词列表中的每个词直接使用 site:my.spline.design [keyword] 搜索。
2. 社区页面搜索——搜索 community.spline.design/tag/[keyword]。
3. 采集搜索——搜索 "<iframe" "my.spline.design/[topic keyword]"，查找已嵌入在线生产站点的 URL。

Spline URL 格式参考——了解你拿到的是什么

你会遇到 四 种 Spline URL 格式，其中只有两种可用作嵌入。

URL 格式	类型	可用作嵌入？	用法
community.spline.design/file/[uuid]	社区画廊页面（包含 JS 查看器的 HTML）	❌ 否	会发送 X-Frame-Options，阻止 iframe。其 HTML 也不会公开嵌入 URL——my.spline.design slug 要等用户点击 Share 后才会由客户端添加。
app.spline.design/community/file/[uuid]	Spline 编辑器，打开对应的社区文件	❌ 否	这是编辑器页面，不是嵌入内容。
my.spline.design/[slug]/	已发布的 HTML 场景页面	✅ 是，通过 iframe	<iframe src="https://my.spline.design/[slug]/">
prod.spline.design/[id]/scene.splinecode	原始运行时二进制文件	✅ 是，通过 spline-viewer	<spline-viewer url="https://prod.spline.design/[id]/scene.splinecode">

**必须避免的关键误用：**不要将 .splinecode URL 放入 <iframe src>——它会渲染成损坏的占位内容，或被下载为二进制文件。请使用 Web 组件。反过来，也不要将 my.spline.design/ URL 放入 <spline-viewer url>——查看器需要的是运行时二进制文件，而不是 HTML 页面。

**绝不要编造 slug。**社区文件 UUID 与已发布场景的 slug 是不同的标识符；猜测 slug 几乎总会导致 403。如果无法确认 URL 返回 HTTP 200，就说明它不存在。

社区 URL：一个重要的现实

位于 https://community.spline.design/file/[uuid] 的场景无法直接通过 iframe 嵌入——社区域名会发送阻止框架嵌入的 X-Frame-Options 标头，而且 Google 不会索引其底层的 my.spline.design/[slug]/ URL。当搜索结果中出现看起来完美的社区场景时，你不能直接通过 iframe 嵌入 community.spline.design/file/...。

按可靠性从高到低排列的变通方法：

1. 请用户打开社区文件，点击 Share → Public URL，然后粘贴 my.spline.design/… 链接。当你找到了理想场景，却无法提取其嵌入 URL 时，这是正确的做法。
2. 检查创作者是否在其作品集上链接了该场景——许多 Spline 创作者会在自己的个人网站上嵌入场景。
3. Remix 工作流——用户打开社区文件，点击 Remix，混音后的副本便会归属于其账号，并拥有自己的公开 my.spline.design URL，用户可以分享该 URL。
4. 接受这一限制——如果无法验证某个 URL，就不要猜测 slug。

Spline 嵌入——万无一失的模式（两种方法均适用）

Spline 尺寸问题只有一个根本原因：场景的内部画布会填满整个容器，而且3D 对象周围的空间会填充场景的内部背景色——该颜色默认为创作者选择的中性色，而不是你页面的底色。当你把场景放进一个高容器时，对象所在的部分看起来正常，其余部分则像一片纯色空白。这片空白就是场景的背景，并非渲染错误。

解决方法有三个部分，始终要一起使用：

1. 明确指定容器尺寸——宽度、高度、位置和 overflow:hidden。绝不要依赖场景自行调整尺寸。
2. 让场景元素填满容器——position:absolute, inset:0。
3. 让场景背景与页面底色一致——通过 <spline-viewer> 上的 background 属性实现；对于 iframe，则选择原生背景已经匹配的场景。

方法 1——iframe 嵌入（适用于 my.spline.design/[slug]/ URL）：

// Container — always defines size + overflow:hidden
<div
  style={{
    position: "relative",
    width: "100%",
    height: "100%",           // or a specific value / aspect-ratio / vh
    minHeight: 420,           // guarantees a usable minimum
    overflow: "hidden",
    background: "#0A0B0F",    // matches the page ground — seen during load
  }}
>
  {/* skeleton loader underneath — visible until Spline paints */}
  <div
    style={{
      position: "absolute",
      inset: 0,
      background:
        "linear-gradient(110deg, #0A0B0F 30%, #151821 50%, #0A0B0F 70%)",
      backgroundSize: "200% 100%",
      animation: "skl 1.8s ease-in-out infinite",
      zIndex: 0,
    }}
  />
  <iframe
    src="https://my.spline.design/[scene-slug]/"
    style={{
      position: "absolute", inset: 0,
      width: "100%", height: "100%",
      border: "none", display: "block",
      zIndex: 1,
    }}
    title="3D Scene"
    loading="lazy"
    allow="autoplay; fullscreen"
  />
</div>

无法指示 iframe 使用何种背景渲染——你只能使用创作者预设的背景。如果背景与页面不匹配，可以 (a) 接受带框视口的处理方式（在场景周围放置带可见边框的卡片），或 (b) 改用同一场景的 .splinecode URL，并使用网页组件（见下文），它可以覆盖背景。

方法 2——<spline-viewer> 网页组件（适用于 prod.spline.design/[id]/scene.splinecode URL）：

对于注重主题协调性的技术网站，这是首选方法，因为 <spline-viewer> 提供了 background 属性，可以完全替换场景的内部背景。

// Inject the viewer script once per app (put in main.jsx or the first component that uses it):
useEffect(() => {
  if (document.querySelector('script[data-spline-viewer]')) return;
  const s = document.createElement("script");
  s.type = "module";
  s.src = "https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js";
  s.setAttribute("data-spline-viewer", "1");
  document.head.appendChild(s);
}, []);

// Then render the viewer inside a sized container.
// Use dangerouslySetInnerHTML because JSX can't parse the custom tag's `background` attribute as a color.
<div style={{ position: "relative", width: "100%", height: "100%", minHeight: 480, overflow: "hidden" }}>
  <div
    dangerouslySetInnerHTML={{
      __html: `<spline-viewer
        url="https://prod.spline.design/[id]/scene.splinecode"
        background="#0A0B0F"
        style="position:absolute;inset:0;width:100%;height:100%;display:block;"
      ></spline-viewer>`,
    }}
  />
</div>

background 属性接受任何 CSS 颜色值——#0A0B0F、transparent、rgba(11,16,20,0.9)。**将其设为页面的底色。**3D 对象周围的空白区域现在会与页面融为一体，“下半部分是黑色”的问题也会随之消失。

Spline 场景类型——避免“英雄区”场景

并非所有 Spline 场景都是独立的 3D 对象。社区中有许多场景的标题是：

• “压纹玻璃棱镜——英雄区 UI 概念”
• “AI 落地页英雄区”
• “带 CTA 的 SaaS 英雄区”

这些场景包含自身预先嵌入的类 HTML 文本、按钮和布局，并作为 3D 构图的一部分进行渲染。嵌入这类场景后，你的英雄区里就会出现一个完整的预设计英雄区——场景自身的文本会与页面文本冲突，场景自己的 CTA 也会与你的 CTA 争夺注意力。

**在选定场景之前，先阅读其标题。**如果标题中包含 “hero section”、“landing page”、“UI concept” 或 “website template”，就要谨慎对待。打开场景查看，然后选择以下一种做法：

• 接受该场景作为英雄区（删除上层自己的英雄区 HTML）。
• 拒绝该场景，寻找纯对象场景（标题仅为对象名称，如 “watch”、“shoe”、“orb”，而不是某种构图）。

摄像机取景——如何修复“物体太小 / 缩放过大”

如果场景渲染时的缩放比例不对（物体在大画布上显得很小），原因是创作者预设的摄像机。以下三种修复方式按简单程度排序：

1. CSS 变换——将查看器包在一个容器中，并对内部元素应用 transform: scale(1.4)。整个渲染画布都会放大；容器的 overflow: hidden 会裁掉边缘。简单易用，适用于 iframe 和 Web 组件。
2. 缩小容器宽度——Spline 画布会自动适应。容器越窄、越高，场景通常会放得越大；容器越宽、越矮，周围的空白通常越多。调整容器的纵横比，让画面裁切得更贴近物体。
3. 使用 React Spline 的 setZoom()——仅适用于使用 @splinetool/react-spline 的情况（不适用于 <spline-viewer>）。onLoad 回调会收到一个带有 setZoom(level) 方法的 Spline Application 对象。加载时调用 application.setZoom(1.5)。

加载状态——绝不要显示空白

Spline 场景是 1–16 MB 的二进制文件。在快速网络连接下，加载需要 2–8 秒。在此期间，空白的白色视口是最糟糕的体验。

始终在场景下方、同一容器内放置骨架屏加载器。容器将骨架屏作为背景（通过闪烁的渐变动画实现），场景加载后则会显示在其上方。无需通过 JavaScript 协调。

@keyframes skl {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

骨架屏应使用页面的底色和一种稍浅的色调。深色网站上绝不要使用白色骨架屏。

相关性检查——确定采用前先检查

找到候选场景后，进行以下四项检查。任何一项未通过，都应继续寻找：

1. 链接确实有效。 curl -I [url] 返回 200，而不是 403/404。根据社区 UUID 猜测的 slug 几乎总是返回 403。如果无法确认返回 200，就说明该 URL 不存在。
2. 渲染效果符合预期。 在浏览器（或预览 iframe）中打开 URL，并亲自查看。许多 slug 写着“rocket”或“robot”的 Spline URL，实际却是色彩艳俗的低多边形卡通场景。slug 不代表质量——亲眼所见才是。决定让网站使用该场景前，先截取 iframe 的屏幕截图。
3. 主体辨识度——没有说明文字、只看两秒，观众能正确说出主体是什么吗？（“一辆汽车。”“一枚火箭。”“一个香水瓶。”）“构图不错”不算主体。
4. 品牌契合度——场景的配色、光影氛围和精致度是否符合品牌方向？低多边形玩具车风格不适合奢侈品牌。霓虹发光的赛博机器人不适合医疗 AI 公司。

不要跳过第 2 步。 slug 会骗人。在围绕某个 Spline 场景设计整个网站之前，必须先在真实浏览器中目视确认每个 Spline URL。

构建后检查渲染尺寸 — 必须执行

确认 URL 可以正常访问，并不等于确认场景在你的布局中以正确尺寸渲染。Spline 场景有自己的内部摄像机和取景方式——将场景放进小视口、宽幅横幅或比例不协调的容器中，往往会导致主体被裁出画面，或缩小成一个小点。

构建网站后，在宣布完成之前，请按顺序执行以下操作：

1. 启动预览。
2. 加载页面并等待 6–10 秒，让 Spline 运行时完成加载。
3. 截取主视觉区域的屏幕截图。
4. 查看截图。场景主体必须：
   • 清晰可见（不能被裁到一侧，也不能被你忘记设为透明的遮罩挡住）
   • 比例恰当（不能只占 1600px 容器的 4%——应达到预期尺寸）
   • 完整无缺（模型不能被你的排版图层切成两半）
5. 如果有任何一项不符合要求：调整容器宽高比、调整 iframe 大小、通过对 iframe 使用 transform: scale() 为场景增加留白，或更换场景的位置布局方式（舞台／背景／搭配）。
6. 再次截图。重复以上步骤，直到场景渲染正确。

常见尺寸问题及修复方法：

• 场景在超大容器中显得很小 → 场景摄像机使用固定缩放级别，而创作者设置的比例与你的容器不同。可以（a）将场景放进尺寸较小且宽高比相匹配的容器，或（b）对 iframe 应用 transform: scale(1.4) 来放大。
• 场景被裁到一侧 → 场景的自然中心位置偏移；对 iframe 使用 transform: translateX() 将场景重新居中。
• 场景融入深色背景而消失 → CSS 遮罩过重，或网站背景让场景显得过暗。降低遮罩不透明度。使用 background 属性。
• 场景背景色与网站不协调 → 你违反了主题协调规则；使用 background 属性（适用于 spline-viewer），或选择其他场景。

这一步不可省略。包含位置偏移或尺寸错误的 Spline 场景的网站，严格来说比使用构图良好的静态图片更糟。

位置布局也是相关性的一部分

即使场景选对了，位置不佳也会让它失效。选择以下一种空间布局逻辑——不要只是把场景塞进面板里，然后寄希望于效果不错：

• 舞台 — 场景以置于基座上的产品为构图。占据整个视口（或较大的受限区域），居中展示，周围排布文字。适用于汽车、手表、瓶子等实体物品。用户可以旋转物品。这通常是最佳选择。
• 背景 — 场景铺满整个视口，位于主视觉文字后方，并叠加渐变遮罩以确保文字清晰可读。场景用于营造背景氛围，而非作为焦点。适用于主体突出、即使在 20% 不透明度下仍清晰可辨的场景（地球、火箭、行星）。
• 搭配 — 场景放在专属面板中（40/60 或 33/67 分栏），文字位于另一侧。仅当场景主体与主题明显相关时才可采用。
• 编辑式排版中的对象 — 场景尺寸中等或较小，锚定在特定网格位置，如编辑式版面中的装裱照片。适用于宣言或故事板块，通常不适用于主视觉区域。

如果所选场景无法以清晰合理的方式适配以上任何一种布局，这就说明你应该另找场景，而不是硬塞进去。

兜底层级——始终分层呈现，绝不慌忙切换

如果全面搜索后仍无法确认有与主题相关的 Spline 场景，就不要强行使用。也不要构建脆弱的“如果 Spline 失败，就切换到照片”的 JavaScript 切换逻辑——这会造成明显的视觉故障。相反，将兜底内容放在 Spline 查看器下方，这样即使 Spline 加载缓慢或失败，用户仍能看到精心设计的内容。

层级顺序如下：

1. 客户提供的素材——如果用户有自己的 Spline 场景、产品渲染图或品牌视频，请先向他们索取。
2. 已验证的 Spline 场景（my.spline.design/[slug]/ 或 prod.spline.design/[id]/scene.splinecode），且确实展现了相关主题。
3. 专业静态摄影作品（客户提供，或从 Unsplash 中精心挑选），搭配 CSS 视差效果和细微颗粒／滤镜。务必通过截图确认图片显示符合预期。
4. CSS / SVG 插图——完全使用 HTML/CSS/SVG 制作的定制插图，例如日内瓦条纹、手绘图解或渲染的模型图。表现确定，不依赖网络。
5. Three.js 氛围层——简约的粒子场、网格平面或飘浮尘埃画布，仅用作背景氛围，置于静态图像或文字主视觉后方。绝不能作为主要视觉元素。

分层实现（在 Spline 下方使用纯 CSS 兜底）：

<div className="hero-stage">
  {/* Layer 0 — always visible. The base fallback (photo or illustration). */}
  <div className="hero-fallback" />

  {/* Layer 1 — Spline paints over the fallback if/when it loads.
      If Spline 404s, never loads, or is disabled, layer 0 remains visible. */}
  <div
    className="hero-scene"
    dangerouslySetInnerHTML={{
      __html: `<spline-viewer url="..." background="transparent" style="..."></spline-viewer>`
    }}
  />
</div>

/* CSS */
.hero-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero-fallback {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-[verified-id]?w=1800&q=85");
  background-size: cover; background-position: center;
  filter: saturate(0.9) contrast(1.05);
  z-index: 0;
}
.hero-scene { position: absolute; inset: 0; z-index: 1; }

当 Spline 使用 background="transparent" 时，3D 对象周围的空白区域会露出下方的兜底照片。页面始终有可见的主视觉——Spline 是增强效果，而非必需内容。

摄影兜底——验证图片，不要猜测

Unsplash URL 用起来很方便，但不加载就无法验证。像 https://images.unsplash.com/photo-1548484352-ea579e5233a8?w=1200&q=80 这样的 URL 看起来很具体（其中包含照片 ID），但摄影师可能已替换或删除该文件；裁剪方式也可能与你的预期不同；在不同的视口宽高比下，看到的主体甚至可能与照片命名所指完全不同。

使用摄影作品作为兜底时：

1. 优先使用客户提供的图片。 向用户索取产品照片。
2. 如果必须使用 Unsplash，请选择你已经看过的照片（通过能够渲染该 URL 的工具，或请用户确认照片）。不要因为照片 ID 的文件名看起来符合主题就选用——务必先验证。
3. 构建完成后，在实际页面中截图查看照片。 仔细检查并确认主体、裁剪方式和色彩处理效果。
4. 如果照片的呈现效果不符合预期，就换一张。 使用准确、具体的名词重新搜索 Unsplash，然后重新截图确认。

如果没有相关的场景或照片，确定性强的 CSS/SVG 插图始终是有效替代方案——完全在页面内构建，不依赖网络，且每次呈现都一致。示例：CLT 木板的剖面图、制表师表桥上的日内瓦条纹、运动鞋轮廓，或由锥形渐变构成的交互式球体。

无关的 3D 场景即便再漂亮，也会损害奢华质感。精心挑选的静态图像或 SVG 插图则不会。

色彩与字体必须符合行业特征

• 航空航天 / 国防：深色背景（#0A0A0A、#0C1222）、简洁的无衬线字体、尽量少用强调色（白色、银色或单一克制的蓝色）。想想 SpaceX——而不是橙色和白色。
• 汽车：深黑色、戏剧性的灯光效果、高级无衬线字体或几何字体、金属质感的强调色调。想想 Porsche——克制、自信。
• 时尚 / 奢侈品：极致克制。展示文字使用衬线字体，正文使用纤细的无衬线字体。近黑色和灰白色。不用明亮的强调色。想想 Bottega Veneta。
• 食品 / 餐厅：暖色调（奶油色、炭灰色、低饱和度的大地色）、编辑风格的衬线字体、充足的留白。想想 Noma。
• 科技 / AI 工具：可以选择深色或浅色，但要避免千篇一律的紫色渐变。采用简洁、系统化的布局，并使用等宽字体作为展示字体。想想 Linear / Vercel / Cursor。
• 金融 / 法律：保守的配色（海军蓝、炭灰色、森林绿）、体现权威感的传统衬线字体、结构化网格。

会让网站显得不专业的糟糕配色：

• 航空航天使用橙色 + 白色（看起来像建筑公司）
• 所有场景都使用黑底亮青色（看起来像黑客电影）
• 不同行业使用同一种强调色

关键技术规则：

• 始终在导入 hooks 的同时 import React：import React, { useState, useEffect, useRef } from "react";
• 绝不使用 JSX 片段（<>...</>）——为了兼容性，请改用 <span> 或 <div>
• 使用 Spline 的 iframe 时，设置 loading="lazy"，并提供带样式的加载占位内容
• 使用图片时，始终为 Unsplash URL 添加 ?w=1920&q=80 参数
• 使用 Three.js 时：设置 alpha: true，使用 setPixelRatio(Math.min(window.devicePixelRatio, 2))，并在卸载时清理

滚动驱动的体验

滚动应该像一段有方向的旅程，而不只是向下浏览页面。

滚动驱动技术：

• 视差图层：多个元素以不同速度移动。跟踪 window.scrollY，并为不同元素应用不同的倍率。
• 水平滚动区块：用户垂直滚动时，区块内容水平滚动。对容器使用 position: sticky 和 overflow: hidden，然后根据滚动进度为内部内容设置 translateX。
• 滚动缩放：元素随着滚动逐渐从小尺寸放大到全尺寸。使用带阈值数组的 IntersectionObserver，或通过 getBoundingClientRect() 计算进度。
• 滚动时文本显现：滚动到相应位置时，逐个显现单词或文本行。将文本拆分到多个 span 中，并根据各自的位置触发动画。
• 与滚动关联的颜色过渡：用户在不同区块间滚动时，页面背景色或文字颜色平滑变化。
• 固定滚动序列：区块保持固定，同时其中的内容发生变化——图片轮播、文本切换或叙事推进。
• 穿越式缩放过渡：用户滚动时仿佛逐渐“缩放进入”内容——内容从小而遥远开始，逐渐放大至填满视口。

滚动进度的实现模式：

const getScrollProgress = (element) => {
  const rect = element.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  return Math.max(0, Math.min(1, 1 - (rect.top / windowHeight)));
};

useEffect(() => {
  let ticking = false;
  const onScroll = () => {
    if (!ticking) {
      requestAnimationFrame(() => {
        // update state based on scroll
        ticking = false;
      });
      ticking = true;
    }
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  return () => window.removeEventListener('scroll', onScroll);
}, []);

动效编排

除了滚动驱动效果，所有动效都应有明确方向并按顺序进行：

• 为所有动效设置交错效果——不要让任何元素同时移动。使用 animation-delay 或按顺序触发的计时器进行编排。
• 速度变化能带来生命力：快速进入（200–300ms）+ 缓慢稳定（500–800ms）。
• 缓动曲线决定动效的个性：平滑过冲使用 cubic-bezier(0.16, 1, 0.3, 1)，利落感使用 cubic-bezier(0.77, 0, 0.175, 1)，优雅的缓出使用 cubic-bezier(0.33, 1, 0.68, 1)。
• 为文本和图片使用 clip-path 揭示效果——展开的矩形或多边形。
• 使用拆分文本动效，让每个单词或字符独立运动。
• 在交互场景中使用跟随光标的元素或磁吸按钮。

彰显匠心的细节

这些细节虽小，却能让作品脱颖而出，呈现出高级质感，而不只是“还不错”：

• 自定义光标样式（小圆点光标，或靠近交互元素时会变化的光标）
• 滚动进度指示器（视口顶部的一条细线）
• 使用 scroll-behavior: smooth 或 Lenis 之类的库实现平滑滚动
• 精心设计的加载状态——与布局相匹配的骨架屏，或带有品牌特色的加载动画
• 状态之间的过渡（悬停、激活、焦点）经过仔细设计，而非使用默认样式
• 克制且统一地使用圆角——编辑风格／粗野主义风格可采用锐利直角（0），或使用非常明确的圆角数值；不要所有元素都用默认的 8px
• 在背景上叠加细微的颗粒／噪点纹理，增添温暖感和层次感（使用 SVG 滤镜）
• 将选中文字的颜色（::selection）设为与品牌风格一致
• 为 WebKit 浏览器设置滚动条样式

---

React 实现指南（.jsx）

结构

// Always use a default export with no required props
export default function SiteName() {
  return (
    <div>
      {/* Full implementation */}
    </div>
  );
}

字体加载

通过 <style> 标签中的 @import 从 Google Fonts 导入，或在组件中使用 <link>。务必提供经过仔细选择的回退字体栈。

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

可用库

• Three.js (r128) — 仅用于营造氛围的背景（粒子、网格）。导入方式：import * as THREE from 'three'。注意：r128 中没有 THREE.CapsuleGeometry。也没有 OrbitControls——请手动实现相机移动。
• 通过 CDN 脚本使用 @splinetool/viewer，以调用 <spline-viewer> Web 组件
• 使用 lucide-react 显示图标（但应克制使用——过度使用图标是 AI 生成内容的迹象）
• 使用 recharts 实现数据可视化
• 使用 d3 实现复杂动画／可视化
• 使用 lodash 处理实用功能
• 使用 Tone.js 处理音频

CSS 方案

使用内联样式或组件内的 <style> 标签。CSS 变量对于保持主题一致性至关重要：

:root {
  --color-bg: #FAF9F6;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-accent: #C8553D;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --space-unit: clamp(1rem, 2vw, 2rem);
}

动画模式

优先使用 CSS 动画和 IntersectionObserver 实现滚动触发效果。使用 useRef 和 useEffect 设置观察器，使用 useState 触发动画状态。

const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);

useEffect(() => {
  const observer = new IntersectionObserver(
    ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
    { threshold: 0.15 }
  );
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

响应式策略

优先面向桌面端设计，以提升视觉冲击力，然后再适配移动端。大量使用 clamp() 实现间距和排版的流畅缩放。在断点处重新调整布局结构，而不只是缩小尺寸。

---

提示词必须详细——采用清单，而不是段落

用户（或此技能）为新网站起草 prompt.md 时，简短的提示词只会产出简短的结果。提示词明确列出每项决策时，此技能才能发挥最佳效果。完整的提示词应按以下顺序包含每一项：

1. 领域优先声明——所属行业、行业内的具体产品，以及为什么这个领域是真实的（而不是为某个场景找借口）。
2. 场景／主题匹配——Spline URL、画面描绘的内容、网站主题、确认二者指的是同一事物、场景原生的背景色、网站的底色，以及主题和谐度判断。
3. 本次会话中已使用的场景——已用 URL 列表，并确认新 URL 不在其中。
4. 结构 DNA——选定的概念名称、先前网站的 DNA，以及确认新网站与之不同。
5. 设计参考——至少 5 个具体的真实线上网站，并逐一注明要借鉴的设计手法。对于科技／AI 网站，默认包括 Vercel、Cursor、Linear、Windsurf。
6. 配色——4–6 个十六进制颜色值，并标明其情绪作用（底色／文字色／强调色／次要强调色）。
7. 字体组合——分别列出展示字体／正文字体／等宽字体的名称。排除所有列入黑名单的字体（Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit）。
8. 导航模式——注明网站采用目录中的哪种导航变体；除非确实适合，否则明确说明不采用默认的顶部栏三列布局。
9. 品牌语调——用 3–5 句话校准语调。文案读起来是什么感觉？这个品牌不会说什么？
10. 结构——每个分区——注明名称、位置、内容和长度。6 个分区的提示词会生成一个包含 6 个分区的网站；含糊的“几个分区”则只会生成一个模板。
11. 具体文案句子——至少 3 句必须原封不动出现在网站上的具体文案（主视觉标题、引用文案、结尾语）。这些句子为语调定调。
12. 具体技术要点——如果是科技／AI 网站：快捷键标签、虚构代码块、具体定价档位、虚构 CLI 命令、虚构产品名称、标注为示意的虚构客户 Logo。如果是奢侈品网站：批次编号、委托登记簿、具体的材料来源。
13. 动效编排——2–3 种具体的动效技巧：一种主视觉入场动画、一种滚动驱动的行为、一种微交互。不要重复本次会话中先前网站使用过的技巧。
14. 关键规则／禁止事项——明确列出网站不得采用的内容：禁止的颜色、禁止的结构手法、先前网站使用过的禁止模式。
15. 渲染验证检查点——构建完成后，构建者必须截取的具体屏幕截图，以及需要留意的具体失败模式。

当这 15 项都有了具体、明确的答案时，提示词才算“完成”。含糊的回答（如“暖色调配色”“一些动效”“简洁布局”）会被拒绝——这正是此 SKILL 的失败模式。

流程

当用户要求制作高端网站时：

1. 先从领域入手，充分理解需求。 了解品牌、受众、目的和领域／行业。该领域必须是真实可信的高端行业，让访客觉得无需解释也合情合理，例如汽车、制表、高级时装、香氛、鞋履、音响、眼镜、私人医疗等。不要为了迁就现有的 Spline 场景而虚构小众品牌（如“钢笔墨水制造厂”“天文年历出版社”）。询问用户是否有想要使用的产品图片、品牌素材、视频或特定 3D 模型。
2. 深入研究行业。 至少研究 5 个真实的参考网站（兼顾行业巨头和不那么显眼的编辑／文化类从业者）。逐一记录主要展示字体、正文字体、十六进制调色板、所采用的结构基因，以及一个标志性设计手法。在网站的 prompt.md 顶部撰写一段 6–10 行的设计参考摘录。
3. 从 Spline 获取与主题相关的 3D 内容，并确认该内容为此网站独有。 为要展示的产品整理一份包含 8–12 个词条的关键词清单。进行三轮搜索：site:my.spline.design [keyword]、community.spline.design/tag/[keyword]、生产网站采集（"<iframe" "my.spline.design"、"spline-viewer" "scene.splinecode"）。两种嵌入格式均可接受。检查本次会话中先前网站用过的 Spline URL 清单——新网站的 URL 不得与其中任何一个相同。 如果所有可用场景都已用过，则改用摄影或 SVG/CSS 插图，不要重复使用。候选场景必须通过四项检查：可返回 200、加载后渲染质量符合预期、两秒内能说清主体是什么、氛围符合品牌。绝不可捏造 slug。拒绝描绘真实品牌产品的场景。确定摆放方式（展台／背景／陪衬／融入版面）后再做决定。
4. 按名称选择结构基因。 从结构基因目录中，为页面选择 一个主要概念，并将其作为一个单独的名词短语写在提示文件顶部。确认该概念与本次会话中上一个网站使用的概念不同。
5. 确定创意概念。 根据行业研究和结构基因，确立符合该领域视觉语言的创意方向。
6. 构建字体系统。 根据研究选择符合行业特点的字体。设置字号比例并明确层级。避免使用黑名单中的字体。
7. 设计滚动驱动的转场。 规划用户随滚动展开的浏览体验。全站至少使用 2–3 种不同的滚动技巧，但不要重复本次会话中先前网站用作核心亮点的技巧。
8. 精益求精。 定制选中文字的颜色、设计周到的悬停状态、精细调整间距、添加颗粒纹理和自定义滚动条。
9. 验证渲染效果——不可省略。 启动预览、加载页面，并等待 Spline 运行时加载 6–10 秒，然后截图检查。场景主体必须清晰可见、比例合适且完整；其原生背景色不得与网站底色冲突。如果场景被裁切、未居中、尺寸不当或与主题冲突，必须先修复再宣布完成。Spline 渲染失败的网站，远不如构图得当的静态图片。

不要解释自己正在“研究竞争对手”或“寻找 3D 素材”——只需专业地完成工作。让设计本身说明一切。