MUI Designer

MUI Designer 是一个基于 React、Vite、TypeScript 和 MUI 构建的可视化 UI 设计工具。支持拖拽 MUI 组件到画布上，编辑属性和样式，配置交互行为，并导出为 JSON 或 PNG。

演示地址：MUI Designer

功能特性

• 拖拽 MUI 组件到画布
• 支持容器嵌套布局
• 属性编辑器、样式编辑器、交互编辑器
• 画布对齐线与磁吸功能
• 全局主题色与全局 CSS 设置
• 工具深色模式与画布深色模式
• 多页面管理与画布尺寸切换
• 节点重命名、锁定/解锁、显示/隐藏、层级调整
• 框选、多选与右键菜单
• 文本节点双击行内编辑
• 撤销/重做（快照历史，最多 50 步）
• JSON 导入/导出
• PNG 导出

技术栈

• React 19
• TypeScript
• Vite
• MUI
• dnd-kit

环境要求

• Node.js 20+
• pnpm

开发

安装依赖：

pnpm install

启动开发服务器：

pnpm dev

构建生产版本：

pnpm build

预览生产构建：

pnpm preview

使用说明

画布编辑

• 从左侧面板拖拽组件到画布
• 右键节点可访问属性、样式、交互、重命名、锁定等操作
• 双击含 children 属性的节点可直接编辑文字

节点锁定

锁定的节点仍可选中和查看属性，但不能：

• 移动
• 调整大小
• 通过右键菜单复制
• 通过右键菜单删除

锁定节点会在画布上显示锁定角标，属性面板进入只读模式。

选择与快捷键

• 在画布空白处拖拽可框选节点
• 右键画布空白处可全选/清除选择、撤销、重做
• Ctrl+A 全选
• Delete / Backspace 删除选中的未锁定节点
• Ctrl+C 复制
• Ctrl+V 粘贴
• Ctrl+D 复制并原地粘贴
• Ctrl+Z 撤销
• Ctrl+Y 或 Ctrl+Shift+Z 重做

在输入框、文本域或行内编辑状态下，撤销快捷键不生效。

主题与全局设置

• 主题色：控制画布内 MUI 组件的主色调
• 自动对齐：开关拖拽时的磁吸对齐行为
• 工具深色模式：作用于工具本身的界面，保存在本地存储中
• 画布深色模式：作用于画布内的组件主题
• 全局 CSS：注入到画布文档中

设计文件说明

导出的 JSON 包含：

• 页面数据
• 画布尺寸
• 组件树
• 交互配置
• 画布相关的全局设置

导出的 JSON 不包含：

• 工具深色模式（该项作为本地编辑器偏好，保存在本地存储中）

项目结构

src/
  components/   画布与界面组件
  context/      编辑器状态与数据模型
  hooks/        导出等功能 hook
  registry.tsx  可拖拽组件注册表
  templates.ts  预设模板
  utils.ts      通用工具函数

备注

• 撤销/重做基于快照实现，最多保留 50 步历史
• 行内文字编辑支持输入法（IME）组合输入
• 工具主题与画布主题分离，避免不必要的重渲染

Skills

• skill/mui-designer-json-generator/SKILL.md
• 用于根据 HTML / CSS / 视觉描述生成可直接导入本项目的 JSON
• 技能内置了导入结构、节点字段、组件白名单与生成约束，不依赖先读取项目源码

许可证

详见 LICENSE.txt。