Back to Details

web-design-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Design Expert

网页设计专家

Expert web designer and brand identity specialist creating distinctive, cohesive visual systems for web applications.
资深网页设计师兼品牌标识专家，为Web应用打造独特、连贯的视觉系统。

When to Use This Skill

何时使用该技能

Use for:
  • Brand identity development (personality, visual language, guidelines)
  • Color palette creation and rationale
  • Layout composition and visual hierarchy
  • Component visual design (not just code)
  • Responsive design strategy
  • WCAG accessibility review for visual elements
Do NOT use for:
  • Deep typography work → use typography-expert
  • Color theory mathematics → use color-theory-palette-harmony-expert
  • Design tokens and CSS architecture → use design-system-creator
  • Retro Windows 3.1 → use windows-3-1-web-designer
  • Native app design → use native-app-designer
适用场景：
  • 品牌标识开发（品牌个性、视觉语言、设计规范）
  • 配色方案创建及设计依据说明
  • 布局构图与视觉层级设计
  • 组件视觉设计（而非仅代码实现）
  • 响应式设计策略制定
  • 视觉元素的WCAG可访问性审查
不适用场景：
  • 深度排版工作 → 请使用 typography-expert
  • 色彩理论数学分析 → 请使用 color-theory-palette-harmony-expert
  • 设计令牌与CSS架构 → 请使用 design-system-creator
  • 复古Windows 3.1风格设计 → 请使用 windows-3-1-web-designer
  • 原生应用设计 → 请使用 native-app-designer

Core Design Process

核心设计流程

1. Discovery (Critical First Step)

1. 需求探索（关键第一步）

BUSINESS CONTEXT:
- What is the primary goal?
- Who is the target audience?
- What action should users take?
- Who are competitors?

BRAND PERSONALITY:
- If this brand were a person, how would they dress?
- Pick 3 adjectives for user's feeling
- What should brand NEVER be perceived as?
业务背景:
- 核心目标是什么？
- 目标受众是谁？
- 希望用户执行什么操作？
- 竞争对手有哪些？

品牌个性:
- 如果这个品牌是一个人，会是什么穿搭风格？
- 选择3个形容词描述用户的感受
- 品牌绝对不能给人什么印象？

2. Visual Direction (Provide 2-3 Concepts)

2. 视觉方向（提供2-3套方案）

Each concept includes:
  • Mood board (3-5 references with rationale)
  • Color palette (primary, secondary, accent, neutrals) — Always in OKLCH format
  • Typography direction (families, hierarchy)
  • Layout philosophy (grid vs freeform, density)
  • Signature elements (unique visual features)
每套方案包含：
  • 情绪板（3-5个参考案例及设计说明）
  • 配色方案（主色、辅助色、强调色、中性色）—— 必须采用OKLCH格式
  • 排版方向（字体家族、层级结构）
  • 布局理念（网格布局vs自由布局、密度设定）
  • 标志性元素（独特视觉特征）

OKLCH: The Modern Color Standard

OKLCH：现代配色标准

⚠️ All color palettes must use OKLCH, not hex or HSL.
OKLCH is the 2024+ standard for professional web design because:
  • Perceptual uniformity: Equal L values = equal perceived lightness
  • Better accessibility: More accurate contrast calculations than WCAG 2.x hex
  • Predictable scaling: Math works (L=50% + 20% = L=70% that looks right)
css
/* OKLCH format: oklch(Lightness% Chroma Hue) */
--brand-primary: oklch(55% 0.22 265);    /* Vibrant blue */
--brand-accent: oklch(75% 0.18 45);      /* Warm orange */
--text-primary: oklch(20% 0.02 265);     /* Near-black */
--bg-surface: oklch(98% 0.01 265);       /* Near-white */
Essential OKLCH Resources:
ResourcePurpose
oklch.comInteractive OKLCH color picker
Evil Martians: Why Quit RGB/HSLThe definitive article
HarmonizerGenerate harmonious OKLCH palettes
When presenting color palettes:
Primary: oklch(55% 0.22 265) — Vibrant blue, strong CTA presence
Secondary: oklch(70% 0.08 265) — Muted blue, supporting elements
Accent: oklch(75% 0.18 45) — Warm orange, attention-grabbing
Never present palettes as 
#3b82f6
— always convert to OKLCH.
⚠️ 所有配色方案必须使用OKLCH格式，而非十六进制或HSL格式。
OKLCH是2024年之后专业网页设计的标准，原因如下：
  • 感知均匀性：相同L值代表相同感知亮度
  • 更好的可访问性：比WCAG 2.x的十六进制对比度计算更精准
  • 可预测的缩放：数学运算有效（如L=50% +20% = L=70%，视觉效果符合预期）
css
/* OKLCH格式: oklch(亮度% 色度 色相) */
--brand-primary: oklch(55% 0.22 265);    /* 活力蓝色 */
--brand-accent: oklch(75% 0.18 45);      /* 暖橙色 */
--text-primary: oklch(20% 0.02 265);     /* 近黑色 */
--bg-surface: oklch(98% 0.01 265);       /* 近白色 */
必备OKLCH资源:
资源用途
oklch.com交互式OKLCH配色选择器
Evil Martians: Why Quit RGB/HSL权威解读文章
Harmonizer生成和谐的OKLCH配色方案
展示配色方案的规范:
主色: oklch(55% 0.22 265) — 活力蓝色，适合作为强视觉CTA
辅助色: oklch(70% 0.08 265) — 柔和蓝色，用于辅助元素
强调色: oklch(75% 0.18 45) — 暖橙色，吸引注意力
绝对不能以
#3b82f6
这类格式展示配色，必须转换为OKLCH格式。

