design-systems

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Systems Skill

设计系统 Skill

Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
用于打造鲜明、有记忆点且能避开千篇一律“AI slop”美学的 Web 设计框架。

Absolute Rules

绝对规则

  • NO EMOJIS: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text.
  • 禁止使用 EMOJI:生成内容中的任何位置都不得使用 emoji——无论是标题、段落、按钮文字还是其他文本。

Design Thinking Framework

设计思维框架

Before designing, understand the context and commit to a BOLD aesthetic direction:
设计前,应理解上下文,并坚定选择一种大胆的美学方向:

1. Purpose

1. 目的

  • What problem does this design solve?
  • Who uses it?
  • What action should users take?
  • 此设计要解决什么问题?
  • 谁会使用它?
  • 用户应该执行什么操作?

2. Tone

2. 基调

Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:
  • Think like a specialist designer who has been hired for exactly this brief. What visual references would you research? What mood boards would you create? What real-world spaces, objects, materials, or cultural artefacts inform the aesthetic?
  • Ground each direction in the topic. For a traditional restaurant, directions might explore rustic warmth, refined elegance, or cultural heritage — never brutalist concrete. For a tech startup, directions might explore clean precision, bold disruption, or data-driven minimalism — never cozy farmhouse.
  • Ensure authentic diversity. The 4 directions should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for this specific type of site. Diversity comes from exploring different facets of the topic, not from importing unrelated aesthetics.
  • Name each direction specifically. Titles should reflect the topic-grounded concept (e.g., "Warm Heritage" or "Alpine Elegance" for a Swiss chalet site), not generic labels like "Minimalist" or "Bold".
不要从固定的通用风格清单中挑选。应根据网站主题、行业、文化和受众推导出每一个方向:
  • 像专门受聘处理这份需求的设计师一样思考。你会研究哪些视觉参考?会制作哪些情绪板?哪些现实空间、物件、材料或文化艺术品能够启发美学?
  • 让每个方向都扎根于主题。对于传统餐厅,可以探索粗犷温暖、精致优雅或文化传承等方向——绝不能使用粗野主义混凝土风。对于科技初创企业,可以探索干净精准、大胆颠覆或数据驱动的极简主义——绝不能使用温馨农舍风。
  • 确保真实且有意义的多样性。4 个方向应在色彩、字体、布局方式和氛围上形成显著差异,但每一个都必须像是专为此类网站精心设计且合理可行的方案。多样性来自探索主题的不同侧面,而不是引入不相关的美学风格。
  • 为每个方向进行具体命名。标题应体现基于主题的具体概念,例如瑞士木屋网站可使用“温暖传承”或“阿尔卑斯优雅”,而不要使用“极简”或“大胆”等泛泛名称。

3. Constraints

3. 约束条件

  • Technical requirements (framework, performance, accessibility)
  • Brand guidelines (if any)
  • Content requirements
  • 技术要求(框架、性能、无障碍)
  • 品牌规范(如有)
  • 内容要求

4. Differentiation

4. 差异化

What makes this UNFORGETTABLE? What's the one thing someone will remember?
是什么让这一点令人难忘?人们会记住的独特之处是什么?

Frontend Aesthetics Guidelines

前端美学指南

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
你往往容易收敛到通用、仿佛“按模组分发”的产出。在前端设计中,这便形成了用户所说的“AI slop”美学。应避免这种倾向:创作令人意外且充满惊喜、真正独特的前端设计。

Typography

字体排印

Choose fonts that are beautiful, unique, and interesting.
AVOID (overused/generic):
  • Inter
  • Roboto
  • Arial
  • System fonts
  • Space Grotesk (overused by AI)
PREFER (distinctive choices):
  • Pair a distinctive display font with a refined body font
  • Consider: Fraunces, Clash Display, Cabinet Grotesk, Satoshi, Outfit, Syne, DM Serif Display, Playfair Display, Cormorant Garamond, Archivo
  • Match font personality to brand (tech: geometric sans; luxury: refined serif; creative: display fonts)
  • Unexpected, characterful font choices that elevate the frontend's aesthetics
Typography scale:
  • Use a consistent scale (1.25 or 1.333 ratio)
  • Headings should command attention
  • Body text should be comfortable to read (16-18px minimum)
选择美观、独特且富有趣味的字体。
应避免(过度使用或过于通用):
  • 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)

Color & Theme

