Story HTML Publisher
hassancs91/claude-image-generation
Final step of the AI Storybook pipeline. An agent skill from hassancs91/claude-image-generation.
Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP).
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustration --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .claude/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustration --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .agents/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustration --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .cursor/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustration --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .gemini/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustrationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .github/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install GiMi-Xiaomi/gimi-illustration-skill gimi-illustration --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "gimi-illustration" agent skill from https://github.com/GiMi-Xiaomi/gimi-illustration-skill/tree/main into .opencode/skills/gimi-illustration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gimi-illustration", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
gimi-illustrationMulti-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP).
Gimi Illustration is an agent skill from GiMi-Xiaomi/gimi-illustration-skill. Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP). When the user is enrolling a custom IP: do NOT generate a poster or illustration first — load references/ip/template.md and run Step 0 (plan confirm before freeform image gen). Use for 配图, 给文章配图, 帮我配图, illustration, 自定义 IP, 录入 IP, 上传形象, 新建 IP, 怪诞手绘, 暖调绘本, 产品方案.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 60 other files, including reference files and assets (for example `CHANGELOG.md`, `IP-NOTICE.md` and `README.md`).
It sits in Frontend & Design, covering Image generation. It works with Storybook. The repository describes itself as: 文章/口播配图 skill ,支持自定义 IP、调尺寸、配置标题、换风格. The licence is MIT.
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 0f602ea. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Gimi Illustration loads about 1.7k tokens when it runs, and up to ~28k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 552 words of instructions outside code blocks.
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.
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.
The full file from GiMi-Xiaomi/gimi-illustration-skill at commit 0f602ea, republished under its MIT licence (© GiMi-Xiaomi). 552 words, ~1,688 tokens.
.claude/skills/gimi-illustration/SKILL.md (or your agent's skills folder). This skill also uses 54 other files; get the full folder from GitHub.Public 3.0 = 产品 v3.0(多风格:怪诞手绘 / 暖调绘本 / 产品方案 + 自定义 IP)
换窗口:有
docs/时先读docs/INDEX.md→docs/roadmap.md;执行以本文件 +references/ip/_template.md为准
触发含 自定义 IP / 录入 IP / 上传形象 / 新建 IP(可附图)时:
references/ip/_template.md,走 Step 0;不要先当「配图 / 海报」生图 image_gen / GenerateImage / ImageGen 等),直到用户已回答「按这个形象方案录入吗?」 _template 为准;本段与之冲突时,以本段路由为准(先拦抢跑)触发仅为 配图 / illustration 等、且非录入 IP → 走下方 Quick Mode / Step 1–5。
输入文章内容,生成配图。默认风格「怪诞手绘」(quirky-sketch),可切换已录入风格(如「暖调绘本」);IP 为 gimi / none / 自定义实例,默认 16:9。
配图:配图 / 给文章配图 / 帮我配图 / illustration
自定义 IP:自定义 IP / 录入 IP / 上传形象 / 新建 IP
| 文件 | 何时加载 |
|---|---|
docs/INDEX.md | 换窗口文档导航(先读) |
docs/roadmap.md | 换窗口工作台 / 要改规则时 |
docs/spec.md | 产品规划(防跑偏);非执行协议 |
references/styles/{$STYLE}.md | 生图 / 校准 / 风格 QA 时 |
references/styles/_template.md | 批量录入新风格时(非配图热路径) |
references/composition-patterns.md | 出策略时(非 Step 0) |
references/visual-promise.md | Step 2 判视觉承诺 / 结构·外参·域物件(SSOT;细则不抄进本文件) |
references/shot-config.md | 出策略时(非 Step 0) |
references/prompt-template.md | 组装 prompt 时 |
references/qa-checklist.md | 质检时 |
references/ip/_template.md | 自定义 IP / Step 0(优先于生图) |
references/ip/gimi/ip.md | $IP = gimi |
references/ip/none.md | $IP = none |
references/ip/{id}/ip.md | $IP 为已存在的自定义 id |
调用当前 AI 软件内置的生图工具(如 Codex @Image Gen、Cursor GenerateImage 等)。Skill 负责策略、prompt 组装、参考图附件、QA;生图由平台工具执行。接口语义:文本 prompt + 可选图片附件。
Step 0 录入中: 遵守文首「路由分流」;未满足允许条件前不得调用生图工具。
平台适配优先级:
image_gen:已有 IP 的正式配图一律传「设定图 + 当前 (IP, STYLE) 校准图」;先跑 Step 1.5,缺任一张不得生正式图;再 image_gen| 变量 | 默认值 | 说明 |
|---|---|---|
$STYLE | quirky-sketch | 默认怪诞手绘;可按主人语言切换为已录入风格(见 Step 1) |
$RATIO | 16:9 | 宽高比;用户可指定任意比例 |
$IP | gimi | gimi / none / 其他:若存在 references/ip/{id}/(非 _template)则加载该实例 |
$REF_MODE | 解析得出 | dual / style-single / none;已有 IP 缺当前风格校准时为 lazy 门禁,不是可交付参考模式 |
$TITLE | 无 | 用户要求时顶部手写标题 |
$COUNT | 自动推断 | 配图张数 |
$OUTPUT_SIZE | 无 | 可选;仅用户明确要求具体像素时记录 |
推荐像素(非强制): 16:9 → 建议 1920×1080;3:4 → 建议 1080×1440。
用户已给正文且变量可推断 → 不多问,直接生图。以下情况才确认:用户说「先别生图」、变量冲突、新 IP 尚无 ip.md(先走 Step 0)、或 Step 1.5 判为 lazy。
Step 0 进行中:关闭 Quick Mode(不得跳过确认话术)。
录入触发词出现时:不适用 Quick Mode 生图。
用户要新建/录入 IP 时:加载 references/ip/_template.md,严格按其中 Step 0 填槽(用户只需附图 +「录入 IP」,不必写 Step 编号)。
双层: 协议走 0.1–0.5;对用户只用「用户层话术」(见 _template),称当前 $STYLE 的 display_name(录入默认多为「怪诞手绘」),不暴露 Step 编号。
硬门禁(0.5 完成前)——与文首路由分流一致:
shot-config.md reference-character.png 一律 full styles/{$STYLE}.md);「像吗?」未闭合前不得进配图examples/{$STYLE}/ 空且要用该风格配图时 → lazy 补 0.4(已启用,见 _template 多风格细则)。
完成后才进入配图;配图时 $IP={id}。
记录:$RATIO · $IP · $STYLE · $TITLE · $COUNT ·(可选)$OUTPUT_SIZE
Quick Mode 推断:竖版/小红书 → 3:4;否则 → 16:9。
$STYLE 解析(主人语言,不要求用户写 id):
references/styles/*.md(排除 _template.md)的 display_name / aliasesiddisplay_name + tagline(默认可标「常用」)quirky-sketch;本会话首次配图追加一句轻提示(不打断):口语优先;$STYLE=… 仅进阶。对用户称 display_name,不说路径。
在进入 Step 2、写 shot-config.md 或生成正式图之前,对当前 (IP, STYLE) 只判一次:
$IP=none 且当前风格「无 IP 校准策略」为 required style-single → 必须按 references/ip/none.md 选择 assets/none/examples/{$STYLE}/ 中 1 张,记为 $REF_MODE=style-single;缺目录 / 缺选图是发布包资产问题,停止并修复,不向用户索图、不降级为纯文本。$IP=none 且当前风格没有 required 策略 → $REF_MODE=none,保持既有 none 行为;若该风格声明 optional 且有资产,可按 none.md 选 1 张作质量收敛。assets/ip/{$IP}/examples/{$STYLE}/ 至少有 1 张可用校准图 → $REF_MODE=dual,可进 Step 2。$REF_MODE=lazy;只按当前风格 0.4 生成样板,QA 后问「像吗?」;禁止写 shot-config.md、生成正式图、或附其他风格校准图充当双参考。用户催图也不降级;应说明「这个风格的样板还没定,确认样板后才能正式配图」。用户确认「像」后才将该样板落盘到当前 $STYLE 目录;后续正式请求重新解析为 dual。已有 IP 的正式配图不允许 single,必须 dual。 IP 文件不维护全局 ref_mode;当前风格的目录事实是唯一依据。
仅
$REF_MODE已被 Step 1.5 判为dual/style-single/none时可进入。策略:composition-patterns.md· 视觉承诺:必载visual-promise.md(SSOT)· 落盘:shot-config.md。
visual-promise.md)+ density / 阅读顺序(composition「阅读动线语法」;scenic 强制)外参参考:按 visual-promise §B(主锚预算 + 默认特征锁不附图);失败/超时静默降级 意象(不问用户)styles/{$STYLE}.md、prompt-template.md、对应 ip/*.md$REF_MODE:dual → 设定图 + examples/{$STYLE}/ 中 1 张校准图(两张都存在才可组装)style-single → $IP=none,必传 assets/none/examples/{$STYLE}/ 中按 none.md 选定的 1 张;prompt 明示只匹配画法,不复制构图、标题、物件排列或业务内容none → 仍按 none 规则(无角色设定图,也无 required 风格资产)visual-promise.md / prompt-template:追加承诺锁;外参参考 默认不附地标图(特征进 SUBJECT);仅「外参附图=是」才附;scenic 追加阅读动线意涵(composition SSOT)IP_DESC 在 STYLE_DNA 之前,见 prompt-template.md)加载 qa-checklist.md(承诺 → visual-promise;动线 → composition「阅读动线语法」)。$OUTPUT_SIZE 有值时 → 等比缩放 + 白底留白,禁止裁切。不通过 → 重试,最多 2 次。
outputs/{YYYYMMDD}-{slug}/
shot-config.md ← 配图策略 + 插入位置(与图片同时交付)
01-{slug}.png
02-{slug}.png ← 多张时继续编号Public / 产品 3.0 · 三风格可选 + 自定义 IP · visual-promise SSOT
© GiMi-Xiaomi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 54 other files (references, assets) in the repository root of GiMi-Xiaomi/gimi-illustration-skill.
Open the folder on GitHubat commit 0f602ea
Gimi Illustration 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Gimi Illustration this skillGiMi-Xiaomi/gimi-illustration-skill | 703 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Story HTML Publisherhassancs91/claude-image-generation | 102 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Scene Splitterhassancs91/claude-image-generation | 102 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Ky Design To HTMLKyrieCheungYep/ky-design-to-html-skill | 163 | — | ~2.8k | Automated safety check: Pass | None | |
| Qovery UIQovery/console | 227 | — | ~2k | Automated safety check: Pass | GPL-3.0 | |
| Frontend Design Proclaudekit/frontend-design-pro-demo | 278 | — | ~1.4k | Automated safety check: Pass | None |
hassancs91/claude-image-generation
Final step of the AI Storybook pipeline. An agent skill from hassancs91/claude-image-generation.
hassancs91/claude-image-generation
Splits a plain English story into a numbered list of SCENES — each scene being one moment that gets exactly one illustration AND one narration clip downstream.
KyrieCheungYep/ky-design-to-html-skill
Convert visible UI references such as screenshots, exported mockups, Figma frame images, SaaS empty states, dashboards, and landing page screenshots into high-quality HTML/CSS by decomposing layout…
Qovery/console
Design review and implementation guidance for the Qovery Console.
claudekit/frontend-design-pro-demo
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images…
kwakseongjae/oh-my-design
Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build imagegen, Codex $imagegen…
Works with
Categories
Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP). Gimi Illustration is an agent skill from GiMi-Xiaomi/gimi-illustration-skill. Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP).
Gimi Illustration fits situations like: is enrolling a custom IP: do NOT generate a poster; illustration first — load references/ip/template.md and run Step 0 (plan confirm before freeform image gen).
Run `npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a claude-code`. Or copy the skill folder (the GiMi-Xiaomi/gimi-illustration-skill repository) into .claude/skills/gimi-illustration in your project. Claude Code loads it when a task matches its description.
Run `npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a codex`. Or copy the skill folder (the GiMi-Xiaomi/gimi-illustration-skill repository) into .agents/skills/gimi-illustration in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add GiMi-Xiaomi/gimi-illustration-skill --skill gimi-illustration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gimi-illustration, .gemini/skills/gimi-illustration, .github/skills/gimi-illustration and .opencode/skills/gimi-illustration in your project.
SKILL.md names no scripts, command-line tools or credentials: Gimi Illustration is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
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.
Gimi Illustration is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 26k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Gimi Illustration: Story HTML Publisher (hassancs91/claude-image-generation, 102 stars), Scene Splitter (hassancs91/claude-image-generation, 102 stars), Ky Design To HTML (KyrieCheungYep/ky-design-to-html-skill, 163 stars) and Qovery UI (Qovery/console, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
GiMi-Xiaomi (a GitHub user) maintains it in GiMi-Xiaomi/gimi-illustration-skill, which has 703 GitHub stars. The repository was last updated on August 3, 2026.
Source: GiMi-Xiaomi/gimi-illustration-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.