# SVGDesigner

**Repository Path**: codekpy/svgdesigner

## Basic Information

- **Project Name**: SVGDesigner
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-13
- **Last Updated**: 2026-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SVGDesigner

> AI 驱动的 SVG 海报 / 图标设计器 · 本地优先的桌面应用
> Tauri 2 + React 19 + TypeScript + Vite + Zustand + Rust

在无限画布上直接设计矢量作品（海报 / 图标 / 徽章 / 插画），并让 **AI 通过 function call 直接操作画布**：
它自带离线图标库与设计知识库、会先给出改动提案供你预览确认、还能在多个方案/图标间弹卡片让你挑选。

## ✨ 功能

### 画布与编辑
- 原生 SVG 渲染 + 自研交互层，文档模型（JSON 树）为唯一真源；无限工作区 + 多个画布容器（frame，可裁剪）
- 选择 / 移动 / 8 手柄缩放（Shift 等比、Alt 中心）/ 旋转、框选、吸附参考线与智能对齐
- **双击进入编组**（隔离编辑，支持多层嵌套；面包屑跳级返回，Esc 逐层退出）
- 形状（矩形/椭圆/多边形/星形/路径/文本/图片）、渐变编辑器、描边（颜色/宽度/虚线/圆头）、**阴影、模糊**、透明度、锁定/显隐
- 图层树（重命名/拖拽排序/编组解组/右键菜单）、对齐分布、撤销重做（含 AI 改动单步撤销）
- 导出 SVG（含渐变/滤镜/资源嵌入选项）与 PNG（1x/2x/3x、透明背景）
- **编组颜色集**：选中整个编组/图标即可汇总其用色并一键整体换色

### AI 设计助手（内置，可对比预览）
- OpenAI 兼容接口（预设 DeepSeek）：Rust 侧 SSE 流式代理，API Key 只存本地；支持深度思考、视觉截图、
  会话多开、用量与缓存命中率统计
- **提议-确认工作流**：AI 的修改先进入影子文档 → 画布实时预览 → 逐项「应用 / 丢弃」或整批处理，
  应用 = 单步撤销；拒绝可附原因
- 30+ 个 function call 工具：读画布 / 创建修改元素 / 注入 SVG 片段（`apply_svg`）/ 对齐编组 /
  查询字体与素材 / 检索图标库 / 检索设计知识库 / 读取设计技能 / **提问卡片 `ask_user`（选项可带图标缩略图）** /
  插件开发与管理（见下）
- 画布截图自查（vision 模型）：AI 改完会"看一眼"再决定是否继续优化

### 插件系统（本地 JS 插件）
- 插件存放于数据目录 `plugins/<id>/`（`plugin.json` + `main.js`）；设置 → 插件可导入文件夹、
  启用/禁用、重载、卸载，并显示运行错误；首次启用需信任确认
- 插件用 `svgDesigner.register({ features: [...] })` 声明「功能模块」数组（id / 名称 / 说明 / 参数 schema）：
  启用后自动成为 AI 的 function call 工具（`list_plugin_features` 总览 + `plug_*` 直连工具 +
  `call_plugin_feature` 兜底）；画布改动必须经 `ctx.ops`（受控操作），自动进入提议-确认流程
- **AI 可以自己写插件**：在对话里描述需求，AI 会先读内置开发指南（`get_plugin_guide`），
  再创建/修改插件代码（保存自动启用/重载），并依据运行错误自行修复
- 插件能力：白名单本地接口（设计库/图标/字体/素材只读查询）、自身目录文件读写（私有存储）、
  HTTPS 网络请求（Rust 代理）、注入样式/DOM（界面增强类插件可挂生命周期钩子）
- 示例插件：[`examples/plugins/color-kit/`](examples/plugins/color-kit/)（配色方案 + 圆点网格，演示两类写法）

### 内置离线资源（随程序分发，无需联网）
| 资源 | 说明 |
|---|---|
| **IconPark 图标库** | 字节跳动开源（Apache-2.0），2658 个图标；AI 用 `icon_search` 检索、`icon_get` 取用 |
| **UI UX Pro Max 设计知识库** | MIT；12 个域（行业推理画像/风格/配色/字体搭配/版式/UX 准则/图表…），Rust 内嵌 BM25 检索 |
| **开源设计技能** | 5 个经许可证核验的前端设计 Skill（MIT/Apache-2.0），AI 通过 `read_skill` 按需读取全文 |

