Agent skill

Gpt Image 2 Handdrawn Diagram

by dracohu2025-cloud in dracohu2025-cloud/draco-skills-collection

A skill your agent uses when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via…

MITAuto-check passedMedia & Creative

Install Gpt Image 2 Handdrawn Diagram

skills CLI
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill gpt-image-2-handdrawn-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dracohu2025-cloud/draco-skills-collection gpt-image-2-handdrawn-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .claude/skills && cp -r skills-src/gpt-image-2-handdrawn-diagram .claude/skills/gpt-image-2-handdrawn-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
gpt-image-2-handdrawn-diagram
GitHub stars
227
Token cost
~1.2k tokens
SKILL.md length
421 words
Files
3 (incl. assets)
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via…

  • Works in 7 steps: Compress the source into 3-6 modules. → Keep each module to 3-5 short bullets. → Preserve exact technical names: APIs,… → …
  • Generating high-readability hand-drawn knowledge diagrams
  • SKILL.md covers Overview, When to Use, Inputs and Canonical GPT-Image-2 Prompt…, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Gpt Image 2 Handdrawn Diagram is an agent skill from dracohu2025-cloud/draco-skills-collection. Use when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via imagegenerate.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including assets (for example `README.md`).

It sits in Media & Creative, covering Image generation, Diagrams and Plain language and style rules. The licence is MIT.

When your agent uses it

  • Generating high-readability hand-drawn knowledge diagrams
  • Architecture diagrams
  • Consulting-style visual explanations with GPT-Image-2 via imagegenerate

Example prompts

  • “/gpt-image-2-handdrawn-diagram”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Compress the source into 3-6 modules.
  2. Keep each module to 3-5 short bullets.
  3. Preserve exact technical names: APIs, tools, protocols, file paths, ports, models.
  4. Put the strongest takeaway near the top as a sticky-note style callout.
  5. End with a bottom line.
  6. Call image_generate directly with the assembled prompt.
  7. Use aspect_ratio='landscape' for 16:9, square for 1:1, portrait for 9:16.

What it can do on your machine

Read from SKILL.md and the folder at commit 26e8975. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • x.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Gpt Image 2 Handdrawn Diagram loads about 1.2k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 421 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dracohu2025-cloud/draco-skills-collection at commit 26e8975, republished under its MIT licence (© dracohu2025-cloud). 421 words, ~1,221 tokens.

Download SKILL.mdSave it as .claude/skills/gpt-image-2-handdrawn-diagram/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
gpt-image-2-handdrawn-diagram
description
Use when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via image_generate.
version
1.0.0
author
Hermes Agent
license
MIT
platforms
linux

GPT-Image-2 Hand-Drawn Diagram

Overview

This skill turns text, architecture notes, workflows, or reference diagrams into a high-readability hand-drawn knowledge diagram.

Use Hermes image_generate for rendering. In this environment, image_generate is backed by GPT-Image-2, so do not route this workflow through another image generator unless the user explicitly asks.

The core pattern comes from 小小东's GPT-Image-2 article: lock information design first, then visual style. The goal is not cute decoration. The goal is: core judgment first, modular reading path second, memorable bottom line last.

Source credit: 小小东 — https://x.com/xiaoxiaodong01

When to Use

Use this skill when the user asks for:

  • 手绘知识图解
  • GPT-Image-2 架构图 prompt
  • 高可读性流程图 / 框架图
  • 给非工程师看的技术架构解释图
  • 把 Mermaid / draw.io / 白板 / 文档内容变成更好看的传播图

Do not use when the user needs a machine-verifiable topology diagram. For that, Mermaid / PlantUML / SVG architecture diagrams are safer.

Inputs

Collect or infer these fields:

  • topic: diagram title/topic
  • audience: target reader, e.g. PM / boss / client / engineers
  • core_judgment: one-sentence takeaway
  • modules: 3-6 modules, each with 3-5 short bullets
  • flow_summary: one-line bottom summary
  • aspect_ratio: default 16:9
  • language: default follows user language; keep technical terms in original English

