Flow AI · 工具指南 #Pixel Agents

把你的 AI 团队
搬进一间像素办公室

Pixel Agents 不会帮你「造出」AI 团队。它是一块玻璃墙：把已经在 Claude Code 里跑着的活，变成看得见的小人——谁在读文件、谁在打字、谁在等你点头。

非开发者版 · VS Code / 浏览器两条路线 · 资料整理自官方仓库

图片来源：Pixel Agents 官方开源仓库

看完这页你会

搞懂它到底是什么、不是什么
装好官方扩展（或不用 VS Code 也能跑）
第一次安全跑通（只读任务，不改你的文件）
看懂画面上每个状态在说什么
用「一人一角色 · 一人一份文件」把多个 AI 当团队带

01先把它理解对

你在 Claude Code 里派活，真正干活的地方是满屏文字的终端。一个任务时还好；一旦分成调研、企划、撰写，你就会分不清哪个窗口在忙、哪个窗口在等你回话。

Pixel Agents 把每个 AI 会话变成一个像素小人：读文件时是看书的动作，改文件时是打字的动作，需要你确认时头上冒对话框。

官方仓库公开的产品界面：一个小人 = 一个正在跑的 AI 会话

一句话：它是仪表盘，不是引擎。真正决定活干得好不好的，仍然是你给 Claude Code 的指令、以及你自己的验收。

这三件事它做得到

一个会话一个角色，动作跟着真实工具调用变
子代理（Sub-agent）和团队角色会单独出现，不会混成一团
等你输入 / 等你授权时，用气泡直接标出来，还能开提示音

这三件事它做不到

自动分派任务、自动验收结果
判断项目「完成了没有」
替你确认权限——授权仍然要回到 Claude 窗口里点

02你现在该不该装

适合装

你已经在用 Claude Code
你常同时开两个以上 AI 窗口
你看图比看字舒服
你要把 AI 协作过程拍成内容或拿去讲课

先别急

你只在网页聊天框里用 AI
你只用 Codex / Gemini / Cursor（官方目前以 Claude Code 为准，其他在路线图上）
你一次只跑一个短任务
你想找的是自动派单和自动验收工具

03开始前的三样准备

Pixel Agents 和 Claude Code 是两个东西。先有能跑的 Claude Code，才有小人可看。

① 编辑器：VS Code 1.105.0 或更新

装扩展这条路线需要它。没有就去 VS Code 官方下载页选对应系统的安装包。
不想装 VS Code？跳到 04 的「路线 B」。

② 能跑的 Claude Code CLI

安装方式按系统不同，跟着 Claude Code 官方安装指引走。装过的话，打开终端跑这一行确认（只查版本，不动任何文件）：

terminal

claude --version

能显示版本号 → 继续下一步
提示找不到命令 → 先把 Claude Code 装好，别急着装 Pixel Agents
第一次运行弹登录 → 按官方指引把账号连上

③ 一个练习用文件夹

第一次别拿公司正式资料开刀。复制一份，或者新建一个练习文件夹，里面放什么你自己心里有数，AI 改了什么才对得出来。

建议结构

practice-project/
├── 00-输入资料/     ← 只给 AI 读的原始材料
├── 01-AI产出/       ← AI 写的结果都落在这里
└── 99-我的备份/     ← 原始档案，谁都不许动

红线：练习文件夹里不要放密码、客户资料、合约原件。

04安装：两条路线

路线 A · VS Code 扩展（推荐给多数人）

打开 VS Code。
点左侧那个方块图标 Extensions（扩展）。
搜索框里贴上 @id:pablodelucca.pixel-agents。
确认名称是 Pixel Agents、发布者是 pablodelucca，再按 Install。
问你是否信任发布者时，看清楚来源再继续。
装完提示 Reload / 重启就照做。

搜索结果眼花的话，直接从官方页面按 Install 最稳：VS Code Marketplace；用 VSCodium 之类的编辑器则走 Open VSX。

