v0.6.5 — 全站视觉与动效重做

视觉与动效（UI）

• 工具页改为双栏编辑式布局：此前工具页整页单栏纵排——72px 图标孤零零贴在左上角，下面是一路左对齐的文字列，右侧 144px 完全空着，图标因此显得"位置不对"。现改为 320px + 1fr 双栏：左栏是工具身份（图标 + 厂商 / 分类 + 名称 + 用途 + 来源标签 + 事实表 + 官方文档 / 源码仓库按钮 + 回到目录），随滚动 sticky 跟随；右栏是主内容（安装方式 / 常见问题 / 收录与核验范围 / 相关场景）。窄屏（≤900px）回落为单栏，身份区在上、内容在下。
• 事实表收进左栏：分类、维护来源、GitHub Stars 与快照日期原本是占满 1040px 宽的两列表格，现在并入 88px 键 + 内容的窄列，不再与正文争夺横向空间。
• 氛围层：网格底纹与逐点跃动：Swiss 网格原本只作为分隔细线存在，从未成为可呼吸的底纹。现在首屏与工具页首段铺一层极淡的点阵底纹，12 个品牌蓝光点按 240ms 间隔依次跃动，形成横向流动的波——做法参考 Linear 的网格点背景（逐点错峰跃动而非整体淡入淡出）。底纹用遮罩羽化到透明，不留矩形边界；同时叠一层 3.5% 的 SVG 颗粒，避免大面积平涂过于数码。
• 品牌光晕与流动：首屏加入两团极淡的径向渐变光晕（品牌蓝 7% / 4.5%），并以 24s 周期缓慢漂移缩放，让平面版面有光源和呼吸感。整层同样羽化收尾。
• 终端窗口的厚度：安装命令窗口改为渐变描边 + 双层投影（内高光 + 外深影），从「一个黑框」变成有厚度的窗口；悬停时抬升 2px，获得焦点时补一圈品牌蓝描边。
• 命令逐词点亮：命令按词依次浮现（55ms 间隔）。文字本身一次给出、不增删，只是节奏上从左到右点亮——不是打字机。命令末尾加呼吸光标，标记「这里可以继续输入」。
• 页面流动：顶部新增阅读进度条，随滚动推进（渐变细线，只用 transform 缩放）；页头在滚动后转为半透明毛玻璃（blur 14px），脱离平面形成前后关系。
• 交互反馈：目录卡片悬停时一道柔光自左向右扫过，替代整块底色突变；主按钮改用品牌渐变填充并在悬停时上浮加投影；标签悬停上浮并转品牌色；复制按钮点击后图标从「复制」翻转为「对勾」，比只换文字更直观。
• 安装命令改为终端窗口：工具静态页原先把安装命令渲染成一个裸 <pre>，没有窗口框、没有提示符，静态页也没有复制入口。现改为完整终端窗口组件——窗口栏与三个点、$ 提示符、命令按词分色（命令名 / 标志 / 参数值）、右上角复制按钮；命令分色只按空白切分，不改写命令本身。没有经确认安装命令的工具改用明确的空状态说明，不再输出空窗口。
• 静态页可复制安装命令：新增 src/command-copy.ts，工具页与指南页的复制按钮就地反馈「已复制」；剪贴板不可用时自动选中完整命令供手动复制，不需要刷新重试。
• 工具页首屏层次：主视觉新增 72px 图标衬底、来源与分类标签组、GitHub Stars 与快照日期进标题区；「用途与来源」区去掉与首屏重复的图标。
• 内容页错峰进场：工具页与指南页的面包屑、标题、区块依次浮现（延迟 0 / 60 / 120 / 180 / 240 / 300ms，360ms 进场），只改 transform 与 opacity，遵循既有动效契约；prefers-reduced-motion 下全部关闭。
• 提示符配色修正：浅色主题下 $ 提示符原用品牌蓝，在深色终端底上只有 1.64:1，几乎不可读，改用终端内的成功绿（10.82:1）；终端区全部配色最低 7.33:1。
• 窄屏降级：640px 以下终端窗口改为命令与按钮上下排列，命令不被压缩到不可读；四阶视口（390 / 768 / 1280 / 1600）均零横向溢出。

v0.6.1 · 字体栈修复、标签可读性与 README 收敛

修复

• Windows 上中文不再掉宋体：字体栈补了 Microsoft YaHei 兜底。原来只有 PingFang SC，Windows 上没装它时会一路退到 sans-serif 默认字体，整个中文界面走形。
• 中英混排基线一致：Arial 不再排在 PingFang SC 之前。原顺序下数字与拉丁字母走 Arial、汉字走 PingFang，两者视觉重量对不上。
• macOS 上拉丁字母走系统 UI 字体：字体栈以 -apple-system / BlinkMacSystemFont 打头，不再先命中 Helvetica Neue。
• 分类标签字号从 10px 提到 11px、字重 400 提到 500。10px 是原界面上最小的字，1x 屏上接近可读下限。

