矢量插画工具箱

结合用户想法与参考设计画面，通过澄清逐步聚焦，再使用这里的绘制工具实现。默认使用下述 Micro-UI 风格约束；用户明确指定的方向和项目规范优先。

Micro-UI 默认风格与构图

这组规则恢复旧版的风格边界，应用于新绘制的 Micro-UI 图稿；不是通用 SVG 技术的限制。

真实控件切片：主体必须有可识别的工具或控件结构。不要靠重复灰色横条、空白卡片和无意义图标凑出界面；先从参考提取对象的身份特征。
零描边主体：大形用纯色色面、遮挡和轻柔投影定界。图标必要笔画、标尺规线与极淡环境仪轨可以用线；图标尺寸和描边服从目标项目规范。
默认分层构图：以“基础承载底板 → 中景控件切片 → 前景焦点”组织空间，环境层可选。纸张、文档、报表可使用底板；控件自身已构成完整实体时可省略额外底板。各层都应服务主题，不为凑层数添加附件。
单层原子与禁止递归：主体若已由多个子模块构成，子模块保持完整的纯色实体，不再嵌套第三层微控件、伪图表或小符号。结构层级按视觉功能计算，不按 SVG 的 <g> 嵌套次数计算。
最小构件 16px：在目标展示尺寸下，独立色块的宽和高均至少 16px；必要图标笔画、标尺规线、状态微指示点（直径不超过 3px）除外。不要通过放大导出分辨率绕过这条规则。若小尺寸无法容纳，应减少构件或简化表达。
克制细节：单容器默认不超过三个主要构件；不画密集伪文本，不用空而高的容器承载少量内容。文字只在表达身份、状态或操作时使用。
令牌配色：源码引用集中定义的颜色角色，再映射到项目令牌；不散写十六进制或其他颜色字面量。独立 SVG 可在导出时解析角色为真实颜色，保留映射源，确保脱离宿主仍可显示。

按本次对象从参考图片与分析记录选择相关素材；需要光影参数或代码案例时读构建与完整案例。风格规则默认执行，确需例外时由 AI 结合参考与展示尺寸判断，并说明例外对象、原因与视觉检查结果，不需要为普通绘制选择重复征求许可。

学习用户参考流程

当用户提供参考图并希望借鉴其特点时，按以下步骤分析和记录：

接收意图：用户发送参考图片，并说明想借鉴的特点（例如“借鉴文件夹开口的厚度感”或“借鉴这种蓝绿配色的面积比例”）。
分析要点：AI 查看图片，从五个方面拆解：
- 造型：控件怎么切片、外形轮廓和圆角大小；
- 配色：浅色底板、功能主色与高亮焦点的面积对比；
- 层次：前后遮挡关系、错层和留白；
- 构图：主体在画布中的重心与视线流动；
- 光影：微投影的偏移、扩散大小与透明度。
保存与记录：
- 把图片存入 assets/reference-images/ 目录；
- 分析结论追加到 references/visual-reference-map.md 中，明确写清哪些可以借鉴，哪些是原图的具体业务内容（不照搬）。
更换风格与无图情况：
- 用户明确要求更换风格时，按新要求调整参数，避免新旧规则冲突；
- 没有参考图时，按已有规则和案例绘制，不要求用户提供图片。
概念说明：
- 这里的“学习”是指分析参考图并把要点记录下来，供绘制时参考，不是训练模型，不宣称模型因此永久学会了该风格。

通过澄清逐步聚焦画面

新画面的方向尚未明确时，由 AI 主动引导用户逐步表达想法，不收到主题词就直接制作成图。先整理用户已经提供的用途、场景、参考、偏好和限制，只澄清会影响当前设计判断的缺口；已确认的信息沿用，不重复询问。

可以先抛出少量具体选项，帮助用户表达偏好，再根据用户的选择和解释逐步深入。每轮围绕一个关键决定提出简短、具体的问题，给出少量有实际区别的方向，说明各自会形成怎样的画面，并给出推荐理由。下一轮应承接用户刚确认的内容，进一步聚焦尚未明确的场景、主体或构成，不重复泛泛的选项。允许用户自由描述、组合或否定这些方向，不把用户限制在选项里。不要一次抛出整份需求问卷，也不要把专业构图工作转交给用户。

根据缺失信息，按以下思路逐步推进；用户已明确的部分直接跳过：

聚焦表达内容：从用途与主题中挖掘用户最想让观者看懂的事情，厘清对象、动作、状态或关系。将宽泛功能词转成具体场景，用一句清楚的画面意图请用户确认。
聚焦视觉方向：结合素材分析，展示相关参考，指出可借鉴的造型、色彩、空间或质感，询问用户喜欢与不喜欢的具体部分。区分风格依据与场景构成，不因喜欢某张参考就默认照搬其布局。
聚焦画面构成：通过对话逐步了解用户对主体、对象关系、焦点和整体感觉的想法，结合参考给出具体建议，帮助用户明确取舍。

对话中只围绕仍不明确的内容继续澄清，不机械走完问答清单。想法聚焦后，用简短文字复述双方确认的画面意图和主要构成，等待用户明确表示“可以开始”“可以动了”或同等授权后，再开始绘制。已有开始授权且方向明确时直接执行，不重复确认。后续细节由用户把控，按用户提出的修改继续调整，不设置小样确认或反馈精修阶段。局部修改只澄清有歧义的目标，不重启整套流程。

从参考到造型与构图

先找出对象在用户经验中的识别结构：不仅是轮廓和部件，还有关键比例、排列顺序与连接关系。文字和通用圆角矩形不能代替这些特征。按用途选择完整对象或局部切片；简化优先通过取景与省略，夸张时保留让对象可信的结构关系，不把功能名默认画成流程。

根据当前对象和想解决的造型问题选择相关参考，实际打开图片；需要理解实现时，再读对应 SVG 并看渲染结果。不要求遍历素材库。分析应落到“哪种具体关系让参考成立，以及本次怎样使用”，例如尺度反差、承托或遮挡，而不止罗列圆角、柔影等效果。风格依据不等于照搬场景布局；图片没有源码时，实现方式属于待验证的推测。

据此决定保留什么、删去什么、哪里可以夸张，再用大形安排主体、辅助物与留白。先判断对象是否可信、主次是否成立，再补细节和材质；若只能靠说明文字或阴影补救，就回到造型。判断由 AI 完成，不增加用户确认关卡。具体效果如何转为路径、坐标与滤镜，见把参考转成画法。

变体应改变主体关系、视角或构成；只换线条、纹理与颜色属于同一构图的材质变化，不能称为新的场景。不要把当前主题的对象组合写成后续作品的固定模板。

同一空间中的物体共用投影、厚度与光照依据，平面内的图标和文字先在局部坐标排版，再随表面整体映射；先画后方实体，再画前方实体。相邻轮廓要明确分开或明确遮挡，避免相切、窄缝和图标露出半截。统一几何由构建工具处理，主体是否恰当仍由参考分析与实际尺寸渲染判断。

对照检查与局部修订

内部检查步骤：渲染 → 实际看图 → 挑问题 → 复检。 完成绘制或修改后，使用 scripts/render.mjs 从 SVG 或展示页输出 1×、3× PNG，实际打开两张图片，对照下方「交付前的视觉验收」逐项检查并记录具体问题。1× 检查主体识别、构图、比例与留白，3× 检查圆角、遮挡、接缝、裁切与阴影。导出像素倍率不代替目标展示尺寸；目标尺寸不同于 SVG 固有尺寸时通过 --width、--height 指定。

至少完成一次初检和一次修后复检；初检未发现问题时，进行第二次独立复核，无需刻意修改。每次修图后重新渲染、打开图片，确认具体问题已经解决。仍有无法解决的问题或环境无法渲染时，明确说明，不宣称视觉验收通过。此流程是 AI 内部质量检查，不增加用户小样确认或反馈精修阶段。

涉及 CSS 角色变量时，通过 --vars 传入项目生成的 JSON 映射；缺失且没有有效回退的变量必须解决，不自行补色。项目映射与导出图保存在任务目录，不把项目色值写入 skill。命令、依赖与展示页截图范围见渲染与查看。

将成图与选定参考并排查看，比较轮廓、比例、圆角、色彩面积、阴影与细节密度，判断视觉语言是否协调。

渲染后指出具体的视觉问题，再针对问题修改；检查对象识别、比例、遮挡、对齐和边界，不以文件有效或成功导出代替视觉判断。

修改前先定位用户指向的对象及范围，沿用现有矢量结构进行局部调整。修改后对照前后图，确认已认可的造型与布局得到保留。

交付前的视觉验收

渲染后按以下项目检查；发现问题先修图，再交付。文件可解析或导出成功不算视觉验收。

关键比例、排列与连接符合对象的真实经验；省略或夸张后仍保留识别结构，而非仅靠标题或几个符号让人猜出主题。
默认底板、中景、前景的大小与遮挡有主次；若省略底板，主体自身有完整轮廓。
容器高度与内容相称，前景不因空白面积过大抢占重心。
复合子模块没有递归微控件；目标展示尺寸下独立色块满足 16px，必要线条与微点例外已区分。
相邻形体明确分开或遮挡，无相切、窄缝、误穿插；文本与图标未被前景意外遮住。
投影区分层级但不脏黑，颜色面积与参考协调；所有颜色可追溯到角色配置或项目令牌。
与选定参考并排，检查借鉴的尺度、轮廓、空间或材质关系是否在成图中成立，而非只检查是否采用同类效果；同时查看原尺寸和实际展示尺寸，说明具体修正，不虚构评分或用户认可。

案例收录流程

完成并检查后主动询问一次，用户明确同意后才收录。

询问规则：
- 插画画完并完成内部检查后，AI 主动询问一次：“这张插画满意吗？要不要收录到案例库供以后参考？”
- 如果用户还在提修改要求，先改图，不反复询问。
- 用户拒绝、未回复，或者只说了“满意”但没有明确同意收录，都不执行收录。
- 不自动收录每次生成的结果。
收录执行：
- 检查文件：必须同时有可编辑的 .svg 源码和渲染出的 .png 预览图，检查是否重名，不覆盖已有文件。
- 运行收录脚本：scripts/collect-example.mjs；
- 自动更新 references/example-guide.md，记录主题名称、构造特点及适用场景。

可组合的SVG画法

SVG构建工具说明本地 scripts/build-kit.mjs 的用法：轮廓、统一相机、实体挤出、表面映射、包围框与颜色角色导出。按画面需要选用，不要求每张图都立体化。

工具索引

想实现的内容	工具与示例
直线轮廓、圆弧、有机曲线	路径与曲线
合并、挖孔、局部裁切、透明过渡	形状组合与遮罩
位移、旋转、缩放、斜切、平面投影	坐标与变换
色面、渐变、阴影、重复纹理	填充与材质
文字宽度、标签尺寸、行盒与边界	文字与布局工具
浏览器预览、局部重渲染、图片对照	渲染与查看
案例安全收录与索引更新	案例收录说明

可编辑案例与素材

观察参考时，结合实际打开的图片与对应SVG，把局部效果对应到实现方式，再考虑如何用于当前主题。具体观察角度与例子见把参考转成画法。

构建与代码案例：对象尺度、光影、颜色角色与历史案例的使用边界。
主题模板：Typography五张图，以及搜索筛选图的SVG与PNG。
原创案例库：书签、日历、上传、移动内容的SVG与PNG。
风格素材：可用的外观参考。
参考图片与分析记录：用户参考分析与特征索引。

案例中的参数是具体作品的实现，可以修改。画什么、组合哪些技术、如何交流与交付，由当前任务决定。

micro-ui-illustration