"添加前端模板和运行代码模块"

qiming-vite-plugin-design-mode/examples/demo/README.md

@@ -0,0 +1,61 @@
+# Design Mode Demo
+
+这是一个完整的示例项目，展示了 `@xagi/vite-plugin-design-mode` 的所有功能。
+
+## 功能演示
+
+### 1. 样式编辑
+- 点击任意元素查看编辑面板
+- 实时修改 Tailwind CSS 类
+- 自动保存到源文件
+
+### 2. 内容编辑
+- 双击文本元素进入编辑模式
+- 修改后自动更新源代码
+- 支持纯文本内容
+
+### 3. Iframe 支持
+- 在 iframe 中自动隐藏 UI
+- 通过 postMessage 通信
+- 支持外部设计面板控制
+
+## 快速开始
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+访问 `http://localhost:5175` 查看演示。
+
+## 使用说明
+
+1. **启用设计模式**：点击右下角的 "Design Mode" 开关
+2. **选择元素**：点击页面上的任意元素
+3. **修改样式**：使用右侧面板修改背景、文字颜色、内边距等
+4. **编辑内容**：双击文本元素直接编辑
+5. **查看源码**：所有修改会自动保存到对应的 `.tsx` 文件
+
+## 页面说明
+
+- **Home**: 主页，展示核心功能卡片和可编辑示例
+- **Features**: 详细功能展示，包含各种可编辑元素
+- **Iframe Demo**: 演示 iframe 集成和通信机制
+
+## 技术栈
+
+- React 18
+- TypeScript
+- Vite 6
+- Tailwind CSS 4
+- Radix UI
+- @xagi/vite-plugin-design-mode
+
+## 注意事项
+
+- 仅支持静态字符串 className 的修改
+- 内容编辑仅支持纯文本节点
+- 所有修改会直接写入源文件，建议使用版本控制