frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design System

前端设计系统

Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions. Core Principle: THINK, don't memorize. ASK, don't assume.

设计理念： 每一个像素都有其存在的意义。克制即是奢华。用户心理驱动设计决策。 核心原则： 主动思考，而非死记硬背。主动询问，而非主观假设。

🎯 Selective Reading Rule (MANDATORY)

🎯 选择性阅读规则（强制执行）

Read REQUIRED files always, OPTIONAL only when needed:

File	Status	When to Read
ux-psychology.md	🔴 REQUIRED	Always read first!
color-system.md	⚪ Optional	Color/palette decisions
typography-system.md	⚪ Optional	Font selection/pairing
visual-effects.md	⚪ Optional	Glassmorphism, shadows, gradients
animation-guide.md	⚪ Optional	Animation needed
motion-graphics.md	⚪ Optional	Lottie, GSAP, 3D
decision-trees.md	⚪ Optional	Context templates

🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.

始终阅读必填文件，仅在需要时阅读可选文件：

文件	状态	阅读时机
ux-psychology.md	🔴 必填	始终先阅读此文件！
color-system.md	⚪ 可选	进行色彩/调色板决策时
typography-system.md	⚪ 可选	进行字体选择/搭配时
visual-effects.md	⚪ 可选	需要使用玻璃态、阴影、渐变时
animation-guide.md	⚪ 可选	需要制作动画时
motion-graphics.md	⚪ 可选	使用Lottie、GSAP、3D效果时
decision-trees.md	⚪ 可选	使用场景模板时

🔴 ux-psychology.md = 必须始终阅读。其他文件 = 仅在相关时阅读。

🔧 Runtime Scripts

🔧 运行时脚本

Execute these for audits (don't read, just run):

Script	Purpose	Usage
`scripts/ux_audit.py`	UX Psychology & Accessibility Audit	`python scripts/ux_audit.py <project_path>`

执行以下脚本进行审计（无需阅读，直接运行）：

脚本	用途	使用方式
`scripts/ux_audit.py`	UX心理学与无障碍审计	`python scripts/ux_audit.py <project_path>`

⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)

⚠️ 重要提示：先询问，再假设（强制执行）

STOP! If the user's request is open-ended, DO NOT default to your favorites.

停！如果用户的需求模糊不清，切勿默认使用你偏好的方案。

When User Prompt is Vague, ASK:

当用户需求模糊时，询问以下问题：

Color not specified? Ask:

"What color palette do you prefer? (blue/green/orange/neutral/other?)"

Style not specified? Ask:

"What style are you going for? (minimal/bold/retro/futuristic/organic?)"

Layout not specified? Ask:

"Do you have a layout preference? (single column/grid/asymmetric/full-width?)"

未指定配色？ 询问：

"你偏好哪种调色板？（蓝色/绿色/橙色/中性色/其他？）"

未指定风格？ 询问：

"你想要打造哪种风格？（极简/大胆/复古/未来感/自然风？）"

未指定布局？ 询问：

"你有布局偏好吗？（单列/网格/不对称/全宽？）"

⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):

⛔ 需避免的默认倾向（反安全区）：

AI Default Tendency	Why It's Bad	Think Instead
Bento Grids (Modern Cliché)	Used in every AI design	Why does this content NEED a grid?
Hero Split (Left/Right)	Predictable & Boring	How about Massive Typography or Vertical Narrative?
Mesh/Aurora Gradients	The "new" lazy background	What's a radical color pairing?
Glassmorphism	AI's idea of "premium"	How about solid, high-contrast flat?
Deep Cyan / Fintech Blue	Safe harbor from purple ban	Why not Red, Black, or Neon Green?
"Orchestrate / Empower"	AI-generated copywriting	How would a human say this?
Dark background + neon glow	Overused, "AI look"	What does the BRAND actually need?
Rounded everything	Generic/Safe	Where can I use sharp, brutalist edges?

🔴 "Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."

