SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-design-expert

web-design-expert

设计与创作

查看项目

更新于 10-15 14:15

技能介绍

用途

Web Design Expert 是一个专家级网页设计与品牌身份技能，用于为网页应用创建独特、连贯的视觉系统。它适合品牌身份开发、配色方案创建、布局构图、组件视觉设计、响应式设计策略以及视觉元素的 WCAG 无障碍审查。

主要能力

  • 品牌身份开发：包括品牌个性、视觉语言与设计规范。
  • 配色方案创建与理由说明，所有配色方案必须使用 OKLCH 格式，而非 hex 或 HSL。
  • 布局构图与视觉层级设计。
  • 组件视觉设计（不仅是代码）。
  • 响应式设计策略。
  • 针对视觉元素的 WCAG 无障碍审查。

使用方式

该技能的核心设计流程分为三步：

  1. 发现（关键第一步）：了解业务背景（主要目标、目标受众、期望用户行为、竞争对手）与品牌个性（若品牌是个人会如何穿着、用户感受的三个形容词、品牌绝不应被感知成什么）。
  2. 视觉方向：提供 2-3 个概念，每个概念包含情绪板（3-5 个参考及理由）、配色方案（主色、辅色、强调色、中性色，始终使用 OKLCH 格式）、排版方向（字体族、层级）、布局理念（网格或自由形式、密度）以及标志性元素（独特视觉特征）。
  3. 设计原则：强调层级（最重要的元素是否一目了然、视线是否自然流动）与一致性（相同颜色是否含义相同、间距是否遵循比例）。

配色方面，技能要求使用 OKLCH 格式，例如：

/* 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 描述，例如：

  • 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。

适用场景

适用于品牌身份开发、配色方案创建与理由说明、布局构图与视觉层级、组件视觉设计、响应式设计策略、视觉元素的 WCAG 无障碍审查。

不适用于：深度排版工作（应使用 typography-expert）、色彩理论数学（应使用 color-theory-palette-harmony-expert）、设计令牌与 CSS 架构（应使用 design-system-creator）、复古 Windows 3.1 风格（应使用 windows-3-1-web-designer）、原生应用设计（应使用 native-app-designer）。

输出交付物

  • 品牌身份指南：颜色、排版、语气、应做与不应做。
  • 设计规格：间距、圆角、阴影、动画时序。
  • 组件示例：按钮、表单、卡片、导航（所有状态）。
  • 响应式指南：断点、布局变化、触摸目标。

常见反模式

技能列出了若干应避免的反模式：

  • 委员会式设计：同一页面出现多种视觉风格，破坏品牌一致性；应尽早确立原则并强制执行一致性。
  • 装饰重于功能：无目的的华丽动画会拖慢性能并分散注意力；每个元素都必须证明其存在价值。
  • 忽视首屏：关键信息位于视口下方，而 80% 的注意力集中在首屏；Hero 区必须包含价值主张与主 CTA。
  • 低对比度文本：如白底浅灰（#999 on #fff）会不符合 WCAG 并排斥用户；最小对比度应为 4.5:1。
  • 移动端事后考虑：桌面优先再“缩小”的做法不可取，60% 以上流量来自移动端；应移动优先设计，再为桌面增强。

设计趋势与过时模式

技能给出趋势演变：2019-2021 为细微阴影、层次感、深色模式；2022-2023 为超大排版、可变字体；2024+ 为 Bento 网格、黏土拟态、颗粒感、AI 个性化。需警惕 LLM 可能建议的过时模式：无深度的扁平设计、Hero 轮播（已被证明无效）、轮播画廊（参与度低）、桌面端汉堡菜单。

MCP 工具

技能可配合以下 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、组件工作流。

限制

该技能不用于深度排版、色彩理论数学、设计令牌与 CSS 架构、复古 Windows 3.1 风格以及原生应用设计。关于收费、价格、平台支持等具体信息，资料中暂未提供。