dfadify-web

Eyes On Claude — Design skill for Claude Code

Design community

👁️ Watch Claude Code work live in your browser: every message, tool call, browser click and design preview, one screen per agent.

How to install Eyes On Claude

This entry records only its repository, not the path inside it, so there is no exact command to give. Open dfadify-web/eyes-on-claude and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Eyes On Claude does

👁️ Watch Claude Code work live in your browser: every message, tool call, browser click and design preview, one screen per agent. One-command install.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Drawbridge — Design editor for Claude Code and Cursor 960 ★

README

👁️ Eyes on Claude

**Watch Claude Code work, live, in your browser.**

Every message, every tool call, every click it makes in Chrome and every page it designs, as it happens. Parallel subagents each get their own screen.

[![License: MIT](https://img.shields.io/badge/license-MIT-d97757.svg)](LICENSE) ![Node 18+](https://img.shields.io/badge/node-%E2%89%A518-4ade80.svg) ![Zero dependencies](https://img.shields.io/badge/dependencies-0-60a5fa.svg) ![Claude Code skill](https://img.shields.io/badge/Claude%20Code-skill-d97757.svg)

[Español](README.es.md)

![Eyes on Claude: main session and two parallel subagents, each on its own screen](docs/screenshots/overview.png)

Install (one command)

npx -y github:dfadify-web/eyes-on-claude

That's it. Start a **new** Claude Code session, send any prompt, and `http://localhost:7777` opens by itself.

Prefer cloning?

git clone https://github.com/dfadify-web/eyes-on-claude.git
cd eyes-on-claude
node install.js

Requirements: [Claude Code](https://docs.claude.com/en/docs/claude-code) and Node.js 18+. Works on Windows, macOS and Linux.

What you see


💬 Conversation	Your prompts and everything Claude writes back.
🛠️ Every tool call	A terminal for Bash/PowerShell with the real output, a red/green diff for every Edit/Write, a checklist for TodoWrite, results for Read/Grep/WebFetch and any MCP tool, with timing and ✓/✗.
🧩 One screen per agent	The main session and every subagent get their own pane, titled with the subagent's real task. When they run in parallel you watch them side by side. Several Claude Code windows open? One pane per session, with a session filter.
🌐 Live browser	When Claude drives a browser (Claude in Chrome, Playwright…) you see the real screenshots it takes, the tab's URL, and where it clicks and what it types, marked on top of the screenshot.
**🎨