路线 B · 不装扩展，直接开浏览器

官方还提供一个独立命令行版本，同一间办公室改成网页打开——tmux、远端机器、非 VS Code 的人走这条。需要 Node.js 20 或更新。

terminal

cd /你的/项目文件夹
npx pixel-agents

它会自己挑一个空闲端口并打印网址，浏览器打开即可。要固定端口就加参数：

可选参数

pixel-agents --port 3100
pixel-agents --host 127.0.0.1 --port 3100
pixel-agents --no-terminal   # 只看不操作
pixel-agents --help

两点别忽略：独立版不会替你启动 Claude——你要自己在同一个文件夹开 Claude Code。另外默认只绑定本机 127.0.0.1；改成 0.0.0.0 等于把界面开放给同一个局域网，只在你信得过的网络里这么做。

扩展版和独立版可以同时开，各自管各自的会话，共用同一套办公室布局。

装好后先做的三件事

先用 VS Code 打开项目文件夹，再开 AI。没开文件夹就派活，AI 可能在你没料到的位置动手。
公司电脑先确认公司对扩展和 AI 工具的规定。
别一上来就打开「监看全部会话」（Watch All Sessions）。

05第一次跑通（安全版）

打开面板

在终端那一排找 Pixel Agents 分页。
找不到就 View → Command Palette，输入 Pixel Agents: Show Panel。
看到像素办公室，加上底部的 + Agent / Layout / Settings，就算就位了。

第一个任务：只读，不改

按一般的 + Agent。
让你选文件夹时，选刚才那个练习文件夹。
确认 Claude 窗口和像素小人同时出现。
把下面这段贴进 Claude 窗口。
让它跑；它要你确认时，看清楚再回。
看到完成标记后，自己去翻文件夹核对。

第一条指令 · 只读

先浏览这个文件夹里的档案，什么都不要修改、不要新建。
用五行告诉我：这是什么项目、有哪些主要文件、你看不懂的地方是什么。

别碰这个按钮：鼠标停在 + Agent 上会出现 Skip permissions mode（对应 Claude 的 --dangerously-skip-permissions）。它会跳过所有工具授权。新手期一律不用。

跑通的标准

面板打得开
按 + Agent 会开出 Claude 窗口
出现一个小人
它读文件时，小人的动作会变
结束后，你亲眼核对过结果

06看懂画面在说什么

画面回答的是「此刻在发生什么」，不是「做得对不对」。

在读 / 搜索

Claude 正在翻文件或找资料

等它找完，别急着补指令

在打字 / 写入

正在新建或修改文件

确认没有第二个 AI 在改同一个文件

在规划 / 执行命令

在想步骤，或在跑电脑命令

慢不等于出错，回窗口看一眼再判断

小一号的角色

主 AI 把一部分活分给了子代理

主 AI 和它负责的产出文件一起看

等你输入

Claude 在等你的回答

点开对应窗口，把话接上

等你授权

要用某个工具，需要人点头

读清楚请求内容，是你预期的动作才批

完成 / 打勾

这一轮回合结束了

人去验收文件、出处、完成标准

一动不动

可能完成、可能在等、也可能没侦测到

别当成做完了，回窗口确认

最重要的一条：「完成」的意思是这一轮说完了，不是项目做好了。

几个容易踩的小地方

点小人 → 跳到它对应的 Claude 窗口
点授权气泡不等于批准，真正的批准在 Claude 窗口里
小人旁边那条杠是对话空间，不是进度、费用或质量分
选中小人时出现的 × 会关掉它的窗口——干活期间别点

07把多个 AI 当团队带

别一上来连按 + Agent。先在一个主窗口里跑两个角色，各自交出不同的文件，习惯了再扩编。

五条运营规则

一人一角色——调研、企划、撰写，责任分开。
一人一份产出文件——结果落在各自的文件里。
同一份文件禁止同时改——两个 AI 一起动手会互相覆盖。
先讲完成标准——文件名、出处、禁止事项、怎么验收，写进指令里。
完成之后人来验——看产出，不看画面。

