AI Weekly
I Handed My App Studio to AI #5 ·
How an AI team built an open-source Claude Code visualizer — 4 lines from the owner, 1 rejected name, from "Gyeoljaejeon" to "eojeon"
How hiio's team of AI subagents built eojeon, an open-source tool that wraps Claude Code in a pixel-art Joseon palace. The owner's actual words, three differentiators chosen after surveying similar tools, how Joseon robe colors were simplified, and what was checked against real Claude Code.
eojeon is an unofficial open-source Claude Code tool that started from one line by hiio's owner, "Seeing subagents at work visually was fun. Want to build one ourselves?", after which a team of AI subagents with separate roles did the planning, naming, art and code. The AI branding lead's first name, "Gyeoljaejeon," became "eojeon" after the owner replied "Different name, a king character." After surveying similar tools (Pixel Agents, Claude Office Visualizer), the team focused on a Korean royal court setting, real permission approvals, and screens anyone can read; robe colors simplify the Gyeongguk Daejeon system of red for rank 1 to senior 3, blue for ranks 4–6 and green for ranks 7–9.
eojeon is open source built on a few lines from the owner and one rejected name; a team of AI subagents did the rest. The human's part was stating the direction in a sentence and answering "Different name" to a name that didn't land. This post lays out that sequence using the actual words. What eojeon is and how to run it is in the previous part.
What the owner said, and what the AI did
The owner's lines are translated from Korean.
| Step | Owner (actual words) | What the AI team did |
|---|---|---|
| 1 | "Seeing subagents at work visually was fun. Want to build one ourselves?" | Defined what to build |
| 2 | "What about the feel of Geunjeongjeon in Joseon?" (Geunjeongjeon is the throne hall of Gyeongbokgung Palace) | The branding lead proposed a concept and the name "Gyeoljaejeon" |
| 3 | "Different name, a king character" | Renamed it "eojeon" and made the user a king character |
| 4 | "Local only. Other people download it from GitHub and run it on their own PCs. Like the real CLI. The feel of issuing royal decrees." | Designed and built a local web app wrapping the real Claude Code terminal |
The name: why "Gyeoljaejeon" was rejected
The AI branding lead's first proposal was a fictional palace hall, Gyeoljaejeon, roughly "Hall of Sign-offs." hiio's one-liner is "a one-person app studio where the owner only signs off and AI does the rest," and a king who only signs off while officials do the work has the same structure. It also avoided borrowing a real palace name (Geunjeongjeon) directly.
The owner replied, "Different name, a king character." So the name became eojeon, the place where the king met his officials, and a king character appeared on screen. The king is whoever uses the tool. His robe color can be changed in settings, and he's drawn as a generic character who doesn't resemble any historical figure.
Before building: similar tools
Before writing code, the AI looked for similar open-source projects. Tools that show agents in a pixel office already existed.
| Tool | What it does (per each repo's description) |
|---|---|
| Pixel Agents | A VS Code extension that shows agents in a pixel office (also has a browser CLI) |
| Claude Office Visualizer | Shows Claude Code work as a live pixel office |
So it picked only three things nobody else was doing.
- A Korean royal court setting: royal decrees, entering the palace, royal assent, memorials, the court historian's log
- Real permission approvals: the on-screen assent and deny stamps send real keys to the terminal's permission prompt
- Screens anyone can read: even a non-developer can see "who is doing what right now"
No code was taken from other projects; they're linked in the README as inspiration.
Split up the work
AI subagents with separate roles, including branding, animation, video and data, each built their part. For example, the concept draft covering the name, the mapping of official posts, the palette and the stamp rules was written by the branding lead.
The prototype was checked against the real claude, not a mock.
- Assent stamp →
1(allow) in the permission prompt - Deny stamp →
Esc(reject) - Resuming a past session works as usual
Robe colors from the Gyeongguk Daejeon, kept simple
In the Gyeongguk Daejeon, the Joseon dynasty's code of law, official robe colors are red for rank 1 through senior rank 3, blue for ranks 4–6, and green for ranks 7–9. eojeon uses just those three colors.
| Robe | Historical system | In eojeon |
|---|---|---|
| Red | Rank 1 to senior rank 3 | Chief State Councillor, the six ministers, and others |
| Blue | Ranks 4–6 | Gongjo jeongnang, Pyeongsiseo ryeong, and others (optional studio pack) |
| Green | Ranks 7–9 | The court historian, officials in the courtyard guest seats (secret royal inspector, byeolgam, and others) |
The rank badges on the chest don't copy the real embroidered animals; they use job symbols instead (abacus, brush, shield and so on). Every official here is a civil official, so the real patterns would add no information, and knowing what each official does is more useful. Rank numbers aren't shown on screen, because the detailed historical changes across periods weren't all verified.
What we learned
- Looking for similar tools first decided what not to build before what to build.
- Short human lines set the scope. The single phrase "local only" ruled out accounts, outside servers and outbound data from day one.
- AI can generate many names, but a human did the choosing.
The series starts at part 1.
FAQ
Who built eojeon?
hiio's AI team (Claude Code plus subagents with separate roles) did the planning, naming, art and code. The human set the direction in a few lines and rejected one name.
Why is it called eojeon and not Gyeoljaejeon?
The AI branding lead proposed "Gyeoljaejeon" to match the company line ("the owner only signs off"), but the owner replied "Different name, a king character," so it became eojeon, the place where the king met his officials.
Are the robe colors historically accurate?
They simplify the Gyeongguk Daejeon's red (rank 1 to senior 3), blue (4–6) and green (7–9) system into three colors. They don't follow later changes to the system or the badge patterns, which is why rank numbers aren't shown on screen.
How is it different from tools like Pixel Agents?
It focuses on three things: a Korean royal court setting, on-screen stamps that are real permission responses, and scenes that make sense even if you aren't a developer.
Sources
- eojeon on GitHub
- Previous part: meet eojeon
- Encyclopedia of Korean Culture — Gwanbok (official robes) (Korean)
- Pixel Agents (pablodelucca/pixel-agents)
- Claude Office Visualizer (paulrobello/claude-office)
- Hooks — Claude Code docs
- Subagents — Claude Code docs
All episodes of 'I Handed My App Studio to AI'
Written with AI (Claude) and checked against the linked sources.