Skills

ALIGN: Drawing Reference Paintings and Method Figures with a p5.js Code Loop

Best suited for having a coding agent in Claude Code or Codex draw a reference painting or method figure in p5.js through a render–review–revise loop; requires the agent to have image-viewing and local browser rendering capabilities, and uses no diffusion or autoregressive image models.

Official source · ALIGN-Agentic-Loop-Image-GeneratioN

Install

bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh claude ~/your-project

Who It's For

  • Users who want to generate images with p5.js code: to recreate a reference painting (e.g., translating the style of Along the River During the Qingming Festival into a local handscroll) or to draw method figures for papers/documents.
  • Environment is Claude Code or Codex, and the agent has image-viewing and local browser rendering capabilities (in Codex scenarios, Claude Code must be registered as the reviewer).
  • Not for: users who want to produce images directly with diffusion models or autoregressive image models — ALIGN explicitly does not use these models; agents without local browser rendering or image-viewing capability cannot complete the loop.
  • Unconfirmed: specific requirements for model versions or programming language stacks, and whether other agent platforms are supported.

First Attempt in 3 Minutes

Prerequisites: Claude Code is installed locally, and you have an environment capable of local browser rendering.

  1. Clone the repository: 
    git clone https://github.com/wanshuiyin/ALIGN-Agentic-Loop-Image-GeneratioN.git ~/ALIGN-Agentic-Loop-Image-GeneratioN
  2. Run the install script from the project root to link the two skills into your project: 
    bash ~/ALIGN-Agentic-Loop-Image-GeneratioN/tools/install.sh claude ~/your-project
    According to the official documentation, this step links the two skills into <project>/.claude/skills/.
  3. Trigger a low-risk drawing task in Claude Code, for example: 
    /reference-art-loop Qingming Along the River → Wuhan → p5.js handscroll, rounds: 8
    or for a method figure, use /method-figure-loop Reference Figure 1 → my method → p5.js, rounds: 5.

Success signal: the agent works in a render → review → revise loop — each time an image is rendered, a cross-family reviewer agent critiques it by looking only at the rendered pixels and the reference (not the source code), and the executor then modifies the p5.js program accordingly; you can observe the p5.js code and rendered images after multiple iterations, along with a wiki recording decisions. This is a generative/drawing task that creates and rewrites p5.js files and uses local browser rendering; confirm the target project directory before starting. For the first run, set rounds to a small value to limit iteration overhead.

Note: the review step is a review operation, but this does not mean the loop won't write files or consume rendering resources — the executor writes and modifies p5.js programs, and the scope of network access is not officially stated.

Use Cases

  1. Reference-painting style transfer: the scenario is converting a classic painting (e.g., Along the River During the Qingming Festival) into a p5.js handscroll in a target style (e.g., a Wuhan theme). Issue /reference-art-loop Qingming Along the River → Wuhan → p5.js handscroll, rounds: 8 to Claude Code; the agent will have the coding agent study the reference, write p5.js, and iteratively improve through independent visual review. Expected outcome: after multiple render → review → revise rounds, a p5.js handscroll program and rendered images closer to the reference.
  2. Method figure drawing: a paper needs a clearly structured method figure. Issue /method-figure-loop Reference Figure 1 → my method → p5.js, rounds: 5; this skill includes construction replay and SVG export. Expected outcome: a p5.js method figure revised through several review rounds, exportable as SVG.

The commands and operation names above come from the repository's original text; refined parameters beyond the two officially listed skills are not documented in the evidence.

Usage Boundaries

  • Files and commands: the install script creates links in <project>/.claude/skills/ (Claude Code) or <project>/.agents/skills/ (Codex); the loop itself generates/modifies p5.js program files.
  • Network: rendering and review rely on local browser rendering; whether external network access occurs is not stated in the evidence — do not assume.
  • Platform differences: Claude Code discovers skills via .claude/skills/ and requires registering Codex as an MCP reviewer: claude mcp add codex --scope user -- codex mcp-server; the Codex variant uses native subagents, needs no MCP setup, and links into .agents/skills/.
  • Official limitations: the core loop requires the agent to have image viewing, local browser rendering, and reviewer tools; no diffusion or autoregressive image models are used.
  • Unconfirmed: the range of supported text/reference languages, compatibility with agents other than Claude Code and Codex, and the exact location and format of the wiki.