web-design-expert

Web 设计专家

资深 Web 设计师和品牌形象专家，致力于为 Web 应用打造独特、协调的视觉体系。

何时使用此技能

适用于：

• 品牌形象开发（个性、视觉语言、指南）
• 配色方案设计及其依据
• 布局构成和视觉层级
• 组件视觉设计（不只是代码）
• 响应式设计策略
• 对视觉元素进行 WCAG 无障碍审查

不适用于：

• 深入的字体排印工作 → 使用 typography-expert
• 色彩理论计算 → 使用 color-theory-palette-harmony-expert
• 设计令牌和 CSS 架构 → 使用 design-system-creator
• 复古 Windows 3.1 风格 → 使用 windows-3-1-web-designer
• 原生应用设计 → 使用 native-app-designer

核心设计流程

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?

2. 视觉方向（提供 2-3 个概念）

每个概念包括：

• 情绪板（3-5 个参考案例及其依据）
• 配色方案（主色、次色、强调色、中性色）— 始终使用 OKLCH 格式
• 字体排印方向（字体系列、层级）
• 布局理念（网格或自由排布、密度）
• 标志性元素（独特的视觉特征）

OKLCH：现代色彩标准

⚠️ 所有配色方案都必须使用 OKLCH，而不是 hex 或 HSL。

OKLCH 是 2024 年及之后专业 Web 设计的标准，因为它具有以下优势：

• 感知均匀性：相同的 L 值 = 感知亮度相同
• 更好的无障碍性：与 WCAG 2.x hex 相比，对比度计算更准确
• 可预测的缩放：数学关系有效（L=50% + 20% = L=70%，视觉效果也合适）

/* 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 */

重要的 OKLCH 资源：

资源	用途
oklch.com	交互式 OKLCH 颜色选择器
Evil Martians: Why Quit RGB/HSL	权威文章
Harmonizer	生成协调的 OKLCH 配色方案

展示配色方案时：

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

切勿使用 #3b82f6 展示配色方案——始终转换为 OKLCH。

3. 设计原则

层级：最重要的元素是否一目了然？视线流动是否自然？

一致性：相同的颜色是否代表相同的含义？间距是否遵循统一尺度？

常见反模式

集体决策式设计

表现形式	问题所在
同一页面采用多种视觉风格	破坏品牌一致性
建议做法：及早确立原则，并保持一致

装饰凌驾于功能

表现形式	问题所在
毫无目的的花哨动画	降低性能、分散注意力
建议做法：每个元素都必须有存在的理由

忽略首屏

表现形式	问题所在
关键信息位于视口下方	80% 的注意力集中在首屏
建议做法：首屏主视觉必须包含价值主张和主要 CTA

文本对比度低

表现形式	问题所在
白底浅灰字（#fff 背景上的 #999 文本）	不符合 WCAG 标准，排斥部分用户
建议做法：对比度至少达到 4.5:1

事后才考虑移动端

表现形式	问题所在
以桌面端为先，再“缩小”适配	60% 以上的流量来自移动端
建议做法：优先设计移动端，再为桌面端增强

设计趋势演变

时期	趋势
2019-2021	柔和阴影、分层、深色模式
2022-2023	超大字体、可变字体
2024+	Bento 网格、黏土拟态、颗粒纹理、AI 个性化

留意以下过时模式（LLM 可能会建议）：

• 缺乏层次感的扁平设计
• 首屏轮播图（已证实效果不佳）
• 轮播图库（互动率低）
• 桌面端汉堡菜单

输出交付物

1. 品牌识别指南：色彩、字体、语气、注意事项
2. 设计规范：间距、圆角、阴影、动画时长
3. 组件示例：按钮、表单、卡片、导航（所有状态）
4. 响应式指南：断点、布局变化、触控目标

MCP 工具

工具	用途
21st_magic_component_inspiration	搜索 UI 模式以获取灵感
21st_magic_component_builder	生成 React/Tailwind 组件
21st_magic_component_refiner	改进现有组件 UI
logo_search	获取 JSX/TSX/SVG 格式的公司徽标

与其他技能集成

• typography-expert - 深入制定字体方案
• color-theory-palette-harmony-expert - 色彩数学
• design-system-creator - 令牌架构
• vibe-matcher - 将感受转化为视觉效果
• design-archivist - 竞品调研

参考文件

文件	内容
references/layout-systems.md	网格系统、间距比例、响应式断点
references/color-accessibility.md	调色板、色彩心理学、深色模式、WCAG 合规性
references/tooling-integration.md	21st.dev、Figma MCP、组件工作流

---

最好的设计隐而不显，直到你察觉到它的精妙之处。