Skip to content

Zine Meets Pull Requests (and more)

A screenshot of a pull request in github with a zine image.
Generated by 🤖 AI

The availability of new image generators like OpenAI gpt-image-1 opens the door to endless new ways to visualize and annotate software artifacts.

“Zine” is a popular graphic art form that combines text and images to tell a story. Can we prompt the LLM to generate a zine from a pull request diff? offline robotic voice: Yes we can.

The script below is a 2 step LLM transformation of the pull request into a zine:

  • use gpt-4.1-mini to transform the diff into a image generation prompt
  • use gpt-image-1 to generate the image from the prompt
    • a bit of plumbing to upload the generated image into a branch and add it to the pull request description
prd-zine.genai.mts
script({
title: "Pull Request Ziner",
description:
"Generate a zine from a pull request description from the git diff",
temperature: 0.5,
systemSafety: true,
parameters: {
base: {
type: "string",
description: "The base branch of the pull request",
},
maxTokens: {
type: "number",
description: "The maximum number of tokens to generate",
default: 14000,
},
},
})
const { vars, output, dbg } = env
const maxTokens = vars.maxTokens
const defaultBranch = vars.base || (await git.defaultBranch())
const branch = await git.branch()
if (branch === defaultBranch) cancel("you are already on the default branch")
// compute diff
const changes = await git.diff({
base: defaultBranch,
})
console.log(changes)
if (!changes) cancel("no changes found")
// generate map
const { text: zine } = await runPrompt(
(ctx) => {
const gd = ctx.def("GIT_DIFF", changes, {
maxTokens,
detectPromptInjection: "available",
})
ctx.$`You are an expert zine cartoon artist, prompt genius and omniscient code developer.
You will summarize the code in the git diff ${gd} and generate a description of the changes as a zine.
The description will be used by a LLM to generate an image of the zine.
The zine will be used to tell "tell the story" of the changes.
Be descriptive about the visual features of the zine as you would for a zine.
Use names from the code symbols. MINIMIZE THE USE OF TEXT, FAVOR GRAPHICS.
do NOT explain that GIT_DIFF displays changes in the codebase
try to extract the intent of the changes, don't focus on the details
Avoid studio ghibli style.
The model has a context window of 4096 tokens. The output image is landscape.
Generate a single page zine for all panels/pages.
`.role("system")
},
{
label: "summarize code to zine",
model: "large",
}
)
const { image } = await generateImage(
`Your task is to generate a Zine with the following instruction. Minimize the use of text, favor graphics.
${zine}`,
{
model: "image",
quality: "high",
size: "landscape",
outputFormat: "jpeg",
maxWidth: 800,
}
) || {}
if (!image) cancel("no image found")
const ghFile = await github.uploadAsset(image)
await output.image(ghFile, "zine")

A comic-style illustration depicts a process for locating files in a directory. A detective shines a flashlight on files, identifying directories and handling ignored files. "Expand!" is emphasized with blooming flowers. A sad person holds a "No files found!" sign. The bottom shows parsed URIs resolved into resources and files gathered on a conveyor belt.

A cartoon-style illustration explaining a GitHub workflow: a GitHub mascot holding an asset URL, a robot uploading assets with format options, a file cache conveyor belt managing style, quality, and size, an octopus correcting URL paths, diagnostics showing generated messages, a person checking URLs, and a "Pull Request Zine" showing a pull request diff.

A comic-style illustration showcasing an annotation tool for code refinement. It highlights features like suggesting fixes for errors, upgraded parsing for typo detection, and integration with Git blame for tracking code authorship. The visuals include icons, text bubbles, and a magnifying glass-wielding character emphasizing better feedback and smarter tracking.

The image illustrates a modular process for managing UI and schema elements, featuring six panels: Parameters Schema, uiGroup Concept, Schema Cleaning, Sample Cleaning, Types Extended, and UI Rendering Grouped. Each panel uses icons and diagrams to depict steps like organizing parameters, grouping UI elements, cleaning schemas, extending types, and rendering grouped UI components.