### 本地优先
- SQLite 单库（项目 / 会话 / 消息 / 资源 / 设置），数据目录可自定义与迁移；图片、字体、截图存文件
- **模型 API Key 加密落库**：Windows 用 DPAPI（当前用户），Linux/macOS 用数据目录密钥文件（权限 0600）+ ChaCha20-Poly1305；历史明文启动时自动迁移
- 内置图标库 / 设计库 / 技能全部编译期内嵌，离线可用；安装目录下同时随包分发原始数据

## 🚀 快速开始

```bash
# 环境：Node 20+、Rust（stable）、系统 WebView2（Windows）
git clone https://gitee.com/codekpy/svgdesigner.git
cd svgdesigner
npm install

# 开发（热更新桌面应用）
npm run tauri dev        # 或本机约定脚本：.\dev.cmd（随机端口 + 固定工具链路径）

# 打包安装包（Windows：NSIS + MSI，构建前请关闭运行中的程序）
npm run tauri build      # 或 .\build.cmd
```

产物：`src-tauri/target/release/bundle/nsis/*.exe`、`bundle/msi/*.msi`。
安装目录 `resources/` 下随包分发图标库 / 设计库 / 技能原始文件（可取出供任意 agent 使用）。

测试与检查：

```bash
npm run build     # tsc + vite 构建
npm run lint      # oxlint
npm test          # vitest（95 用例）
cargo test --lib --manifest-path src-tauri/Cargo.toml   # Rust 单测（28+）
```

## 🧭 目录结构（简版）

```
src/                     # React 前端
  core/doc/              # 文档模型与纯函数（ops/geometry/transform/parse-svg/path-data/scope/proposal/colors…）
  stores/                # Zustand：docStore（历史+选择+进入组）/ chatStore（AI 循环+提案）/ pluginStore（插件）/ uiStore / …
  ui/                    # 画布、图层面板、属性面板、聊天、设置（含插件管理分页）
  ai/                    # 提示词、工具体系（schemas/executors/plugin-tools/wire）
  plugins/               # 插件运行时与注册表（沙箱执行 + 白名单、功能注册 + 动态工具、开发指南）
src-tauri/               # Rust 侧
  src/                   # commands / db(SQLite) / ai(SSE 代理) / plugins(插件文件与网络) / design_ref / icons_ref / skills / fonts
  resources/             # 内嵌数据：design/ · icons/ · skills/（同时随安装包分发）
tools/                   # 数据抓取与转换脚本（IconPark、设计库、技能）
examples/plugins/        # 示例插件（设置 → 插件 → 从文件夹导入，可直接试用）
AGENTS.md                # 给 AI/Coding Agent 的项目速览（结构、约定、坑）
THIRD-PARTY-NOTICES.md   # 第三方开源许可与致谢
```

## 🤖 AI 参与开发？

请先读 [`AGENTS.md`](AGENTS.md)：一页纸覆盖命令、模块地图、数据约定（路径局部坐标、编组进入链、
提案去重等）与已知坑，避免重复踩雷。

## 📄 许可证

本项目以 [MIT 许可证](LICENSE) 开源（© 2026 SVGDesigner contributors）。
内置/引用的第三方资源（IconPark、UI UX Pro Max、开源设计技能等）许可与版权见
[`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md)，各资源目录内亦附许可原文。

## 🙏 致谢

- [Tauri](https://tauri.app/) · [React](https://react.dev/) · [Vite](https://vite.dev/) · [Zustand](https://zustand-demo.pmnd.rs/)
- [IconPark](https://github.com/bytedance/IconPark)（字节跳动）· UI UX Pro Max 及各开源设计技能作者
- [marked](https://github.com/markedjs/marked) · [DOMPurify](https://github.com/cure53/DOMPurify) · [KaTeX](https://katex.org/) 等（完整清单见许可证文件）