GitCode CANN让“插件门户”与“开源社区”
长成同一副样子
将 cann.cannbot.cn（CANNBot 插件门户）与 gitcode.com/cann（CANN 开源组织页）统一为同一套视觉语言与信息架构： 以 GitCode 浅色平台风为基底承载海量项目信息，以门户的深色科技感作记忆点缀，两站内容同源、组件同款、数据互通。
01背景与现状：两站为什么需要“合一”
门户是「产品入口」（推荐 Agent 工作流），GitCode 组织页是「内容全集」（仓库、社区、成就）。它们内容互补，但视觉与结构割裂，用户很难感知二者同属 CANN 生态。
- 沉浸式暗色 Hero（#03060c 星空网格 + 轨道动画 Canvas）
- 主打 3 条 Agent 工作流：算子生成 / 算子测试 / 模型迁移
- 内容少而精：插件卡片 + 演示视频 + 三步安装带
- 展示型首页（深色）与自身文档页（浅色）内部不一致
- 生态宽度缺失：看不到社区 78 个项目与治理架构
- GitCode 浅色平台：白底 / #f6f8fa 面板 / 蓝主色 #165dff
- 内容全集：快速体验、成就数据、78 个仓库、核心组件分层
- 社区治理（TSC / PMC / SIG）、公告、活动、贡献路径、联系方式
- 信息密度高但 品牌识别弱，与 CANNBot 门户不像一家人
- Agent / AI 能力只作为其中一个板块存在，未成主线
02合一策略：四条设计原则
任何界面元素都要能回答“它来自哪、到哪去、看起来像谁”。
主基调：浅色平台风，信息优先
以 GitCode 组织页的浅色设计承接海量仓库/社区信息——白底、克制描边、可扫描的列表与卡片。门户从“全站暗色”改为“浅色为主”。
- 仓库、公告、治理等长内容用浅色承载，阅读密度高、负担低
- 与 GitCode、昇腾官网同频，降低跨站跳转的割裂感
记忆点：深色只做“局部点缀”
保留门户最有辨识度的元素——深色终端卡、代码块、星空网格与轨道动画，将其压缩为浅色页面中的“暗物质”，既不喧宾夺主又延续品牌记忆。
- Hero 右侧 Agent 接入终端卡（深色）
- CTA 横幅与架构底座保留深蓝渐变
- 轨道/星点由粒子 Canvas 简化为 CSS 动效
红黑一元化：跟随 GitCode 品牌基因
参照 gitcode.com 仪表盘的观感——logo 红 #DA203E + 墨黑主按钮/文字——作为合一后的品牌主色；v1 中的门户蓝与 GitCode 蓝不再承担界面强调色。
- 可点击/激活/焦点统一为 GitCode 红阶或墨黑
- CANN 蓝仅允许出现在官方图标、代码语言标签等客观场景
- 两站任意截取按钮与链接，都能被认出是同一红黑体系
内容同源：GitCode 是唯一数据源
仓库 Star/Fork、公告、成就、组件清单全部取自 GitCode · cann 组织；门户不做第二份数据，只做更精致的呈现与导流。
- 所有项目卡 / 组件 chip 直达 gitcode.com/cann/…
- 关注、Star、公告在两端保持同一状态
03设计令牌（Design Tokens）· 红黑体系 v2
v2 依据 gitcode.com/dashboard 的观感，将品牌主色由蓝收敛为 GitCode 红 #DA203E + 墨黑 #141414 。 以下令牌已完整实现在 Demo 首页中。
品牌红黑（合一主色）--brand-* / --ink-black
中性色（浅色平台基底）--bg-* / --border / --ink-*
墨黑深色区（红黑体系的“黑”）--night-*
语义与类型色--success / --warning / --danger / lang-dots
文字排版
v1 → v2 令牌变更对照
| 令牌项 | v1 门户（CANN 蓝） | v2 参考 GitCode（红黑） | v2 合一令牌（Demo 已用） |
|---|---|---|---|
| 页面底色 | #03060c 深空 | #fff / #f6f8fa 浅色平台 | --bg #fff · --bg-subtle #f6f8fa |
| 品牌强调色 | 蓝 #3f6fff / #5476d6 | GitCode 红 #DA203E | 红 #DA203E（+暗红 #B11430/亮红 #EF4560） |
| 主按钮 | 白底黑字（门户） | 墨黑底白字（仪表盘登录） | 红渐变为主 + 墨黑（--ink-black）为辅 |
| 文字 | 白色层级 rgba(255,255,255,*) | #252b3a 黑系 | 墨黑 #17181D |
| 深色应用 | 全站 | 墨黑按钮 / 黑色文字 | 终端卡 · CTA · 架构底座 · 墨黑按钮（红黑体系的“黑”） |
| CANN 蓝去向 | — | — | 仅保留在 CANN 官方图标、代码语言标签等客观场景，UI 不再承担强调色 |
| 卡片圆角 / 字体 | 12px · Inter+Space Grotesk | 8–12px · Inter 系 | 14/20px · Inter 正文 + Space Grotesk 数字（不变） |
04组件语言（活样例）
以下组件即 Demo 首页正在使用的真实元素——两站共享这套组件库，落地时只需替换品牌内容。
仅用于终端卡 / 代码块 / CTA / 墨黑按钮
# 深色只在“黑”需要出现的地方出现 $ cannbot install ops-direct-invoke ✓ 已连接 5 个 Agent 客户端
05区块与内容映射：首页怎么变
新首页 = 门户原有叙事 × GitCode 组织页内容全集。逐块说明来源与去向（← 保留 / ← 融合 / ← 新增）。
06落地路线：从 Demo 到真实站点
Demo 中的令牌与组件均为可直接落地的 CSS/HTML；按下列顺序推进，两站风险最小地完成合一。
统一令牌与基础组件PHASE A · 样式层
把本文档“设计令牌（红黑 v2）”写进真实项目的 styles.css 与 GitCode 自定义主页 CSS，两站同时获得同一套红黑色彩/圆角/字体。先跑通按钮、chips、仓库行等 10 个高频组件。
- styles.css tokens
- 组件一致性走查
- 对比验收清单
门户首页改版（优先落地本 Demo）PHASE B · cann.cannbot.cn
将首页由“深色展示页”升级为“浅色红黑统一入口”：Hero → Stats → 快速体验 → Agent 生态 → 开发与成长 → 核心架构 → 项目展示 → 社区治理。内容区块按第 05 节映射逐块替换，保留 i18n 结构。
- 复用本 Demo 结构
- 保留 plugin 文档页
- 双语（zh/en）
数据接入：以 GitCode 组织数据为准PHASE C · 数据层
仓库统计、公告、成就由服务端定时抓取 GitCode 组织数据（或 GitCode Action / Webhook）生成 JSON，首页静态渲染或按天增量更新；不再手工维护数字。
- 组织 API / RSS
- 定时同步任务
- 数字一致性校验
反向统一 GitCode 组织页PHASE D · gitcode.com/cann
组织页自定义 CSS 的红阶与按钮对齐 GitCode 品牌红黑；首屏加入“CANNBot Agent 入口”横幅与门户互链，形成双向导流闭环。
- 组织页主题微调
- 互链与关注一致