wjinxuan/dsh-ai-ui-studio

README 摘要

dsh-ai-ui-studio AI UI Studio —— 用 AI 有效调整前端样式。在 DSH 里 预览 + 可视化编辑 你的 Web 应用（原生 HTML/CSS/JS，以及 Vue/React 等框架的运行时页面）。右下角一个「🛠 App Studio」悬浮按钮，打开可拖拽面板，内嵌同源预览你的应用： - 拖拽移动 元素、 点选 任意元素切换 - 属性面板改 文字 / 颜色 / 背景 / 字号 / 宽 / 高 ，实时预览 - AI 流式改 ：用自然语言描述改动，模型边生成边显示，写回源码 - 「确认写回」把改动清单交给 DeepSeek 定位并落盘到源码文件 机制：Host 把目标应用静态托管到 / app preview/ 并注入编辑脚本，iframe 同源加载；改动先在预览里临时覆盖，点「确认/AI 改」才调用 LLM 写回源码。SSE 流式接口为 / app apply sse 。 安装 作为依赖引入（例如放到 DSH 的 plugin 依赖清单里）： 使用（组合行） 在 Host 组合里加一行（ webServer 、 fs 是硬依赖，由 host 组合提供）： appDir 指向你的应用根目录（下面要有 public/index.html 、 public/style.css 、 public/app.js ）。缺省时读 APP STUDIO APP DIR 环境变量，再缺省是 ai-ppt-generator 的路径——记得按你的项目改。 Client 半由 DSH 前端自动加载（包内 ./client 导出）。 依赖的服务 面 服务 Host webServer 、 fs （必需）； llm 、 agentDefaultModel 、 shell （可选） Client slots （必需）； react llm + agentDefaultModel 用于 AI 写回；缺失时预览/拖拽仍可用，仅「确认写回 / AI 改」不可用。 shell 用于「启动」按钮。 已知限制 - 预览是 静态托管 （Host 动态环境无原始 HTTP 流式代理能力），应用后端 /api/ （如 SSE 生成）不在预览内可用；真实运行时功能请用原应用端口。 - AI 写回依赖模型定位质量；JS 动态渲染的元素（如模板字符串里的 slide）映射回源码时可能不精确，v1 用于验证并迭代提示词。 License MIT

分类