dream-loop

Dream-Loop 是一款创新的 Agent Skill，解决 AI 在代码生成中常见的“视觉偏差”问题。它通过建立一个封闭的反馈循环（Closed Loop），让 AI 能够像人类设计师一样，先构想目标画面，再编写代码实现，最后通过视觉对比进行自我修正，从而构建出具有惊艳视觉效果的游戏、应用或场景。

核心工作流：梦想 -> 构建 -> 批评 -> 迭代

Dream-Loop 的核心在于将传统的“文本到代码”线性流程转变为动态的视觉迭代循环：

1. AI “做梦” (Dream)：
   • AI 首先使用图像生成模型（如 DALL-E, Midjourney, Flux 等）生成一张高质量的目标截图。这张图定义了最终产品应有的视觉风格、布局和氛围。
2. AI 构建 (Build)：
   • AI 以这张目标截图为蓝本，编写代码（如 HTML/CSS/JS, Three.js, React 等）来尝试复现该视觉效果。
3. AI 批评 (Critic)：
   • 一个独立的 AI 批评者（Critic）获取当前运行环境的实时截图，并将其与第一步生成的目标截图进行像素级和语义级的对比。
   • Critic 会指出差异：“阴影不够深”、“地板反射缺失”、“角色位置偏差”等。
4. 循环修正 (Loop)：
   • AI 根据 Critic 的反馈修改代码，再次运行并截图，直到 Critic 满意为止。
5. 可选：升级梦想 (Re-dream)：
   • 如果当前状态已经不错，AI 可以基于现有成果重新生成一张更精致、细节更丰富的目标截图，推动视觉效果向更高水平进化。

前置要求与环境配置

要运行 Dream-Loop，你的 AI Agent 需要具备以下能力：

• 图像生成能力：内置（如 Codex/Grok）或通过 API 接入（如 Gemini, DALL-E）。
• 视觉输入能力 (Vision)：能够“看”懂屏幕截图。
• 子代理支持 (Subagents)：强烈建议启用，以便并行处理生成、编码和批评任务。
• Blender (可选但推荐)：如果需要自定义 3D 建模，安装 Blender 并通过 MCP 或脚本接口调用，比模拟鼠标操作（Computer Use）效果更好、更稳定。

测试环境：目前主要在 Codex (GPT-6 Astra) 上经过测试，其他强模型如 Claude Fable 5.1 也可能适用。

实战示例：一键生成暗黑奇幻风格 Demo

用户提示词：

“帮我做一个图形演示：等距视角摄像头，体素艺术风格但带有真实感 shading 和反光湿地面，一个处于有趣场景中的角色。奇幻设定（类似《艾尔登法环》或《暗黑破坏神》）。使用浏览器端的 Three.js，帧率 >60fps。不要下载外部资产。限时 1 小时。控制方式：点击移动角色，摄像头懒跟随；拖动旋转摄像头；滚轮缩放。暂时不需要游戏玩法。世界要感觉鲜活：有运动、动画和细微的环境行为。玩家周围区域看起来广阔，但限制移动空间。无需向我确认艺术风格或提问，直接开始！”

Dream-Loop 执行过程：

1. Dream：生成一张阴暗、潮湿、充满哥特式建筑细节的等距视角奇幻场景图。
2. Build：编写 Three.js 代码，设置灯光、材质和相机逻辑。
3. Critic：发现地面反射不够明显，角色阴影方向与光源不符。
4. Loop：调整 WebGL shader 参数，修正光源向量。
5. Result：在 1 小时内交付一个无需外部资源、视觉惊艳且交互流畅的 Web 演示。

安装方法

你可以通过以下方式将 Dream-Loop 添加到你的 Agent 技能库中：

# 方法 1：使用 npx (推荐)
npx skills add achimala/dream-loop

# 方法 2：手动克隆
git clone https://github.com/achimala/dream-loop.git <your-agent-skills-dir>/dream-loop

# 方法 3：直接粘贴链接
将仓库链接粘贴给你的 Agent，并让它自行解析安装。