design-image-studio
bykangarooking· 59 skills
Directly generate design-oriented AI images with strong creative direction and prompt engineering. Use this skill for posters, product visuals, PPT illustrations, infographics, teaching/demo diagrams, campaign key visuals, cover art, or when the user wants design-quality image generation rather than generic AI art. This skill turns a loose brief into a design brief, assembles a structured prompt, routes to the right Volcengine Seedream settings, and can generate the image immediately.
How to install design-image-studio?
kangarooking/design-image-studio
$npx -y skills add kangarooking/design-image-studio --skill design-image-studioInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/kangarooking/design-image-studio" --skill "kangarooking/design-image-studio"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/kangarooking/design-image-studio" that are relevant to the current task. Run `npx skills add "https://github.com/kangarooking/design-image-studio"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Design Image Studio |
| 2 | |
| 3 | 把一个模糊的视觉需求，直接变成可落地生成的高质量设计图。 |
| 4 | |
| 5 | `design-image-studio` 是一个面向创意与设计场景的 Agent Skill。它不是简单地把一句话塞给文生图模型，而是先读取并保留完整的 Claude 设计系统提示词，再把需求整理成设计推理和结构化 brief，最后把这些设计判断压缩成更强的生图 Prompt，并直接调用 Volcengine Seedream 生成图片。 |
| 6 | |
| 7 | 它适合做的不是泛泛的“AI 生图”，而是更接近设计工作流的任务：海报、商品图、PPT 配图、信息图风格视觉、教学演示图。 |
| 8 | |
| 9 | ## 为什么做这件事 |
| 10 | |
| 11 | 现在很多 AI 生图的问题，不是模型不够强，而是输入太弱。 |
| 12 | |
| 13 | 用户给模型的往往只有一句模糊需求，比如“帮我做一张海报”“来一张高级感商品图”。这种输入对生成模型来说信息远远不够，所以结果就很容易滑向几个常见问题： |
| 14 | |
| 15 | - 画面有细节，但没有主次 |
| 16 | - 风格很满，但没有设计目的 |
| 17 | - 看起来像 AI 图，却不像真正可用的商业视觉 |
| 18 | - 可以“好看”，但不适合投放、演示、教学、招商这些真实场景 |
| 19 | |
| 20 | `design-image-studio` 的目标，就是把“设计判断”补回到生图链路里：先明确用途、受众、构图、气质、留白、安全区和禁忌项，再去调模型。 |
| 21 | |
| 22 | ## 核心设计 |
| 23 | |
| 24 | 这个 skill 现在不是简单的 prompt 模板器，而是一个“设计编译器”： |
| 25 | |
| 26 | 1. 保留完整的 `Claude-Design-Sys-Prompt` 作为上游设计脑 |
| 27 | 2. 先生成 `design_reasoning` |
| 28 | 3. 再压缩成 `compiled_brief` |
| 29 | 4. 最后才生成给图片模型吃的短 Prompt |
| 30 | |
| 31 | 也就是说，真正做设计判断的是完整的设计系统提示词，而不是几条零散的风格关键词。 |
| 32 | |
| 33 | ## 它解决了什么问题 |
| 34 | |
| 35 | - 普通生图 Prompt 太泛，结果不稳定 |
| 36 | - 海报和 PPT 配图经常没有留白，后续没法放字 |
| 37 | - 商品图容易有廉价感，材质、灯光、构图不成立 |
| 38 | - 信息图和教学图常常又乱又密，缺乏结构 |
| 39 | - 用户想要的是“像设计师一样思考后的图”，不是“模型随便画出来的图” |
| 40 | |
| 41 | ## 它是怎么工作的 |
| 42 | |
| 43 | `design-image-studio` 把生图拆成四层： |
| 44 | |
| 45 | 1. **任务识别层** |
| 46 | 先判断这是海报、商品图、PPT 配图、信息图还是教学演示图，不同场景使用不同的默认构图和约束。 |
| 47 | |
| 48 | 2. **设计推理层** |
| 49 | 基于完整的 Claude 设计系统提示词，整理出设计推理：目标、受众、使用场景、视觉系统、主次层级、留白策略、anti-filler 规则和 anti-slop 规则。 |
| 50 | |
| 51 | 3. **编译简报层** |
| 52 | 把设计推理压缩成结构化 `compiled_brief`，只保留对生图真正有用的部分。 |
| 53 | |
| 54 | 4. **生成执行层** |
| 55 | 基于 `compiled_brief` 组装最终 Prompt，选择合适的 Volcengine Seedream 模型、分辨率和比例，并直接生成图片。 |
| 56 | |
| 57 | 整个流程由两个脚本组成： |
| 58 | |
| 59 | - `scripts/design_image.py`：设计编译层 |
| 60 | - `scripts/generate.py`：Volcengine Seedream 生成执行层 |
| 61 | |
| 62 | ## 支持的场景 |
| 63 | |
| 64 | - 海报生成 |
| 65 | - 商品图生成 |
| 66 | - PPT 配图生成 |
| 67 | - 信息图风格视觉生成 |
| 68 | - 教学演示图生成 |
| 69 | |
| 70 | ## Demo |
| 71 | |
| 72 | 下面这张图是用本仓库生成的示例海报，需求是： |
| 73 | |
| 74 | > 为 AI 训练营生成一张高冲击力招生海报，强调速度、增长、实战 |
| 75 | |
| 76 |  |
| 77 | |
| 78 | ## Case Gallery |
| 79 | |
| 80 | 下面这些案例图都来自同一套 `design-image-studio` 工作流，重点不是“单张图好不好看”，而是这个 skill 能否稳定覆盖不同设计任务。 |
| 81 | |
| 82 | ### 海报方向稿 |
| 83 | |
| 84 | 同一份 brief 先出多个方向，适合做活动海报、课程海报、社群传播图的第一轮探索。 |
| 85 | |
| 86 |  |
| 87 | |
| 88 | ### 商品图素材组 |
| 89 | |
| 90 | 同一商品一次性生成多场景电商图，适合主图、办公场景、通勤场景、细节图和社交媒体展示图。 |
| 91 | |
| 92 |  |
| 93 | |
| 94 | ### PPT 配图方向稿 |
| 95 | |
| 96 | 适合企业内部分享、培训课件和汇报材料。重点不是做海报感，而是帮助观众更快理解观点。 |
| 97 | |
| 98 |  |
| 99 | |
| 100 | ### 信息图结构图 |
| 101 | |
| 102 | 适合流程说明、培训材料和结构化表达。重点是把信息重新组织成更容易被看懂的层级。 |
| 103 | |
| 104 |  |
| 105 | |
| 106 | ### 教学演示图 |
| 107 | |
| 108 | 适合知识讲解、内训和 AI 工作流说明。下面这张图展示的是 `RAG（AI知识库）工作流程` 的教学型表达。 |
| 109 | |
| 110 |  |
| 111 | |
| 112 | ## 最简单的使用方式 |
| 113 | |
| 114 | 直接对你的 Agent 说： |
| 115 | |
| 116 | ```text |
| 117 | 帮我安装这个skill：https://github.com/kangarooking/design-image-studio |
| 118 | ``` |
| 119 | |
| 120 | 安装完成后，再直接说你的需求即可，例如： |
| 121 | |
| 122 | ```text |
| 123 | 用 design-image-studio 帮我生成一张 AI 训练营招生海报，强调速度、增长、实战 |
| 124 | ``` |
| 125 | |
| 126 | ```text |
| 127 | 用 design-image-studio 帮我生成一张高端陶瓷咖啡杯商品图，适合电商首图 |
| 128 | ``` |
| 129 | |
| 130 | ## 使用前提 |
| 131 | |
| 132 | 这个 skill 依赖火山引擎 ARK 的 API Key。 |
| 133 | |
| 134 | - 你需要先申请并配置 `ARK_API_KEY` |
| 135 | - Key 获取入口见：[火山引擎 ARK API Key 页面](https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey) |
| 136 | - 调用会产生费用，本质上是在调用火山引擎的图像生成模型能力 |
| 137 | |
| 138 | 本仓库当前主要支持并实际调用的是字节的豆包生图模型： |
| 139 | |
| 140 | - `doubao-seedream-4-5-251128` |
| 141 | - `doubao-seedream-5-0-260128` |
| 142 | - `doubao-seedream-5-0-lite-260128` |
| 143 | |
| 144 | 其中常用关系可以简单理解为： |
| 145 | |
| 146 | - `Seedream 4.5`：更偏高质量成品 |
| 147 | - `Seedream 5.0`：更强的高阶生成版本，可显式指定 |
| 148 | - `Seedream 5.0 lite`：默认的高性价比版本 |
| 149 | |
| 150 | 也就是说，这个 skill 虽然对外表现成一个“设计编译 + 生图”工作流，但底层生成模型其实就是豆包生图对应的 Seedream 系列。 |
| 151 | |
| 152 | ## 本地运行（进阶） |
| 153 | |
| 154 | ### 1. 安装依赖 |
| 155 | |
| 156 | ```bash |
| 157 | pip install "volcengine-python-sdk[ark]" |
| 158 | ``` |
| 159 | |
| 160 | ### 2. 设置 API Key |
| 161 | |
| 162 | ```bash |
| 163 | export ARK_API_KEY="your_volcengine_ark_api_key" |
| 164 | ``` |
| 165 | |
| 166 | 如果没有 Key，可以从 [火山引擎 ARK API Key 页面](https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey) 获取。 |
| 167 | |
| 168 | 注意： |
| 169 | |
| 170 | - 调用会消耗额度并产生费用 |
| 171 | - 不同模型单次生成成本不同 |
| 172 | - `Seedream 4.5 / 5.0 / 5.0 lite` 可以通过参数显式指定 |
| 173 | |
| 174 | ### 3. 直接生成一张海报 |
| 175 | |
| 176 | ```bash |
| 177 | python3 scripts/design_image.py \ |
| 178 | --task poster \ |
| 179 | --brief "为 AI 训练营生成一张高冲击力招生海报，强调速度、增长、实战" \ |
| 180 | --direction balanced \ |
| 181 | --aspect 3:4 \ |
| 182 | --quality final \ |
| 183 | --output ai-training-camp-poster.png |
| 184 | ``` |
| 185 | |
| 186 | ### 4. 只输出 Prompt，不直接生成 |
| 187 | |
| 188 | ```bash |
| 189 | python3 scripts/design_image.py \ |
| 190 | --task product \ |
| 191 | --brief "高端陶瓷咖啡杯电商首图，温暖晨光，突出釉面质感" \ |
| 192 | --prompt-only |
| 193 | ``` |
| 194 | |
| 195 | 脚本会输出三层中间结果： |
| 196 | |
| 197 | - `design_reasoning` |
| 198 | - `compiled_brief` |
| 199 | - `prompt` |
| 200 | |
| 201 | ## 示例命令 |
| 202 | |
| 203 | ### 海报 |
| 204 | |
| 205 | ```bash |
| 206 | python3 scripts/design_image.py \ |
| 207 | --task poster \ |
| 208 | --brief "AI 训练营招生海报，强调速度、增长、实战，面向想要快速上手 AI 的职场人" \ |
| 209 | --aspect 3:4 \ |
| 210 | --quality final \ |
| 211 | --output poster.png |
| 212 | ``` |
| 213 | |
| 214 | ### 显式指定模型 |
| 215 | |
| 216 | ```bash |
| 217 | python3 scripts/design_image.py \ |
| 218 | --task poster \ |
| 219 | --bri |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
