Web Design Expert (网页设计专家)

面向Web应用独特视觉系统的专家级网页设计师。

Decision Points (决策点)

Layout Approach Selection (布局方式选择)

IF content-heavy (blog, documentation, learning platform) [内容密集（博客、文档、学习平台）]
├─ 12-column grid system [12栏网格系统]
├─ High text density with clear hierarchy [高文本密度与清晰层级]
└─ Consistent gutters for readability [一致的间距以增强可读性]

IF marketing/conversion focused (SaaS, e-commerce landing) [以营销/转化为重点（SaaS、电子商务落地页）]
├─ Hero-section-first design [首屏设计优先]
├─ Asymmetric layouts allowed for drama [允许不对称布局以营造戏剧效果]
└─ Large whitespace to guide attention [大面积留白引导注意力]

IF e-commerce/catalog heavy [电子商务/目录密集型]
├─ CSS Grid auto-fit for products [CSS Grid自动适应产品展示]
├─ Card-based layouts [卡片式布局]
└─ Filter/search prominence [突出筛选/搜索功能]

IF dashboard/app interface [仪表盘/应用界面]
├─ Sidebar + main content [侧边栏 + 主内容]
├─ Data density prioritized [数据密度优先]
└─ Navigation always accessible [导航始终可访问]

IF editorial/magazine style [编辑/杂志风格]
├─ Mixed grid systems [混合网格系统]
├─ Large images with pull quotes [大图搭配引文块]
└─ Visual variety over consistency [视觉多样性优先于一致性]

Color Palette Strategy (色彩方案策略)

IF B2B/Enterprise audience [B2B/企业受众]
├─ Blue primary (trust, professional) [蓝色主色调（信任、专业）]
├─ Neutral-heavy palette [中性色为主的调色板]
└─ Minimal accent colors [极少的强调色]

IF Consumer/Lifestyle brand [消费者/生活方式品牌]
├─ Warmer primaries (orange, green, purple) [暖色主色调（橙色、绿色、紫色）]
├─ Seasonal accent options [季节性强调色选项]
└─ Emotionally-driven choices [情感驱动的选择]

IF High-traffic/accessibility-critical [高流量/可访问性关键]
├─ 4.5:1 contrast minimum enforced [强制最低4.5:1的对比度]
├─ Color-blind tested combinations [经过色盲测试的颜色组合]
└─ Dark mode variants required [需要深色模式变体]

Visual Hierarchy Decision Tree (视觉层次决策树)

IF user goal = immediate action (signup, purchase) [用户目标 = 立即行动（注册、购买）]
├─ Hero CTA above fold (mandatory) [首屏行动号召（必须）]
├─ Single primary action per page [每页单一主要操作]
└─ Visual weight on conversion elements [视觉重心放在转化元素上]

IF user goal = content consumption [用户目标 = 内容消费]
├─ Content preview/summary first [内容预览/摘要优先]
├─ Multiple engagement paths okay [允许多条参与路径]
└─ Reading experience optimized [阅读体验优化]

IF user goal = exploration (portfolio, catalog) [用户目标 = 探索（作品集、目录）]
├─ Grid/gallery layout primary [网格/画廊布局为主]
├─ Quick scanning optimized [快速浏览优化]
└─ Thumbnail → detail flow [缩略图 → 详情流程]

Failure Modes (故障模式)

Design by Committee Syndrome (设计委员会综合症)

Symptoms (症状): Multiple visual styles on same page, conflicting brand messages, no clear design system [同一页面存在多种视觉风格、品牌信息冲突、缺乏清晰的设计系统]
Detection Rule (检测规则): If you see 3+ different button styles or font families on one page [如果你在一个页面上看到3种以上不同的按钮样式或字体系列]
Fix (修复方法): Establish design principles document, enforce single source of truth, get stakeholder buy-in on constraints [建立设计原则文档，强制执行单一真实来源，争取利益相关者对约束条件的认可]

Decoration Over Function (装饰压倒功能)