If content has more than 8 modules, split into multiple diagrams. Do not force 10+ modules into one image.

Canonical GPT-Image-2 Prompt Template

Use this as the base template. Replace the final {请输入你的内容或者参考图片} block with structured content.

markdown
请把我提供的内容转化成一张高可读性的手绘知识图解。风格像认真整理过的创意手帐 + 白板推演 + 咨询报告信息图,而不是冰冷模板。

【输出目标】
生成一张适合传播、汇报和复用的知识图解。它必须先让人抓住核心判断,再沿着模块逐步阅读,最后记住一句结论。

【语言要求】
图上所有可见文字根据用户的输入来确定语言,中文,英文或其他
不要混用语言,除非是技术名词、产品名、协议名、代码路径或数字指标。

【画布要求】
比例:{16:9 / 5:4 / 4:3 / 21:9}
质量:4K high resolution
背景:浅米白 / 浅暖灰,保留轻微纸张纹理和呼吸感。
整体清晰、留白稳定,不要把文字挤到看不清。

【信息设计规则】
不要逐字搬运原文。先压缩信息,再画图。
请把内容整理成:
1. 顶部:强标题 + 一句话核心判断
2. 中部:3–6 个主模块,按流程、对比、阶段或因果关系排列
3. 模块内:每个模块最多 3–5 条短 bullet
4. 底部:一条 Flow Summary / Decision Summary / Bottom Line
5. 如果内容很多,只保留最关键的 8–10 个判断,避免微型文字

【可读性规则】
标题必须最大、清楚、有重量。
模块标题要有秩序,正文必须短句化。
每个模块不要超过 6 行正文。
每条 bullet 尽量简短。
不要使用密密麻麻的小字表格。
不要为了完整而牺牲可读性。

【视觉风格】
黑色或深墨色手写线条建立阅读骨架。
使用圆角分区、细线框、轻阴影、编号、箭头、标签和小图标。
线条允许轻微手绘抖动,但整体对齐、边距、分组要稳定。
图标只做路标和强调,不要抢走文字层级。

【配色规则】
使用克制的标记笔色彩:
浅米白背景 + 黑色主线条;
低饱和青绿、鼠尾草绿、淡紫、柔橙、浅蓝作为分区和路径颜色。
避免霓虹色、强渐变、过度商业光效和整页单色化。
彩色区域只占少量到中等面积。

【准确性规则】
严格保持输入内容中的技术链路、组件名称、箭头方向、协议、端口、数据流和判断。
不要自行新增未提供的组件。
不要把动作写错,例如“读取日志”不能画成“生成日志”。
如果空间不足,优先保留主链路、关键差异和最终判断,删掉次要解释。

【内容】
{请输入你的内容或者参考图片}

Assembly Workflow

  1. Compress the source into 3-6 modules.
  2. Keep each module to 3-5 short bullets.
  3. Preserve exact technical names: APIs, tools, protocols, file paths, ports, models.
  4. Put the strongest takeaway near the top as a sticky-note style callout.
  5. End with a bottom line.
  6. Call image_generate directly with the assembled prompt.
  7. Use aspect_ratio='landscape' for 16:9, square for 1:1, portrait for 9:16.
Show full SKILL.md (141 more words)Show less

Content Block Format

Use this compact block inside 【内容】:

markdown
主题:<topic>
读者:<audience>
核心判断:<one sentence>
画布:16:9,中文,技术名词保留英文

阅读路径:从左到右,输入 → 解析 → 生成 → 渲染 → 交付;关键保障放在侧边便签。

模块 1:<title>
- <short bullet>
- <short bullet>
- <short bullet>

模块 2:<title>
- <short bullet>
- <short bullet>
- <short bullet>

底部总结:<flow_summary>

Pitfalls

  1. Too many modules: More than 8 modules collapses readability. Split the diagram.
  2. Tiny text: GPT-Image-2 may invent or distort small labels. Use fewer, larger labels.
  3. Over-specific colors: Let the prompt's color semantics work. Extra color rules often clash.
  4. Translated technical terms: Keep terms like OpenRouter, Volcengine, ffmpeg, Puppeteer, Smart Slide in English.
  5. Icon abuse: Icons are signposts, not content. Text owns the hierarchy.
  6. Architecture hallucination: Do not add unprovided components. If a component is uncertain, omit it or mark it as optional.

