受够了 AI 幻觉！抄完谷歌顶级设计，这个手搓生图 Skill，秒出 5 场景锐利 SVG 图！

大家好！我是瓜哥。前互联网技术副总裁，现在带队死磕 AI 编程。

老朋友都知道，上星期我手搓了一个 svg 生图 skill。

结果用了一周，我发现自己高兴得太早了，用玩意儿生图就像是在开盲盒。你永远不知道它下一次会给你配个什么字体，或者把版式搞得四分五裂。

作为技术人，代码有 Bug 可以修，但输出结果靠运气，这谁受得了？

为了干掉这种不确定性，我翻烂了 Google Agent Skill 的 5 种核心设计模式。*在此感谢群友 @一个爱国者 提供的谷歌设计模式。*

经过整整 13 轮的暴力调优，我终于把这个瞎猜的 “生图 Prompt”，硬生生改造成了一个自带物理质检和逻辑自愈的 SVG 工业级生产引擎。

话不多说，先看 svg 图生成效果。

*满血版的 svg-architect skill 已打包，拿到手，改个路径就能直接跑。需要的兄弟，点个关注，私信回复关键词【svg】，免费拿去玩！*

一、这不比到处找网图香？

01 / 文章封面图

不管是微信公众号头图、知乎专栏封面、小红书图卡都可以拿这个 skill 来生成。随意感受下。

02 / 文章插图

老实说，我最近的文章配图全部都是 svg 生成的。

更关键是文章写好了，大模型能直接识别段落语义快速生图，不再需要单独复制粘贴提示词去生图，生成的 svg 图存放在指定目录下，这点太省事了。

下面是我刚发的关于 MiniMax 最新大模型 M2.7 的文章插图。

03 / 技术示意图

我有一门AI编程实战课，课程里涉及到大量的技术示意图，你让我画，我也没那个本事。

自从解锁了这个技能后...

再复杂的技术原理想表述清楚也不过是几分钟的事。

04 / 学员毕业留念

为了给优秀的学员们，在完成 AI编程实战课 - 《Gemini CLI 从入门到全栈》 后，留下一些回忆。

于是我用 svg 生成了票根和毕业证...

① 毕业留念票根

② 毕业证书

05 / 代码内联文档更新

打造响应式代码内联，将 svg 代码内联公司内部的 Wiki、Notion 知识库、Obsidian 笔记。

因为是纯代码，直接把 svg 代码内联到 Markdown 或 HTML 中。体积又小（只有几KB），可随意缩放，还保持高清。更重要的是，它是可动态的，改几行代码就能更新，无需重新截图。

06 / 网页视觉拉升

我们经常看到很多产品落地页的首屏背景、功能特性展示区的动态效果，整个页面的逼格马上就上来了，比如我嵌入 svg 动效后这个：

插入gif

二、我是怎么把它调教听话的？

这次重构的目标非常明确，就是：干掉不确定性。

通过多次暴力进化，把它改造成一个能直接产出工业标准文件的全自动设计引擎。

01 / 强制信息确认，不再瞎猜需求

以前是你说一句话它就开画，结果尺寸、重点常常不对。

现在增加了 “需求采访” 门禁，必须确认主标题、发布平台和视觉主题。

我在 SKILL.md 的 [Phase 1] 中加入了强制逻辑判定。

你必须提供“主标题”、“尺寸/平台”和“视觉主题”这三要素。信息给全了，直接进入下一步，一句废话都没有。

若用户输入已包含“主标题”和“关键词”，且提供了“尺寸/平台”与“视觉主题”，禁止再次发起提问，立即进入 Phase 2。

2. 引入 JSON 计划，锁死版式结构

这是 AI 生成 SVG 最容易崩的地方，就是文字乱跳、元素越界。为了解决这个痛点，我引入了 7/3 原则（70% 结构固定，30% 创意发挥）。

在画图前，先出一份 JSON 格式的构图计划，把标题、安全区、标志位等核心坐标用数值定死。

更新明细：resources/layout_plan.schema.json 从模糊的字符串描述改为精确的数值结构：

"safe_area": {    "type": "object",    "properties": { "x": {"type": "number"}, "y": {"type": "number"}, ... }    }

3. 用 Python 脚本质检，不许自卖自夸

以前 AI 画完，总是拍着胸脯说：我画的极其完美。结果一看，字体和图形混在一起，根本看不清。

现在改由专门的 Python 脚本（Validator）进行物理扫描判断。

它会解析 XML 代码，用真实的相对亮度公式去计算背景和文字的对比度。不达标？打回去重画！

更新明细：新增 scripts/svg_validator.py，使用真实的相对亮度公式计算对比度：

def get_luminance(hex_color):      # 根据 WCAG 公式计算颜色亮度，判定对比度是否达标      return 0.2126 * r + 0.7152 * g + 0.0722 * b

4. 自动修复与循环重试，实现逻辑自愈

以前遇到报错，流程就断了，还得人工去改 Prompt 重新跑，极其心累。

为了解决这个问题，引入一个编排器脚本，让 AI 自己修 Bug。

更新明细：新增 scripts/run_pipeline.py 管理整个重试闭环。质检发现漏了坐标？自动调修复脚本；问题太大？让 AI 彻底重绘。同时，为了防止 AI 在同一个坑里死循环，还加入了文件哈希对比，一旦发现无实质进展，强制熔断：

if state_id in attempt_history:        print("[E_PIPELINE_STALLED] 无实质进展，强制熔断防止死循环。")        sys.exit(1)

5. 绝对路径全自动交付，实现落地即用

传统的用法，是它在对话框里吐出一堆代码，还得手动建文件、复制、粘贴、保存。

这能叫自动化吗？

现在自动生成文件名，直接写盘交付。

更新明细：在交付阶段，根据当前日期和关键词自动命名，并把 svg 文件直接写入项目的指定目录。交付的不是一堆难懂的代码，而是可以直接双击预览的文件绝对路径：

[Phase 3: SVG Rendering & Auto-Disk]    强制动作：自动写入    /Users/zhaodonglin/Documents/gemini/writer/images/svg/YYYYMMDD_HHMMSS_<slug>.svg

三、这套操作到底牛在哪？

有人可能要说了，为啥不用 Nanobanana 去生成？

我的答案很简单：千篇一律的网图，无法建立专业度和辨识度。

你可以翻回去看看，再次感受下，开篇这两张由 Nanobanana 生成的图。

四、写在最后

在经历了 4 个小时的实战后，总算将这个 svg 生图质量变得稳定。

配合已有的 AI 写作工作流，实现全自动的 “ 选题 - 写作 - 配图 ” 的闭环，大幅提升了我的创作效率。

说实话，当完成这个skill 迭代时。

我最大的一个感受是：它让一个不懂设计的工程师，也能用写代码的方式交付专业视觉稿，设计与开发的边界，真的消失了。

而好的 Skill，从来都不是一次成功，而是经过多轮反复迭代，把优质的工作流写成不可逾越的代码规范。

我是 AI 编程瓜哥，只分享硬核、可落地的 AI 实战干货，我们下期见~

附：参考链接