design-systems

设计系统技能

用于打造独特、令人难忘的网站设计的框架，避免千篇一律的“AI 垃圾风”。

绝对规则

• 禁止使用表情符号：生成内容中的任何位置都不得使用表情符号，包括标题、段落、按钮文字或其他任何文字。

设计思维框架

开始设计前，先了解背景，并确定一个大胆的美学方向：

1. 目的

• 这项设计要解决什么问题？
• 谁会使用它？
• 你希望用户采取什么行动？

2. 调性

不要从一份固定的通用风格列表中挑选。相反，应根据网站的主题、行业、文化和受众来确定每个设计方向：

• 像专业设计师一样思考，想象自己受聘专门负责这份设计需求。你会研究哪些视觉参考？会制作什么样的情绪板？哪些现实空间、物品、材料或文化产物能为美学风格提供灵感？
• 让每个设计方向扎根于主题。传统餐厅的设计方向可以探索质朴温馨、精致优雅或文化传承——绝不该是粗犷派混凝土风。科技初创公司的设计方向可以探索简洁精准、大胆颠覆或数据驱动的极简风——绝不该是温馨农舍风。
• 确保多样性真实可信。4 个方向应在色彩方案、字体、布局方式和氛围上有显著差异，但每个方向都必须像是为这种特定类型的网站精心构思、切实可行的设计。多样性应来自对主题不同侧面的探索，而非引入毫不相关的美学风格。
• 为每个方向起具体的名称。标题应体现扎根于主题的概念（例如，为瑞士木屋网站取名“温暖传承”或“阿尔卑斯优雅”），而不是“极简”或“大胆”这类通用标签。

3. 约束

• 技术要求（框架、性能、无障碍性）
• 品牌指南（如有）
• 内容要求

4. 差异化

什么能让人过目难忘？别人会记住的那一点是什么？

前端美学指南

你往往会生成千篇一律、“按常规分布”的结果。在前端设计中，这就形成了用户所说的“AI 垃圾风”。要避免这种情况：打造富有创意、别具一格、令人惊喜愉悦的前端。

字体排版

选择美观、独特、有趣的字体。

避免使用（过度使用／过于普通）：

• Inter
• Roboto
• Arial
• 系统字体
• Space Grotesk（被 AI 过度使用）

优先选择（别具特色）：

• 将独特的展示字体与精致的正文字体搭配
• 可考虑：Fraunces、Clash Display、Cabinet Grotesk、Satoshi、Outfit、Syne、DM Serif Display、Playfair Display、Cormorant Garamond、Archivo
• 字体个性应与品牌相符（科技：几何无衬线；奢华：精致衬线；创意：展示字体）
• 选择出人意料、富有个性的字体，提升前端美感

字体比例：

• 使用一致的比例（1.25 或 1.333）
• 标题应醒目突出
• 正文应易于阅读（至少 16-18px）

色彩与主题

坚持统一的美学风格。以主色为主、搭配鲜明点缀色的方案，胜过犹豫不决、均匀分布的配色。

策略：

• 单色搭配点缀色：单一色系 + 一种亮眼的强调色
• 互补对比：两种相对的颜色（注意饱和度）
• 类似色和谐：色轮上相邻的颜色
• 深色模式：不要简单反转颜色，而应专门为深色模式设计

避免：

• 白色背景上的紫色渐变（陈词滥调的 AI 美学）
• 均匀分布的彩虹色方案
• 对比度低、显得褪色的配色
• 将通用蓝色（#007bff）作为主色
• 犹豫不决、均匀分布的配色

色彩比例：

• 60% 主色（背景、大面积区域）
• 30% 次要色（容器、分区）
• 10% 点缀色（行动号召、重点内容）

动态效果与动画

动态效果与动画和色彩、字体排印一样，都是设计系统的组成元素——应当经过精心设计、保持协调，并契合网站的个性。优先采用纯 CSS 方案。

技法组合——从以下类别中选择，打造丰富、生动的体验：

