用途与定位 Web Atlas Web Design 是一个面向网页实现与视觉改进的技能。它通过 Web Atlas 的 MCP 服务（https://web-atlas.ayangabryl.workers.dev/mcp）获取经过检查的网站参考、响应式截图和观察到的设计令牌，帮助用户在构建或改进网站时做出有依据的设计决策。库中内容用于启发决策，不替代用户提供的需求简报。
主要能力 技能提供多种检索方式：使用 list_sites 查找相关品牌，使用 search_references 检查选定页面，使用 search_sections 按 Hero、Pricing、Footer、Navigation 等区块类型检索，使用 get_library_facets 获取可用的分面。可通过 get_page 查看捕获覆盖范围，通过 get_screenshot 获取特定视口和区块的截图，并通过 get_tokens 查看源变量名、值、别名和语义角色证据。get_design 可按有限切片读取设计报告，get_page_motion 在可用时检查交互动效。还提供 search_curated_references 获取编辑精选短名单。
使用方式 首先研究设计问题，针对完整网站或特定区块选择合适的检索工具，区分区块检索与页面检索。打开 get_page 查看覆盖情况，再按相关视口和区块获取截图；在布局依赖整页时检查长页面分段。仅在桌面和移动端证据都存在时进行对比，不通过缩小桌面参考来推断移动布局。明确检查深色模式支持。使用 get_tokens 获取设计令牌证据，将估计值标记为估计。然后根据简报推荐方向，将“高级感”等抽象要求转化为适合产品、受众和现有品牌的具体方向，比较候选在构图、排版、间距、图像、响应式行为和任务清晰度上的表现。最后翻译、实现并验证：写出层级、内容宽度、字号比例、间距节奏、表面和交互状态等关键决策，将每个采纳的想法与观察到的参考和用户需求关联，实现完整流程包括加载、空、错误、悬停、焦点和响应式状态，并在代表性桌面和移动宽度下检查渲染结果。
适用场景 适用于网页实现或视觉改进，例如为完整网站寻找设计参考、为特定区块（如 Hero、Pricing、Footer、Navigation、404 页面）寻找设计依据、检查响应式布局和深色模式支持、获取设计令牌和语义角色证据、在实现前形成有参考支撑的设计方向。
限制 所有观察来自捕获内容，并非经所有者验证的设计规范。缺失的评分表示未审核，而非质量差。缺失的移动端或交互证据应视为未知，并说明具体限制。截图无法证明交互或恢复链接有效。避免给出无依据的通用美观评分或转化声明。不要将普通实现请求变成强制重设计、无休止的目录浏览或部署。需使用项目实际可用的浏览器/渲染工具进行验证，不能仅凭源代码声称已完成截图或交互检查。