Skip to main content
skill CX Codex

dream-loop — Claude Code skill: what it does, how to install

Autonomously builds game or app visuals until live screenshots match a target rendering. Useful when high graphical fidelity is required.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add achimala/dream-loop --skill dream-loop -a claude-code
Open on GitHub

What dream-loop does

The skill triggers when you ask for high visual fidelity or say "dream loop". It works by iteratively matching an in-engine target screenshot down to the pixel. When starting a project from scratch, it generates a target image directly. On existing projects, it captures the current screen first and uses it as the baseline input for the image model, deliberately avoiding stylized concept art.

Execution branches into two mutually exclusive workflows: Plus mode for ChatGPT Plus tier subscriptions and Pro mode for ChatGPT Pro. The agent reads instructions from references/plus-mode/workflow.md or references/pro-mode/workflow.md. All working files stay inside a .dream-loop directory that gets added to .gitignore.

When given a time budget, the agent tracks elapsed time between rounds without lowering visual fidelity to meet the clock. An active image generation tool or API is strictly required; without it, the loop pauses until you provide the target image manually.

What it helps with

  • match live application visuals against a target generated render
  • generate an in-engine target screenshot from an existing screen baseline
  • run an autonomous visual iteration loop within an explicit time budget
  • isolate visual scratchpad files inside a gitignored .dream-loop folder

Example prompts for the agent

  • Run dream loop on this 3D scene until it matches realistic engine graphics
  • Use dream-loop with the Pro workflow and a 1-hour time budget
  • Dream loop this game screen, using the current UI as a baseline

How to install dream-loop

1Skills CLI (Vercel)

npx skills add achimala/dream-loop --skill dream-loop -a claude-code

2Manually: put the files in place

~/.claude/skills/dream-loop/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/dream-loop/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about dream-loop

How to install dream-loop in Claude Code?

Run npx skills add achimala/dream-loop --skill dream-loop -a claude-code in your terminal.

What does dream-loop do?

It coordinates an autonomous build loop that continuously aligns application visuals with a high-fidelity reference render stored in .dream-loop/target.png.

What happens if no image generation tool is available?

The skill halts execution and asks you to supply .dream-loop/target.png manually or connect an image generation API.

Source text

SKILL.md · MIT
---
name: dream-loop
description: Build a game or app from a description so that a live screenshot matches a generated rendering. Use when the user says "dream loop" or asks for something built to a very high level of graphical fidelity.
license: MIT
---

# dream-loop

This is a process for you to autonomously build extremely impressive visuals, especially for 3D scenes (e.g. in a game or app).

Your first step is to determine which workflow to use:
- If the user told you to use the Plus or Pro workflow explicitly, that's your answer
- If not, check if the user is on a low or high tier coding subscription. "Low tier" means ChatGPT Plus or equivalent. "High tier" means ChatGPT Pro. For low-tier subscriptions, use the Plus workflow. For high-tier, use the Pro workflow.

Plus workflow: read [references/plus-mode/workflow.md](references/plus-mode/workflow.md)

Pro workflow: read [references/pro-mode/workflow.md](references/pro-mode/workflow.md)

Do not read both documents. They are not inter-compatible.

# Guidance applicable to both workflows

## General

Create and use a `.dream-loop` folder for working context/files, and gitignore it.

## The target image

The key piece of Dream Loop is to first create the "dream version" of the user request using image generation, then iterate to build it.

If the user supplies this, use that directly.
If not, you need to generate it.

If you don't have an image generation tool, stop and ask the user to either provide the target image, or connect you to an image generation API.

Before generating the image, determine if there is an existing product or if you're starting fresh. If fresh, you can directly generate a new image. If there's an existing product, you should capture a screenshot of the current version of it, then use that as the baseline input to the image model and generate a refined version of it based on the user direction, so that it is an improvement over the original and not a divergence.

When generating images, avoid using words like "concept art" in the prompt. This is not an artist's interpretation. It is meant to be an exact, realistic target screenshot. You will try to match it down to the pixel. For example, if the user is asking you to make a game, you should prompt the image model for a real in-engine screenshot of the target. Not a cinematic shot, photo, painting, artist concept, etc.

Store the image in `.dream-loop/target.png`.

## Time budget

If the user gives a time budget, record the time at start of the loop (after locking target.png), and check the clock between rounds.

Don't degrade visual fidelity to hit the time budget. Don't take shortcuts. It's better to hit the time limit with meaningful, beautiful progress than with something roughly complete but ugly.

If the user doesn't give a time budget, run until you hit an exit criterion, but warn that this may consume a lot of tokens.

© achimala · MIT · achimala/dream-loop

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor