Skip to content
cccskills
FreePublished on GitHub

image-generation

Generate and refine images using brand libraries, templates, and reference assets. The skill helps shape prompts around an image’s purpose, composition, palette, and text rules, then supports candidate generation and iterative edits while preserving the chosen style.

OriginalShow the original description

Generate and refine brand-consistent images from libraries, references, and prior candidates. Use before calling image-generation or refinement actions.

BuilderIO/agent-native7,524 stars(GitHub 7,524 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Creating campaign or event images from a brand template
  • Generating several image candidates for an open-ended brief
  • Refining an existing candidate while keeping its subject
  • Using library references to guide consistent visual style

Files included (1)

  • SKILL.md10.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Image Generation

Use this skill before calling generate-image, generate-image-batch, or refine-image.

Prompt contract

Treat references as evidence, not decoration. The prompt should explain the asset's job, subject, framing, medium, lighting, palette, exact text policy, and what must not change. Keep the active library or preset's style brief and the caller's design-system constraints authoritative; Impeccable-style composition guidance may improve the result but must not replace them.

Before generating, decide whether the slot needs a produced image, a direct reuse of an approved asset, or a semantic UI/icon/diagram owned by the caller. Do not use image generation to paper over missing product facts, customer evidence, screenshots, or exact logos.

Rules

  • Start from composer @ mentions when the user tags generation inputs. brand-kit references map to libraryId, preset references map to presetId, and media-type references choose image generation versus video generation. Call view-screen when the user says "this library" or "this image" and you need fresh IDs. The image model may default from the composer image-model picker.
  • A tagged @preset (presetId) owns aspectRatio, imageSize, model, tier, and category. When a preset is set, do NOT pass those args yourself — leave them out so the preset's saved values are used. You cannot see the preset's settings from the presetId, so passing your own guess silently overrides the preset (this is the usual cause of a preset's aspect ratio being ignored). Pass one of these args alongside a preset ONLY when the user explicitly asks for a value that differs from the preset. When there is no preset, set them explicitly or rely on the action schema defaults.
  • Use category-tagged references. Blog heroes should prefer hero; diagrams should prefer diagram; product imagery should include product and logo references.
  • Imported external images with status: "reference" are valid generation inputs. Use their returned asset IDs in preset reference fills or reference boards the same way you would use uploaded reference assets.
  • Keep reference sets small and deterministic. Prefer anchors listed in assetLibraries.settings.canonicalStyleAssetIds and assets marked assets.metadata.isStyleAnchor before sampling other relevant references.
  • Honor library custom instructions. They are persistent prompt guidance and should be updated when the user wants durable generation behavior.
  • Generate the selected candidate count for open-ended requests, usually 2-4. Use generate-image-batch with stable slotIds so the shared generation tray can show live slots.
  • generate-image and generate-image-batch are synchronous for images. One batch call should produce the requested candidates and return compact asset summaries with IDs and URLs; do not follow it with get-generation-run, refresh-generation-run, or more generation unless the user asks for another direction or the returned slot has ok: false.
  • Use get-asset when full asset details are needed. Use get-audit-run or list-audit-runs for the prompt, compiled prompt, references, and generation settings.
  • For repeatable deliverables, honor a template @mention as templateId or call list-templates when choosing one. Pass the template through generate-image, generate-image-batch, refine-image, or rerun-generation-run.
  • For designer handoff, preserve sessionId and call update-generation-session after each new candidate so the active asset, feedback, and run lineage stay resumable.
  • Show previews in chat. In Assets, use /asset/<assetId>/embed; from another app, preserve the returned preview/download URLs exactly.
  • Iterate with refine-image --assetId. Use edit-image for targeted edits and restyle-image when the user wants to preserve a subject image while applying library style. Pass subjectAssetId, styleStrength, and tier when they matter.
  • Use quality tier values intentionally: fast for exploration, best for final/high-value output, and auto when there is no clear preference.
  • Cross-agent callers must pass source: "a2a" and callerAppId to generate-image-batch / refine-image. The design team uses the audit log to review quality by app, library, model, prompt, and lineage.

Composer Mentions And Tagged Templates

  • Composer @ mentions are the source of generation inputs. Map brand-kit references to libraryId, template references to templateId, and media-type references to choosing image (generate-image / generate-image-batch) or video (generate-video) generation.
  • The current library view auto-tags its brand kit as a visible removable chip, and the template editor auto-tags an associated template with its brand kit.
  • The image model is the only remaining composer-side default; the image-model picker writes imageGenerationModel, which image generation actions may use when model is omitted.
  • When a template is tagged, the server embeds that template's aesthetics and creative philosophy (brand style brief, prompt template, text/logo policy, output format) into your message inside a <tagged-templates> block. Study and internalize that brief before you generate — let it drive composition, mood, lighting, and subject — then pass the templateId to generate-image / generate-image-batch so the saved format/model/tier/logo apply automatically. Do not restate those as ad-hoc args.

Template-first Generation

  • Image requests without a tagged template are template-first: the user may not know templates exist. Compare the request against each template's title, description, and category, and if one matches the use case (e.g. "livestream poster" -> a Livestream Announcement template), generate with its templateId instead of ad-hoc settings. Only generate without a template when nothing plausibly matches.
  • Before any ad-hoc generation for a brand kit, call list-templates and scan titles/descriptions/categories for a use-case match. A template encodes the designer's format, model, layout, and reference board; using it is always better than improvising.
  • If one template clearly matches: use its templateId; do not restate its saved aspect ratio/size/model/tier. If several plausibly match: pick the best and state which one you used; do not ask the user to choose.
  • Match named people/products/backdrops in the request to the template's reference board entry labels in settings.presetReferences. Fill required variable entries via presetReferenceFills: search the library for assets of those people first; ask the user for photos only when none exist. Never skip a required entry.
  • Route exact visible copy such as event titles, dates, and times to embeddedText per the existing text rules; keep the creative direction in prompt.
  • For exact visible copy inside a generated image, pass embeddedText and optional textPlacement to generate-image or each generate-image-batch slot. Keep the general prompt for creative direction; the structured text fields are what allow the pipeline to render copy instead of suppressing it.
  • If nothing matches: generate ad-hoc, say that no template fit, and mention a template could be created for this recurring use case. The deprecated *-generation-preset actions remain aliases for existing agent threads.

Prompting

  • Treat references as evidence, not decoration.
  • Let the server choose references unless the user named exact assets. Automatic generation uses up to 6 relevant current references, seeded by canonical style anchors; explicit referenceAssetIds are preserved.
  • Template reference boards live on tagged templates as named entries such as a usual host, product, backdrop, style sample, or per-event speaker. Fixed entries attach automatically. Variable entries may be replaced for a run with presetReferenceFills; each fill REPLACES that entry's pinned images rather than appending. Required variable entries block generation until you provide at least one image.
  • When a tagged template brief names required variable references, collect the needed images from the user's attachments or the library and pass presetReferenceFills: [{ referenceId, assetIds }] to generate-image or generate-image-batch. Board images are additive to brand style references. User-uploaded per-event people/photos should be uploaded as content images (subject intent/role), not as reusable brand style references.
  • If a collection's style feels underspecified, call analyze-collection-style and use its vision brand analysis for palette, composition, lighting, subject treatment, typography policy, and constraints.
  • Compile the style into a short brief: palette, composition, lighting, medium, typography policy, subject framing, custom instructions, and constraints.
  • For short vague prompts, enhance conservatively with library context while preserving the user's exact text as originalPrompt.
  • Avoid visible text unless explicitly requested. For diagrams, ask for clear hierarchy, exact label placement, consistent line weights, and whitespace.
  • For exact logos, use the uploaded canonical logo path. The generation prompt should leave a clean area; the server composites the logo after generation.
  • Do not describe brand QA scoring or best-of-N selection as available yet.

Completion

After generation, reply with asset IDs and previews. Ask whether to save, iterate, or produce another direction.

When the user says a designer should pick up the work, create a generation session with create-generation-session, including the active assetId, relevant runIds, presetId, and the feedback summary. Use prepare-generation-session-continuation to open a new chat with the handoff context preloaded.

Every generation is audit logged automatically. When a reviewer asks how images are performing, use navigate --view audit, list-audit-runs, or get-audit-run.

Use rerun-generation-run to rerun the original prompt and settings from an older generation against the latest library style brief, custom instructions, collection data, and deterministic references.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

a2a-assets

FreeSummary

Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.

  • Generate brand images for slides or another app
  • Refine an existing asset after feedback
  • Create and export a video asset
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

account-health

FreeSummary

Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.

  • Preparing a named customer's account health review
  • Comparing contracted seats or capacity with usage
  • Gathering adoption signals before a renewal or QBR
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

actions

FreeSummary

Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.

  • Adding a new app operation
  • Connecting an external provider API
  • Fetching data for a frontend view
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adding-a-feature

FreeSummary

Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.

  • Planning a new feature across UI and agent actions
  • Checking that agent changes appear in the UI
  • Documenting actions and feature state for the agent
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adhoc-analysis

FreeSummary

Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.

  • Comparing CRM deals with call records
  • Investigating customer health across systems
  • Saving a repeatable performance analysis
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

admin-surfaces

FreeSummary

Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.

  • Review dashboard owners, views, and edits
  • Change a workspace feature flag for an app
  • Browse or edit a connected app database
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

See all skills by BuilderIO

Report a problem with this skill