AI默认倾向	弊端	替代思路
便当盒网格（现代陈词滥调）	所有AI设计都在用	这个内容真的需要网格吗？
左右分栏英雄区	可预测且乏味	试试大尺寸字体或垂直叙事如何？
网格/极光渐变	“新型”懒惰背景	有没有更激进的色彩搭配？
毛玻璃效果	AI眼中的“高端”	试试纯色高对比度扁平化设计如何？
深青色/金融科技蓝	规避紫色后的安全选择	为什么不试试红色、黑色或霓虹绿？
“统筹/赋能”类文案	AI生成的模板化文案	人类会怎么表达这句话？
深色背景+霓虹光效	过度使用的“AI风格”	品牌实际需要什么？
全圆角设计	通用且保守	哪里可以使用锐利的野兽派边缘？

🔴 “你选择的每一个‘安全’结构，都让你离通用模板更近一步。要敢于冒险。”

1. Constraint Analysis (ALWAYS FIRST)

1. 约束条件分析（始终第一步）

Before any design work, ANSWER THESE or ASK USER:

Constraint	Question	Why It Matters
Timeline	How much time?	Determines complexity
Content	Ready or placeholder?	Affects layout flexibility
Brand	Existing guidelines?	May dictate colors/fonts
Tech	What stack?	Affects capabilities
Audience	Who exactly?	Drives all visual decisions

开始任何设计工作前，先回答这些问题，或询问用户：

约束条件	问题	重要性
时间线	有多少时间可用？	决定设计复杂度
内容	内容已准备好还是仅为占位符？	影响布局灵活性
品牌	有现有品牌规范吗？	可能指定色彩/字体
技术栈	使用什么技术栈？	影响实现能力
受众	具体是哪些用户？	驱动所有视觉决策

Audience → Design Approach

受众 → 设计方法

Audience	Think About
Gen Z	Bold, fast, mobile-first, authentic
Millennials	Clean, minimal, value-driven
Gen X	Familiar, trustworthy, clear
Boomers	Readable, high contrast, simple
B2B	Professional, data-focused, trust
Luxury	Restrained elegance, whitespace

受众	设计考量
Z世代	大胆、快速、移动优先、真实感
千禧一代	简洁、极简、价值导向
X世代	熟悉、可信、清晰
婴儿潮一代	易读、高对比度、简单
B2B用户	专业、数据导向、可信
奢侈品用户	克制优雅、留白充足

2. UX Psychology Principles

2. UX心理学原则

Core Laws (Internalize These)

核心定律（需内化）

Law	Principle	Application
Hick's Law	More choices = slower decisions	Limit options, use progressive disclosure
Fitts' Law	Bigger + closer = easier to click	Size CTAs appropriately
Miller's Law	~7 items in working memory	Chunk content into groups
Von Restorff	Different = memorable	Make CTAs visually distinct
Serial Position	First/last remembered most	Key info at start/end

定律	原则	应用场景
希克定律	选项越多，决策越慢	限制选项，使用渐进式披露
费茨定律	目标越大+距离越近，越容易点击	合理设置CTA尺寸
米勒定律	工作记忆容量约为7个项目	将内容分块分组
冯·雷斯托夫效应	与众不同的事物更易被记住	让CTA在视觉上脱颖而出
系列位置效应	开头和结尾的内容最易被记住	关键信息放在开头或结尾

Emotional Design Levels

情感设计层级

VISCERAL (instant)  → First impression: colors, imagery, overall feel
BEHAVIORAL (use)    → Using it: speed, feedback, efficiency
REFLECTIVE (memory) → After: "I like what this says about me"

本能层（即时）  → 第一印象：色彩、图像、整体感觉
行为层（使用中） → 使用体验：速度、反馈、效率
反思层（记忆中） → 使用后感受：“我喜欢这个设计传递的理念”

Trust Building

信任构建

Security indicators on sensitive actions
Social proof where relevant
Clear contact/support access
Consistent, professional design
Transparent policies

敏感操作上添加安全标识
相关位置使用社交证明
清晰的联系/支持入口
一致、专业的设计
透明的政策

3. Layout Principles

3. 布局原则

