Ai image generator
Skill TashanGKD/tashan-cursor-skills/skills/ai-image-generator
他山 Cursor Skill 体系 — 95个Skills + 32个Rules + 18个SubAgents,让AI在执行任务时能自主判断、按规范执行、并从经验中自我进化
npx -y skills add TashanGKD/tashan-cursor-skills --skill ai-image-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 14 stars14 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
AI配图能力层 Skill。任何需要生成信息图的任务都调用此 Skill,而不是自行调用 API。包含:模型选择、API调用、多视角草图流程、风格库引用、配图索引联动。触发词:「需要绘图」「生成配图」「画一张图」「制作信息图」「根据这段文字画图」「图片提示词」。
SKILL.md
10.7 KB, as published. Nobody here has run it
AI配图能力 Skill
这是一个能力层 Skill,被其他 Skill 调用,不直接面向用户任务。 任何需要生成图片的 Skill 都应该引用本 Skill,而不是自行嵌入 API 细节。
模型与 API
| 优先级 | 模型 | 适用场景 | API Key |
|---|---|---|---|
| 首选 | qwen-image-2.0-pro | 含中文文字的信息图、结构图 | sk-68b70d6863b94c299ecd27e9d49b41ba |
| 次选 | wan2.6-t2i | 纯视觉风格图(无需复杂中文文字排版) | 同上(dashscope) |
| 备用 | gpt-image-1(DMXAPI) | 英文为主的极简图 | sk-wzI4JscScaJ1pxVKRQ4qxmJcpH1OIgsqshlP55Tq6NtZ3H5p |
选择原则:信息图/结构图/有中文标注 → 用 qwen-image-2.0-pro;纯视觉风格图 → 用 wan2.6-t2i。
wan2.6-t2i API 调用(endpoint 不同):
url = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis'
body = {'model': 'wan2.6-t2i', 'input': {'prompt': 'PROMPT'}, 'parameters': {'size': '1024*1024', 'n': 1}}
⚠️ 已知问题:DMXAPI 上的 DALL-E 3 有较高概率网络超时(实测超时案例:2026-03-20 向日葵调研任务)。遇到超时时直接切换 qwen-image-2.0-pro,不要反复重试 DALL-E 3。
qwen-image-2.0-pro API 调用
import requests, base64
API_KEY = 'sk-68b70d6863b94c299ecd27e9d49b41ba'
ENDPOINT = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation'
headers = {'Content-Type': 'application/json', 'Authorization': f'Bearer {API_KEY}'}
payload = {
"model": "qwen-image-2.0-pro",
"input": {"messages": [{"role": "user", "content": [{"text": "你的提示词"}]}]},
"parameters": {
"n": 1,
"watermark": False,
"prompt_extend": True,
"size": "1024*1024" # 标准图;小图同尺寸,HTML 中用 max-width: 65% 控制
}
}
resp = requests.post(ENDPOINT, headers=headers, json=payload, timeout=120)
img_url = resp.json()['output']['choices'][0]['message']['content'][0]['image']
# 下载并保存(URL 24 小时有效,立即保存)
ir = requests.get(img_url, timeout=60)
with open('output.png', 'wb') as f:
f.write(ir.content)
⚠️ 限速处理:遇到 429 时等待 30 秒后重试,最多重试 3 次。
风格库
风格库文件:_内部总控/产品定义/图片风格库.md(10种风格,当前文章使用 S03)
S03 标准提示词前缀(适合大多数中文信息图):
简洁专业的信息图,适合微信文章,白色背景。[内容描述]
深蓝色#1a2f5e和橙色#e8622c为主色,圆角矩形,清晰中文标注,整体简洁商务风格。
全景图优先原则(先于绘图流程执行)
核心规则:先建立完整的对象-关系模型,再决定画什么图
对象-关系分析(Step 0,必须在 Step 1 之前完成)
在分析段落逻辑之前,先问自己:
1. 这段内容描述的「系统」里有哪些对象?
(人 / 设备 / 服务 / 组织 / 数据 / 概念阶段...)
2. 这些对象之间有哪些关系?
(数据流 / 指令控制 / 包含/被包含 / 演化前后 / 并列对比...)
3. 我现在要画的是「全景图」还是「局部图」?
全景图:展示系统所有对象及一级关系 → 优先画
局部图:聚焦某对对象的交互细节 → 作为补充
4. 如果是局部图,前面是否已经有对应的全景图?
没有 → 先画全景图,再画局部图
有 → 可以直接画局部图,但在提示词里说明「这是XX全景图的局部放大」
五种全景图类型(优先选用)
| 类型 | 使用时机 | 结构 |
|---|---|---|
| 系统全景图 | 展示所有组成部分及关系 | 对象节点 + 层次边框 + 关系箭头 |
| 演化状态图 | 系统随时间的状态变化 | 横向时间轴 + N个状态并列 |
| 并列对比图 | 多种方案/模式的异同 | N列相同结构 + 内容不同 |
| 层次依赖图 | 技术栈或组织的依赖关系 | 垂直叠加 + 依赖箭头 |
| 双列映射图 | 理论框架 vs 实际形态 | 左右两列 + 对应连线 |
参考图库:_内部总控/产品定义/图片参考库/架构图-全景对象关系型/
人-设备-服务器-云端 场景的标准全景图要素
当内容涉及「人-AI协作」「多设备」「分布式」等场景时,全景图必须包含:
对象层(从下到上,或从内到外):
① 个人设备层:用户 + 本地PC + 手机
② 组织局域层:组织服务器 + 组织内成员
③ 云端层:云服务/API/OpenBrain
④ 社会层:跨组织交互/世界
关系标注:
局域网连线(实线/虚线区分)
云端上传(带方向箭头)
数据流动(带标注:数据类型/权限级别)
包含关系(用大矩形框圈定边界)
绘图流程(每张图必须走完)
Step 1:分析段落逻辑(含对象-关系检查)
在开始绘图之前,必须先回答:
- 这张图对应手稿哪个段落?(定位行号/小节)
- 这段文字涉及哪些「对象」?(穷举:人/设备/服务/组织/数据/概念...)
- 这些对象之间有哪些「关系」?(列出所有连接和方向)
- 这是「全景图」还是「局部图」?(参见全景图优先原则)
- 这张图如果画成功,读者读完会在脑子里形成什么完整的系统印象?
- 图不只是文字映射——它应该让读者建立「这个系统里有什么、它们怎么连」的完整心智模型
Step 2:从多个视角设计草图
对每张图,至少从 2 个独立逻辑视角各写一条提示词:
- 视角A:[逻辑A],提示词:
... - 视角B:[逻辑B],提示词:
...
⛔ 禁止:只写一条提示词直接生成,跳过视角分析
Step 3:调用 API 生成
按上方 API 调用格式,对每个视角各生成一张图。
Step 4:更新配图索引
生成完毕后,必须在对应文章的 配图索引_[文章名].md 中追加/更新条目:
| 图片文件名 | 对应段落 | 段落核心主旨 | 提示词摘要 | 状态 |
如果文章还没有配图索引,立即创建(模板:.cursor/skills/wechat-article-writer/templates/配图索引模板.md)。
Step 5:嵌入到 HTML
- 大图(核心结构图):
max-width: 100% - 小图(辅助说明图、循环图、对比图):
max-width: 65%
<!-- 大图 -->
<p style="text-align:center; margin: 24px 0;">
<img src="data:image/png;base64,{BASE64}" alt="描述" style="max-width:100%; border-radius:8px;">
</p>
<!-- 小图 -->
<p style="text-align:center; margin: 8px 0 24px;">
<img src="data:image/png;base64,{BASE64}" alt="描述" style="max-width:65%; border-radius:8px;">
</p>
图片大小原则
| 图类型 | 用途 | HTML 宽度 |
|---|---|---|
| 大图 | 核心结构图(坐标系、架构图、飞轮图) | 100% |
| 小图 | 辅助说明(循环图、对比图、路径图) | 65% |
图的质量原则
- 全景优先:第一张图应该是全景图——所有对象和关系都呈现,读者看完能建立完整的系统心智模型
- 对象-关系完整:图中所有重要的对象都有,所有对象之间的关系都有箭头/连线表示
- 不是文字映射:图应该传达文字没法直接说的空间/结构关系
- 局部是放大镜:局部图必须有对应的全景图作为基础,局部图是全景图某个部分的放大说明
- 层次清晰:用矩形框/颜色区分不同层次(个人/组织/云端/世界)
- 提示词足够清晰:描述节点数量、颜色、连接关系、箭头方向、副文字内容
与其他 Skill 的关系
| 调用方 | 调用方式 |
|---|---|
wechat-article-writer | Step 4(配图生成)引用本 Skill |
role-UI设计师 | 需要可视化时引用本 Skill |
role-产品经理 | 需要配图说明产品结构时引用本 Skill |
| 其他需要绘图的 Skill | 同上 |
变更记录
v1.0 — 2026-03-20 — 初始创建(从 wechat-article-writer 提取)
根因:绘图 API 细节和多视角草图流程只存在于 wechat-article-writer,其他 Skill 无法复用。根本原因是 Skill 体系缺少「能力层」,导致执行细节散落在流程层 Skill 里。
修改内容:
- 新建:ai-image-generator Skill(能力层)
- 从 wechat-article-writer Step 4 提取:API 配置、多视角流程、风格库引用
- wechat-article-writer Step 4 改为引用本 Skill
验证状态:🔵 待验证
v1.0 → v1.1 — 2026-03-20 — 加入全景图优先原则 + 对象-关系分析框架
根因:AI生成的图倾向于展示「局部交互」(如单个节点的输入输出),而不是「全景图」(所有对象及其关系)。用户指出:好的信息架构图应该先展示所有对象和关系的全貌,让读者建立完整心智模型,局部图作为补充。
关键原则:「先区分对象和对象的关系,把所有对象和关系一次性呈现,而不是只展示某个局部的相互作用」——郑博元
修改内容:
- 新增:Step 0「对象-关系分析」(先于 Step 1 执行)
- 新增:「全景图优先原则」节——五种全景图类型 + 人-设备-服务器-云端标准要素
- 修改:Step 1 加入对象-关系穷举
- 修改:图的质量原则加入「全景优先」和「局部是放大镜」
- 新增:参考图库路径
_内部总控/产品定义/图片参考库/架构图-全景对象关系型/
验证状态:✅ 已验证(2026-03-20 OpenClaw推文项目:全景图优先原则 + S03风格成功执行,四层架构图质量达标)
v1.1 → v1.1(验证记录)— 2026-03-20 — 全景图原则首次真实验证
验证场景:OpenClaw 推文项目中,按「全景图优先原则」生成「四层智能协作架构图」(人层/分身层/讨论层/信源层),S03 风格,qwen-image-2.0-pro 生成。
验证结果:通过。图片直接用于公众号 HTML,无需重绘。
验证状态:✅ 已验证