用途：为 Web 应用建立独特的视觉设计系统，用于品牌识别开发、网页视觉设计与配色、布局方案选择。
主要能力：提供按内容类型选择布局的决策树（内容型、营销转化型、电商目录、仪表盘、编辑杂志风格）；配色策略按受众区分（B2B/企业偏蓝色与中性色，消费/生活方式品牌偏暖色）；视觉层级按用户目标区分（立即行动、内容消费、探索浏览）。列出五种失败模式及检测与修复：委员会式设计、装饰大于功能、移动端事后补做、低对比度无障碍失败、信息架构崩塌。附质量门清单（如 3 秒内主操作可见、WCAG AA 4.5:1 对比度、320px 无横向滚动、触控目标最小 44px、最多 3 种字重 4 种字号等）。
使用方式：将设计计划整理为结构化方案（参考 schemas/design-plan.schema.json），用 node scripts/design_audit.mjs --input plan.json 做确定性评分，返回 { pass, score, findings, recommendations } 并按名称标记上述失败模式。交付前运行排版溢出检查：python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <file-or-url> --widths 1280,1100,860,720,390 --themes light,dark，需在各宽度与明暗主题下将违规降为零（非零退出码表示存在缺陷）。参考文件按需加载：references/layout-systems.md、references/color-accessibility.md、references/tooling-integration.md、templates/output-template.md、examples/expected-output.md。
适用场景：SaaS 仪表盘、电商商品页、营销落地页、内容型站点、作品集等 Web 界面设计规划与审计。
限制：不负责深入排版计算、色彩理论数学与调色板生成、设计系统 token 架构、复古风格、原生移动应用界面、详细无障碍审计、动画与微交互规格。具体收费、价格与官方安装细节暂未提供。