Golden Ratio (φ = 1.618)

黄金比例（φ = 1.618）

Use for proportional harmony:
├── Content : Sidebar = roughly 62% : 38%
├── Each heading size = previous × 1.618 (for dramatic scale)
├── Spacing can follow: sm → md → lg (each × 1.618)

用于实现比例和谐：
├── 内容区 : 侧边栏 ≈ 62% : 38%
├── 各级标题尺寸 = 上一级 × 1.618（打造戏剧性层级）
├── 间距可遵循：小 → 中 → 大（每级 × 1.618）

8-Point Grid Concept

8点网格概念

All spacing and sizing in multiples of 8:
├── Tight: 4px (half-step for micro)
├── Small: 8px
├── Medium: 16px
├── Large: 24px, 32px
├── XL: 48px, 64px, 80px
└── Adjust based on content density

所有间距和尺寸均为8的倍数：
├── 紧凑：4px（微间距的半步长）
├── 小：8px
├── 中：16px
├── 大：24px, 32px
├── 超大：48px, 64px, 80px
└── 根据内容密度调整

Key Sizing Principles

关键尺寸原则

Element	Consideration
Touch targets	Minimum comfortable tap size
Buttons	Height based on importance hierarchy
Inputs	Match button height for alignment
Cards	Consistent padding, breathable
Reading width	45-75 characters optimal

元素	考量因素
触摸目标	最小舒适点击尺寸
按钮	高度基于重要性层级
输入框	与按钮高度匹配以保持对齐
卡片	一致的内边距，保持透气感
阅读宽度	最佳为45-75个字符

4. Color Principles

4. 色彩原则

60-30-10 Rule

60-30-10法则

60% → Primary/Background (calm, neutral base)
30% → Secondary (supporting areas)
10% → Accent (CTAs, highlights, attention)

60% → 主色/背景色（平静、中性底色）
30% → 辅助色（支撑区域）
10% → 强调色（CTA、高亮、吸引注意力）

Color Psychology (For Decision Making)

色彩心理学（用于决策）

If You Need...	Consider Hues	Avoid
Trust, calm	Blue family	Aggressive reds
Growth, nature	Green family	Industrial grays
Energy, urgency	Orange, red	Passive blues
Luxury, creativity	Deep Teal, Gold, Emerald	Cheap-feeling brights
Clean, minimal	Neutrals	Overwhelming color

若需要传递...	考虑色调	避免
信任、平静	蓝色系	激进的红色
成长、自然	绿色系	工业灰色
活力、紧迫感	橙色、红色	被动的蓝色
奢华、创意	深青、金色、祖母绿	廉价感的亮色
干净、极简	中性色	过于繁杂的色彩

Selection Process

选择流程

What's the industry? (narrows options)
What's the emotion? (picks primary)
Light or dark mode? (sets foundation)
ASK USER if not specified

For detailed color theory: color-system.md

所属行业？（缩小选项范围）
传递情感？（选择主色）
亮色还是暗色模式？（奠定基础）
若未明确，询问用户

详细色彩理论参考：color-system.md

5. Typography Principles

5. 排版原则

Scale Selection

比例选择

Content Type	Scale Ratio	Feel
Dense UI	1.125-1.2	Compact, efficient
General web	1.25	Balanced (most common)
Editorial	1.333	Readable, spacious
Hero/display	1.5-1.618	Dramatic impact

内容类型	比例	感受
密集UI	1.125-1.2	紧凑、高效
通用网页	1.25	平衡（最常用）
编辑类内容	1.333	易读、宽敞
英雄区/展示类	1.5-1.618	戏剧性冲击力

Pairing Concept

字体搭配理念

Contrast + Harmony:
├── DIFFERENT enough for hierarchy
├── SIMILAR enough for cohesion
└── Usually: display + neutral, or serif + sans

对比 + 和谐：
├── 差异足够大以区分层级
├── 相似度足够以保持连贯性
└── 通常：展示字体 + 中性字体，或衬线体 + 无衬线体

Readability Rules

可读性规则

