Memoh 是一个自托管的 AI 智能体管理器。界面设计专注于高信息密度和扁平的结构边界，拒绝色彩斑斓、抽象浮夸的云端图形。

为何 AI 工具总显得轻飘虚无

大多数消费级 AI 工具都隐藏在绚丽的渐变色和玻璃面板背后，试图赋予机器逻辑以魔力。我们拒绝了这种做法。Memoh 是基础设施，它运行在本地 Linux 沙盒中，而非抽象的云端。

设计语言映射了一台虚拟计算机。卡片采用纯白或深炭黑（#121212），避免了生硬的纯黑。我们将主色调紫色的视觉占比限制在 15% 以内。这种色彩的稀缺性迫使开发者的注意力集中在等宽元数据和结构性的 1px 网格边界上，而非花哨的交互触发器上。

多智能体节点运行在隔离环境中，并直接映射到扁平的前端面板。

沙盒工作空间

管理活跃的 AI 智能体不应该像耍杂技一样在三个终端之间来回切换，只为了查看 Docker 日志或查询数据库以了解智能体的当前行为。

我们将复杂的容器状态——沙盒 CPU 边界、内存限制以及 MCP 工具状态——映射到一个高密度的三栏主从（Master-Detail）系统中。一切一目了然。

主从网格布局：固定的 240px 左侧导航轨道（L1 侧栏）结合了弹性的对话工作区（L2）和上下文侧栏（L3）。

主从布局同步

在设置页导航时，反复横跳的列宽会导致视觉迷失。为了解决这个问题，我将全部 14 个子页面中的 L3 侧栏锁死在严格的 lg:flex-[0.5] lg:min-w-[230px] lg:max-w-[260px] 网格约束中。在 MCP 工具与内存规则之间切换时，视觉体验现在显得沉稳而安定。

内存工程：L3 上下文轨道在无容器边距的平铺视图中并排显示原生 Markdown 内存块和活跃路由规则。

重构后的审批标签页：高密度的操作卡片取代了简陋的文本框，为智能体工具的触发提供了严密的控制。

二元悖论与三态控制

原有的 UI 在含混的“必须审核”标题下，使用纯文本框来输入 Glob 路径。这非常危险。如果智能体试图运行破坏性命令，系统应立即拦截，而不是将其留在队列中，让疲惫的操作员面临误批的风险。

我们将其替换为三态分段控制：

— 自动批准：对安全目录（例如 /tmp/*）的静默信任。
— 需要审批：对高风险操作（例如编辑源文件）的常规排队。
— 静默拦截：对关键高危操作的即时否决，保护操作员的注意力。

交互式 Glob 输入：抽象的路径被解析为直观的视觉药丸标签，使开发者能够瞬间审计匹配规则配置。

击败语法灾难

编写 Glob 匹配规则极易出错。漏掉一个星号或多打一个空格都可能在无形中暴露系统关键目录。

受到 AWS IAM 可视化策略编辑器的启发，我们将纯文本框换成了交互式规则构建器。输入的路径会即时封装为视觉徽章，并在后台运行校验器。在用户保存之前，UI 会以行内警告的形式标出如 /etc/ 或根路径等危险目录。

微调：状态计数器和规则指标采用高对比度的等宽字体，对齐至统一的 Y 轴基准线。

微交互与对齐指标

微小的错位会侵蚀用户的信任。在“工具审批”卡片中，状态文本和计数器曾处于高低不平的基准线上。我通过紧凑的 space-y-1 堆叠和使用 leading-none 清除行高修复了这一问题。

我们将主操作按钮固定在悬浮页眉上。当设置发生更改时，保存按钮旁会淡入一个内敛的“未保存更改”标记，让开发者了然于胸，而不显粗暴催促。

MCP 日志面板：高密度的事件条目显示实时的剪贴板动态和系统调用，配以沉稳的灰色状态标签。

规范优先提示词

在这个平台的构建过程中我大量使用了 AI，但绝非塞给它模糊隐晦的指令。相反，我首先在 Markdown 中撰写了极其详尽的布局规范。

通过预先定义精确的网格尺寸、字体层级和边界 Token，我们跨越了无休止的“尝试-报错”循环。由于清晰掌握了规则边界，AI 顺利生成了干净、生产就绪的 Vue 3 组件。

数学化动画原型

落地页包含一个粒子 Canvas，用于将散乱的外部输入汇聚入中央核心——隐喻了 Memoh 如何从 Slack 和 Discord 摄取数据。

我使用极坐标数学公式编写了粒子运动轨迹，并进行实时渲染。为了在移动端保持高性能，帧率监控器会在性能跌落至 30 FPS 以下时将粒子密度自动减半。它同样尊重 prefers-reduced-motion 规范，为敏感用户完全关闭动态效果。