技能介绍

解决品牌标识落地的常见工程痛点

在 Web 与移动端开发中，Logo 不仅是视觉元素，更是导航锚点。然而，常见的工程实现往往忽视其规范性：居中放置导致用户返回首页失败率激增，右对齐违背阅读习惯，或未正确设置 alt 文本影响无障碍体验。此外，缺乏统一的响应式断点测试和安全区规范，会让品牌在不同尺寸屏幕上显得杂乱。本指南旨在通过一套标准化的工程实践，解决上述品牌标识落地与无障碍合规问题。

核心能力与关键步骤

本技能按照工程落地的逻辑，提供以下核心指引：

上下文与规范评估：首先检查 .claude/project-context.md 或 .cursor/project-context.md 获取品牌视觉规范（如安全区、最小尺寸、变体）。
位置策略建议：基于眼动扫描模式，强烈建议将 Logo 放置在左上角，并始终链接至首页（href="/"）。避免居中或右对齐。
语义化与无障碍实现：确保使用 <a> 包裹图片，优先采用 SVG 格式。alt 文本必须填写公司或产品名（如 alt="Acme Inc."），而非笼统的 "logo"。
响应式与触控规范：在 375px、768px、1024px 等关键断点下验证可读性，并确保移动端触控目标不小于 44x44px。

适用边界与安全注意

本技能仅作为架构设计与代码规范的参考指南。

只读与参考：默认不自动修改系统文件、不安装依赖、不执行下载内容，所有命令和代码均作为参考。
外部写入确认：涉及发布、部署或任何具有破坏性的外部操作前，会明确展示影响并要求用户确认。
非设计替代品：它不负责直接生成 Logo 图像，而是指导如何将已有的品牌资产正确集成到产品界面中。对于 AI/SaaS 产品的 Logo 设计趋势，仅提供可选的行业参考。