# Design

## 使用场景

开发者在 GitHub 浏览国际开源项目，先看宽幅展示图判断用途，再阅读安装命令。按已确认的参考方向，README 保持平台原生浅色或深色正文，主视觉采用深海军蓝展示舞台，便于辨认明亮的窗口轮廓和执行路径。

## 品牌与层次

使用原创“窗口＋光标”标志和 mac-computer-use 字标，提供浅底、深底版本。英文主张为 Give your agent hands on your Mac.，副标题为 Observe windows. Take action. Verify the result.。顺序为品牌与 Hero、完整 3D 案例、安装和任务示例、能力与原生演示、工作流程、兼容与参考。

## 色彩与字体

深海军蓝背景、亮蓝路径、青色选中或完成状态，正文近白、次要文字蓝灰。采用带少量色相的中性色，CSS 用 OKLCH 定义主要颜色。使用 Avenir Next 和系统无衬线字体，命令使用 SFMono-Regular；不下载字体资源。

## 构图与动效

Hero 为 960×540、8 秒、10 fps：左侧约三分之一展示主张，右侧通过分层窗口、控件定位和读回说明表现 Observe、Act、Verify。动效只服务于状态变化，使用轻微位移和线条高亮，不闪烁。注明 Illustrative workflow，避免将展示插画误当成产品控制台。

原生演示以原始窗口截图为核心，外围重排英文标题和状态说明，使用相同色彩。图片内部中文测试输入保留，说明多语言输入行为。3D 案例 GIF 和静态图保持字节不变，只翻译其周边文案。

## 可访问性与维护

所有 GIF 提供静态封面和清楚的 alt 文案，正文信息不依赖观看动画。英文 README 和中文版本互相链接，使用明确锚点。浅色、深色、桌面与窄屏检查图片比例、文本换行及横向溢出。生成源文件与命令一同维护，图片仅用于展示，不新增桌面控制功能。