Line length: 45-75 characters optimal
Line height: 1.4-1.6 for body text
Contrast: Check WCAG requirements
Size: 16px+ for body on web

For detailed typography: typography-system.md

行长度：最佳为45-75个字符
行高：正文字体为1.4-1.6
对比度：符合WCAG要求
字号：网页正文字号≥16px

详细排版参考：typography-system.md

6. Visual Effects Principles

6. 视觉效果原则

Glassmorphism (When Appropriate)

毛玻璃效果（合理使用）

Key properties:
├── Semi-transparent background
├── Backdrop blur
├── Subtle border for definition
└── ⚠️ **WARNING:** Standard blue/white glassmorphism is a modern cliché. Use it radically or not at all.

关键属性：
├── 半透明背景
├── 背景模糊
├── 细微边框以增强辨识度
└── ⚠️ **注意：** 标准蓝白毛玻璃效果是现代陈词滥调。要么大胆创新使用，要么完全不用。

Shadow Hierarchy

阴影层级

Elevation concept:
├── Higher elements = larger shadows
├── Y-offset > X-offset (light from above)
├── Multiple layers = more realistic
└── Dark mode: may need glow instead

层级概念：
├── 元素层级越高，阴影越大
├── Y轴偏移 > X轴偏移（模拟上方光源）
├── 多层阴影更真实
└── 暗色模式：可能需要使用发光效果替代阴影

Gradient Usage

渐变使用规范

Harmonious gradients:
├── Adjacent colors on wheel (analogous)
├── OR same hue, different lightness
├── Avoid harsh complementary pairs
├── 🚫 **NO Mesh/Aurora Gradients** (floating blobs)
└── VARY from project to project radically

For complete effects guide: visual-effects.md

和谐渐变：
├── 色轮上相邻的颜色（类似色）
├── 或同一色调，不同明度
├── 避免强烈的互补色搭配
├── 🚫 **禁止使用网格/极光渐变**（漂浮的 blob 效果）
└── 不同项目使用完全不同的渐变

完整效果指南参考：visual-effects.md

7. Animation Principles

7. 动画原则

Timing Concept

时长理念

Duration based on:
├── Distance (further = longer)
├── Size (larger = slower)
├── Importance (critical = clear)
└── Context (urgent = fast, luxury = slow)

时长基于：
├── 距离（越远越长）
├── 尺寸（越大越慢）
├── 重要性（关键操作需清晰）
└── 场景（紧急操作快，奢华场景慢）

Easing Selection

缓动效果选择

Action	Easing	Why
Entering	Ease-out	Decelerate, settle in
Leaving	Ease-in	Accelerate, exit
Emphasis	Ease-in-out	Smooth, deliberate
Playful	Bounce	Fun, energetic

操作	缓动类型	原因
进入	减速缓动	减速，稳定呈现
离开	加速缓动	加速，快速退出
强调	先加速后减速	平滑、刻意
趣味场景	弹跳缓动	有趣、有活力

Performance

性能考量

Animate only transform and opacity
Respect reduced-motion preference
Test on low-end devices

For animation patterns: animation-guide.md, for advanced: motion-graphics.md

仅对transform和opacity属性执行动画
尊重用户的减少动效偏好
在低端设备上测试

动画模式参考：animation-guide.md，高级动效参考：motion-graphics.md

8. "Wow Factor" Checklist

8. “惊艳感”检查清单

Premium Indicators

高端质感指标

Trust Builders

信任构建要素

Emotional Triggers

情感触发点

9. Anti-Patterns (What NOT to Do)

9. 反模式（切勿这样做）

❌ Lazy Design Indicators

❌ 懒惰设计的表现

Default system fonts without consideration
Stock imagery that doesn't match
Inconsistent spacing
Too many competing colors
Walls of text without hierarchy
Inaccessible contrast

未经考量使用默认系统字体
使用与风格不符的图库图片
间距不一致
过多冲突的色彩
无层级的大段文字
无障碍对比度不达标

❌ AI Tendency Patterns (AVOID!)

❌ AI常见倾向（务必避免！）

