青山湖设计风格的诞生记

7 月初，我在做 Argos 的界面时遇到一个很典型的问题：功能已经成形，页面也不算难看，但它没有自己的气质。

当时最容易走的路，是让 Agent 套一套现成的 macOS glass 风格，再选一组低饱和蓝绿色。但这种做法只能得到“正确的现代界面”，得不到一个能被记住、还能持续指导后续决策的产品视觉。

我最后给 Codex 的要求只有一句：

你知道临安青山湖水上森林吗？产品配色和调性从这个景区的主要元素蒸馏。

后面十天里，这句话从一个模糊意象，逐渐变成 Argos 的 dashboard、menu bar、floating island 和灵动卡，又迁移到“小界”的 Web 工作台，最后沉淀成一份 Agent 可以直接执行的 DESIGN.md。

这篇文章不是介绍一组颜色，而是复盘一套设计语言是怎样在我和 Agent 的连续反馈中长出来的。

一句话总结

青山湖设计风格的核心，不是把界面染成绿色，而是把青山湖的自然层次翻译成数字产品的职责分工：雾白负责空间与材质，湖水青负责操作，水杉绿负责状态，青山灰蓝负责信息层级，晨光金只负责极少量高光。

它真正成型的标志也不是有了一份 palette，而是面对一个新组件时，我们开始能稳定回答三个问题：什么该突出、什么该退后、什么绝不能出现。

起点：我需要的不是“好看”，而是一个母题

AI 很擅长生成看起来完成度很高的界面，但如果提示词只有“高级、简洁、科技感”，结果通常会收敛到几种熟悉套路：高饱和蓝紫渐变、纯黑科技背景、玻璃卡片层层嵌套、发光描边和胶囊按钮。

这些元素单独都没有错，问题是它们没有产品身份。换一个 Logo，仍然可以属于任何 AI 工具。

青山湖对我有价值，是因为它不是一个抽象形容词，而是一组可以观察、拆解和约束的真实对象：

自然元素	视觉感受	UI 职责
湖面	稳定、清透、有纵深	主操作色、进度、选中态
雾带	柔化边界、制造层次	画布、glass surface、blur
水杉林	垂直、克制、有生命力	成功态、在线态、进度状态
浮萍	有生机但不主导	5% 以内的自然 accent
远山	安静、可靠、低对比	信息色、次级文字、结构层
晨光	稀缺、温暖、有方向	极小面积高光与提醒
湿木与陶土	自然的警示感	error / danger，而不是通用红

这里最重要的动作是“蒸馏”，不是“复刻”。

我不需要在每个页面放一张水上森林背景，也不想把产品做成旅游宣传页。我需要的是把自然景观里的层次关系，映射成界面里的语义关系。

第一版并没有直接成功

有了母题，Agent 很快能生成一组视觉上相关的颜色。但真实界面一跑起来，问题马上暴露。

最早的倾向是把“自然感”理解成更多颜色：湖蓝、青绿、浅金、泥土色同时出现；把“现代感”理解成更多胶囊和渐变；把“氛围感”理解成更大的装饰面积。

它们组合在一起，反而让界面显得花哨。

我在几轮截图反馈里不断删东西：

两个胶囊按钮太突兀，不要求为了“风格”强行使用胶囊。
中间区域颜色太花，应该只从青山湖体系里选一个承担主导职责的颜色。
彩带装饰太长，不能侵入信息区中心。
Header 不是越窄越专业，也不是越宽越大气，要回到统一的页面间距。
组件贴边时，先修尺寸与布局约束，不要用更多装饰掩盖问题。

这段过程让我确认了一件事：设计风格首先是一套删减规则。

如果一套风格只告诉 Agent“可以用什么”，它很快就会把所有特征同时用上。真正能提高输出稳定性的，是同时写清楚“最多用多少”“只能用在哪里”“什么情况下不要用”。

因此后来规范里出现了很多带比例和边界的表达：浮萍绿控制在 5% 以内，晨光金只做边缘光，常规圆角控制在 6–12px，动效只服务状态变化，卡片不能继续嵌套卡片。

雾白成为核心，不只是因为它好看

青山湖风格真正定型，是在做 Argos 灵动卡时。

灵动卡需要接近 macOS 桌面小组件的玻璃质感。最直接的实现是 NSVisualEffectView、系统 material 和 behind-window sampling，但这条路径曾经触发打开即崩。为了稳定性，我们一度把它降级成普通的浅色 panel，结果功能稳定了，气质也一起消失了。

