2026年1月 - 2026年5月
开源项目
UI/UX 设计师（重构与界面打磨）
Vue 3 (TypeScript)
Tailwind CSS & shadcn/ui
Docker API & Go 后端
Memoh 是一个自托管的 AI 智能体管理器。界面聚焦于高信息密度与扁平的结构边界，回避色彩斑斓的云端图形。
基础设施隐喻
告别魔幻的云端修辞
为何 AI 工具总显得轻飘虚无
消费级 AI 工具喜欢用渐变色和玻璃面板包装机器逻辑。Memoh 跑在本地 Linux 沙盒里。它是基础设施，不是装饰。
设计模拟虚拟计算机。卡片纯白或深炭黑。紫色占比不超过百分之十五。开发者看结构，不看按钮。
多智能体节点运行在隔离环境中，并直接映射到前端面板。
认知挑战
驯服多智能体运行时
沙盒工作空间
查看 Docker 日志不需要三个终端。容器状态——CPU、内存、MCP 工具——直接纳入三栏主从布局。
主从网格布局：左侧导航轨道、弹性的对话工作区与上下文侧栏构成三栏结构。
复杂表单的渐进式披露
网络配置页面涉及 SD-WAN 策略、IP 绑定、端口映射。一个字段错误就能断网。原设计逐行排列所有字段——密度越高，遗漏风险越大。
我采用渐进式披露：SD-WAN 开关始终可见，基础参数收入卡片，认证密钥放入折叠区。
Network 配置面板：SD-WAN 开关与 Tailscale 连接类型位于顶部，Primary Configuration 收纳于卡片，高级参数收入折叠区域。
人机协同（HITL）治理重构
设计人机协同（Human-in-the-Loop）审批体验
重构后的审批标签页：操作卡片取代了纯文本框，为智能体工具的触发提供更严密的控制。
二元悖论与三态控制
原 UI 用纯文本框输入 Glob 路径。破坏性命令应该被拦截，不是排队。我们替换为三态控制：安全目录自动批准，高风险操作需要审批，关键操作静默拦截。
Network 配置面板：公网出口、SD-WAN 与内网通道各自收纳于独立域卡片中。Box-in-Box 结构使管理员无需阅读标签即可定位关键控制节点。
盒中盒：复杂表单的从属关系可视化
传统表单逐行堆叠字段。越多越容易漏。问题不在注意力，在于信息架构没有优先级。
Box-in-Box 用外层卡片定义网络域，内层容纳参数。从属关系通过视觉嵌套呈现。管理员快速找到三样东西：网络状态、SD-WAN 开关、核心操作入口。
嵌套表单展开：IP 绑定与端口映射折叠于外层域容器之下。盒中盒的视觉层级使主从关系无需文字说明即一目了然。
微交互与对齐指标
错位降低信任。我收紧了工具审批卡的间距和行高。主按钮固定在悬浮页眉，设置变更时"未保存更改"标记淡入——告知，不打扰。
MCP 日志面板：高密度的事件条目显示实时的剪贴板动态和系统调用。
落地页架构
从分镜 storyboard 到生产代码
Hero 区域：被 radial-gradient 遮罩的网格背景在内容到达之前建立空间秩序。Logo、标题、副标题与三组 CTA 按钮按延迟依次入场。
入场序列
网格背景加百分之六十径向渐变遮罩开场。Logo 先出现。标题 100ms。副标题 200ms。CTA 300ms。同一缓动，同一次数。
网格是分镜。延迟入场是 AI 智能体将规范翻译为代码。动画记录工作流，不是装饰。
Bento 网格：Omnichannel Native 占据 2×2 卡片，附带平台 Logo 跑马灯。Memory Engineering 以 1×2 竖卡站立。Web UI、Containerized Isolation 与 MCP Ecosystem 各占一个单元格。
Bento 网格作为信息架构
功能优先级通过空间表达。Omnichannel Native 占 2×2 主卡。Memory Engineering 占 1×2 竖卡。三个次要功能平分单格。
这与产品内 Network 面板的 Box-in-Box 同构。同一逻辑，不同尺度。
功能卡片的 hover 状态：边框从微妙变为可感知，SVG 插图提升不透明度，外部链接图标浮现。
克制的悬浮反馈
网格对光标作出低振幅不透明度响应。卡片边框变亮。SVG 从 40% 到 100%。外部链接图标淡入。
无 scale，无 translate，无弹跳。仅颜色和透明度。两百毫秒。开发者工具不需要表演。
页脚 CTA：网格背景上的单一高对比度按钮，与 Hero 区域保持相同的视觉语言。
设计系统原则
四条规则：
零阴影画布。全部 shadow-none。层级靠边框和背景 token。只有悬浮导航有阴影。
紫色稀缺。品牌色仅用于主 CTA。不做装饰。克制使其有效。
单色悬浮。仅颜色和透明度变化。无空间位移。保持扁平，方便快速扫描。
奢侈留白，高密内容。大间距包裹高密度信息。留白即结构。
规则在落地页与产品界面中一致应用。
https://memoh.ai/
https://github.com/memohai/memoh
https://docs.memoh.ai/