Symptoms (症状): Animations without purpose, visual elements that don't aid comprehension, slow loading due to graphics [无目的的动画、无助于理解的视觉元素、因图形导致加载缓慢]
Detection Rule (检测规则): If you can't explain why each visual element helps the user accomplish their goal [如果你无法解释每个视觉元素如何帮助用户实现其目标]
Fix (修复方法): Remove elements that don't serve user needs, justify every animation with user benefit [移除不符合用户需求的元素，用用户收益证明每个动画的合理性]

Mobile Afterthought Pattern (移动端事后补救模式)

Symptoms (症状): Horizontal scroll on mobile, tiny touch targets, desktop navigation on small screens [移动端水平滚动、触摸目标过小、小屏幕上出现桌面端导航]
Detection Rule (检测规则): If mobile version requires zooming or horizontal scrolling to use [如果移动版需要缩放或水平滚动才能使用]
Fix (修复方法): Start mobile-first, test on actual devices, ensure 44px minimum touch targets [以移动优先开始，在真实设备上测试，确保最小触摸目标为44px]

Low Contrast Accessibility Failure (低对比度可访问性失败)

Symptoms (症状): Light gray text (#999) on white, poor readability in sunlight, user complaints about text visibility [白色背景上的浅灰色文字（#999）、阳光下可读性差、用户对文字可见性的投诉]
Detection Rule (检测规则): If any text fails WCAG 4.5:1 contrast ratio when tested [如果测试时任何文字未能达到WCAG 4.5:1的对比度]
Fix (修复方法): Use contrast checker tools, test in bright light conditions, provide high-contrast mode option [使用对比度检查工具，在明亮条件下测试，提供高对比度模式选项]

Information Architecture Collapse (信息架构崩溃)

Symptoms (症状): Users can't find primary content, navigation doesn't match mental models, high bounce rates [用户找不到主要内容、导航不符合心理模型、跳出率高]
Detection Rule (检测规则): If users can't complete primary task within 3 clicks or 30 seconds [如果用户无法在3次点击或30秒内完成主要任务]
Fix (修复方法): User journey mapping, card sorting for navigation, prominence for key actions [用户旅程地图、导航卡片分类、突出关键操作]

Worked Examples (工作示例)

Example 1: SaaS Dashboard Redesign (示例1：SaaS仪表盘重新设计)

Context: B2B analytics platform, users spend 2+ hours daily in interface [背景：B2B分析平台，用户每天在界面中花费2小时以上]

Decision Process: [决策过程]

Audience Analysis: Power users who value efficiency over aesthetics [受众分析：重视效率而非美感的专业用户]
Layout Choice: Sidebar navigation (always accessible) + main content area [布局选择：侧边栏导航（始终可访问）+ 主内容区]
Color Strategy: Blue primary (#2563eb) for trust, minimal accents to reduce cognitive load [色彩策略：蓝色主色调（#2563eb）传达信任，最小化强调色以降低认知负荷]
Hierarchy: Data tables get most space, actions are secondary but accessible [层次结构：数据表格获得最多空间，操作项次要但可访问]

Key Design Decisions: [关键设计决策]

Dense information display (8px spacing scale) [密集信息展示（8px间距尺度）]
High contrast text (#1f2937 on #ffffff) [高对比度文字（#1f2937 在 #ffffff 上）]
Consistent button sizing (40px height for easy clicking) [一致的按钮尺寸（40px高度便于点击）]
Status indicators use semantic colors (green=good, red=alert) [状态指示器使用语义颜色（绿色=良好，红色=警报）]

Outcome Validation: [结果验证]

Task completion improved 23% [任务完成率提升23%]
User-reported "ease of use" increased [用户报告的“易用性”提升]
Support tickets about navigation decreased 40% [关于导航的客服工单减少40%]

Example 2: E-commerce Product Page (示例2：电子商务产品页面)

Context: Fashion retailer, mobile-first audience (70% mobile traffic) [背景：时尚零售商，移动优先受众（70%的移动端流量）]

Decision Process: [决策过程]

Traffic Pattern: Mobile browsers, quick decision makers [流量模式：移动端浏览者，快速决策者]
Layout Choice: Single-column mobile, two-column desktop [布局选择：移动端单列，桌面端双列]
Visual Priority: Product images > price > reviews > specifications [视觉优先级：产品图片 > 价格 > 评价 > 规格]
Conversion Elements: Add to cart sticky on mobile, prominent but not pushy [转化元素：移动端“加入购物车”固定显示，醒目但不强迫]

Key Design Decisions: [关键设计决策]

Hero product image fills screen width on mobile [移动端主产品图片填满屏幕宽度]
Price in large, bold typography immediately visible [价格以大号粗体排版立即可见]
Reviews summary above product details [评价摘要位于产品详情之上]
Size/color selectors with immediate visual feedback [尺寸/颜色选择器带有即时视觉反馈]

Novice vs Expert Approach: [新手与专家方法对比]

Novice would: Put all product info above fold, use small product images [新手可能：将所有产品信息放在首屏上方，使用小尺寸产品图片]
Expert catches: Users need large images to evaluate fashion, price-conscious audience needs reviews validation early [专家指出：用户需要大图来评估时尚产品，价格敏感的受众需要早期看到评价验证]

Measurable Results: [可量化结果]

Mobile conversion rate increased 31% [移动端转化率提升31%]
Average session duration increased (users exploring more products) [平均会话时长增加（用户浏览更多产品）]
Cart abandonment decreased 18% [购物车放弃率下降18%]

Quality Gates (质量门)

Validating a Design Plan (验证设计计划)

以结构化计划的形式（参见 schemas/design-plan.schema.json）陈述设计的质量门合规性，并以确定性方式进行检查，而不是目测模拟图：

node scripts/design_audit.mjs --input plan.json

审计器返回 { pass, score, findings, recommendations }，并按名称标记上述五种故障模式：design-by-committee（按钮样式/字重/字号过多）、decoration-over-function、mobile-afterthought（320px水平滚动或小于44px的触摸目标）、low-contrast（低于4.5:1）、和 information-architecture collapse（导航与用户心理模型不匹配）。请参见 examples/expected-output.md 了解通过和失败运行并排对比。

References (参考资料)

File (文件)	Load When (何时加载)
`references/layout-systems.md`	Need the grid decision tree, the 8px spacing scale, responsive breakpoints, or the mobile-first/consistency checklists [需要网格决策树、8px间距尺度、响应式断点或移动优先/一致性检查清单时]
`references/color-accessibility.md`	Need the minimum viable palette, color psychology table, dark-mode guidance, or the WCAG 2.1 AA checklist [需要最低可行调色板、色彩心理学表、深色模式指南或WCAG 2.1 AA检查清单时]
`references/tooling-integration.md`	Need to use 21st.dev or Figma MCP tools to go from design direction to code [需要使用21st.dev或Figma MCP工具从设计方向转向代码时]
`templates/output-template.md`	Need a reusable design-plan template to fill in before auditing [需要在审计前填充可复用的设计计划模板时]
`examples/expected-output.md`	Need the shape of a finished design-plan audit, both passing and failing [需要已完成的设计计划审计的形态（通过和失败）时]
`schemas/design-plan.schema.json`	Need to validate a design plan's structure programmatically [需要以编程方式验证设计计划的结构时]
`scripts/design_audit.mjs`	Need deterministic scoring of a design plan against the Quality Gates and named failure modes [需要根据质量门和命名故障模式对设计计划进行确定性评分时]
`agents/openai.yaml`	Need a subagent descriptor for delegated design-plan generation [需要用于委托生成设计计划的子代理描述符时]

NOT-FOR Boundaries (不适用边界)

Do NOT use this skill for: [请勿将此技能用于：]

Deep typography decisions (line-height calculations, character spacing) → use typography-expert [深层次排版决策（行高计算、字符间距）→ 使用 typography-expert]
Color theory mathematics or palette generation → use color-theory-palette-harmony-expert [色彩理论数学或调色板生成 → 使用 color-theory-palette-harmony-expert]
Design system token architecture or CSS variables → use design-system-creator [设计系统令牌架构或CSS变量 → 使用 design-system-creator]
Retro or historical design styles → use windows-3-1-web-designer [复古或历史设计风格 → 使用 windows-3-1-web-designer]
Native mobile app interface design → delegate to native-app-designer [原生移动应用界面设计 → 委派给 native-app-designer]
Detailed accessibility audits → use accessibility-expert [详细的可访问性审计 → 使用 accessibility-expert]
Animation and micro-interaction specifications → use motion-design-expert [动画和微交互规范 → 使用 motion-design-expert]

Boundary indicators: [边界指示器]

If user asks for specific font pairing recommendations → typography-expert [如果用户要求具体的字体搭配建议 → typography-expert]
If user needs HSL color calculations → color-theory-expert [如果用户需要HSL颜色计算 → color-theory-expert]
If user wants CSS architecture advice → design-system-creator [如果用户需要CSS架构建议 → design-system-creator]
If user needs WCAG compliance checklist → accessibility-expert [如果用户需要WCAG合规性检查清单 → accessibility-expert]

Layout QA gate (mechanical — run before shipping) (布局QA门控——机械性——发货前运行)

在将任何渲染的页面、项目、仪表盘、演示文稿或组件标记为完成之前，请运行机械性溢出/碰撞检查器。它以无头方式渲染页面，并标记文本与文本碰撞、被截断/省略号截断的元素、文本溢出其容器以及水平页面滚动——这些是屏幕截图隐藏的视觉缺陷，仅会在特定宽度或某个主题下出现。

在运行之前，从活动技能目录中解析 layout-overflow-guard。下面的命令显示标准Claude安装路径；请使用您的工具链报告的路径。如果该技能缺失，请安装或同步它，而不是跳过此门控。

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <文件或URL> \
  --widths 1280,1100,860,720,390 --themes light,dark

您无需阅读 check_layout.py——使用Bash工具调用它，并根据其报告和退出代码（非零 = 存在缺陷）采取行动。脚本的源代码永远不会进入您的上下文，只有其结果会。将每个宽度和两个主题的违规数降为零，然后才能发布。完整详情请参见 layout-overflow-guard 技能。

Skill Bundle Index (技能捆绑索引)

本技能中的每个文件及其打开时机。自动生成；运行 scripts/index_references.py --fix 更新。

root（根目录）

CHANGELOG.md — Changelog（更新日志） — All notable changes to the web-design-expert skill will be documented in this file. [本文件记录了web-design-expert技能的所有重要变更。]
README.md — Web Design Expert（网页设计专家） — Creates unique web visual systems: brand identity, color palettes, layout composition, and responsive UI patterns for web applications. [为Web应用创建独特的Web视觉系统：品牌标识、色彩调色板、布局组成和响应式UI模式。]

agents/（代理目录）

agents/openai.yaml — openai (data/schema)

examples/（示例目录）

examples/expected-output.md — Example Output: Web Design Plan Audit（示例输出：Web设计计划审计） — Scenario: a SaaS marketing site redesign has been specified as a structured design plan (matching schemas/design-plan.schema.json) and is [场景：一个SaaS营销网站重新设计已指定为结构化设计计划（匹配 schemas/design-plan.schema.json），并且……]
examples/sample-input.json — sample input (data/schema) [示例输入]

references/（参考目录）

references/color-accessibility.md — Color & Accessibility（色彩与可访问性） — Color palettes, psychology, dark mode, and WCAG compliance. [色彩调色板、心理学、深色模式和WCAG合规性。]
references/layout-systems.md — Layout Systems（布局系统） — Grid systems, spacing scales, and layout composition. [网格系统、间距尺度和布局组成。]
references/tooling-integration.md — Design Tooling Integration（设计工具集成） — 21st.dev, Figma MCP, and component workflows. [21st.dev、Figma MCP 和组件工作流。]

schemas/（模式目录）

schemas/design-plan.schema.json — design plan.schema (data/schema) [设计计划模式]

scripts/（脚本目录）

scripts/design_audit.mjs

templates/（模板目录）

templates/output-template.md — Web Design Plan Template（Web设计计划模板） — [One-sentence description of the product/page this design plan covers.] Field notes: - primaryActionObviousWithin3s — true only if a fresh [[本设计计划涵盖的产品/页面的单句描述。] 字段说明：- primaryActionObviousWithin3s — 仅当新……]

Web Design Expert