Image Studio
Render high-quality static images (ad creatives, posters, social posts, OG images, blog headers) by writing modern HTML/CSS and screenshotting with headless Chromium. Use whenever the user asks for a Canva-style static graphic, ad image, social post, carousel slide, OG image, hero image, or marketing poster — anything that isn't AI-generated photography. Output rivals Canva because the browser renders the design with full CSS, Tailwind, Google Fonts, gradients, blend modes, SVG, and effects. Triggers: "create an ad image", "make a social post", "design a poster", "OG image", "hero image", "sta
Install
npx skills add ai-agents-for-agencies-coaches/image-studio --skill image-studiogit clone --depth 1 https://github.com/ai-agents-for-agencies-coaches/image-studio.git /tmp/image-studio
mkdir -p ~/.claude/skills
cp -r /tmp/image-studio/. ~/.claude/skills/image-studioPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# image-studio Produce **high-quality static images** by writing modern HTML/CSS, then rendering with headless Chromium at 2x DPI. This is the Canva-replacement workflow. ## When to use this - Meta/Facebook/Instagram ad creatives (1080x1080, 1080x1350, 1080x1920) - Marketing posters, hero images, billboards - Carousel slides (consistent template, varied text) - OG / Twitter card images (1200x630) - Blog headers, in-article graphics - Anything where you'd reach for Canva ## When NOT to use this - AI-generated photorealistic images → use `gpt-image-1` / DALL-E (see `meta-ad-creative-generator`) - Diagrams, flowcharts, whiteboard sketches → use `excalidraw` - Video → use `remotion-video-production` or `animation-studio` - Quick text-only PNGs → PIL via `meta-ad-creative-generator` is fine ## Brand fidelity (DESIGN.md) — check FIRST Before any client creative, run the pre-flight check. If a `DESIGN.md` exists (project root, or `~/claude_work/brand-kits/<slug>/`), it is the source of truth — load its tokens into the template `:root` vars (`--accent`, `--ink`, `--bg`, `--mute`) and fonts; do **not** hardcode or sample new colors. If it has unresolved `TODO: VERIFY` or lint errors, stop and resolve with the user. If none exists, use the [`brand-kit`](https://github.com/ai-agents-for-agencies-coaches/brand-kit) skill to extract + verify one — **never guess a client's brand**. (Generic/demo work with no real client: use neutral placeholders, don't invent a brand.)
Details
- Skill name
image-studio- Repository
- ai-agents-for-agencies-coaches/image-studio
- License
- MIT
- Repo updated
- 1 July 2026
FAQ
What does the Image Studio skill do?
Render high-quality static images (ad creatives, posters, social posts, OG images, blog headers) by writing modern HTML/CSS and screenshotting with headless Chromium. Use whenever the user asks for a Canva-style static graphic, ad image, social post, carousel slide, OG image, hero image, or marketing poster — anything that isn't AI-generated photography. Output rivals Canva because the browser renders the design with full CSS, Tailwind, Google Fonts, gradients, blend modes, SVG, and effects. Triggers: "create an ad image", "make a social post", "design a poster", "OG image", "hero image", "sta
How do I install the Image Studio skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add ai-agents-for-agencies-coaches/image-studio --skill image-studio. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Image Studio popular?
It lives in ai-agents-for-agencies-coaches/image-studio, which has 5 GitHub stars and 0 forks.
Related skills
Launch Video Maker
5SigmaMatrix-AI/launch-video-maker
Use when the user asks for an autonomous product launch video or promo from product materials, a website, screenshots, recordings, or source code, or to continue, edit, or review such a film project.
Image Gen
5behzadsp/claude-code-image-gen
Generate images from text prompts through OpenAI (gpt-image-2.5), Google Gemini (gemini-3-pro-image), Higgsfield, Black Forest Labs FLUX, or any OpenAI-compatible endpoint such as xAI Grok or Recraft. Use when the user asks to generate, create, render, or make an image, hero image, illustration, logo concept, OG image, poster, thumbnail, or social card, when a project has placeholder images to replace, or when the user names an image model or asks which image providers are available.
Melies
5melies-co/melies-cli
AI filmmaking CLI with 148 built-in actors, 98 visual styles, and smart model selection. Generate images, videos, posters, and thumbnails without prompt engineering. Text-to-image, text-to-video, image-to-video pipeline, upscaling, background removal. Use --actor, --art-style, --lighting, --mood flags instead of writing prompts.
Hyper3d Documentary
5xiaohuailabs/hyper3d-documentary
用 Hyper3D（Rodin Gen-2.5）把一个科普题材做成可分享的单文件网页 3D 纪录片：需求问答 → 写脚本 → 生参考图 → 生成 3D 模型 → 模型库审核 → 动画成片，外加一个项目总览管理页。
Roblox Blender Modelling
5WildCake/roblox-blender-modelling
Model, UV unwrap, consolidate and prepare Blender assets for Roblox. Use for props, vehicles, mechanisms and static environments; reference reconstruction; stretched textures, inconsistent texel density or unintended UV overlap; excessive MeshParts, segmented exports and duplicate mesh uploads. Covers the official Roblox Blender add-on and import validation, not general gameplay or UI implementation.
Grok Video Editing
5AlizayAyesha/grok-video-editing-skill
Record a product demo on a Linux desktop, cut it into feature clips, and render an on-brand 1080p motion-graphics promo video entirely with code (ffmpeg + HTML Canvas + headless Chromium via Playwright + a procedural audio mix). Use when asked to make a product demo, launch video, or social promo themed to a website's colors and fonts.
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.