agent/docs/superpowers/specs/2026-07-21-senlinai-icon-design.md

SenlinAI ICON 设计规格

背景

SenlinAI 当前在登录页和工作台中使用字母 S 作为临时品牌符号，Web favicon 仍是 Vite 默认图形。本设计为产品提供一个正式、无文字、可缩放的 SVG ICON，用于浏览器 favicon、登录页、工作台侧栏和桌面应用图标的后续适配。

设计目标

• 同时表达知识、森林和 AI 三个主题。
• 在 16px、32px 和 128px 尺寸下保持清晰可辨。
• 符合 SenlinAI 安静、可靠、专业的产品气质。
• 与当前 Web 客户端的 Arco 蓝主色保持一致。
• 使用简单、可维护的 SVG 几何路径，不依赖位图、字体、滤镜或渐变。

最终构形

采用“年轮知识树”方向：

• 外轮廓为圆角方形，提供稳定边界，适合 favicon、应用图标和工作台侧栏。
• 内部主体为白色树冠和树干。
• 树冠内的弧线同时暗示年轮、知识层次和脑回路。
• 树干与分支表示知识的积累、生长和连接。
• 分支上的青绿与浅蓝节点表示 AI、知识图谱和信息连接。

ICON 不包含文字、字母、标语或独立横版字标。

视觉规范

• SVG viewBox：0 0 128 128。
• 外部圆角方形：主色 #165DFF。
• 树冠主体：近白色 #F4F8FF。
• 内部结构线：#165DFF。
• AI 节点：青绿 #14B8A6、浅蓝 #60A5FA、浅薄荷绿 #A7F3D0。
• 线条使用圆角端点，避免小尺寸下出现尖锐毛刺。
• 不使用渐变、投影、滤镜、蒙版、嵌入字体或外部资源。

文件与集成范围

• 新增正式源文件：apps/web_v1/public/senlinai-icon.svg。
• 使用相同 SVG 内容替换 apps/web_v1/public/favicon.svg，保持现有 index.html 引用不变。
• 本任务不创建带 SenlinAI 文字的横版 LOGO。
• 本任务不修改 Tauri 平台的 PNG、ICO 或 ICNS 文件；这些格式可在后续独立任务中由 SVG 导出。
• 本任务不调整产品现有配色系统或其他界面布局。

可访问性与兼容性

• SVG 源文件包含简短的 <title>，便于独立查看时识别资源含义。
• 页面中作为装饰性图片使用时，由消费组件决定使用空替代文本或 aria-hidden，避免重复朗读。
• 图形不依赖颜色作为唯一含义；树形、年轮和节点具有独立的形状线索。
• SVG 应能由现代 Chromium、Firefox、Safari 和 Tauri WebView 正常渲染。

验收标准

• senlinai-icon.svg 是合法、可独立打开的 SVG 文件。
• 图形不包含任何文字或字母。
• 图标在 16px、32px 和 128px 渲染中无明显裁切、线条粘连或节点消失。
• 浅色和深色页面背景上均有清晰边界与足够对比度。
• Web favicon 使用新图标。
• 在 apps/web_v1 中运行 node scripts/visual-check.mjs、npm run build 和 npm run lint 均通过。