root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5ee5d829a414b0413794c2f07a41e0e1cf257c60
aurora-admin/竞品网站检查报告.md
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
Details
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库 
## 品牌标识（本次会话）

起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」，
那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」，
移动端站已是「K」；移动端文档站则完全没有 favicon）。

- 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边；
  描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」
- 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）；
  顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)）
- 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg）
- 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留）
- 移动端 7 个模板补 favicon（此前计数 0）

验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/
theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致；
两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。

## 并行会话成果（本次一并入库）

- 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具
  + IconPreview 预览页 + ICON-SPEC.md 冻结规格
- 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁
- PC 组件：103 个大后台组件 / 组件11 批次
- uni-app：PC 端试点 + 移动端端实现 + 真实编译验证

## 工程

- .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库）
- CHANGELOG 补品牌标识条目
- ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
2026-09-21 10:05:48 +08:00

11 KiB
Raw Blame History

Kole UI 竞品网站检查报告

检查对象：Kole UI Design System（B 端后台管理设计系统，79 组件 × 5 端实现 + Element 风格文档站） 竞品范围：Ant Design、Arco Design、TDesign、Semi Design、Element Plus、Naive UI、DevUI（国内外 7 个主流 B 端组件库/设计系统官网） 检查方式：浏览器实地访问（含首页、组件总览、Button 组件文档页解剖），检查日期 2026-09-08 数据来源：各站实时快照，非二手资料

一、逐站检查结果

1. Ant Design（ant.design，蚂蚁集团，v6.6.3）

  • 导航结构：设计 / 研发 / 组件 / 博客 / 资源 / 国内镜像；顶栏带关键字搜索框、版本切换器、中/En 切换、RTL 方向切换。
  • 组件规模：8 大分类——通用 4、布局 7、导航 7、数据录入 18、数据展示 21、反馈 11、其他 5、重型组件 6，合计 79 个组件（与 Kole UI 数量相同）。
  • Button 文档解剖（竞品中最完整）：17 个代码演示 + 「何时使用」+ API + PresetColors + Semantic DOM 结构图 + 主题变量（Design Token）双层表（全局 Token + 组件级 Token）+ FAQ + 设计指引。
  • 主题能力：CSS-in-JS 动态主题，独立主题编辑器（/theme-editor-cn），首页内置 13+ 套主题预设实时切换（MUI / shadcn / Bootstrap / 暗黑 / 玻璃 / 极客等）。
  • AI 友好（2026 明显趋势）：官网定位语改为「AI 友好的设计系统」；提供 For Agents 专属文档页（docs/react/for-agents-cn.md）与 Ant Design CLI（含官方 MCP 服务）。
  • 生态：Pro、ProComponents、Mobile、Mini、Web3、Charts、AntV、Kitchen（Sketch 工具集）、Landing、脚手架市场、dumi、qiankun、Ant Motion。
  • 检查发现的问题：直连访问慢（本次 WebFetch 三次超时），需依赖国内镜像 ant-design.antgroup.com；页面有少量 console 报错。

2. Arco Design（arco.design，字节跳动）

  • 导航结构：设计 / 开发 / 生态产品；⌘K 全局搜索；中英文 + LTR/RTL 切换；React / Vue 双框架一键切换。
  • 组件规模：约 70 个组件，7 大分类（通用/布局/数据展示/数据输入/反馈/导航/其他）。
  • Button 文档解剖：18 个演示块 + 设计指南 + FAQ + API。
  • 主题能力：DesignLab 风格配置平台（在线主题商店），样式全部 Token 化。
  • 生态：ArcoMaterial 物料平台、ArcoPro 中后台最佳实践、Webpack 插件；Figma 资源覆盖 Web / Mobile / Pro / 图标四套。
  • 检查发现的问题：/zh-CN 首页与 /react/components 总览页均渲染出「404 Not Found」内容页（SPA 路由健壮性问题，侧栏仍可用）。

