高端网页设计
创建 React (.jsx) 组件，使其看起来属于 Awwwards 级别——那种能让人问出“这是谁设计的？”的作品。这些网站中，每个像素都经过深思熟虑，每个动画都精心编排，整体印象是投入了严肃的创意人才和预算。
AI 美学问题
大多数 AI 生成的网站都共享一种可识别的 DNA。要避免它，就需要确切知道它是什么样子。
黑名单——切勿执行这些
排版罪状
- 将 Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit 作为主要字体——它们会暴露“AI 模板”的身份。（注意：Inter Tight 是一个单独的字体族，具有不同的度量标准，可以使用。）
- 整个网站只使用一种字体族
- 字体大小一成不变，层级可预测（64px → 32px → 18px → 14px）
- 各处都使用默认字距和行高
- 处处都是居中对齐的文本块，尤其是多行段落
色彩罪状
- 紫色到蓝色的渐变（最大的 AI 设计陈词滥调）
- 在没有上下文原因的情况下，将靛蓝/紫罗兰作为主要品牌色
- 白色背景 + 一种强调色 + 灰色文本（SaaS 入门套件）
- 按钮或卡片上无理由使用渐变
- 使用透明度或半透明叠加层来替代真正的色彩选择
- 深色背景上的霓虹强调色（“开发者作品集”外观）
布局罪状
- Hero 区域 → 三列功能网格 → 客户评价 → CTA → 页脚（默认的 SaaS 着陆页）
- Hero 区域 → 数据条 → 作品网格 → 关于团队 → CTA → 页脚（“极致 AI”着陆页——同样公式化）
- 任何可以在网站间互换的可预测的从上到下的区块顺序。每个网站必须有自己独特的结构 DNA——不同的区块数量、不同的顺序逻辑、无法整齐归类的区块
- 大小完全对称的网格和均等的卡片
- 所有内容都居中，所有内容都包含在一个最大宽度的容器中
- 带有盒阴影的圆角矩形作为主要的 UI 元素
- 图标 + 标题 + 段落卡片以 3 或 4 个一行排列
- 通用的 Hero 区域包含标题 + 副标题 + 两个并排按钮
- 仅包含文本的静态平面 Hero 区域——Hero 区域应该是沉浸式的空间体验
动效罪状
- 滚动时元素从下方淡入（过度使用的 AOS 效果）
- 所有元素都使用相同的过渡（相同的持续时间、相同的缓动函数、相同的方向）
- 悬停效果只是放大或添加阴影
- 使用加载旋转器，而不是骨架屏或编排好的揭示效果
图像与装饰罪状
- 使用斑点形状作为背景装饰
- 使用浮动几何形状（圆形、三角形）作为“设计元素”
- 通用的渐变网格背景
- 统一宽高比的图库网格
- 使用表情符号或通用线条图标作为区块标记
高端设计的真实面貌
高端网页设计通过克制、惊喜和对细节的执着来传达工艺。
排版即品牌标识
排版是 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 - 单色或类似色搭配加上一个对比时刻，比彩虹色系更显精致
- 正确的深色主题：不仅仅是在深灰色背景上显示白色文字，而是要考虑到背景的分层，并带有微妙的暖色或冷色色调
- 谨慎使用色彩效果更佳——在黑白主导的页面中，一个红色的链接比到处都是红色更加强而有力
布局即叙事
使用此技能最大的失败方式是：产出的网站表面看起来不同，但共享相同的底层结构——一个 Hero 区域、三个编辑区块、一个引语、一个表单、一个版权栏。在一批网站中，这会开始让人感觉像是有着不同颜色的模板。要主动避免这种情况，并刻意进行创新。
结构 DNA 唯一性规则：
在编写任何标记之前，大声说出主要的结构概念——一个名词短语，比如 “索引手稿” 或 “粘性水平立体模型”。在一批网站中，不能有两个网站共享相同的主要结构概念。 如果前一个网站是粘性滚动叙事，那么这个就不是。如果前一个网站是 33/67 的垂直分割，那么这个就不是。结构理念是用户首先注意到的——在结构不变的情况下改变颜色只是表面功夫。
结构 DNA 目录
这些是独特的主要结构。每次调用技能时，应选择一个概念并坚持使用它。不要在一个网站中混合两种结构（这会削弱两者的效果）。
- 索引手稿 (Index Manuscript) — 一个单一的长编辑列，没有分区。从上到下只有一个排印节奏。整个页面读起来就像一份碰巧是网站的手稿。（适用于：厨师的菜单、调香师的信、宣言。）
- 粘性水平立体模型 (Sticky Horizontal Diorama) — 页面是长垂直滚动，但你滚动时看到的内容是水平平移的场景。使用
position: sticky+translateX由滚动驱动。（适用于：委托作品的时间线、分阶段的过程、文物集合。） - 双面板永久分割 (Two-Pane Permanent Split) — 页面始终是 50/50（或 38/62）分割；一个面板是固定的，另一个滚动。导航在面板内进行，而不是通过滚动整个页面。（适用于：带有实时更新索引的档案、图书管理员目录。）
- 幻灯片序列 (Slide Sequence) — 全视口高度的“幻灯片”，每屏一张，具有捕捉滚动。每张幻灯片是完全不同的构图。（适用于：摄影师的作品集、画廊导览、编辑风格手册。）
- 托盘上展示的物品 (Staged Object on a Plinth) — 单个 3D/图像主题居中，可旋转，页面的其余部分是围绕该对象的边缘注释。（适用于：单品公司——手表、香水瓶、酒瓶。）
- 固定叙事 / 滚动讲述 (Pinned Narrative / Scrollytelling) — 一个 2–4 屏高的区域固定不动，而其内容通过离散状态推进（图像切换、文本切换、进度）。在页面中只使用一次作为核心。（适用于：公司使命介绍、生产过程、建筑坍塌研究。）
- 水平导航 (Horizontal Navigation) — 页面的主要滚动是水平的。区块从左到右阅读。垂直滚动被禁用或保留用于细节展示。（适用于：钟表档案、博物馆分馆、电影制片厂的片单。）
- 侧边栏 + 内容栏 (Sidebar + Column) — 持久的左侧边栏从不滚动（导航、元数据、运行页脚）；右侧列是整个网站。（适用于：律师事务所、研究机构、学术出版社。）
- 章节门户 (Chapter Gates) — 全视口的章节分隔符，分隔在色调上截然不同的区域。每个章节都有自己的背景色、排印权重和布局节奏。页面随着你的下降改变性格。（适用于：多学科工作室、回顾展。）
- 账本 / 登记册 (Ledger / Registry) — 页面呈现为老式文档——提货单、登记册、船舶舱单。表格行占主导地位；排版读起来像账本。（适用于：等待名单、批次登记、探险清单。）
- 拼贴 / 打破网格 (Collage / Grid-Breaker) — 杂志风格的不对称网格，带有故意的裂痕——超大图像渗入列中、引语跨越栏间距、脚注在页边距中。（适用于：编辑出版物、文化杂志、创意工作室。）
- 单一物品，无装饰 (Single Object, No Chrome) — 网站仅仅是主题，可旋转，下面只有一句简短的句子。无导航、无页脚、几乎没有 UI。（适用于：艺术家的单件作品发布、宣言作品。）
- 产品 UI 面板 (Product UI Slate) — Hero 区域是产品自身界面的真实模拟（仪表盘磁贴、差异视图、命令面板）。由产品本身就是 UI 的科技/AI 品牌使用。（适用于：AI IDE、开发者工具。）
- 仪表盘磁贴网格 (Dashboard Tile Grid) — 整个页面的结构像一个实时感强的仪表盘，带有实时计数器、迷你趋势线、脉动指示点。（适用于：基础设施、网络安全、可观测性。）
- 对话时间线 (Conversation Timeline) — 页面在用户滚动时回放模拟的对话/转录/通话。功能标注锚定到特定时刻。（适用于：语音 AI、支持平台、法律访谈。）
如何选择概念：
- 从客户的核心事实出发。一个其整个身份就是一份九道菜菜单的餐厅想要 索引手稿。一个以精确和单一机芯为身份的手表匠想要 托盘上展示的物品。一个品牌是一次年度之旅的探险公司想要 固定叙事。
- 如果该概念是本次会话中上次使用的，则拒绝它。选择次优选项。
- 在编写任何 JSX 之前，写下概念和一句理由。使其在提示文件中可见。
布局原则（在你选择的任何结构概念内应用）：
- 故意打破网格。全宽的时刻后面是狭窄的文本列。超大图像从屏幕边缘溢出。不对称的两列分割（60/40，70/30）。
- 慷慨的空白不是浪费的空间——它是奢侈的信号。区块之间的内边距应为
8rem+。 - 用于作品集或画廊的水平滚动区域（做得好，而不是作为主要的导航模式——除非你故意选择了 水平导航）。
- 重叠元素——文本在图像之上、图像超出其容器、跨越区块边界的元素。
- 随滚动固定的元素——一个标签在内容滚动经过时保持不动。
被认为高端的特定微模式：
- 用于视觉内容的瀑布流或交错网格，而不是统一的网格。
- 使用
mix-blend-mode实现编辑效果的文本与图像重叠。 - 带有可见进度的编号或索引区块。
- 设计偶尔打破的可见网格系统（微妙的线条或列）。
- 在你滚动经过时变换的内容——不仅仅是出现，而是变形、缩放、重新定位。
- 用于列表（批次、清单、登记册）的表格 / 账本行，而不是卡片网格。
- 看起来像编辑文档一部分的表单字段，而不是 SaaS 表单——衬线输入框上方的小型等宽标签，无轮廓，仅底部边框。
（在技能会话内）禁止重复：
- 不要给两个网站都设置“固定左栏 + 滚动右栏”的过程区。为一个网站选择它；为另一个发明其他的。
- 不要用 33/67 不对称 Hero 区域打开两个网站。如果一个这样做了，下一个应该以居中舞台、全出血背景、账本或根本没有 Hero 区域开始。
- 不要以相同的“咨询表单 + 版权栏网格”对结束两个网站。改变结尾方式。
导航栏多样性——一个需要注意的无声失败模式。
最容易的默认设置是一个 grid-template-columns: auto 1fr auto 的顶部栏，带有“左侧品牌标志，中间某物，右侧对齐某物，mix-blend-mode: difference”。在三四个网站之后，它开始看起来像一个签名——而不是一个设计选择。在每次会话中，大幅改变导航栏：
- 根本没有导航栏（单一物品，无装饰的品牌）。
- 导航栏嵌入在固定侧边栏中（侧边栏 + 内容栏的品牌）。
- 底部固定的命令栏，样式类似
⌘K启动器（科技产品品牌——Cursor / Linear / Arc）。 - 内联居中文字标记，其下有标签作为辅助条分布。
- 全宽水平滚动索引，兼作导航栏。
- 跑马灯导航栏——连续滚动的滚动条，带有区块名称。
- 左侧垂直导航栏，从下到上书写。
- 状态栏导航栏，带有实时操作指示点。
- 跑马灯滚动条（基准价格、指标） 加上一条细的顶部栏。
选择属于品牌和结构 DNA 的导航栏——不要默认使用三列顶部栏。
避免编辑风格奢华的默认设置。
此技能在压力下会倾向于：暖奶油色背景，衬线展示字体（Fraunces / Cormorant），等宽字体元数据，单一的黄铜色强调色，宽字距大写微标签，◦ 项目符号。这是一个真实的美学，适用于高级定制时装、香水店、高级料理、钟表业。它不适用于科技、AI、网络安全、消费电子、SaaS 或开发者工具——并且反复地默认使用它会使同一批次中的每个网站看起来像是由同一家机构完成的。
如果领域是技术，美学应该倾向于：纯白色或近乎黑色的背景（非奶油色）；新怪诞无衬线字体（Söhne 感觉、Inter Tight、IBM Plex Sans、Instrument Sans）作为展示字体……