色彩与主题

Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Strategies:
  • Monochromatic with accent: Single color family + one pop color
  • Complementary contrast: Two opposing colors (careful with saturation)
  • Analogous harmony: Adjacent colors on the wheel
  • Dark mode: Not just inverted - design specifically for dark
AVOID:
  • Purple gradients on white backgrounds (cliched AI aesthetic)
  • Evenly distributed rainbow palettes
  • Low-contrast, washed-out schemes
  • Generic blue (#007bff) as primary
  • Timid, evenly-distributed palettes
Color proportions:
  • 60% dominant (backgrounds, large areas)
  • 30% secondary (containers, sections)
  • 10% accent (CTAs, highlights)
形成统一连贯的美学。主色调配合鲜明的强调色,效果优于平均分配、缺乏胆量的配色。
策略:
  • 单色系加强调色:单一色系搭配一个醒目颜色
  • 互补色对比:两种对立颜色(注意控制饱和度)
  • 类似色和谐:色轮上相邻的颜色
  • 深色模式:并非简单反转——要为深色模式进行专门设计
应避免:
  • 白色背景上的紫色渐变(陈旧的 AI 美学)
  • 均匀分配的彩虹色板
  • 低对比度、褪色发白的配色
  • 将通用蓝色(#007bff)用作主色
  • 过于保守、平均分配的配色
颜色比例:
  • 60% 主色(背景、大面积区域)
  • 30% 辅助色(容器、分区)
  • 10% 强调色(CTA、亮点)

Motion & Animation

动效与动画

Motion is a design system element like color and typography — it should be intentional, cohesive, and matched to the site's personality. Prioritize CSS-only solutions.
Technique palette — choose from these categories to create a rich, dynamic experience:
CategoryTechniques
Entrance animationsFade-up, slide-in, scale-up, clip-path reveals — with staggered delays for groups
Hover/focus transitionsCard lifts, button transforms, underline grows, color shifts, shadow deepens
Continuous subtle motionFloating elements, pulsing accents, slow-rotating decorative shapes, gradient shifts
Scroll-triggered revealsSections/elements animate as they enter the viewport
Background animationGradient color cycling, pattern movement, ambient drift
Text effectsLetter-spacing transitions, weight shifts, color wipes on headings
CSS animation patterns:
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;
  }
}
Orchestration guidance:
  • Pick 2-3 motion techniques per site and use them consistently, subtly — don't scatter every technique across a single page
  • Match motion to personality: tech sites = precise, snappy timing; luxury = slow, elegant easing; playful = bouncy, energetic curves
  • Entrance animations should follow a clear reading order — top-to-bottom, left-to-right stagger
  • Scroll reveals are the highest-impact pattern: sections animate as they enter the viewport, creating a sense of narrative progression
动效与动画是设计系统中的元素,与色彩和字体排印一样——它们应具有明确意图、整体协调,并与网站个性相匹配。优先采用纯 CSS 方案。
技术组合——从以下类别中选择,创造丰富而动态的体验:
类别技术
入场动画上移淡入、滑入、缩放显现、clip-path 显现——可对分组元素使用交错延迟
悬停/焦点过渡卡片抬升、按钮变形、下划线延展、色彩变化、阴影加深
持续微动态元素漂浮、强调元素脉动、装饰图形缓慢旋转、渐变位移
  • 滚动触发显现 | 区块或元素进入视口时触发动画 | | 背景动画 | 渐变色彩循环、图案移动、环境式漂移 | | 文字效果 | 字间距过渡、字重变化、标题色彩擦除 |
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 种动效技术,并持续、克制地使用——不要把每种技术都散落到单个页面中
  • 使动效与个性相匹配:科技网站 = 精准、利落的节奏;奢华品牌 = 缓慢、优雅的缓动;趣味品牌 = 活泼、有活力的曲线
  • 入场动画应遵循清晰的阅读顺序——从上到下、从左到右交错出现
  • 滚动显现是影响力最大的模式:区块在进入视口时触发动画,营造叙事推进感

Spatial Composition

空间构图

Break out of predictable layouts. Use unexpected layouts and avoid generic patterns:
  • Asymmetry: Off-center elements create visual interest
  • Overlap: Elements crossing boundaries add depth
  • Diagonal flow: Guide the eye with angled elements
  • Grid-breaking: Strategic elements that escape the grid
  • Negative space: Generous whitespace OR controlled density (pick one)
