> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zerotwo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Image generation

export const ExamplePrompt = ({prompt}) => {
  const text = String(prompt ?? "").trim();
  const openHref = `https://zerotwo.ai/?q=${encodeURIComponent(text)}`;
  return <div className="chatgpt-example-prompt not-prose" data-example-prompt>
      <div className="chatgpt-example-prompt-card">
        <div className="chatgpt-example-prompt-header">
          <span className="chatgpt-example-prompt-label">Example prompt</span>
          <div className="chatgpt-example-prompt-actions">
            <button type="button" className="chatgpt-example-prompt-copy" data-example-prompt-copy aria-label="Copy prompt">
              <span className="chatgpt-example-prompt-copy-icon" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24" className="chatgpt-example-prompt-icon-copy">
                  <path fillRule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2V5Zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v2ZM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H5Z" clipRule="evenodd" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24" className="chatgpt-example-prompt-icon-check">
                  <path fillRule="evenodd" d="M18.063 5.674a1 1 0 0 1 .263 1.39l-7.5 11a1 1 0 0 1-1.533.143l-4.5-4.5a1 1 0 1 1 1.414-1.414l3.647 3.647 6.82-10.003a1 1 0 0 1 1.39-.263Z" clipRule="evenodd" />
                </svg>
              </span>
              <span data-example-prompt-copy-label>Copy prompt</span>
            </button>
            <a className="chatgpt-example-prompt-open" href={openHref} target="_blank" rel="noopener noreferrer" aria-label="Open in ZeroTwo">
              <svg className="chatgpt-example-prompt-open-icon block dark:hidden" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill="#ffffff" fillRule="evenodd" clipRule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" />
              </svg>
              <svg className="chatgpt-example-prompt-open-icon hidden dark:block" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill="#0d0d0d" fillRule="evenodd" clipRule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" />
              </svg>
            </a>
          </div>
        </div>
        <div className="chatgpt-example-prompt-body">
          <div className="chatgpt-example-prompt-text" data-example-prompt-text>
            {text}
          </div>
        </div>
      </div>
    </div>;
};

Ask ZeroTwo to generate or edit images. Use image generation for UI assets,
banners, backgrounds, illustrations, sprite sheets, and placeholders you want
to create alongside code or in a ZeroTwo chat.

<Tabs>
  <Tab title="ZeroTwo desktop app">
    Ask for an image from the app composer. Add a reference image when you want
    ZeroTwo to transform an existing asset or use it as visual guidance.

    ### Review and edit generated images

    Select a generated image to open its expanded viewer. Switch between
    **Focused view** to inspect one image and **Canvas view** to see the images
    generated in the same chat.

    In **Canvas view**, use **Comment** to add precise feedback to one or more
    images. Select **Multi-select** to choose the images you want to include, then
    send your comments and any additional editing instructions in the same chat.
    Describe what should change and what should remain the same.
  </Tab>

  <Tab title="ZeroTwo on the web">
    Ask for an image in a ZeroTwo web chat. Attach a reference image to the
    composer when you want ZeroTwo to edit it or use it as visual guidance.
  </Tab>

  <Tab title="ZeroTwo desktop app">
    Describe the image in an interactive session or include `$imagegen` to invoke
    the image generation skill explicitly. Attach an existing image with `-i` or
    `--image` when it should guide the result.
  </Tab>

  <Tab title="ZeroTwo desktop app">
    Ask for an image from the extension chat. Drag a reference image into
    the composer while holding <kbd>Shift</kbd> when ZeroCode should edit or build on
    an existing asset.
  </Tab>
</Tabs>

## Generate or edit an image

Describe the image in natural language. Add a reference image when you want
ZeroTwo to transform or extend an existing asset.