3. TDesign（tdesign.tencent.com，腾讯）

  • 导航结构：桌面端 / 移动端 / 小程序三套解决方案；顶部搜索；多技术栈入口。
  • 组件规模与技术栈：Vue、Vue Next、React（均 Stable）+ 移动端 Vue/React、Uniapp、Flutter、微信小程序——竞品中端覆盖最全。
  • Button 文档解剖（特色鲜明）：10 个演示 + Props/Events 分表 + 独立「设计指南」段——何时使用、与页面布局相关、组件搭配使用、推荐/慎用示例、相似组件（Kole UI 契约中"不发明/未明示"的思路与之接近，值得借鉴其"相似组件"交叉引用）。
  • 设计令牌：2026-07 发布「设计资源变量版本」，全量 Token 化，删减冗余变体。
  • AI：2025-08 已上线 MCP 工具辅助 AI 编程场景。
  • 其他：Figma/Sketch/Axure/AdobeXD 设计资源；垂直行业组件库；400+ 贡献者、1580 个行业使用案例；小程序深色模式。

4. Semi Design（semi.design，抖音）

  • 导航结构：组件 / 主题（DSM）/ 设计转代码（D2C） / 模板 / 数据可视化 / 博客 / EN。
  • 主题能力（最强）：DSM 主题商店，3000+ Design Token，官方多品牌主题（飞书 Universe / 剪映 / 火山引擎 / 抖音创作服务）。
  • D2C：Figma 设计稿 3–5 秒生成真实代码。
  • 质量宣称：单元测试 + E2E + 视觉对比测试，覆盖率 90%——把"测试"作为首页卖点展示。
  • 工程能力：SSR（Next/Gatsby/Remix）、Web Components / shadow DOM 隔离、FA 架构（Foundation/Adapter）易迁移其他框架、Live Code 在线编辑、i18n 多语言/多时区/RTL、A11y 明示 W3C 键盘交互/焦点管理/语义化。
  • AI：首页横幅「使用 MCP & Skills 让 AI 对 Semi 了如指掌」。
  • 资源：Figma UIKit / Iconset / Plugin 三件套；10k+ GitHub Stars、10 万+ 用户。

5. Element Plus（element-plus.org，v2.14.5）

  • 导航结构：指南 / 组件 / 资源 / Playground；Ctrl+K 搜索（与 Kole UI 相同交互）；暗色模式切换；中英双语；国内镜像。
  • 组件规模：侧栏约 86 个组件，Basic / 配置组件 / Form / Data / Navigation / Feedback 等分类。
  • Button 文档解剖：10 个演示 + API 三表（Attributes / Slots / Exposes） + ButtonGroup API + 「源代码」直达链接 + 每页显示 GitHub 贡献者头像。
  • 其他：在线 Playground（element-plus.run）；版本号直接标注在组件条目上（如 Tag 2.3.4、Splitter 2.10.0）——组件级版本徽章。

6. Naive UI（naiveui.com，v2.45.3）

  • 定位：Vue 3 + TypeScript，「比较完整、主题可调、使用 TypeScript、快」。
  • 亮点：内置深色模式切换；首页「换个主题」实时演示；CSS-in-JS 主题（theme-overrides，无需引 CSS 文件）；Sketch 设计资源包；配套图标库 xicons；站点极简（首页/文档/组件/搜索四个入口）。

7. DevUI（devui.design，华为）

  • 定位：面向企业中后台，Angular 为主（ng-devui）；设计价值观「高效、开放、可信、乐趣」。
  • 结构：设计 / 组件 / 生态；独立「设计体系」栏目；强项组件 Tree / Table 单独推荐。
  • 评价：站点信息量与更新节奏明显弱于其余六家，Table/Tree 场景深耕是其差异化。

二、横向对比表