类别	技法
入场动画	淡入上移、滑入、放大、剪切路径揭示——为一组元素设置交错延迟
悬停/焦点过渡	卡片上浮、按钮变形、下划线延展、色彩变化、阴影加深
持续的微妙动态效果	元素浮动、点缀元素脉动、装饰形状缓慢旋转、渐变变化
滚动触发的揭示效果	区块/元素进入视口时播放动画
背景动画	渐变色循环、图案移动、环境漂移
文本效果	字间距过渡、字重变化、标题色彩擦除效果

CSS 动画模式：

/* Staggered fade-up entrance */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Slide-in from side */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft 0.7s ease forwards;
}
@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* Scale reveal */
.scale-up {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleUp 0.5s ease forwards;
}
@keyframes scaleUp {
  to { opacity: 1; transform: scale(1); }
}

/* Continuous float — decorative elements */
.float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Gradient background animation */
.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover transitions */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Accessibility: always include */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

编排指南：

• 每个网站选择 2-3 种动态效果技法，并始终如一地微妙运用——不要在单个页面中堆砌所有技法
• 让动态效果契合网站个性：科技网站 = 精准、利落的节奏；奢华风格 = 缓慢、优雅的缓动；俏皮风格 = 富有弹性、充满活力的曲线
• 入场动画应遵循清晰的阅读顺序——从上到下、从左到右，依次错开
• 滚动揭示效果是影响力最大的模式：区块进入视口时播放动画，营造叙事逐步展开的感觉

空间构图

打破可预测的布局。采用出人意料的布局，避免泛泛的模式：

• 不对称：偏离中心的元素能营造视觉趣味
• 重叠：跨越边界的元素能增加层次感
• 对角线流向：用倾斜的元素引导视线
• 打破网格：让关键元素突破网格限制
• 留白：采用宽裕留白或受控密度（二选一）

发挥创意，做出契合具体情境、真正出人意料的设计选择。

背景与视觉细节

营造氛围与层次，而不是默认使用纯色：

技法	用途
渐变网格	营造现代、动感的观感
噪点纹理	增添温暖、触感质地
几何图案	营造科技感与精准感
多层透明效果	增添层次与精致感
戏剧性阴影	营造高级、凸显主体的效果
装饰性边框	营造编辑感与结构感
颗粒叠加效果	营造复古、模拟质感

图标设计

• 使用与主题美学相符的定制 SVG 图标
• 保持描边宽度和风格一致
• 图标应衬托内容，而非喧宾夺主

让复杂度与设计愿景相匹配

重要提示：让实现复杂度与美学愿景相匹配。

极繁主义设计需要：

• 包含大量动画的精巧代码
• 多个视觉层次
• 丰富的交互效果
• 密集的样式设计

极简主义设计需要：

• 克制与精准
• 仔细把控间距
• 微妙地调整字体排印
• 让每个细节都经过精心设计

优雅源于出色地实现设计愿景，而非不断添加功能。

设计多样性与变化

生成多个设计时：

切勿趋同

• 切勿趋同于相同的设计选择
• 每个设计都应各不相同
• 不同设计中应避免使用过度常见的字体（参见上方的 AVOID 列表）
• 每个设计都应真正独具特色

改变核心元素

色彩变化：

• 混搭浅色和深色主题
• 混搭暖色和冷色调配色
• 混搭单色和彩色风格

字体变化：

• 每次使用不同的字体组合
• 混搭衬线和无衬线标题
• 混搭优雅和粗犷的字体效果
• 改变字体大小和层级

布局变化：

• 混搭全宽和容器布局
• 混搭非对称和对称构图
• 改变布局密度（宽松与紧凑）

风格变化：

• 探索不同的美学方向
• 每个设计都应能成为一个独特、完整的网站的基础
• 避免设计趋于相似

确保有显著差异： 这些设计应在配色、字体、布局方式和氛围上各有特色，同时每个设计都应符合特定网站的情境，显得合理且经过深思熟虑。

请坚定地践行鲜明独特的构想。非凡的创意作品需要全力以赴，不要有所保留。