Generate and place AI images on a Cowart canvas or replace holders.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "cowart-image-gen" skill from askskill: 1. Download https://raw.githubusercontent.com/zhongerxin/Cowart/main/skills/cowart-image-gen/SKILL.md 2. Save it as ~/.claude/skills/cowart-image-gen/SKILL.md 3. Reload skills and tell me it's ready
Designers can place AI image holders in Cowart templates first, then use this skill to generate final images that match each slot’s size, reducing manual cropping and alignment.
When there is no dedicated image holder on the page, users can still generate an image and insert it into the current Cowart page for concepts, proposals, or ideation.
Marketing or product teams can use this skill to generate final bitmaps that fit a target canvas ratio and include requested in-image text.
The documentation explains how to use this skill to generate AI images for a Cowart canvas through two workflows: replace a selected AI image holder using its exact size and aspect ratio, or generate and insert an image directly when no holder is selected. It also covers prerequisites, how holders are identified, and how Cowart MCP tools are used to read selection and page state.
Use this skill when the user wants an AI-generated image placed onto the Cowart canvas. A selected AI 图片 holder gives a precise size and placement target, but it is not required. By default, a selected holder is a temporary target and should be replaced by the generated image.
The native Cowart widget should be open for the user's active project. Cowart state is read and written through Cowart MCP tools, not through a localhost browser service.
New holders are tldraw frame shapes with:
{
"type": "frame",
"meta": {
"cowartAiImageHolder": true
}
}
Older canvases may still contain legacy geo rectangle holders with the same
meta flag. Support both shapes.
Read the selected shape from Cowart with the MCP get_cowart_selection tool. Pass the active user project directory as projectDir.
Check whether exactly one selected shape is an AI image holder. A holder is any selected shape with either:
isAiImageHolder: true
or:
meta.cowartAiImageHolder: true
If yes, use the holder replacement workflow below. If not, do not ask the user to select a holder; use the standalone workflow below and insert the generated image into the current Cowart page.
Choose the placement workflow.
Holder replacement workflow: use the selected holder's props.w and props.h as the size contract for both generation and placement. Before generating, derive and keep these values:
targetWidth: selected holder props.wtargetHeight: selected holder props.htargetAspectRatio: the reduced targetWidth:targetHeight ratio when it maps cleanly, plus the decimal targetWidth / targetHeightIf the selected holder matches a Cowart ratio preset such as 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, or 9:16, use that preset label as the human-readable aspect ratio. The generated image should be composed for this target size and aspect ratio, and should not rely on later stretching or cropping to fit the holder.
The generated image should replace the selected holder as a normal tldraw image shape:
parentId: same parent as the holderx, y, rotation: same as the holderprops.w, props.h: same as the holderThis leaves the final canvas with an image shape at the holder's position, not an AI holder that contains an image. Only preserve the holder when the user explicitly asks to keep the reusable slot.
Standalone workflow: when no AI holder is selected, generate the image anyway and insert it as a normal image shape on the current page. Prefer the current page from Cowart view state; if there is a selected non-holder shape and it is useful as context, place the image beside it, otherwise place it in a clear page area. If the user requested a size or aspect ratio, pass that size and ratio into generation and use it for display. Otherwise, use the generated bitmap's natural aspect ratio and a practical display width such as 512 canvas units.
Generate the bitmap with the built-in imagegen skill unless the user explicitly requests another image path. If the requested asset needs visible copy, labels, poster text, ad text, UI text, or typography, include that text directly in the image generation prompt and let the image model produce the final bitmap. Do not default to generating a text-free background and then adding text locally unless the user explicitly asks for local typography, deterministic text overlay, SVG/vector output, or another non-imagegen layout step.
For the holder workflow, the image generation request must explicitly include the selected holder's target size and aspect ratio. Add this information to the model prompt, for example:
Target canvas slot: 512 x 683 canvas units.
Target aspect ratio: 3:4 (0.75 width/height).
Compose the final bitmap for this portrait ratio so it fits the slot without cropping or stretching.
…
It generates AI images for a Cowart canvas and either inserts them into the current page or, by default, replaces a selected AI image holder. It can also include requested in-image text.
The docs say the native Cowart widget must be open for the user’s active project. Cowart state is read and written through Cowart MCP tools, not a localhost browser service.
No. If exactly one AI image holder is selected, the skill uses its size, position, and aspect ratio and replaces it by default; otherwise it generates an image and inserts it into the current page.
Generate or edit bitmap images for illustrations, photos, textures, mockups, and cutouts.
Create original posters, illustrations, and static visuals in PNG or PDF.
Create professional posters, carousels, and presentations quickly from text, URLs, or PDFs.
Generate images from text prompts for fast visual ideation in conversations.
Generate, edit images, and create short videos directly inside Claude.
Generate or edit images from natural language with CCGO image MCP.