内容
# inkpilot
**AI赋能的SVG创建和编辑，尽在VS Code中。**
告诉你的AI该设计什么。看着它实时构建——徽标、图标、徽章、横幅——在可视化编辑器中。通过对话迭代，而不是手动操作。
<!-- TODO: Add a screenshot or GIF here showing the editor in action -->
<!--  -->
## 工作原理
inkpilot是一款VS Code扩展，运行一个[MCP](https://modelcontextprotocol.io/)（模型上下文协议）服务器。任何兼容MCP的AI客户端——Claude、Copilot Chat或其他——连接到服务器并获取用于创建和操作SVG图形的工具。更改实时显示在预览面板中。
```
你： "为一家名为Brewed Awakening的咖啡店设计一个徽标"
AI： 创建一个带有几何咖啡杯标志、温暖的土色调色板、Georgia serif字体的SVG——实时显示在编辑器中
你： "让杯子更抽象一些，尝试陶土色调配色方案"
AI： 即时更新设计，你可以立即看到更改
你： "完美。导出它。"
AI： 将干净的.svg文件保存到你的项目中
```
## 功能
### 即时可视化编辑器
- AI构建设计时实时预览SVG
- 支持触摸板滑动（两指滚动）和捏合缩放，以及空格+拖动、中键鼠标和Alt+拖动
- 原生SVG渲染——你看到的就是你导出的
- VS Code主题感知界面
### 14个MCP工具
AI使用这些工具以编程方式创建和修改SVG：
| 工具 | 描述 |
|------|-------------|
| `svg_create` | 创建一个新的SVG并打开可视化编辑器 |
| `svg_set` | 替换整个SVG标记 |
| `svg_get` | 读取当前SVG源代码 |
| `svg_add_element` | 向文档添加单个元素 |
| `svg_update_element` | 按ID更新现有元素的属性 |
| `svg_remove_element` | 按ID删除元素 |
| `svg_modify_element` | 添加、更新或删除单个元素（组合） |
| `svg_list_elements` | 检查所有元素及其ID和属性 |
| `svg_validate_and_screenshot` | 验证结构和/或为AI审查渲染PNG截图 |
| `svg_screenshot` | 将当前SVG渲染为PNG以获取视觉反馈 |
| `svg_get_guidelines` | 检索SVG设计最佳实践 |
| `svg_save_project` | 保存为.inkp项目文件 |
| `svg_open_project` | 加载已保存的项目 |
| `svg_export` | 导出为独立的.svg文件 |
### 5种设计提示
预建的提示引导AI完成结构化的设计过程：
- **设计徽标** — 带有符号+文字的专业徽标
- **设计图标** — 针对小尺寸优化的清晰图标
- **设计徽章** — 印章、徽章和认证徽章
- **设计横幅** — 宽幅标题和横幅
- **设计图形** — 通用SVG插图
每个提示都包含参考SVG、构建步骤和质量约束，以便AI生成结构良好、独特的输出——而非普通的剪贴画。
### 内置设计标准
扩展程序附带全面的SVG设计指南，涵盖：
- 正确的文档结构（ `<defs>`、分组、ID）
- 排版规则（字体栈、文本居中、主导基线）
- 颜色对比度和调色板指导
- 路径上的弯曲文本（适用于圆形徽章和印章）
- AI在呈现结果前遵循的质量检查清单
### 项目文件
将你的作品保存为 `.inkp` 项目文件，以保留完整的SVG状态。双击即可在编辑器中重新打开并继续与AI迭代。
## 快速入门
### 1. 安装扩展
在VS Code扩展市场中搜索 **inkpilot**，或从命令行安装：
```
code --install-extension Redmond-Enterprises-LLC.inkpilot
```
### 2. 连接AI客户端
**VS Code Copilot Chat（内置MCP支持）：**
扩展程序自动注册为MCP服务器提供程序。在Copilot Chat设置中启用它 — 无需配置。
**Claude Code（CLI）：**
扩展程序在激活时自动注册到Claude Code。如果您已安装Claude Code，它将自动连接。
**其他MCP客户端（SSE）：**
将您的客户端指向：
```
http://localhost:7100/sse
```
### 3. 开始设计
打开命令面板（ `Ctrl+Shift+P` / `Cmd+Shift+P` ）并运行：
```
inkpilot: 打开SVG编辑器
```
然后要求你的AI设计一些东西。使用设计提示以获得最佳结果：
> 使用design-logo提示为“Skyline Architects”创建徽标
或者直接描述你想要的：
> 创建一个极简主义的SVG徽章，上面写着“Handcrafted”，具有匠心特别的感觉
## 命令
| 命令 | 快捷键 | 描述 |
|---------|----------|-------------|
| `inkpilot: 打开SVG编辑器` | | 打开可视化编辑器面板 |
| `inkpilot: 启动MCP服务器` | | 手动启动MCP服务器 |
| `inkpilot: 保存项目` | `Ctrl+S` / `Cmd+S` | 保存当前项目 |
| `inkpilot: 另存项目为...` | `Ctrl+Shift+S` / `Cmd+Shift+S` | 保存到新位置 |
| `inkpilot: 打开项目` | `Ctrl+O` / `Cmd+O` | 打开 `.inkp` 项目文件 |
| `inkpilot: 导出SVG` | `Ctrl+E` / `Cmd+E` | 导出为独立的 `.svg` 文件 |
## 设置
| 设置 | 默认值 | 描述 |
|---------|---------|-------------|
| `inkpilot.port` | `7100` | MCP SSE服务器的端口 |
## 要求
- VS Code 1.109.0 或更高版本
- 兼容MCP的AI客户端（Claude、Copilot Chat或任何MCP客户端）
## 许可证
MIT
