关于　›　组件库

组件库：全站颜色、字号和积木摆在一起

改完设计变量或共用组件，先来这一页从上到下扫一遍，再去改具体页面。

3组色板7档字号6种状态标签8块页面积木

01

色板

页面里只用语义名；图表按厂商主色

brand · 靛青

brand-1

brand-2

brand-3

brand-4

brand-6

brand-7

brand-8

brand-9

verdict · 判断

verdict-2

verdict-6

verdict-9

verdict-11

verdict-12

gray · 中性

gray-1

gray-2

gray-3

gray-5

gray-6

gray-8

gray-11

gray-12

厂商主色 · 图表

Anthropic

OpenAI

Google

Alibaba

DeepSeek

Meta

Xiaomi

Tencent

主色靛青 oklch(.45 .09 235) · 判断色只用于风险与「什么情况不适合」

02

字号阶梯

一页不超过 5 种

text-5xl · 48px首页大标题看懂 AI 世界 Aa 0123

text-4xl · 36px内页 H1看懂 AI 世界 Aa 0123

text-2xl · 24px区块 H2看懂 AI 世界 Aa 0123

text-lg · 18px副标题 · 卡片标题看懂 AI 世界 Aa 0123

text-base · 15px正文看懂 AI 世界 Aa 0123

text-sm · 14px表格与说明看懂 AI 世界 Aa 0123

text-xs · 12px出处与单位看懂 AI 世界 Aa 0123

标题衬线：Source Serif 4 + 华文中宋 · 正文：苹方 / 鸿蒙黑体

03

页面积木

内容页按这几块搭

01

区块头：描边编号 + 衬线标题

右侧一句读法

结论句：左侧浅靛青竖线，一个区块最多一句

图卡白底 · 1px 边 · 8px 圆角海外权威评测 · 2026-08-20

灰底入口卡衬线标题一句说明这页能帮您什么进入↗

页尾结论您该怎么办每页一处，主句 + 补充

每约 800px 一个视觉停顿

04

状态标签

没有数字的三种原因必须分得开

官方未说明需登录未采集海外权威评测本站采集已结束表格缺值：——

「未采集」用虚线边，表示还没查，不是不存在

05

表格与数字

数值一律等宽数字，右对齐

模型	能力指数	每任务成本	上下文
示例模型 A	63	¥16.4	1M
示例模型 B	58	——	256k

缺值显示 ——，不显示 0，也不留白

06

图表与按钮

每张图必须有出处行

横条：厂商主色浅填充 + 主色描边，本页主角加深

本页模型63

同档 A61

同档 B58

区间点：实心 = 最便宜，空心 = 最贵

¥2.52 – ¥12.0 · 差 5 倍

主行动次级链接↗主行动色每屏只用一处

卡片只用边框不用阴影 · 全页阴影 ≤ 2 处