ALIGN skill

Three skills that draw paintings, paper figures and short films by p5.js program, improving through another model blind review.

  • 50 ★ on the repository
  • Last commit
  • MIT
Skill

Broad access

Why this level

  • The skills let the agent run any shell command and write files in the project.
  • In Claude Code the reviewer works through a separate Codex MCP server using your OpenAI login.
All reasons and checks

wanshuiyin/align-agentic-loop-image-generation

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/align

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Broad accessThe tool can change data, run commands or handle secrets.

  • The skills let the agent run any shell command and write files in the project.
  • In Claude Code the reviewer works through a separate Codex MCP server using your OpenAI login.

This is third-party code. Review the repository files before installing.

What it does

ALIGN builds images without diffusion models: a coding agent studies a reference, writes a p5.js program, renders the picture, then an independent reviewer looks only at pixels while the agent revises the program. The loop repeats for a set number of rounds. A small wiki keeps accepted decisions and reasons across rounds. Three skills: `reference-art-loop` paints from a reference, for example a handscroll in the style of Qingming Along the River with a new subject, `method-figure-loop` makes a paper method figure as an executable program with staged construction and SVG export, and `align-video` extends the loop to motion, sound and editing. For Claude Code the review runs through Codex over MCP, and Codex uses its own subagents. The `tools/install.sh` installer links the skills into a project directory.

Who it is for. Researchers, designers and code enthusiasts who want drawings and method figures as a reproducible program instead of a raster model output.

Good fit when

  • A first method figure for a paper is needed that builds in stages and exports to SVG
  • A painting in the spirit of a famous work is drawn by program and its construction replayed
  • A short wordless film is made with code, sound and editing
  • A result should improve across several rounds of blind review
  • You want to show that a figure is executable and reproducible

Not a fit when

  • You need a quick picture in a minute: a multi-round loop is costly in tokens and time
  • The agent cannot view images and render locally, which drawing tasks require
  • You need photorealistic images: the approach draws by program and not with a neural image model

Example request

Draw a figure of my method for the paper after the reference Figure 1 in p5.js, five rounds of blind review, using `/method-figure-loop`.

Limitations

Paintings and figures need image viewing and local rendering, and video additionally needs rendering and audio tools for the project. For Claude Code the review is done by Codex, so you need `npm install -g @openai/codex`, `codex login` and the MCP server `claude mcp add codex --scope user -- codex mcp-server`. The skills grant the agent a broad toolset, including any shell command. Rounds cost tokens of both models, and the round count is set with the `rounds` parameter. Gallery examples show the best results and quality on your samples will vary. The license is MIT with third-party materials listed in `THIRD_PARTY_NOTICES.md`.

How to disable. Delete the skill links from `<project>/.claude/skills/` or `<project>/.agents/skills/` and the cloned `~/ALIGN-Agentic-Loop-Image-GeneratioN` folder. Remove the Codex MCP entry with `claude mcp remove codex`.

FAQ

How do I install ALIGN for Claude Code?

Clone the repository and run `bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh claude ~/your-project`. For review connect Codex: `npm install -g @openai/codex`, `codex login`, `claude mcp add codex --scope user -- codex mcp-server`.

How does the Codex version work?

`install.sh codex <project>` links the skills into `.agents/skills/`. Codex draws and opens a fresh subagent for each visual review with no MCP setup. Skills are invoked as `$reference-art-loop-codex`.

How does a drawing differ from a diffusion model output?

It is an executable p5.js program that shows staged construction and allows export such as SVG. The image is reproduced from code.

What does blind review mean?

A fresh reviewer judges only the pixels of the result without code or explanations. For figures the test is whether the method can be understood without explanation.

How many rounds should I run?

The number is set with the `rounds` parameter in the request, for example `rounds: 5` for a figure and `rounds: 8` for a painting. Each round spends tokens of both models.

Discussion

No questions or reviews yet.

Skills

A Claude Code skill for hand-painted animation and lyric videos: frames drawn in code with p5.js, no image models

PluginExtended access223Repository stars

Two Claude Code skills for videos made entirely in code: hand-painted watercolour animation and kinetic typography reels

SkillExtended access493Repository stars

A Claude Code skill for code-made video: it splits a clip into scenes and picks an engine for each, from Paper.js to Manim.

SkillExtended access115Repository stars

Four skills turn a song with lyrics into a watercolour animated music video: storyboard, parallel painters and render.

SkillExtended access61Repository stars

A skill for hand-drawn 2D animation as code: a detail vocabulary, anatomical rigs and a frame-exact MP4, on Node and ffmpeg

PluginMinimal access151Repository stars

Claude Code skill for pixel art: sprites, animations and effects built from a reference and checked frame by frame

SkillMinimal access167Repository stars

Comparison with similar tools

Cards that share the main search query, and how they differ.

ToolOfficialRepository starsMain difference
ALIGN (this card)no50
Vivid Illustration Skillno816templates of charts and SVG diagrams; ALIGN builds executable p5.js programs with a blind review loop
figures4papersno11,206matplotlib charts for papers in one style; ALIGN draws a method figure by program and also video

README in short

The README shows a gallery of works, explains the render, review, revise loop, lists the three skills and gives installation for Claude Code and Codex with sample prompts. Works are built without diffusion models.

README badge

Original SKILL.md

---
name: method-figure-loop
description: ALIGN for paper figures — draw a method-overview figure as an executable p5.js program that replays its own construction in named stages, exports SVG, and improves through pixel-only cross-model review whose gate is 'explain the method back from the figure alone, and is it worth looking at'. The method sets the relationships the figure must show, the chosen visual identity sets how its marks look, a composition source lends arrangements; the method may be the source's own (意临) or yours in its arrangement (风格迁移). Not for one-shot raster image generation.
argument-hint: "[composition source] → [method to convey] → p5.js"
allowed-tools: Bash(*), Read, Write, Edit, Glob, Grep, WebFetch, Skill, Artifact, mcp__codex__codex, mcp__codex__codex-reply
---

# Method Figure Loop (ALIGN) — a figure that makes itself, judged blind

> 🔒 Do not wrap this skill in `/loop`, `/schedule` or a cron. It loops internally
> (render → blind review → decide → redraw), and a round is triggered by a change
> in the figure, not by the clock.

You are given a composition source — a published method-overview figure, a
paper's or a repo's Figure 1 whose arrangement you want — a method the figure
must convey, and a medium the result must be *written in*: p5.js in a browser,
with the p5.js-svg renderer beside it so the same program renders the canvas
the reviewer sees and exports the SVG the paper prints.

**The method determines the relationships the figure must show. The chosen
visual identity determines how its marks look. The composition source supplies
useful arrangements, proportions and distinctions; borrow them where they serve
this method. The user decides the intended identity and emphasis.** A source's
missing connector, diamond, thumbnail, empty region or headline is not a reason
to retain something that fails in this figure.

You produce a page that replays the building of the figure in the order a
designer builds it, and you keep improving it until a reviewer who sees only
rendered pixels can explain the method back from the figure alone — every
move, in order, every fact — and says the figure is worth looking at, naming
no template-made tell worth another round. The user's acceptance is the last
gate, and their first look comes early, on the first complete composition,
not at the end.

Two modes, both legitimate. **意临** — the method is the source's own (the
paper's Figure 1 redrawn as a program): the source's own panels then say what
the method says, and the reviewer's explanation may be held against the paper's
method section. **风格迁移** — the arrangement from the source, a new method
(ARIS-Movie-Director's Figure 1 → ALIGN's loop): 取其法,不取其景, and nothing in
the loop judges resemblance to the source's content, only whether the work

Report a problem