我当时给出的反馈是：

加安全 blur，因为雾白这个是青山湖风格的核心设计元素之一。

这句话推动了一个很关键的技术取舍：保留“雾”的视觉语义，但不恢复高风险的系统采样链路。

最后采用的是纯 SwiftUI 内部绘制：

大面积雾白柔焦带；
左上角雾白 soft blur；
右下角很淡的湖水青 blur；
所有效果裁剪在卡片内部；
不使用 NSVisualEffectView；
不使用 .behindWindow 或 .underWindowBackground。

这次取舍让“雾白”从一个颜色升级成了整个设计体系的基础设施。它既是背景色，也是分层方式；既负责氛围，也负责降低信息噪声；还必须服从稳定性、性能和可读性。

这也是我现在判断视觉方案的一个原则：设计语言不能绕过工程约束，好的设计 token 应该能在安全实现与理想效果之间找到可迁移的中间层。

从色板走向语义系统

经过几轮实战后，青山湖不再是一组零散的 hex，而是逐渐形成了 Seed → Map → Semantic → Alias 的 token 架构。

:root {
  --color-bg-base: #f4f6f1;       /* 暖雾白画布 */
  --color-bg-container: #fbfcfa;  /* 玻璃容器 */
  --color-primary: #3c8f88;       /* 湖水青主操作 */
  --color-text: #183b40;          /* 深湖墨正文 */
  --color-success: #4f8751;       /* 水杉绿 */
  --color-info: #4d7180;          /* 青山灰蓝 */
  --color-warning: #9c782d;       /* 克制晨光金 */
  --color-error: #a95b4b;         /* 雨后陶土 */
}

其中最重要的不是颜色值，而是语义稳定：

lake-teal 永远优先服务主操作，而不是随手给一个装饰图标。
cypress-green 表示完成、在线与健康状态。
dawn-gold 不承担大面积品牌色，只提示稀缺状态。
浅色区域的主文字使用深湖蓝或水杉墨绿，不滥用纯白发光字。
Claude Code 与 Codex 可以有不同 accent，但都必须来自同一景区 palette。

颜色一旦有职责，Agent 的自由度反而更健康。它仍然可以生成新组件，却不必每次重新猜一遍品牌方向。

布局也是青山湖风格的一部分

如果只换颜色，任何设计系统最后都会沦为皮肤。

在 dashboard 的几轮调整里，我逐渐把“青山湖的层次”落实到布局密度和信息结构上：稳定侧栏、清晰控制条、12–16px 卡片内距、20–24px section gap、连续圆角，以及不依赖巨大留白的中高信息密度。

一次 Header 调整很能说明问题。最初品牌名与 Tab 名都挤在左侧，为了显得紧凑又不断压缩高度，最后整个 Header 既窄又别扭。重新排布后，结构变成：

“灵动台”作为产品标识放在上方中间；
当前 Tab 名放在下方左侧；
筛选放在中间；
刷新操作放在右侧；
间距统一回到同一套节奏。

这里没有新增任何“青山湖装饰”，但它比多加一条湖水渐变更符合这套风格。因为自然景观给人的舒适感，本质上也来自前景、中景、远景各自有位置，不互相争抢。

从 Argos 到小界：迁移后才算设计系统

只在一个产品里成立的规则，还只能叫项目风格。

后来我把这套语言迁移到“小界”的 Web 工作台。平台从 SwiftUI 变成 React、Umi、styled-components 和 Tailwind，产品形态也从 macOS menu bar 工具变成 AI 控制台，但核心映射依然成立：

暖雾白作为低噪声 canvas；
湖水青作为唯一主操作色；
水杉绿表达任务完成和运行状态；
青山灰蓝承担信息与次级层次；
glass surface 保持轻量，不做卡片套卡片；
页面维持专业工具需要的中高信息密度；
loading、empty、error 和 success 使用同一套自然语义。

迁移过程中，设计体系又吸收了 Web 产品的新约束：正文默认 14px、工具栏控件 32–36px、桌面优先但窄屏不溢出、动效支持 prefers-reduced-motion，以及资源统一使用 WebP。

最终沉淀出的 DESIGN.md 不再叫某个产品主题，而是更通用的 Jiangnan Landscape Glass Dashboard。它保留青山湖的来源，同时把能力抽象成 AI 控制台、桌面 dashboard、settings、menu bar 和 floating panel 都能复用的设计 brief。