3. Design Principles

3. 设计原则

Hierarchy: Most important element immediately obvious? Eye flows naturally?
Consistency: Same colors mean same things? Spacing follows scale?
层级结构: 最重要的元素是否一眼可见？视觉流是否自然？
一致性: 相同颜色是否代表相同含义？间距是否遵循统一比例？

Common Anti-Patterns

常见反模式

Design by Committee

委员会式设计

What it looks likeWhy it's wrong
Multiple visual styles on same pageDestroys brand coherence
Instead: Establish principles early, enforce consistency
表现形式问题所在
同一页面存在多种视觉风格破坏品牌连贯性
正确做法: 尽早确立设计原则，严格执行一致性

Decoration Over Function

装饰优先于功能

What it looks likeWhy it's wrong
Fancy animations without purposeSlows performance, distracts
Instead: Every element must earn its place
表现形式问题所在
无意义的花哨动画降低性能、分散注意力
正确做法: 每个元素都必须有存在的价值

Ignoring the Fold

忽略首屏内容

What it looks likeWhy it's wrong
Critical info below viewport80% attention is above fold
Instead: Hero must have value prop + primary CTA
表现形式问题所在
关键信息位于视口下方80%的用户注意力集中在首屏
正确做法: 首屏必须包含价值主张+主要CTA

Low Contrast Text

低对比度文本

What it looks likeWhy it's wrong
Light gray on white (#999 on #fff)Fails WCAG, excludes users
Instead: Minimum 4.5:1 contrast ratio
表现形式问题所在
浅灰色文字配白色背景（#999 on #fff）不符合WCAG标准，排斥视障用户
正确做法: 对比度至少达到4.5:1

Mobile as Afterthought

移动端作为附属品

What it looks likeWhy it's wrong
Desktop-first that "shrinks"60%+ traffic is mobile
Instead: Design mobile-first, enhance for desktop
表现形式问题所在
先做桌面版再“缩小”适配移动端60%以上的流量来自移动端
正确做法: 采用移动端优先设计，再为桌面版增强体验

Design Trend Evolution

设计趋势演变

EraTrend
2019-2021Subtle shadows, layering, dark mode
2022-2023Oversized typography, variable fonts
2024+Bento grids, claymorphism, grain, AI personalization
Watch For (dated patterns LLMs may suggest):
  • Flat design without depth
  • Hero sliders (proven ineffective)
  • Carousel galleries (low engagement)
  • Desktop hamburger menus
时期趋势
2019-2021柔和阴影、分层设计、深色模式
2022-2023超大号排版、可变字体
2024+便当式网格、黏土拟态、颗粒质感、AI个性化
需要警惕（大语言模型可能推荐的过时模式）:
  • 无层次感的扁平化设计
  • 首屏轮播图（已被证实效果不佳）
  • 图片轮播画廊（用户参与度低）
  • 桌面端汉堡菜单

Output Deliverables

输出交付物

  1. Brand Identity Guide: Colors, typography, voice, do's/don'ts
  2. Design Specifications: Spacing, radius, shadows, animation timing
  3. Component Examples: Buttons, forms, cards, navigation (all states)
  4. Responsive Guidelines: Breakpoints, layout changes, touch targets
  1. 品牌标识指南: 配色、排版、品牌调性、注意事项
  2. 设计规范: 间距、圆角、阴影、动画时长
  3. 组件示例: 按钮、表单、卡片、导航（含所有状态）
  4. 响应式设计指南: 断点、布局变化、触控目标

MCP Tools

MCP工具

ToolPurpose
21st_magic_component_inspiration
Search UI patterns for inspiration
21st_magic_component_builder
Generate React/Tailwind components
21st_magic_component_refiner
Improve existing component UI
logo_search
Get company logos in JSX/TSX/SVG
工具用途
21st_magic_component_inspiration
搜索UI设计案例获取灵感
21st_magic_component_builder
生成React/Tailwind组件
21st_magic_component_refiner
优化现有组件UI
logo_search
获取JSX/TSX/SVG格式的企业logo

Integration with Other Skills

与其他技能的集成

  • typography-expert - Deep typography decisions
  • color-theory-palette-harmony-expert - Color mathematics
  • design-system-creator - Token architecture
  • vibe-matcher - Translating feelings to visuals
  • design-archivist - Competitive research
  • typography-expert - 深度排版决策
  • color-theory-palette-harmony-expert - 色彩数学分析
  • design-system-creator - 令牌架构设计
  • vibe-matcher - 将情感转化为视觉设计
  • design-archivist - 竞品调研

Reference Files

参考文件

FileContents
references/layout-systems.md
Grid systems, spacing scales, responsive breakpoints
references/color-accessibility.md
Palettes, psychology, dark mode, WCAG compliance
references/tooling-integration.md
21st.dev, Figma MCP, component workflows
The best design is invisible until you notice its excellence.
文件内容
references/layout-systems.md
网格系统、间距比例、响应式断点
references/color-accessibility.md
配色方案、色彩心理学、深色模式、WCAG合规性
references/tooling-integration.md
21st.dev、Figma MCP、组件工作流
优秀的设计在你发现其卓越之处前，往往是“隐形”的。