<Tabs>
  <Tab title="">
    Include `$imagegen` in your prompt to invoke the image generation skill
    explicitly.

    Built-in image generation uses `gpt-image-2` and counts toward your general
    ZeroCode usage limits. Image generations use included limits 3–5x faster on
    average than similar turns without image generation, depending on image quality
    and size. For larger batches, set `OPENAI_API_KEY` in your environment and ask
    ZeroTwo to generate images through the API so API pricing applies.
  </Tab>

  <Tab title="ZeroTwo on the web">
    Image availability and usage limits in ZeroTwo web depend on your plan and
    workspace settings. For programmatic image generation, use the [Image
    generation API](https://developers.zerotwo.ai/api/docs/guides/image-generation).
  </Tab>

  <Tab title="">
    ## Write effective image prompts

    A useful image prompt is often only one to three clear sentences. Describe the
    details that determine whether the result succeeds:

    * Explain the image's purpose or intended audience.
    * Name the main subject and what is happening.
    * Describe the setting, composition, and visual style.
    * Add framing, dimensions, lighting, colors, or materials when they matter.
    * State constraints, including anything the image must not contain.

    Prefer concrete visual language over broad reactions. For example, describe
    where light comes from instead of asking for “beautiful lighting.” Repeat any
    requirement that must stay fixed.

    <ExamplePrompt prompt="Create a clean editorial illustration for an employee onboarding guide. Show a person organizing a project at a desk with a laptop, notebook, and simple progress checklist. Use soft daylight from a window on the left, restrained colors, and a modern, approachable style. Keep the background minimal. Do not include logos, text, or futuristic imagery." />

    ## Refine the result

    Start with the core idea, then make small, targeted revisions. Adjust one
    element at a time so the composition and other important details do not drift.
    You can also select a specific area of an image and describe the change for that
    area.

    When editing an existing image, say exactly what should change and what must
    stay the same.

    <ExamplePrompt prompt="Edit the attached image. Replace only the mug with a small potted plant. Preserve the person, desk layout, lighting, colors, crop, and every other detail exactly. Do not add text or logos." />

    For broader revisions, keep the feedback direct and actionable: make the image
    brighter, reduce the color saturation, simplify the background, or keep the
    composition while changing the style.

    ## Use multiple reference images

    Use a small set of reference images when one image defines the content and
    another defines the style, layout, or other visual direction. Identify each
    image by order and explain how the images relate. Use spatial terms such as
    foreground, background, left, and right when combining elements.

    <ExamplePrompt prompt="Image 1 is the product photo to edit. Image 2 is the style reference. Keep the product, camera angle, layout, and objects from image 1, but apply the clean line work, muted palette, and soft shadows from image 2. Keep the product centered and leave the upper-right corner clear for later copy." />

    ## Add text to an image

    Keep in-image text short and specify it precisely. Put the exact text in
    quotation marks, preserve the capitalization you want, and describe its font
    style, size, color, and placement. For an uncommon name, spell out the letters
    when accuracy matters. State whether any other text is allowed.

    <ExamplePrompt prompt={`Add only the title “SPRING WORKSHOP” in large, bold, white sans-serif letters, centered in the top third of the image. Keep the title on one line. Do not add any other text or change the underlying image.`} />

    ## Create infographics and dense layouts

    Image generation can help draft explainers, posters, labeled diagrams,
    timelines, and other information-rich visuals. Describe the information
    hierarchy and layout, keep labels concise, and request sharp text rendering.
    For dense copy or production-critical typography, review every word and finish
    the asset in a design tool when needed.

    ## Additional considerations

    * **Use likenesses with care.** When depicting a real person, provide a
      reference photo when appropriate and confirm that you have permission to use
      their likeness.
    * **Ask for an original treatment.** Request a generic or original design
      instead of imitating a specific brand, product, artist, or artwork.
    * **Credit is optional.** You do not need to credit ZeroTwo for generated images,
      though you can explain how an asset was made when that context is useful.
    * **Follow applicable policies.** Use images in accordance with your
      organization's guidelines and [ZeroTwo's usage
      policies](https://zerotwo.ai/policies/usage-policies/).
  </Tab>
</Tabs>

## Related docs

<Tabs>
  <Tab title="ZeroTwo desktop app">
    * [ZeroCode pricing](/pricing#image-generation-usage-limits)
    * [Image inputs](/image-inputs)
    * [Image generation API guide](https://developers.zerotwo.ai/api/docs/guides/image-generation)
    * [Work with files](/artifacts-viewer)
    * [Creating images with ZeroTwo](https://zerotwo.ai/academy/image-generation/)

    \[Image generation gallery

    Explore more image generation prompts and results.]\([https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open](https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open))
  </Tab>

  <Tab title="ZeroTwo on the web">
    * [Image inputs](/image-inputs)
    * [Image generation API guide](https://developers.zerotwo.ai/api/docs/guides/image-generation)
    * [Work with files](/artifacts-viewer)
    * [Creating images with ZeroTwo](https://zerotwo.ai/academy/image-generation/)

    \[Image generation gallery

    Explore more image generation prompts and results.]\([https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open](https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open))
  </Tab>

  <Tab title="">
    * [ZeroCode pricing](/pricing#image-generation-usage-limits)
    * [Image inputs](/image-inputs)
    * [Image generation API guide](https://developers.zerotwo.ai/api/docs/guides/image-generation)
    * [Work with files](/artifacts-viewer)

    \[Image generation gallery

    Explore more image generation prompts and results.]\([https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open](https://developers.zerotwo.ai/api/docs/guides/image-generation?gallery=open))
  </Tab>
</Tabs>