一页任务卡（每个窗口都贴这个）

任务卡模板

角色：你是谁
目标：要完成什么
输入：可以看哪些资料
产出文件：结果写去哪里
禁止：什么不能碰
完成标准：我检查什么就算你做完了

实战演练：内容小组三步走

下面是把真实内容制作流程改成的练习版，不是官方案例，也不代表任何成效数字。

第一步 · 主 AI 分派两个角色

贴进主窗口

你是内容团队总监。可以的话，把下面两个角色分给两个子代理。

角色 1：读者问题调研员
目标：整理第一次接触这个主题的人会想问什么。
产出文件：01-customer-questions.md
完成标准：问题按主题分组，每条附上出处网址和查证日期。

角色 2：官方资料核实员
目标：列出必须用官方来源确认的事实。
产出文件：02-official-facts.md
完成标准：每条事实都附官方链接和查证日期。

共同禁止：不要改其他文件；查不到的不要当成事实写；不要同时改同一个文件。
先把角色分配和执行顺序给我看。如果这个环境开不了子代理，不要假装开了，改成两个角色按顺序做。

能开子代理时，办公室里会多出小一号的角色。只看到一个小人也不代表装坏了——回窗口看它是不是在按顺序做两件事。

第二步 · 人先验收

两份文件是不是真的生成了
官方链接点开后，是否真的支持那句话
有没有动到说好不碰的文件
缺的、错的，回对应窗口要求改

第三步 · 交棒给企划

验收通过后再贴

角色：内容企划
输入：01-customer-questions.md 和 02-official-facts.md
目标：排出一条非开发者能从头看懂的内容顺序。
产出文件：03-outline.md
禁止：不要编造新的事实。
完成标准：每一段都对上一个读者问题，以及一条官方依据。

重点不是小人多少个，而是「调研 → 核实 → 企划」这三次交接都留在了文件里。

如果非得多个 AI 改同一份文件

新手期就一句话：排队做，不要并行。让 A 改完、你验收完，再让 B 接手。等你熟练了再研究分支和独立工作区。

08出问题时先看这里

独立版起不来

确认 Node.js 是 20 以上；把 --port 去掉让它自己挑端口，或换一个端口。

有个 AI 没出现在办公室里

检查 Settings → Instant Detection (Hooks) 是否打开，以及这个会话是不是属于当前工作区。跨工作区的话打开 Watch All Sessions。

画面像断线了

打开 Settings → Debug View，看服务器连接、记录路径和最新的会话数据。

扩展版和独立版一起开会不会冲突

官方明确支持同时运行；两边各自登记，关掉一个不会影响另一个。

09三个名词，一次讲清

终端 Terminal

用打字下命令的黑框窗口。Claude Code 真正干活的地方。

代理 Agent

一个正在跑的 AI 会话。在这里 = 办公室里的一个小人。

Hooks（挂钩）

Claude 每做一步就发出的事件通知，Pixel Agents 靠它实时更新动作；收不到时会退回读取会话记录来推测状态。它不会改动 Claude Code 本身。

还想再玩深一点

Layout：地板、墙、家具、地毯、宠物都能改，还能划分「区域」把不同项目的 AI 安排到不同角落；布局可导出成 JSON 分享，最大 64×64 格
Settings → Add Asset Directory：加载外部的角色、宠物、家具素材包
内建 6 个角色，美术基于 JIK-A-4 的 Metro City 素材包
项目在 GitHub 以 MIT 协议开源，官方也开了 Discord

官方链接：GitHub 仓库 · VS Code Marketplace · npm

最后一句

小人再多，也只是让你看得见。真正决定产出质量的，永远是那三件事：角色分清楚、文件分开写、完成标准写在前面。先把两个角色带明白，再考虑开一整间办公室。