Moon Gate 设计哲学：视觉远近法与月语义化的诞生

从月灵花束到编辑器，一个关于月光与代码的故事

一、缘起：一首记错的歌

Moon Gate 的故事，始于一个美丽的错误。

那时我想为自己的技术博客起一个名字。我的网名叫“月灵花束”——它源于一首日本歌曲《月と花束》（月与花束）。但在注册时，我记错了那个字，把“与”记成了“灵”。

月与花束，是月光下的花，温柔、短暂、有告别感。

月灵花束，变成了“月亮之灵绽放的花”——从静态的画面，变成了有生命的意象。

这个错误，让一个普通的网名，长出了自己的灵魂。

后来，我想要一个域名。moonlight.com 被注册了，moon.com 也被注册了。命运似乎在说：你不该走那条路。

于是有了 Moon Gate。

月光还在，但不再是“光”，而是一扇门。门后是什么？是代码构筑的世界，是极简的秩序，是每一个深夜 coding 的人可以进入的领地。

二、设计哲学：以月为名的极简秩序

Moon Gate 的核心不是“终端”，而是月亮。终端只是它的外壳，月亮才是它的灵魂。

1. 编辑器化：让网页拥有工具的精度

Moon Gate 的目标是：让网页拥有编辑器级别的视觉精度。

为什么 VS Code 看起来那么舒服？因为它知道什么该突出，什么该退后。操作符是暗的，函数名是亮的，注释是斜体的。这不是随意为之，这是视觉远近法。

在 Moon Gate 中，每一个组件都在模仿编辑器的语言：

  • 代码块带有窗口标签，像被嵌入的文件
  • 行内代码像月光一样在段落中亮起
  • 标题左侧有悬停才出现的激活条，像编辑器的行号区
  • 表格像数据库查询结果，悬停时光晕亮起

这不是“像编辑器”，这是让用户感觉自己在使用一个精密的工具。

2. 视觉远近法：信息的月球引力

代码是有层次的，界面也应该有。

我们建立三重视觉层级：

层级元素视觉特征
前景标题、按钮、代码高对比度、有光晕（月晕）
中景正文、卡片内容正常对比度、稳定（月面）
背景注释、边框、辅助信息低对比度、退后（暗物质）

具体实现：

  • 操作符和标点用 #64748b，视觉上“退后”
  • 正文用 #e2e8f0，稳定可读
  • 函数名和强调元素用 #7dd3fc，产生微弱的“自发光感”——如同月光。

3. 月语义化：每一种颜色都有它的月相

这不是随机的调色盘，而是一套完整的月亮色彩叙事。

颜色变量月相语义
深蓝--ui-bg夜空/深空底色，深邃稳定
主蓝--ui-primary晴夜月光核心操作、关键字
发光蓝--ui-text-highlight月晕强调、函数、代码
绿色--ui-success月灵花成功、字符串、生命力
黄色--ui-warning满月警告、数字、常量
红色--ui-error月食错误、删除、危险
紫色--ui-purple月虹Vue指令、装饰器（罕见）
灰色--ui-text-muted月影注释、元数据、退后信息

为什么红色用得那么少？ 因为月食罕见。如果每个月都是红月，那就不是奇观，而是末日了。Moon Gate 的红色只出现在错误、删除、标签这些“需要你注意”的地方。

三、组件设计语言：月球基地的工业骨骼

直角美学：拒绝果冻，拥抱工具

--ui-radius: 0rem;

圆角是“果冻”，直角是“工具”。直角传递秩序感、精密感、工业感——如同月球基地的建筑模块。在深色背景上，直角让组件边界更清晰。

所有组件——按钮、卡片、输入框、代码块——都遵循这个原则。没有例外。

像素锚点：机械细节

在按钮和卡片的四角，我们放置了 1px 的方块。它们平时隐藏，悬停时浮现。

这不是装饰，这是机械细节——让组件看起来像是物理实体，有固定的螺丝，有精确的边界。如同太空舱的铆钉。

静默交互：用户唤醒式

链接平时融入文本，只有悬停时才亮起。这叫 “用户唤醒式”交互——界面平时安静，等待用户需要时才反馈。

同样的逻辑应用在：

  • 标题左侧的激活条（悬停才出现）
  • 代码块的复制按钮（悬停才显示）
  • 表格行的悬停高亮

月晕与潮汐：光的溢散，而非阴影

Moon Gate 不使用传统阴影。阴影是“遮挡”，月光是“溢散”。

  • 月晕协议：交互时元素向外溢散冷光，模拟月球在黑暗中的微光。
  • 潮汐触发：悬浮状态是“潮汐上涨”，4px 位移 + 冷光溢散，像被引力拉动。

终端隐喻：与系统对话

  • 方括号 [ ]：将文字包裹在括号里，变成代码函数调用
  • 下划线 _：闪烁的光标，表示等待输入
  • 箭头 ->：终端里的路径切换
  • 全大写：命令式的语气

每一个符号都在说：你在和系统对话。

四、从博客到编辑器：月门的延伸

Moon Gate 最初是我的博客设计语言。后来我发现：为什么编辑器不能和博客长得一样？

于是有了 Moon Gate Dark——一个将博客配色带到 VS Code 的主题。

现在，Moon Gate 正在成为一套完整的 UI 库。从博客到编辑器，再到任何网页，Moon Gate 的设计语言可以出现在任何地方。

这就是“月门”的含义：从你的一隅，通向更广阔的世界。

五、技术实现：精确的工程化

设计令牌

:root {
  --ui-primary: #3b82f6;
  --ui-bg: #0f172a;
  --ui-bg-elevated: #131c31;
  --ui-text: #e2e8f0;
  --ui-text-muted: #64748b;
  --ui-border: #2d3748;
  --ui-radius: 0rem;
  --ui-glow: 0 0 15px -5px var(--ui-primary);
}

所有组件都基于这些变量，保证全站一致性。用户可以通过覆盖变量来自定义主题。

色彩派生逻辑

Moon Gate 不提倡随机定义颜色，而是建议基于基础变量通过 color-mix 进行派生：

--ui-bg-hover: color-mix(in srgb, var(--ui-primary), transparent 92%);
--ui-border-subtle: color-mix(in srgb, var(--ui-border), var(--ui-bg) 70%);

这样保证了在不同背景下，半透明效果始终协调。

双字体策略

--font-proportional: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
  • 正文用比例字体，长文阅读更舒适
  • 代码、按钮、元数据用等宽字体，强化“系统感”

六、最后

Moon Gate 不是又一个设计系统。

它是从一首记错的歌开始的旅程。 它是从被注册的域名里找到的路。 它是一个开发者为自己和同类人做的工具箱。

如果你用 Moon Gate 做了一个项目，你就是这个世界的共建者。

推开月之门，让月光照进你的代码。

© 2026 MOONGATE