Same colors every project
Dark + neon as default
Purple/violet everything (PURPLE BAN ✅)
Bento grids for simple landing pages
Mesh Gradients & Glow Effects
Same layout structure / Vercel clone
Not asking user preferences

每个项目使用相同色彩
默认使用深色+霓虹光效
全用紫色/紫罗兰色（禁用紫色 ✅）
简单落地页使用便当盒网格
网格渐变与光效
相同的布局结构/Vercel克隆版
不询问用户偏好

❌ Dark Patterns (Unethical)

❌ 暗黑模式（不道德设计）

Hidden costs
Fake urgency
Forced actions
Deceptive UI
Confirmshaming

隐藏费用
虚假紧迫感
强制操作
欺骗性UI
确认羞辱

10. Decision Process Summary

10. 决策流程总结

For EVERY design task:

1. CONSTRAINTS
   └── What's the timeline, brand, tech, audience?
   └── If unclear → ASK

2. CONTENT
   └── What content exists?
   └── What's the hierarchy?

3. STYLE DIRECTION
   └── What's appropriate for context?
   └── If unclear → ASK (don't default!)

4. EXECUTION
   └── Apply principles above
   └── Check against anti-patterns

5. REVIEW
   └── "Does this serve the user?"
   └── "Is this different from my defaults?"
   └── "Would I be proud of this?"

针对每一项设计任务：

1. 约束条件
   └── 时间线、品牌、技术栈、受众是什么？
   └── 若不明确 → 询问用户

2. 内容
   └── 已有哪些内容？
   └── 内容层级是什么？

3. 风格方向
   └── 符合场景的风格是什么？
   └── 若不明确 → 询问用户（切勿默认！）

4. 执行
   └── 应用上述原则
   └── 对照反模式检查

5. 评审
   └── “这是否服务于用户？”
   └── “这与我的默认方案不同吗？”
   └── “我会为这个设计感到自豪吗？”

Reference Files

参考文件

For deeper guidance on specific areas:

color-system.md - Color theory and selection process
typography-system.md - Font pairing and scale decisions
visual-effects.md - Effects principles and techniques
animation-guide.md - Motion design principles
motion-graphics.md - Advanced: Lottie, GSAP, SVG, 3D, Particles
decision-trees.md - Context-specific templates
ux-psychology.md - User psychology deep dive

如需特定领域的深入指导：

color-system.md - 色彩理论与选择流程
typography-system.md - 字体搭配与比例决策
visual-effects.md - 视觉效果原则与技巧
animation-guide.md - 动效设计原则
motion-graphics.md - 高级内容：Lottie、GSAP、SVG、3D、粒子效果
decision-trees.md - 场景特定模板
ux-psychology.md - 用户心理学深度解析

Related Skills

Skill	When to Use
frontend-design (this)	Before coding - Learn design principles (color, typography, UX psychology)
web-design-guidelines	After coding - Audit for accessibility, performance, and best practices

技能	使用时机
frontend-design（当前技能）	编码前 - 学习设计原则（色彩、排版、UX心理学）
web-design-guidelines	编码后 - 审计无障碍、性能与最佳实践

Post-Design Workflow

设计后工作流程

After implementing your design, run the audit:

1. DESIGN   → Read frontend-design principles ← YOU ARE HERE
2. CODE     → Implement the design
3. AUDIT    → Run web-design-guidelines review
4. FIX      → Address findings from audit

Next Step: After coding, use
web-design-guidelines
skill to audit your implementation for accessibility, focus states, animations, and performance issues.

Remember: Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users. Avoid the Modern SaaS Safe Harbor!

完成设计实现后，运行审计：

1. 设计   → 阅读前端设计原则 ← 当前位置
2. 编码     → 实现设计
3. 审计    → 运行web-design-guidelines评审
4. 修复      → 处理审计发现的问题

下一步：编码完成后，使用
web-design-guidelines
技能审计实现方案的无障碍性、焦点状态、动画与性能问题。

记住：设计是思考，而非复制。每个项目都应根据其独特场景和用户需求进行全新考量。