frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design Expert

前端设计专家

Expert in creating distinctive, production-grade frontend interfaces.

专注于打造独特、可投入生产的前端界面。

Design Thinking

设计思路

Before coding, commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve?
Tone: Pick an aesthetic (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, industrial)
Differentiation: "What makes this UNFORGETTABLE?"

CRITICAL: Choose a clear conceptual direction and execute with precision.

在编码前，确定一个大胆的美学方向：

目的：该界面要解决什么问题？
风格基调：选择一种美学风格（极简主义、极繁主义、复古未来主义、有机风、奢华风、趣味风、编辑风、粗野主义、装饰艺术、工业风）
差异化："是什么让这个设计令人过目不忘？"

关键提示：选择清晰的概念方向并精准执行。

Typography

排版

Choose distinctive, characterful fonts. Avoid generic options:

Avoid: Inter, Roboto, Arial
Consider: Display fonts paired with refined body fonts
For Russian projects, use quality cyrillic fonts

选择富有特色、个性鲜明的字体。避免通用选项：

避用：Inter、Roboto、Arial
推荐：展示性字体搭配精致的正文字体
针对俄语项目，使用高质量的西里尔字体

Color & Theme

色彩与主题

Commit to cohesive aesthetics:

css

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

Dominant colors with sharp accents outperform timid palettes.

保持美学风格的一致性：

css

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

主色调搭配鲜明的强调色，效果远胜于平淡的配色方案。

Motion & Interactions

动效与交互

Use animations for effects and micro-interactions:

css

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

For React, use Motion library. Orchestrate page load reveals with staggered animations and scroll-triggered interactions.

使用动画实现效果和微交互：

css

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

对于React项目，使用Motion library。通过交错动画和滚动触发的交互来编排页面加载时的展示效果。

Spatial Composition

空间布局

Employ unexpected layouts:

Asymmetry and overlap
Diagonal flow
Grid-breaking elements
Generous or controlled negative space

采用突破常规的布局方式：

不对称与重叠
对角线视觉流
打破网格的元素
充足或可控的留白

Backgrounds & Visual Details

背景与视觉细节

Create atmosphere through:

Gradient meshes
Noise textures
Geometric patterns
Layered transparencies
Dramatic shadows
Decorative borders
Custom cursors
Grain overlays

通过以下方式营造氛围：

渐变网格
噪点纹理
几何图案
分层透明度
戏剧性阴影
装饰性边框
自定义光标
颗粒感叠加层

What to Avoid

避坑指南

Never default to generic AI aesthetics:

Overused font families (Inter, Roboto, Arial)
Clichéd color schemes (purple gradients)
Predictable layouts
Cookie-cutter designs lacking context-specific character

切勿采用通用的AI生成美学风格：

过度使用的字体族（Inter、Roboto、Arial）
陈词滥调的配色方案（紫色渐变）
可预测的布局
缺乏特定场景特色的千篇一律的设计

Implementation Philosophy

实现理念

Match implementation complexity to the aesthetic vision:

Maximalist designs: Elaborate code with extensive animations and effects
Minimalist designs: Restraint, precision, careful attention to spacing, typography, and subtle details

Remember: Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

让实现复杂度与美学愿景相匹配：

极繁主义设计：复杂代码搭配丰富的动画和效果
极简主义设计：克制、精准，注重间距、排版和细微细节

记住：不要有所保留——展示当你跳出思维定式、全身心投入独特愿景时，真正能够创造出的作品。