无障碍

• 首页与英文首页的截图 alt 文案按当前界面重写：补上「收录标准说明」与「来源筛选」，读屏用户听到的描述不再停留在旧版布局。

文档

• README 首屏收敛：去掉社交卡大图与锚点导航行（GitHub 右侧自带目录，重复占首屏），首屏只留标题、标语、一行徽标。正文起点从第 32 行提到第 17 行。
• 正文截图从 3 张整宽图收敛为 1 张主视觉 + 1 个折叠区，不再逐张打断阅读流。
• 截图统一 width=720 + max-width:100%：GitHub 移动端正文栏约 340px，原来的固定宽度会撑破；三张图量化到 128 色，547KB → 172KB。
• 中英两版结构完全一致。

v0.6.0 · 深色主题与动效

深色主题

一个给终端用户看的 CLI 目录，用户整天对着深色终端，站点却只有纯白——这是场景错位，不只是审美问题。

现在有了：默认跟随系统，顶栏按钮可手动切换并记住选择。首次绘制前落定主题，不会先闪一下白再变深。

做法

只覆盖语义令牌，组件规则零改动。底色用带蓝的深灰 #0b0d12 而不是纯黑，避免和终端窗口一样死板。

品牌蓝 #002FA7 在深底上对比只有约 2:1，不够读。文字与链接改用同色相提亮版 #7d9dff（对 bg 7.53:1），实心按钮反转为「亮蓝底 + 深色字」，保持同一色相家族。

深色下层次反转为「越亮越靠前」：工具预览卡片抬到 --surface-hover，不再读成凹陷。

三处必须固定字面色

1. 品牌页色板——标注的是具体 hex 值。跟随令牌会让标着 #FFFFFF 的色块渲染成近黑，文档就成了假的
2. 主标记展示板——用 --accent 会把 Klein Blue 提亮成另一种蓝，等于改掉品牌色
3. 单色标记——源文件是 #19191d，深底上会消失，换浅色版本展示同一几何

字标换色用 CSS content: url()，不需要 JS、不产生闪烁。

对比度

深色 27 组全部 ≥4.5:1，写入 contrast.config.json 的 palettes.dark。

动效

• 翻页新增的卡片按 45ms 错峰滑入，已有卡片原地不动——视觉上是「追加」而不是「重绘」
• 主题按钮按下有 0.92 缩放回弹
• 两者都在系统「减弱动态效果」下关闭

---

验收：pnpm build 通过（194 个本地化页面），40 项行为与安全回归测试通过，浅色模式无回归。

商标与图标归各权利人所有，本站为独立社区项目，不代表任何厂商背书。

v0.5.0 · 浏览密度与卡片视觉层次

浏览密度

目录改为渐进加载：首屏 12 张卡片，按「再看 12 个」追加，加载完自动隐藏入口。

实测手机端整页高度 44323px → 8984px。此前 91 张卡片单列铺开，用户只是「看看有哪些工具」，却要滚过 4 万像素。

• 筛选、切换分类、清空条件会重置分页，避免残留上一页浏览位置
• 入场动画只在首屏播一次，翻页与筛选不再重播整块卡片
• 「最近收录」不再六张卡片都写「维护者收录」，改为显示该工具的实际用途；有社区推荐者时仍单独标注

视觉层次

• 前三名名次改为实心品牌蓝标记，榜单的实质信号一眼可见
• 卡片指标区去掉内嵌灰底圆角框，改用细分隔线——此前是卡片里再套盒子，91 张并排形成灰色噪点，是「看起来平」的主因
• 卡片悬停与键盘焦点显示顶部蓝线，位置固定不挤压内容
• 分区标题加细分隔线，把长页切成可扫读的段落
• 手机端首屏收紧：标题降一档、留白减半

核验入口

「收录与核验」改为只在存在真实核验记录时出现。91 个工具里只有 1 个有核验记录，此前 90 张卡片都在重复「范围待补充」——不新增信息，还把「本站没核验」放大成主视觉。

待补状态仍由工具详情如实说明，卡片继续禁止出现「已核验 / 已验证 / 实测通过」等表述。这是把证据留在详情、把扫描面留给比较。

---

验收：pnpm build 通过（194 个本地化页面校验），40 项行为与安全回归测试通过，手机端零横向溢出，「加载更多」触控高度 44px。

