把工作空间做成数据：一次 AI 驱动的 UI 与数据分离实践

11 0 0

为什么要做这个页面

我的桌面上有 Mac mini、MacBook Pro、NAS、一台路由器、若干把键鼠；软件层面有 VS Code、Obsidian、Claude Code、Codex、WorkBuddy AI、Gitea……零零总总二十多项。

这些工具会更新换代。M5 Pro 会变成 M6，256GB 的 iPhone 会变成 512GB，Codex 的版本号会迭代，某天某个软件可能就停更了。但有一件事不会变：我需要一份记录，告诉自己（也告诉 AI）我在用什么、为什么用、怎么用的。

于是我做了 [My Workspace](https://www.icsteve.com/misc/index.html) 这个页面，把所有硬件和软件整理成一份可浏览、可搜索、可被 AI 读取的结构化文档。

用 DESIGN.md 让 AI 理解”好看”

做这个页面时，我遇到了一个很实际的问题：我知道我要什么内容，但我不擅长前端设计。页面的排版、配色、间距、字体层级——这些事情交给 AI 来做比我快得多，但 AI 需要一份它读得懂的设计规范。

这就是 [Refero Styles](https://styles.refero.design/) 的价值。这个网站收录了 2000+ 个来自知名产品网站的设计系统，每一个都附带一份 AI 可读的 DESIGN.md 文件——里面包含颜色、字体、间距、组件规范，可以直接喂给 Cursor、Claude Code、Codex 等 AI 编程工具。

我的做法是：从 Refero 上找到一个叫 “Dimension” 的设计系统，拿到它的 DESIGN.md，作为 AI 的设计上下文。然后我在多轮对话里告诉 AI：”我要一个工作空间展示页面，左边是工具列表，右边是详情面板，支持中英文切换。” AI 拿着 DESIGN.md 里的色彩、排版、组件规范，一步步把页面搭出来。

不是我在写 CSS，是 AI 在读懂设计语言后替我写。

多轮对话，逐步沉淀

实际过程不是一句话就搞定的。我花了好多轮对话来打磨：

第一轮出了基本框架，但配色太暗，详情面板的层级不清晰。
第二轮调整了色彩对比度和卡片圆角，加了渐变背景。
第三轮发现数据应该外置——不要把 26 个工具的详细信息硬编码在 HTML 里，而是放在一个单独的 `data.json` 里。
第四轮补了中英双语支持，每个条目都有 `lang.en` 和 `lang.zh` 两套文案。
第五轮加了 SVG 图标系统，每个工具配了自己的品牌色渐变。

每一轮对话不是推倒重来，而是在前一轮的基础上做增量修改。内容在对话中逐步”沉淀”——从模糊的想法变成具体的、可交付的结构化文档。

架构：UI 和 data.json 分开

最终产出的架构非常简单：

`index.html` — 纯 UI：布局、样式、交互逻辑
`data.json` — 纯数据：26 个工具的名称、规格、描述、标签、图标

页面加载时，`index.html` 通过 `fetch` 读取 `data.json`，动态渲染列表和详情。两者完全解耦。

这个分离看起来没什么了不起，但它解决了一个很实际的问题：改数据不需要碰 UI，改 UI 不影响数据。

更关键的是：AI Agent 只需要读 `data.json`，就能知道我用什么设备、什么软件、每项的规格是什么。它不需要解析 HTML、不需要理解 CSS 选择器、不需要在 DOM 树里翻找。一个 JSON 文件，全部信息尽在其中。

数据比硬件更长命

Mac mini M6 迟早会变成 M7。iPhone 16 Pro Max 迟早会变成 17。Codex 迟早会换一代模型。

但这份 `data.json` 里的记录——我在 2026 年 9 月用了什么、配置是什么、为什么选它——这个快照不会变。它是时间戳。

半年后我升级了设备，只需要更新 `data.json` 里的几个字段。旧数据会沉淀成历史，新的数据覆盖上去。这份文件会变成我的”技术装备年表”——一份机器可读的个人技术档案。

如果某个 AI Agent 需要了解我的工作环境——比如推荐一个适合我硬件配置的软件、判断某个工具是否和我的工作流兼容、或者提醒我某台设备的保修快到期了——它只需要读这个 JSON。

AI Agent 视角：只读 data，不关心 UI

这是整个设计中最有前瞻性的一点。

传统做法是把所有信息塞在 HTML 里，人和 AI 都得从标签丛林里扒内容。而现在，UI 是给人看的，data.json 是给 AI 读的。各取所需。

`data.json` 里每个条目的结构很清晰：

{
  "id": "macbook-pro",
  "category": "hardware",
  "number": "02",
  "lang": {
    "en": { "name": "MacBook Pro 14\"", "specs": [...] },
    "zh": { "name": "MacBook Pro 14\"", "specs": [...] }
  }
}

任何 AI Agent——不管是 Claude、ChatGPT、还是将来的什么模型——拿到这个文件，都能立刻理解：这是一个硬件设备，编号 02，叫 MacBook Pro 14″，规格列表如下。不需要爬虫，不需要 OCR，不需要 DOM 解析。

这就是”AI-first”的内容架构：不是先做人再适配 AI，而是从一开始就为两种”读者”设计两份接口。