DESIGN.md · diff
git:20260908.994a7f3 to git:20260924.e381ebc
11 added, 9 removed. Audit A to A.
# Design
## 使用场景
- 开发者在白天浏览 GitHub 项目页，希望用几秒理解执行能力。宣传画面使用明亮的暖色发布展示台，深色仅用于命令结果的对照区域。
+ 开发者在 GitHub 浏览国际开源项目，先看宽幅展示图判断用途，再阅读安装命令。按已确认的参考方向，README 保持平台原生浅色或深色正文，主视觉采用深海军蓝展示舞台，便于辨认明亮的窗口轮廓和执行路径。
- ## 色彩
+ ## 品牌与层次
- 使用暖纸色与朱红色形成明确的品牌面积，深石墨色承载命令文字；绿色只用于已验证状态。中性色略带暖色倾向，不使用纯黑纯白。
+ 使用原创“窗口＋光标”标志和 mac-computer-use 字标，提供浅底、深底版本。英文主张为 Give your agent hands on your Mac.，副标题为 Observe windows. Take action. Verify the result.。顺序为品牌与 Hero、完整 3D 案例、安装和任务示例、能力与原生演示、工作流程、兼容与参考。
- ## 字体
+ ## 色彩与字体
- 使用 macOS 系统字体 Avenir Next、PingFang SC，形成发布展示牌和原生软件相连的观感。正文使用系统无衬线字体，命令片段使用 SFMono-Regular。无需下载字体资源。
+ 深海军蓝背景、亮蓝路径、青色选中或完成状态，正文近白、次要文字蓝灰。采用带少量色相的中性色，CSS 用 OKLCH 定义主要颜色。使用 Avenir Next 和系统无衬线字体，命令使用 SFMono-Regular；不下载字体资源。
- ## 构图
+ ## 构图与动效
- 宽幅 1100×620。单一大标题、宽操作画面和紧凑状态栏，不使用等宽卡片阵列。原生演示保留真实窗口截图，外围只做排版与说明。
+ Hero 为 960×540、8 秒、10 fps：左侧约三分之一展示主张，右侧通过分层窗口、控件定位和读回说明表现 Observe、Act、Verify。动效只服务于状态变化，使用轻微位移和线条高亮，不闪烁。注明 Illustrative workflow，避免将展示插画误当成产品控制台。
- ## 动效
+ 原生演示以原始窗口截图为核心，外围重排英文标题和状态说明，使用相同色彩。图片内部中文测试输入保留，说明多语言输入行为。3D 案例 GIF 和静态图保持字节不变，只翻译其周边文案。
- 每个状态停留足够阅读，输入或验证阶段用简短过渡；避免闪烁、弹跳和无限旋转。GIF 循环播放，另提供 PNG 封面。演示速度不表示性能基准。
+ ## 可访问性与维护
+
+ 所有 GIF 提供静态封面和清楚的 alt 文案，正文信息不依赖观看动画。英文 README 和中文版本互相链接，使用明确锚点。浅色、深色、桌面与窄屏检查图片比例、文本换行及横向溢出。生成源文件与命令一同维护，图片仅用于展示，不新增桌面控制功能。