商标与图标归各权利人所有，本站为独立社区项目，不代表任何厂商背书。

v0.4.1 · 视觉主张前置、分享卡分流与仓库门面

视觉主张前置与头像图标

• 首屏新增 lead 行承载品牌主张：「人工收录，按收录日期排序 —— 和工具的版本发布时间不同」，品牌蓝落在「人工收录」上
• 「最近收录」降为次级栏目，标题层级与「CLI 排行榜」拉开距离
• 收录日期右对齐，移除重复的 ↗ 箭头
• 工具图标分两类：厂商品牌几何保留原样，GitHub owner 头像改为中性字母块，覆盖卡片、预览、详情、指南四处渲染路径

分享图与社交元数据

• 新增中文分享卡 social-card-zh.png，与英文卡版式完全一致
• og:image / twitter:image 按语言分流，中文站指向中文卡
• 分享图统一用 PNG —— 社交平台对 SVG 的 og:image 支持不一致，会导致分享预览空白
• 首页补齐 og:site_name、图片尺寸与 alt 字段

仓库门面

• README 首屏改用 PNG 分享卡，暗色主题下不突兀
• 标题下用一句话说明收录规模，新增目录筛选与工具详情两张真实截图
• 可折叠区展示按分类的工具一览，中英双版结构对齐

SEO

• 工具详情页改为双语静态页，补齐收录出处与检索索引

---

收录规模：91 个工具（厂商官方 40 · 社区项目 51 · 7 个用途分类）

发布说明：v0.4.1 聚焦视觉主张、分享图与仓库门面。所有内容变更经 pnpm build 验证（类型检查 + 数据校验 + 194 个本地化页面验收），40 项行为与安全回归测试通过。

商标与图标归各权利人所有，本站为独立社区项目，不代表任何厂商背书。

v0.3.1 · 视觉层次与交互细节

首页与目录视觉打磨：强化品牌层次、主入口、工具预览和卡片焦点反馈，保留原厂图标及现有蓝白方向。

工具预览随鼠标或键盘焦点同步安装命令，复制后就地确认。详情优先展示安装操作，数据口径可展开；支持遮罩关闭、背景滚动锁定和手机可达关闭入口。所有新动效遵循系统减弱动效设置。

验证：22项测试、23组配色对比、独立代码审查、四档响应式及剪贴板延迟/连续操作回归通过。

v0.3.0 · 一起维护 CLI 社区目录

社区参与流程首版：无需改代码即可通过 GitHub 表单推荐 CLI 或修正信息，保留 PR 投稿路径。

新增最近收录、收录时间与出处、维护者及经同意的推荐者署名。历史90条目恢复真实首批记录，不伪造社区投稿。

待核验、需补充信息、已收录由维护者人工处理。复用 GitHub 登录，审核、合并和发布仍由人决定。

验证：22项测试、严格类型、构建、21组配色门禁、独立审查及四档响应式通过。

v0.2.2 · 筛选体验与项目质检联动

搜索、分类、厂商和排序统一为筛选面板：厂商可搜索、排序带解释、条件可逐项移除，支持键盘与手机布局。

线上移除本机安装筛选，改为“厂商官方 / 社区项目”，卡片和详情同步展示来源。

CLI 详情新增 Scorecard 项目质检入口，绑定对应 GitHub 仓库并按需打开报告，不批量审计或伪造分数。

验证：19 项测试、构建、21 组配色门禁和独立审查通过；浏览器验证组合筛选、键盘、URL 恢复、四档响应式和真实 Scorecard 报告跳转。详见 docs/design/FILTER-EXPERIENCE-REVIEW.md。

v0.2.1 · 品牌标志与工具指标

首页与品牌页现在实际使用完整组合 Logo。CLI 卡片直接展示仓库最近更新时间，并接入 16 个 npm 包的近 30 天下载数据与下载排序。

下载量有来源及统计区间，不代表调用次数或用户数；缺失数据不计为零。保留人工刷新和 PR 人工审核。

验证：18 项测试、严格类型检查和生产构建通过；线上四档响应式检查无溢出；独立代码审查通过。自建 Scorecard 页面复测 7.2/10，既有待办与评分局限已记录。

v0.2.0 · 品牌与页面动效体系

统一目录的品牌与页面体验：新的几何 S + 光标 Logo、真实工具首屏、按用途发现、可分享详情，以及可下载 SVG 的品牌与设计规范页。

首页：https://supercli.site/
设计规范：https://supercli.site/brand.html

验证：14 项回归、21 组对比度、四阶响应式浏览器与独立代码评审通过。保留本地核验、人工审核与手动合并流程，无自动审核或定时任务。