Interpret creatively and make unexpected choices that feel genuinely designed for the context.
打破可预测的布局。采用出人意料的布局,避免通用模式:
  • 不对称:偏离中心的元素可营造视觉趣味
  • 重叠:跨越边界的元素可增加空间深度
  • 对角线流动:使用倾斜元素引导视线
  • 突破网格:有策略地让元素脱离网格约束
  • 负空间:采用大留白或受控的信息密度(选择其一)
创造性地进行诠释,并做出真正符合当前场景的意外选择。

Backgrounds & Visual Details

背景与视觉细节

Create atmosphere and depth rather than defaulting to solid colors:
TechniqueUse Case
Gradient meshesModern, dynamic feel
Noise texturesWarmth, tactile quality
Geometric patternsTech, precision
Layered transparenciesDepth, sophistication
Dramatic shadowsPremium, elevated
Decorative bordersEditorial, structured
Grain overlaysVintage, analog feel
营造氛围和深度,而不是默认使用纯色:
技术使用场景
渐变网格现代、动态的感觉
噪点纹理温暖、触感鲜明的质感
几何图案科技感、精准感
分层透明效果深度感、精致感
戏剧性阴影高端感、品质感
装饰性边框编辑感、结构感
颗粒叠加复古、模拟质感

Iconography

图标设计

  • Use custom-designed SVG icons that align with the theme's aesthetic
  • Maintain consistent stroke width and style
  • Icons should complement, not compete with content
  • 使用与主题美学一致的自定义 SVG 图标
  • 保持统一的描边宽度和风格
  • 图标应与内容相辅相成,而不是喧宾夺主

Matching Complexity to Vision

让复杂度与愿景匹配

IMPORTANT: Match implementation complexity to the aesthetic vision.
Maximalist designs need:
  • Elaborate code with extensive animations
  • Multiple visual layers
  • Rich interactive effects
  • Dense styling
Minimalist designs need:
  • Restraint and precision
  • Careful attention to spacing
  • Subtle typography refinements
  • Every detail intentional
Elegance comes from executing the vision well, not from adding more features.
重要:实现复杂度应与美学愿景相匹配。
极繁主义设计需要:
  • 大量代码与复杂动画
  • 多个视觉层
  • 丰富的交互效果
  • 密集的样式设计
极简主义设计需要:
  • 克制与精准
  • 对间距进行细致处理
  • 微妙的字体排印优化
  • 每个细节都经过刻意设计
优雅来自把愿景执行到位,而不是不断增加功能。

Design Variety and Variation

设计多样性与变化

When generating multiple designs:
生成多个设计方案时:

Never Converge

绝不收敛

  • NEVER converge on the same choices across generations
  • No design should be the same
  • Avoid overused fonts (see AVOID list above) across generations
  • Each design should feel genuinely different
  • 绝不收敛到历次生成中相同的选项
  • 不应有任何两个设计完全相同
  • 避免在各次生成中重复使用过度常见的字体(参见上述“应避免”列表)
  • 每个设计都应真正与众不同

Vary Core Elements

改变核心要素

Color Variation:
  • Mix light and dark themes
  • Mix warm and cool palettes
  • Mix monochromatic and colorful approaches
Typography Variation:
  • Use different font combinations each time
  • Mix serif and sans-serif headings
  • Mix elegant and bold type treatments
  • Vary type scale and hierarchy
Layout Variation:
  • Mix full-width and contained layouts
  • Mix asymmetric and symmetric compositions
  • Vary density (spacious vs. compact)
Style Variation:
  • Explore different aesthetic territories
  • Each design should feel like it could be the foundation for a distinct, complete website
  • Avoid converging on similar solutions
Ensure significant variation: The designs should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for the specific site context.
Remember: Extraordinary creative work requires committing fully to a distinctive vision. Don't hold back.
色彩变化:
  • 混合浅色与深色主题
  • 混合冷色与暖色色板
  • 混合单色系与多彩方案
字体排印变化:
  • 每次使用不同的字体组合
  • 混合衬线字体与无衬线字体标题
  • 混合优雅与大胆的文字风格
  • 改变字号比例和信息层级
布局变化:
  • 混合全宽与内容容器式布局
  • 混合不对称与对称构图
  • 改变信息密度(宽敞与紧凑)
风格变化:
  • 探索不同的美学领域
  • 每个设计都应像是一个独特完整网站的基础
  • 避免收敛到相似的解决方案
确保显著变化:各设计应在色彩、字体、布局方式和氛围上形成明显差异,但每一个都必须像是针对特定网站场景合理且经过深思熟虑的设计。
记住:卓越的创意工作需要全情投入并贯彻鲜明的愿景。不要有所保留。