Verification Checklist

  • Image was generated via image_generate.
  • Diagram has one strong title and one core judgment.
  • Middle section has 3-6 modules, not a dense wall.
  • Technical names and arrows match the source.
  • Bottom line exists.
  • Text is readable at normal chat preview size.

© dracohu2025-cloud, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (assets) in gpt-image-2-handdrawn-diagram of dracohu2025-cloud/draco-skills-collection.

  • SKILL.md
  • README.md
  • assets/example-epub2podcast-local.png

Open the folder on GitHubat commit 26e8975

Compare with similar skills

Gpt Image 2 Handdrawn Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Gpt Image 2 Handdrawn Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Gpt Image 2 Handdrawn Diagram this skilldracohu2025-cloud/draco-skills-collection227—~1.2kAutomated safety check: PassMIT
Academic Figures DrawerM1n-n9/academic-figures-drawer218—~3.3kAutomated safety check: PassNone
Sf Diagram NanobananaproJaganpro/sf-skills424—~1.6kAutomated safety check: PassMIT
CLI Hub Matrix Image DesignHKUDS/CLI-Anything52k—~2.4kAutomated safety check: PassApache-2.0
Paper IllustrationAI4Scientist/nano-scientist1284 repos~7.2kAutomated safety check: NotesNone
Generate Imageynulihao/AgentSkillOS61810 repos~1.7kAutomated safety check: NotesNone

Similar skills

  • Academic Figures Drawer

    M1n-n9/academic-figures-drawer

    Create camera-ready, editable draw.io figures from papers, method descriptions, code, or reference images.

    218 GitHub stars~3.3k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Sf Diagram Nanobananapro

    Jaganpro/sf-skills

    AI-powered image generation for Salesforce visuals via Nano Banana Pro.

    424 GitHub stars~1.6k tokensUpdated 5 mo ago
    Media & CreativeAuto-check passed
  • CLI Hub Matrix Image Design

    HKUDS/CLI-Anything

    Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.

    52k GitHub stars~2.4k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed
  • Paper Illustration

    AI4Scientist/nano-scientist

    Generate publication-quality AI illustrations for academic papers using Gemini image generation.

    128 GitHub starsUsed in 4 repos~7.2k tokens
    Media & CreativeAuto-check: notes
  • Generate Image

    ynulihao/AgentSkillOS

    Generate or edit images using AI models (FLUX, Gemini). An agent skill from ynulihao/AgentSkillOS.

    618 GitHub starsUsed in 10 repos~1.7k tokens
    Media & CreativeAuto-check: notes
  • Scientific Schematics

    spacering-net/codeg

    Create publication-quality scientific diagrams using Nano Banana 2 AI with smart iterative refinement.

    3.9k GitHub starsUsed in 11 repos~5.9k tokens
    DevelopmentAuto-check: notes

More from dracohu2025-cloud/draco-skills-collection

