premium-web-design

# 高端 Web 设计 创建看起来属于 Awwwards 级别的 React (.jsx) 组件——那种让人惊叹“这是谁设计的？”的作品。这类网站的每一个像素都经过深思熟虑，每一个动画都经过精心编排，整体给人一种投入了专业创意人才和预算的高级感。 ## AI 美学的通病 大多数 AI 生成的网站都有可识别的“DNA”。避免这些需要明确知道它们长什么样。 ### 黑名单 — 绝对不要这样做 **排版罪行** - 将 Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit 作为主要字体——这些是“AI 模板”的代名词。（注：*Inter Tight* 是一个独立的字体家族，指标不同，可以使用。） - 全站使用单一字体家族 - 字体大小层级过于可预测 (64px → 32px → 18px → 14px) - 到处使用默认的字间距和行高 - 到处都是居中文本块，尤其是多行段落 **色彩罪行** - 紫到蓝的渐变 (AI 设计中最常见的陈词滥调) - 将靛蓝/紫罗兰作为品牌主色且没有上下文理由 - 白色背景 + 一个强调色 + 灰色文本 (SaaS 启动包风格) - 无缘无故在按钮或卡片上使用渐变 - 使用不透明度或半透明叠加层来替代真正的色彩选择 - 深色背景上的霓虹强调色 (“开发者作品集”风格) **布局罪行** - Hero → 3 列功能网格 → 推荐 → CTA → 页脚 (默认 SaaS 着陆页) - Hero → 数据栏 → 作品网格 → 关于分割 → CTA → 页脚 (“高级 AI”着陆页 — 同样公式化) - 任何可以在不同网站间互换的可预测的从上到下的分区顺序。每个网站必须有自己独特的结构 DNA — 不同的分区数量、不同的排序逻辑、不规则的分区分类 - 完美对称且卡片大小相等的网格 - 所有内容居中，所有内容都包含在最大宽度容器中 - 以圆角矩形加阴影作为主要 UI 元素 - 一行 3 或 4 个图标 + 标题 + 段落的卡片 - 带有标题 + 副标题 + 两个并排按钮的通用 Hero 区 - 只有文本的静态扁平 Hero 区 — Hero 区应该是沉浸式的空间体验 **动效罪行** - 滚动时元素从下方淡入 (被过度使用的 AOS 效果) - 所有元素使用相同的过渡 (相同的持续时间、相同的缓动、相同的方向) - 仅仅是放大或添加阴影的悬停效果 - 使用加载转圈而不是...