# 午夜兰花：用 VectorPaint MCP 搭一座月光温室

语言：zh-CN
原文：[午夜兰花：用 VectorPaint MCP 搭一座月光温室](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/>)
中文：[中文 HTML](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/>)
English: [English HTML](<https://allluckly.cn/en/works/vectorpaint-midnight-orchid-mcp/>)
发布于: 2026-10-26T10:03:00+08:00
内容更新于: 2026-10-26T10:03:00+08:00
署名：Bison

六朵浅粉兰花围着夜色玻璃温室，月亮、星点和水光铺在深蓝绿之间。通过 VectorPaint MCP 分层创建可编辑路径、渐变和文字，保留原稿并原生导出 1200×900 px PNG，附真实画布创作视频。

[视频](<https://allluckly.cn/assets/videos/vectorpaint-midnight-orchid-mcp.mp4>)

[中文步骤](<https://allluckly.cn/assets/videos/vectorpaint-midnight-orchid-mcp.zh-CN.vtt>)

[English steps](<https://allluckly.cn/assets/videos/vectorpaint-midnight-orchid-mcp.en.vtt>)

[Poster](<https://allluckly.cn/assets/images/works/vectorpaint-midnight-orchid-mcp.png>)

AI 通过 VectorPaint MCP 依次创建夜色、星月、水面、玻璃温室、铜框、叶片、六朵兰花和可编辑文字，再保存、导出并重新打开原稿检查。全程保留实际应用界面，片尾展示原生 PNG。

VectorPaint 已启用 MCP 的本地构建，模拟器中文界面实录。AI 通过 MCP 分 14 阶段创建可编辑矢量对象。按创作顺序剪去等待，保留完整应用界面，录像均为 1×；无音轨，附中英文字幕。保存后分段完成关闭与重开核验，片尾 3 秒为原生 PNG 静态展示。商店版本的 MCP 可用性尚未确认。

按章节观看

1. [00:00 从画廊创建作品](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=0>)
2. [00:03 靛蓝夜色、星图与圆月](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=3.3>)
3. [00:13 远景、水面与玻璃温室](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=13>)
4. [00:23 铜框、门与台阶](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=23>)
5. [00:38 温室植物与前景叶簇](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=38>)
6. [01:01 扇形棕榈叶](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=61>)
7. [01:17 六朵午夜兰花](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=77>)
8. [01:36 睡莲与发光花粉](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=96>)
9. [01:48 可编辑标题与排版](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=108>)
10. [01:59 撤销、重做与保存导出](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=119>)
11. [02:17 关闭并重新打开原稿](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=137>)
12. [02:37 原生 PNG 静态展示](<https://allluckly.cn/works/vectorpaint-midnight-orchid-mcp/#t=157>)

夜色里先看到六朵浅粉兰花，再看到它们身后的玻璃温室。穹顶用细金线撑起，右上角的月亮像一张小小的天文图，门前的台阶向水面展开。叶片占住两侧，中央留给玻璃、水光和一扇窄门。

这幅《午夜兰花》通过 **VectorPaint MCP** 在应用中创建。MCP 的全称是 Model Context Protocol（模型上下文协议），这里用它把 AI 客户端接到应用的绘图工具上。画布是 **1200 × 900 pt**，本页展示的 PNG 由应用原生导出，实际尺寸为 **1200 × 900 px**。原稿分为 **14 个图层**，保留 **916 条路径和 6 个文字对象**。

**创作方式说明：本次由 AI 通过 MCP 调用 VectorPaint 的绘图能力，创建应用原生的路径、形状、渐变和文字。没有导入外部 AI 成图作为画面；花瓣、玻璃和叶片都保留在可编辑原稿中。**视频展示真实画布中的创作过程，下面按画面的结构拆解做法。

本次录制来自模拟器；创作脚本通过 Python stdio 连接器接到应用的认证 HTTP MCP 接口。下面也给出当前文档中的本机连接入口，两种连接方式分别说明。

![VectorPaint 原生导出的《午夜兰花》：深蓝绿夜色中，金色细框的玻璃温室立在水边，六朵浅粉兰花与大片绿叶分列两侧，右上角有满月和星点，前景水面散开倒影与睡莲](<https://allluckly.cn/assets/images/works/vectorpaint-midnight-orchid-mcp.png>)

## 先给画面留出三个位置

先把温室放在中间，穹顶略偏右，左右各接一间低矮的玻璃侧屋。主门对着前景台阶，台阶再接向下展开的水池。这样的中轴关系确定后，水面反射和屋顶弧线就都有了参照。

左上留出标题，右上留给月亮，兰花围在下半幅。前景叶片可以很密，温室的中央入口仍保持清楚；六朵花用较亮的奶油粉色，从深绿里抬出来。

画布尺寸和导出像素在这里分别记录：前者用于安排路径坐标与对象尺寸，后者是分享图片的实际大小。它们在本次成品中数值相同，单位不同。

## 14 个图层，按远近和用途分开

这次没有把所有细节堆在同一层。背景、水面、建筑与前景植物分别保留，后面要改一片玻璃或一朵花时，可以先找到它所属的层。

| 图层 | 内容 | 先解决的问题 |
| --- | --- | --- |
| 01 | 靛蓝夜色 | 确定深蓝到墨绿的底色与柔光 |
| 02–03 | 星点、月面与星图 | 留出上方的呼吸空间 |
| 04 | 远处植物剪影 | 将建筑与背景拉开 |
| 05 | 水面与断开的倒影 | 接住台阶和温室的光 |
| 06–08 | 玻璃、金色框架、门与台阶 | 从大面到细线搭出温室 |
| 09 | 玻璃内的植物 | 让建筑内部有尺度和生活感 |
| 10–11 | 水边叶片与棕榈扇叶 | 压住两侧，建立前景 |
| 12 | 六朵午夜兰花 | 放入主要的暖色焦点 |
| 13 | 睡莲与发亮的花粉 | 在水边补上小尺度细节 |
| 14 | 标题、标注与收尾线条 | 完成植物图册式的版面 |

顺序从远处走向近处，但前景叶片和花朵分开。要试另一组花色时，可以集中调整花瓣，而不用在整幅画里逐个找绿色叶面。

实际调用先用 `tools/list`、`vectorpaint_state` 和 `vectorpaint_fonts` 读取工具、文档与字体，再用 `vectorpaint_create_document` 建立新作品，依次通过 `vectorpaint_layer` 和 `vectorpaint_create_objects` 建层与创建对象。每批对象完成后，穿插读取状态、选择对象和适合画布的视图调整，逐层检查结果。

## 夜色用多色标，柔光用透明度

背景是一块覆盖画布的矩形，使用四个色标的线性渐变：`#070E23`、`#122A40`、`#163D48`、`#071B2A`。渐变轴从上方延向下方，略带倾斜，让画面中央比边缘透出更多蓝绿色。

柔光另外放在椭圆上，用径向渐变从中心向外减小透明度，直到边缘透明。这里靠颜色和透明度过渡得到光晕，不必把背景轮廓做得复杂。月亮本体则从奶油白过渡到灰绿，再叠上浅色圆斑、细圆环与短刻线。

星点的大小和透明度并不完全相同，少量四角亮星穿插其中。细线连接的星座留在建筑两侧，避免在穹顶里再增加一组抢眼的结构。

## 温室先做玻璃大面，再加框架

主温室的外轮廓是一条闭合路径：从穹顶左下方上行，经顶点转向右侧，再沿底部闭合。屋顶曲线靠贝塞尔控制柄调整；底部保留直边，接住后面的门窗和台基。

玻璃使用蓝绿色线性渐变，左上较亮、右下较深。两侧低屋分别保留自己的玻璃面，不把整栋建筑拼成一个难以修改的轮廓。中央再加一层透明径向渐变，让门口附近带一点温暖的亮度。

玻璃完成后，才在上方叠金色屋脊、竖向肋条和弧形横框。这些细线主要使用无填充的开放路径；门、台阶和台基分别排列。调整穹顶时，先改大轮廓，再核对肋条是否仍接住屋顶与底边，比拿密集细线去补一个不准确的大形更容易。

## 一朵兰花，拆成花瓣、花心与花茎

六朵兰花分布在左右两侧，高低和大小错开。每朵先用弯曲的开放路径放花茎，再围绕花心布置六片闭合花瓣。花瓣不是一张图片的不同裁切，而是各自带控制柄、填充和描边的路径。

花瓣的线性渐变沿着生长方向展开，从偏暗的玫瑰色 `#BC817F`，经过浅桃色 `#F2C5A7`，走向奶油色 `#E5D9AF`。边缘加很细的浅色描边，花瓣内部再放较淡的线条。这样花的外缘在深绿背景里保持清楚，花心附近仍能留下层次。

试着跟做时，先完成一朵花的大轮廓，确认它缩小后仍然能读出，再添加花心、斑点和细纹。六朵不必等大、同向：左侧较高的一朵、右侧接近扇叶的一朵，和靠水边的小花共同把视线带回温室。

## 叶片靠方向，水光靠留白

左侧叶簇用细长的闭合路径沿茎两边排开，每片叶子有独立的渐变与叶脉。右侧棕榈叶从同一基部向外展开，叶尖方向比叶片数量更影响轮廓。先把整丛的伸展方向排好，再补内部的小线条。

水面是一块向前景展开的梯形，填入较暗的蓝绿渐变。上方叠加不同长度、透明度和间距的短横线，再用断续折线提示温室与台阶的倒影。倒影没有逐项复制建筑，水的质感来自线条间留下的空隙。

最后才加睡莲和零散亮点。它们落在画面下缘与花丛之间，起到引导视线的作用，不再把中央入口塞满。

## 保留文字对象，让版面也能继续改

左上方的 “MIDNIGHT ORCHID” 是文字对象，副标题、页脚说明、日期和门前的罗马数字也保留为文字。它们与植物、建筑分在不同图层，改标题时不必碰到花瓣路径。

细金框、四角装饰和底部横线将画面收在一张植物图册的页面里。收尾时缩小看一次：先看六朵花是否清楚，再看温室入口，最后检查小字和边框有没有被前景遮住。

## 保存原稿，再核对导出

跟做时，建议先保存可编辑的 `.VectorPaint` 原稿，再导出用于分享的 PNG；需要继续交换路径时，另外保留 SVG。本次交付包含这三种文件，页面上的成图使用应用实际导出的 **1200 × 900 px PNG**。

这次使用 `vectorpaint_save` 保存，通过 `vectorpaint_export` 分别导出 PNG、SVG 与原稿，再用 `vectorpaint_export_read` 取回文件。保存和关闭后，紧接着的重开请求遇到应用忙碌，脚本按设计停止。稍后的独立续验重新打开原稿，核对几何、样式与文字仍在，最终没有未保存修改。

跟做时，关闭后用 `vectorpaint_open_document` 重新打开，再读取 `vectorpaint_state` 并查看预览。遇到忙碌状态时，先完成当前编辑或关闭面板，再明确发起下一次操作并检查结果；导出图片已经生成，还不足以确认原稿保存与重开都已完成。

重新打开后，重点看几处容易遗漏的地方：花瓣仍可选择和改渐变，玻璃与框架没有合成一张图，文字内容仍在，画布和导出尺寸符合预期。PNG 用来观看和分享，原稿用来继续创作。

## 从这幅画开始试 VectorPaint MCP

MCP 在这幅画里的价值，是把场景计划变成应用中可以继续编辑的对象。可以先描述“中央一座玻璃温室，两侧六朵兰花，前景是水面”，再按背景、建筑、叶片与花朵逐层创建；每完成一部分就读取当前文档状态，检查画布，再继续增加细节。

连接前，先确认正在使用的是**已启用 MCP 的 VectorPaint 构建**，并且确实能看到 **设置 → AI 控制**。当前 App Store 安装包是否包含相同入口，尚未确认。

公开文档将同一台 Apple 芯片 Mac 上运行的 VectorPaint iPad 版本作为本机连接路径：

1. 在 **设置 → AI 控制**中选择「开启本机连接」。
2. 选择 Codex 或 VS Code，点击「复制客户端配置」，合并到这台 Mac 上该客户端的个人 MCP 配置。
3. 重载客户端 MCP。默认连接只读；准备让 AI 绘图时，在 VectorPaint 中开启「允许修改作品」。
4. 关闭 AI 控制面板，保持应用运行，再让客户端读取工具和文档状态。

这条路径使用本机 HTTP 连接；配置中的连接凭据应只保存在个人本机文件中。它与本次录像使用的 Python stdio 连接器不同，具体要求见[中文连接说明](<https://github.com/AllLuckly/VectorPaint-mcp/blob/main/README.zh-CN.md>)。

想了解更多工具，可以查看 [VectorPaint MCP 公开源码](<https://github.com/AllLuckly/VectorPaint-mcp>)和[工具能力说明](<https://github.com/AllLuckly/VectorPaint-mcp/blob/main/mcp/CAPABILITIES.md>)；应用本身的创作与导出用途见 [VectorPaint 介绍](<https://allluckly.cn/apps/vectorpaint/>)。第一次跟做可以先只留一座温室、一片叶子和一朵花，把创建、编辑、保存、重开和导出走通，再扩大到整幅场景。