All 27 skills in this repo
  • AI News Bitable Archive Dingtalk

    dracohu2025-cloud/draco-skills-collection

    A skill your agent uses when parsing a DingTalk daily news document and syncing title, date, Top 3, summary, conclusion, document link, and status into a DingTalk multidimensional table.

    227 GitHub stars~795 tokensUpdated 24 days ago
    Auto-check passed
  • Feishu Seedance Video Pipeline

    dracohu2025-cloud/draco-skills-collection

    A skill your agent uses when running a Feishu/Lark Base-centered Seedance video production pipeline: inspect/backfill the Base row, create/reference assets, build Row-24-style Chinese Seedance…

    227 GitHub stars~5k tokensUpdated 24 days ago
    Auto-check: notes
  • Motion Canvas

    dracohu2025-cloud/draco-skills-collection

    Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview.

    227 GitHub stars~1.5k tokensUpdated 24 days ago
    Auto-check passed
  • News Aggregator Skill

    dracohu2025-cloud/draco-skills-collection

    A skill your agent uses when collecting public news candidates from Hacker News, GitHub Trending, Hugging Face papers, and other web sources for briefings and daily reports.

    227 GitHub stars~596 tokensUpdated 24 days ago
    Auto-check passed
  • Open Design To Open Slide

    dracohu2025-cloud/draco-skills-collection

    A skill your agent uses when mining Open Design visual systems and converting them into Open Slide React template kits or standalone 20-page template albums, with build, deployment, screenshot QA…

    227 GitHub stars~2.9k tokensUpdated 24 days ago
    Auto-check passed
  • Daily AI Agent Aigc Top News Dingtalk

    dracohu2025-cloud/draco-skills-collection

    A skill your agent uses when generating a daily 24h AI / Agent / AIGC top-news briefing, publishing it as a DingTalk document, validating it, and optionally archiving it to a DingTalk…

    227 GitHub stars~3k tokensUpdated 24 days ago
    Auto-check passed

Questions about Gpt Image 2 Handdrawn Diagram

What does Gpt Image 2 Handdrawn Diagram do?

A skill your agent uses when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via…. Gpt Image 2 Handdrawn Diagram is an agent skill from dracohu2025-cloud/draco-skills-collection. Use when generating high-readability hand-drawn knowledge diagrams, architecture diagrams, workflow maps, or consulting-style visual explanations with GPT-Image-2 via imagegenerate.

When should I use Gpt Image 2 Handdrawn Diagram?

Gpt Image 2 Handdrawn Diagram fits situations like: generating high-readability hand-drawn knowledge diagrams; architecture diagrams; consulting-style visual explanations with GPT-Image-2 via imagegenerate.

How do I install Gpt Image 2 Handdrawn Diagram in Claude Code?

Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill gpt-image-2-handdrawn-diagram -a claude-code`. Or copy the skill folder (gpt-image-2-handdrawn-diagram in dracohu2025-cloud/draco-skills-collection) into .claude/skills/gpt-image-2-handdrawn-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Gpt Image 2 Handdrawn Diagram in Codex?

Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill gpt-image-2-handdrawn-diagram -a codex`. Or copy the skill folder (gpt-image-2-handdrawn-diagram in dracohu2025-cloud/draco-skills-collection) into .agents/skills/gpt-image-2-handdrawn-diagram in your project. Codex loads it when a task matches its description.

Can I use Gpt Image 2 Handdrawn Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dracohu2025-cloud/draco-skills-collection --skill gpt-image-2-handdrawn-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gpt-image-2-handdrawn-diagram, .gemini/skills/gpt-image-2-handdrawn-diagram, .github/skills/gpt-image-2-handdrawn-diagram and .opencode/skills/gpt-image-2-handdrawn-diagram in your project.

What does Gpt Image 2 Handdrawn Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Gpt Image 2 Handdrawn Diagram is instructions for the agent only.

Does Gpt Image 2 Handdrawn Diagram access the network?

SKILL.md names 1 domain. As links in the text: x.com. This is read from the text; nothing was executed.

Is Gpt Image 2 Handdrawn Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Gpt Image 2 Handdrawn Diagram use?

Gpt Image 2 Handdrawn Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Gpt Image 2 Handdrawn Diagram use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Gpt Image 2 Handdrawn Diagram?

Skills that share tags, products or a category with Gpt Image 2 Handdrawn Diagram: Academic Figures Drawer (M1n-n9/academic-figures-drawer, 218 stars), Sf Diagram Nanobananapro (Jaganpro/sf-skills, 424 stars), CLI Hub Matrix Image Design (HKUDS/CLI-Anything, 52k stars) and Paper Illustration (AI4Scientist/nano-scientist, 128 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Gpt Image 2 Handdrawn Diagram?

dracohu2025-cloud (a GitHub user) maintains it in dracohu2025-cloud/draco-skills-collection, which has 227 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 17, 2026.

Source: dracohu2025-cloud/draco-skills-collection on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.