— Other Cases
See all cases →
Product Development — Case Study / Experience Translation
Web Terminal — Kinoshita Studio / Takahiro Kinoshita (Shiga · Lake Biwa, Japan)
01 — Problem Discovery
Out with only an iPhone. Claude is running on the Mac, but I can’t check task progress. I want to type one more command into the terminal, but all I have is the iPhone — this kept happening.
Solutions exist — SSH client apps, VNC, TeamViewer. But every one has a “setup wall.” Generating keys, managing known_hosts, firewall settings. Tens of minutes of prep for a single terminal action.
The gap was, at its core, “the cost of friction.” The cost of reaching the tool exceeded the tool’s value.
— Pain 01
SSH setup is too complex. Key generation, transfer, permissions, opening ports — set it up once, and every change of environment means doing it again.
— Pain 02
Terminal and editor are split apart. On mobile there’s no way to work the terminal while reading code — the cognitive cost of switching screens is high.
— Pain 03
Switching projects erases context. Running several projects at once, every terminal-session switch breaks the flow of the conversation.
— Pain 04
You can’t see the task list. There’s no way from mobile to see what the AI is doing or how far it’s gotten — only the choice of leaving it or interrupting.
02 — Persona
Noa is a product I “built for myself.” The persona wasn’t a hypothesis — it was defined directly from lived experience. A real need to keep Claude running on my iPhone while out, and the design began to solve it.
That a developer, designer and studio owner can keep working even while out. That the physical distance between Mac and iPhone is erased in software. That was Noa’s design proposition.
Out → connect → operate → done — at every step, removing friction is the heart of the design.
03 — Experience Strategy
Noa’s experience strategy was designed on four axes — Immediacy, Visibility, Isolation, Extensibility. This is the language for designing not a “terminal” but “a place on the extension of thought.”
— 01
IMMEDIACY
Connect with just a URL and a token. No key setup, no app to install. Type it in the browser’s address bar and the Mac terminal appears in front of you.
— 02
VISIBILITY
A three-column layout fits terminal, editor and file tree on one screen. Minimizing eye movement, lowering the cost of context switching.
— 03
ISOLATION
Each project has its own terminal session. Just switch tabs to return to that project’s context. The flow of the conversation never breaks.
— 04
EXTENSIBILITY
A PostToolUse hook syncs the AI task list in real time. On mobile, a D-pad appears. Features extend in “invisible” ways.
— Experience Translation Map
The “SSH setup wall” translated into “connect with a single URL.” Removing friction is the very heart of experience design.
04 — Solution Design
Noa’s stack is simple — Node.js + Express + WebSocket + node-pty. The server spawns a PTY and connects it over WebSocket to xterm.js in the browser. But the experience-design decisions mattered more than the technical implementation.
— Token Auth
Auth is a single token. Include it in the URL parameter and you log in automatically. Bookmark it in Safari on the iPhone, and one tap opens the Mac terminal. With friction zeroed out, the act of connecting disappeared from awareness.
— 3-Column Layout
Terminal, Monaco editor and file tree, side by side. Write code while watching the terminal, pick a file and open it in the editor — this flow completes with no screen transitions. A design that lowers cognitive cost.
— Project Sessions
Each project has its own PTY session. Switch tabs and the whole terminal swaps out, with the previous conversation kept intact. Return to the BMBoard session and it picks up right where it left off.
— ⬡ Task Panel
A PostToolUse hook instantly reflects the task list Claude Code updates into Noa’s ⬡ panel. Even away from the Mac, you can see what the AI is doing. The “leave it or interrupt” problem while out is gone.
05 — Results
Since I started using Noa, the quality of working while out changed. Sitting in front of the Mac is no longer required, and I can keep working without breaking the flow of thought. Only by using it did I realize how much “the cost of reaching the tool” had been breaking the experience.
3— COLUMNS
Terminal, editor and file tree on one screen. Eye movement is minimized and the flow of thought is preserved.
0— SSH SETUP
No key generation, no port setup. Connect with just a URL and a token. Friction, zeroed out.
OSS— RELEASE
Released as open source so developers with the same problem can start right away. Launches with a single npx command.
— Studio Note
Noa is a product Kinoshita Studio built from its own problem. The starting point was a real need: “I want to keep Claude running while I’m out.”
Simpler than SSH, yet able to do the same thing — that translation of experience is Noa. By releasing it as open source, I hope it reaches developers with the same problem.