维度 Kole UI（现状） Ant Design Arco TDesign Semi Element Plus Naive UI DevUI
组件数量 79 × 5 端 79 ~70 70+（多端） 80+ ~86 80+ 60+
全局搜索 ✅ Ctrl+K（分类过滤/高亮/模糊） ✅ ✅ ⌘K ✅ ✅ ✅ Ctrl+K ✅ —
设计令牌 ✅ 100%（css.json） ✅ 双层 Token ✅ ✅ 全量变量化 ✅ 3000+ — ✅ CSS-in-JS ✅
在线主题定制 ✅ 主题定制器（4 键+复制 CSS） ✅ 主题编辑器+13 套预设 ✅ DesignLab 变量版资源 ✅ DSM 主题商店 — ✅ 换主题 —
暗色模式 ❌（v1.2 计划） ✅ ✅ ✅ ✅ ✅ ✅ —
Playground 在线编辑 ❌ demo 可复制 ✅ ✅ ✅ Live Code ✅ ✅ —
每组件 API 表 6 核心（73 待补） ✅ + Semantic DOM ✅ ✅ ✅ ✅ 三表 ✅ ✅
每组件设计指南 ✅（契约含使用要点） ✅ 何时使用/FAQ ✅ ✅ +相似组件/推荐慎用 ✅ — — ✅
组件测试页 ✅ 79 个 + 通过率总览 （内部） （内部） （内部） 90% 覆盖率宣称 — — —
Figma/Sketch 资源 ❌ ✅ Kitchen ✅ 四套 ✅ 四种工具 ✅ 三件套 ✅ ✅ Sketch —
多语言 i18n ❌（v1.2 计划 EN/JP） ✅ 中英+RTL ✅ 中英+RTL ✅ ✅+多时区 ✅ 中英 ✅ 中英 ✅ 中英
AI/MCP 入口 SKILL.md（本地，未上网） ✅ For Agents + CLI/MCP — ✅ MCP 工具 ✅ MCP & Skills — — —
更新日志页 ✅ CHANGELOG.md（文件） ✅ 站内页 ✅ 站内页 ✅ ✅ 博客 ✅ 站内页 ✅ 站内页 —
组件版本徽章 ❌ ✅ ✅ ✅ ✅ ✅ ✅ —
贡献者展示 ❌ ✅（首页） — ✅（400+） — ✅（每组件） — —

✅=有 ❌=无 —=未观察到

三、结论与差距分析

Kole UI 已有的相对优势

  1. 组件数 × 端数：79 组件 × 5 端实现，端覆盖不输 TDesign（其 5 端也是顶级水平）；纯静态零依赖实现是独特点。
  2. 测试体系上网：79 个可视化测试页 + 通过率总览 + 8 项通用测试矩阵（键盘可达/ARIA/对比度/token 一致性），竞品都把测试藏在内部，Kole 反而可以把"可审计"做成卖点（对标 Semi 的"90% 覆盖率"首页宣称）。
  3. 搜索体验：Ctrl+K + 分类过滤 + 高亮 + 模糊容错 + 搜索日志，与 Element Plus 同级。
  4. Agent 就绪底座：已有 SKILL.md / metadata.json / library-consumption.json，只差一个公开入口（竞品 2026 年都在补 MCP / For Agents，Kole 起点比它们当初更靠前）。

主要差距（按优先级）

P0 — 决定"专业度第一印象"

  1. 每组件 API 表未上网：7 家竞品的组件页全部有 Attributes/Events/Slots 结构化 API 表；Kole 只有 6 个核心契约，73 个扩展组件无契约（PLAN v1.2 已列，需落地为文档站页面渲染）。
  2. 暗色模式缺失：7 家竞品 6 家有；Kole 文档站仅有主题定制器。计划 v1.2 的 dark variant 建议提前。
  3. For Agents 公开入口：Ant Design / Semi / TDesign 均已上线 MCP 或 Agents 文档；Kole 应把本地 SKILL.md 转成站点公开页 + llms.txt，成本极低、差异化显著。

P1 — 高价值补齐

  1. 在线 Playground：竞品标配（Element Plus.run / Semi Live Code / Arco CodeSandbox）。Kole 纯 HTML 组件最适合做：iframe + 左侧代码 textarea 即可，零依赖可控。
  2. 组件版本徽章：竞品普遍在每个组件上标注引入版本；Kole 有 CHANGELOG 但未反向标注到组件。
  3. 主题预设库：Kole 主题定制器只有 4 键覆盖，对标 Ant Design 13 套预设 / Semi DSM 商店，可先做 5–8 套预设（科技蓝/暗黑/暖色/极简/高对比）。

P2 — 可选项

  1. Figma/Sketch 设计资源包（竞品标配，但 Kole 无设计源文件，可输出设计规范 PDF/Token 包代替）。
  2. i18n EN/JP（v1.2 已计划）。
  3. 「相似组件」「推荐/慎用」「组件搭配使用」三个设计指南栏目（TDesign 特色，与 Kole 契约的"不发明/未明示"字段天然对应，可从契约 JSON 自动生成）。

顺带发现的竞品网站问题（可作访谈素材）

  • Arco Design 首页与组件总览路由 404（SPA 健壮性）。
  • ant.design 直连超时严重，需镜像站；首页存在 console 报错。
  • DevUI 更新停滞感明显——B 端设计系统"长期维护"信号（更新日志、版本节奏）本身就是竞争力，Kole 的 CHANGELOG 应在站点首屏露出。
Reference in New Issue View Git Blame Copy Permalink