“Sketchnotes” is another style of visual note-taking that combines hand-drawn elements with text to convey information. It is a great way to summarize a pull request and make it more engaging.

prd-sketch.genai.mts
script({
title: "Pull Request Visual Sketch",
description:
"Generate a visual note from a pull request description from the git diff",
temperature: 0.5,
systemSafety: true,
parameters: {
base: {
type: "string",
description: "The base branch of the pull request",
},
maxTokens: {
type: "number",
description: "The maximum number of tokens to generate",
default: 14000,
},
},
})
const { vars, output, dbg } = env
const maxTokens = vars.maxTokens
const defaultBranch = vars.base || (await git.defaultBranch())
const branch = await git.branch()
if (branch === defaultBranch) cancel("you are already on the default branch")
// compute diff
const changes = await git.diff({
base: defaultBranch,
})
console.log(changes)
if (!changes) cancel("no changes found")
// generate map
const { text: zine } = await runPrompt(
(ctx) => {
const gd = ctx.def("GIT_DIFF", changes, {
maxTokens,
detectPromptInjection: "available",
})
ctx.$`You are an expert at sketchnotes (visual note taking), prompt genius and omniscient code developer.
You will summarize the code in the git diff ${gd} and generate a sketchnote (visual note) for the changes.
The description will be used by a LLM to generate an image of the zine.
Use names from the code symbols. MINIMIZE THE USE OF TEXT, FAVOR GRAPHICS.
do NOT explain that GIT_DIFF displays changes in the codebase
try to extract the intent of the changes, don't focus on the details
Avoid studio ghibli style.
Ignore the low-level programming language details, focus on the high-level concepts.
The model has a context window of 4096 tokens. The output image is landscape.
`.role("system")
},
{
label: "summarize code to sketch",
model: "large",
}
)
const { image } = await generateImage(
`Your task is to generate a SketchNote (visual note) with the following instruction. Minimize the use of text, favor graphics.
${zine}`,
{
model: "image",
quality: "high",
size: "landscape",
outputFormat: "jpeg",
maxWidth: 800,
}
) || {}
if (!image) cancel("no image found")
const ghFile = await github.uploadAsset(image)
await output.image(ghFile, "sketch")

A flowchart illustrating a Node.js version check process for TerminalServerManager. It involves verifying Node.js installation and version (≥20), using constants.ts, promise flow, and commands like "node cliPath serve" or "npx serve," with error messages for missing or outdated Node.js.

A visual diagram introduces a feature combining zines and pull requests. It shows a PR diff leading to sketchnotes, which are visual note-taking with drawings, then generating a PR summary. Text highlights new AI image prompts for creating sketchnotes, with icons of ideas, drawings, and collaboration.

Pushing the idea even further, we can ask the LLM to pick a random graphical style and generate a pull request diff in that style. This idea was applied in https://github.com/microsoft/genaiscript/pull/1512.

  • collage

A colorful diagram illustrates a "Pull Request Visual Renderer" surrounded by creative outputs like comic strips, infographics, zines, sketchnotes, and cut-paper art. Arrows connect elements like code, a magnifying glass, and cloud upload, symbolizing a workflow.

  • mural

An illustration depicting a pull request visual renderer process with interconnected elements like branches, genres, and output images. It features icons for gears, a light bulb, a lock, GitHub, and vibrant visual pathways connecting components, symbolizing workflows and creativity.

  • editorial illustration

An illustration of a person working on a computer with "Pull Request Visual Renderer" on the screen, surrounded by vibrant visual elements like charts, graphs, and abstract icons representing data and collaboration.

The zine is a fun way to visualize the pull request diff. It is not perfect but it is inviting and maybe this is all you need to get someone to review your PR!

There will be more ways to visualize software in the future, thanks to these amazing image generators.