ALIGN-Agentic-Loop-Image-GeneratioN

# ALIGN — Agentic Loop Image GeneratioN [](#quick-start) > 🎨 **Let coding agents paint.** ALIGN explores image generation beyond diffusion and autoregressive image models: a powerful coding agent studies a reference, writes p5.js to draw the picture, and improves the program through independent visual review. Every stroke, layer and construction stage lives in source you can read, edit and replay. English · [中文](README_CN.md) · [Interactive gallery](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/) [](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/out-of-line/) **Out of Line** · ALIGN-video’s first film · 60 seconds · Agent-authored Blender animation and synthesized sound · Zero diffusion models. [▶ Watch with sound](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/out-of-line/) · [Download 1080p MP4](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/out-of-line/out-of-line-v3.mp4) A machine follows a grid until a paper flower makes it pause and draw its first curve. Its lines eventually recreate the face it once erased. The story carries ALIGN’s exploration: image and video creation can take a path beyond diffusion models, with an agent developing ideas, writing code, rendering and revising the result. [](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qingming-wuhan/qingming-wuhan-preview.html#p=1) *Qingming in Wuhan* · Claude executor + Codex MCP reviewer · 11 versions. [Explore the scroll and replay its construction →](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qingming-wuhan/qingming-wuhan-preview.html#p=1) <p> <a href="https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qingming-wuhan/qingming-wuhan-preview.html#p=1&amp;cam=0.733"><img src="docs/assets/wuhan-yellow-crane-tower-detail.png" width="49%" alt="Yellow Crane Tower: layered eaves, galleries and visitors on the steps"></a> <a href="https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qingming-wuhan/qingming-wuhan-preview.html#p=1&amp;cam=0.914"><img src="docs/assets/wuhan-hubuxiang-detail.png" width="49%" alt="Hubuxiang street life: shopfronts, signs, crowds and the ferry quay"></a> </p> **A closer look:** Yellow Crane Tower (left) · Hubuxiang street life (right). Click either image to explore that part of the scroll. [](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qianli-process/qianli.html#p=1) *A Thousand Li of Rivers and Mountains* · Claude executor + Codex MCP reviewer · Ten painting stages. [Explore the scroll and replay its construction →](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qianli-process/qianli.html#p=1) [](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/align-figure/figure.html#p=1) Figure 1 is itself a p5.js program: six construction stages and an [SVG export](docs/figure1.svg). The loop is straightforward: study the reference, specify the work, draw and render, ask a fresh reviewer to look at the pixels, then change the program. A small wiki keeps the decisions and reasons across rounds. Feedback can be accepted, challenged against the reference, or reverted when the result gets worse. The skills follow [HERO](https://github.com/wanshuiyin/HERO-Anti-OverDefense/blob/main/RULES.md): useful work and concrete checks, without extra defensive machinery. ## Why an Agentic Loop Works Better **Planning starts the picture; visual feedback drives the next iteration.** Even with detailed plans and a strong coding agent, our first render had floating figures, repetitive buildings and weak spatial relationships. ALIGN brings two core ideas from our [ARIS (Auto-Research-In-Sleep)](https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep) project into programmatic image generation. The first is **an agentic loop that turns critique into action**. Here it takes the form **render → review → revise**: each image gives the reviewer concrete evidence, its critique gives the executor a new problem to solve, and the program and wiki carry decisions forward. Reasoning continues through the consequences of earlier choices.  Some improvements required **changing how objects were constructed**. B3 identified that adding more poses would leave the same underlying figure template. In v4, people became action groups sharing contact points and weight; repeated facades became continuous streets with recessed shops, side walls and overlapping roofs. Changing a shared drawing rule can improve many passages at once. [The decision](examples/qingming-wuhan/wiki/decisions.md#d-10--b3-裁决四处换原语三处调参-2026-09-05) · [All 11 versions](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/qingming-wuhan/iterations/index.html).  B2–B11 used gpt-6-astra: 4.5 → 7.0, with two plateaus. Progress included reversals: v5's tree rewrite looked worse, so the next version restored the earlier construction and made a smaller correction. B1 used gpt-5.6-sol and is shown separately. The vertical axis starts at 3.5; scores are out of 10. [Original review log](examples/qingming-wuhan/wiki/review-log.md). ## Why Cross-Family Adversarial Review Is Necessary The second core idea comes from [ARIS](https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep): **the executor creates; a reviewer from another model family actively challenges the result.** A fresh thread separates context, but models from the same family can still share habits and blind spots. Cross-family review is intended to challenge those recurring assumptions. In ALIGN's main workflow, Claude draws and Codex examines the pixels for what still fails.  In these two runs, the Claude + Codex result has richer street scenes, more varied groups of people and more depth around the bridge and boats. The Codex + Codex result retains more repeated building blocks. Both used review loops: 11 rounds for the former, 13 for the latter. [Open the comparison →](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/#comparison) **Adversarial review gives the executor a concrete challenge.** The reviewer sees the rendered picture and reference, without access to the source code. Its job is to identify the most visible failures and check whether previous ones remain. In B1, it found that the left city dominated the composition, despite the plan calling for the bridge to be the focus. The executor then reduced the competing city crowds and reorganized the bridge events. The criticism changed the composition. [Decision D-07](examples/qingming-wuhan/wiki/decisions.md#d-07--桥必须是峰-2026-09-05). Both configurations here use independent review; the comparison shows how different executor–reviewer pairings developed the same subject. Our reading of these runs is that useful critique and the executor's ability to act on it matter together: more rounds alone do not explain the stronger result. ## Quick Start [Claude Code](#claude-code) · [Codex](#codex) · [Update](#update) Three tasks, with a complete skill for each runtime: | Task | Claude Code | Codex | |---|---|---| | Paint from a reference, or carry its craft into a new subject | [reference-art-loop](skills/reference-art-loop/SKILL.md) | [reference-art-loop-codex](skills_codex/reference-art-loop-codex/SKILL.md) | | Draw a method figure with construction replay and SVG export | [method-figure-loop](skills/method-figure-loop/SKILL.md) | [method-figure-loop-codex](skills_codex/method-figure-loop-codex/SKILL.md) | | Create or revise a coded video: animation, explainers, product demonstrations and motion design | [align-video](skills/align-video/SKILL.md) | [align-video-codex](skills_codex/align-video-codex/SKILL.md) | **ALIGN-video** extends the loop to motion, sound and editing. Its prose workflow covers reference study, an animatic, a representative finished passage, production, independent review, revision and delivery. The agent chooses and writes the implementation; no video framework or Python helpers are bundled. It uses no image, video or music generation models. *Out of Line* supplies worked experience, not a required story, renderer or template. The stages scale from a small 2D loop to a longer film. Clone once, then choose your runtime below. Replace `~/your-project` with the folder where you want to work. ```sh git clone https://github.com/wanshuiyin/ALIGN-Agentic-Loop-Image-GeneratioN.git ~/ALIGN-Agentic-Loop-Image-GeneratioN ``` ### Claude Code Claude draws; Codex reviews through MCP. With [Claude Code installed](https://code.claude.com/docs/en/setup), run: ```sh # 1. Link all three skills into <project>/.claude/skills/ bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh claude ~/your-project # 2. Set up Codex for visual review (skip install/login if already set up) npm install -g @openai/codex codex login claude mcp add codex --scope user -- codex mcp-server # 3. Open your project cd ~/your-project claude ``` In Claude Code, supply your brief and references and invoke the relevant skill: ```text /reference-art-loop Qingming Along the River → Wuhan → p5.js handscroll, rounds: 8 /method-figure-loop Reference Figure 1 → my method → p5.js, rounds: 5 /align-video Make a wordless short about a lamp learning to share its light, save in ./lamp-film, rounds: 4 ``` ### Codex Codex draws and opens a fresh Codex subagent for each visual review. This version uses native subagents and needs no MCP setup. ```sh # 1. Link all three skills into <project>/.agents/skills/ bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh codex ~/your-project # 2. Install and sign in (skip if already set up) npm install -g @openai/codex codex login # 3. Open your project cd ~/your-project codex ``` In Codex, supply your brief and references and invoke the relevant skill: ```text $reference-art-loop-codex Qingming Along the River → Wuhan → p5.js handscroll, rounds: 8 $method-figure-loop-codex Reference Figure 1 → my method → p5.js, rounds: 5 $align-video-codex Make a clear animated explanation of merge sort, save in ./sort-film, rounds: 4 ``` All three skills are also available when you open the ALIGN checkout itself in Codex. [More Codex examples](skills_codex/README.md) · [Codex CLI installation](https://developers.openai.com/codex/cli). For either runtime, provide the subject or brief, an output directory and any reference media. Painting and figure tasks need image viewing and local rendering; video adds the renderer and audio tools appropriate to the project. ALIGN-video defaults to fresh-context independent review: Claude + Codex through MCP, or Codex + a native Codex subagent. The latter is same-family review. When explicitly requested or when a separate reviewer is unavailable, the video skill continues with labeled self-review. Review records distinguish sampled images from actual continuous playback and listening. Skills are discovered through [Claude Code's `.claude/skills/`](https://code.claude.com/docs/en/skills) or [Codex's `.agents/skills/`](https://developers.openai.com/codex/skills). ### Update The installer creates symlinks to the full skill folders. Keep the checkout in place; pulling changes updates both runtimes' installed skills: ```sh git -C ~/ALIGN-Agentic-Loop-Image-GeneratioN pull --ff-only ``` You can rerun the installer; existing links to this checkout are kept. If the agent still shows an older skill, restart the session. <details> <summary>Install for all your projects</summary> Use your home directory as the destination. Choose either runtime, or run both: ```sh # Claude Code: ~/.claude/skills/ bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh claude ~ # Codex: ~/.agents/skills/ bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh codex ~ ``` If a skill folder already exists there, the installer leaves it in place and prints its path. Move that folder aside if you want to replace it with the linked version. </details> ## Four examples The paintings and method figure were drawn in Claude Code and reviewed through Codex MCP. Out of Line began with Claude production and Codex review; Codex completed v3 with self-review. Its playback page includes the production and review context. | Example | What you can explore | |---|---| | [Out of Line](https://wanshuiyin.github.io/ALIGN-Agentic-Loop-Image-GeneratioN/examples/out-of-line/) | The complete 60-second film with sound, a 1080p download and production notes | | [Qingming in Wuhan](examples/qingming-wuhan/) | 11 runnable versions, fixed-view evolution, process sheets and review decisions | | [Figure 1](examples/align-figure/) | Final program, seven PNG/SVG versions, five blind-review replies and design decisions | | [A Thousand Li of Rivers and Mountains](examples/qianli-process/) | Final program, ten painting stages, an evolution sheet and 11 blind-review records | The review records also show the limits. Neither main painting passed its visual gate; the Codex Wuhan run did not pass either. Figure 1's last independent review was v5 at 7/10; v6 and v7 were self-reviewed. The two Wuhan runs differed in starting point, iteration count and human input, so the comparison describes these works. The planned tests of specifications versus direct coding, and external review versus self-review, have not been run. [MIT](LICENSE) for original repository content. [Third-party sources and licenses](THIRD_PARTY_NOTICES.md).