---
title: "File-System-First UI"
type: concept
tags: ["design-pattern", "agentic", "ux", "openclaw"]
last_updated: 2026-04-22
---

## Overview
一种 Agent 原生 UI 设计范式——将所有 UI 配置、设置、过滤器、视图存储为文件系统中的文件（YAML/Markdown），使 AI Agent 可以像编辑代码一样自然地修改界面。

## Definition
传统 UI 依赖 API 或内部状态存储配置，Agent 需要通过 API 抽象层修改；而 File-System-First UI 直接让 Agent 读写配置文件，Agent 可以用相同的工具链（文件编辑、版本控制）操作 UI。

## Key Insight
> "Because every setting, filter, and view is stored as a YAML/markdown file, OpenClaw can modify the UI as naturally as it edits code. No API wrappers needed."
> — [[DenchClaw]] 核心设计哲学

## How It Works
1. **配置文件即 UI**: 所有视图定义、过滤器设置、列配置存储为 `.yaml` / `.md` 文件
2. **Agent 直接编辑**: Agent 使用标准文件编辑工具修改配置
3. **UI 自动响应**: 前端监听文件系统变化，实时更新界面
4. **版本控制**: 所有变更通过 Git 追踪，支持回滚和协作

## Benefits
- **No API abstraction**: Agent 不需要理解 API，直接操作原始数据
- **Standard tools**: Agent 用同一套文件编辑技能操作 UI 和代码
- **Version control**: UI 配置变更天然被 Git 追踪
- **Reproducibility**: 配置即代码，环境可复现
- **Transparency**: 所有变更可审计、可回滚

## Related
- [[DenchClaw]]: File-System-First UI 的典型实现
- [[Chrome Profile Cloning]]: 配合实现无缝浏览器自动化
- [[One-Command-Setup]]: 配套的安装哲学