{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreihym6y24sktcgy5wrkoiurnbbcr2bc7mrnn6fevqcgqef5a3bptyy",
"uri": "at://did:plc:g4wcucb6ko2frmko2x3lvgyi/app.bsky.feed.post/3mfibifvydjz2"
},
"path": "/2026/02/22/design-loop/",
"publishedAt": "2026-05-01T03:28:50.924Z",
"site": "https://efcl.info",
"tags": [
"design-loop",
"https://github.com/azu/design-loop",
"From Claude Code to Figma",
"Electrobun v1",
"node-pty",
"ghostty-web",
"Use Claude Code Desktop - Preview your app",
"Pencil",
"Layrr"
],
"textContent": "Claude Codeを使ったブラウザベースのビジュアル編集ツールとして、design-loopを作りました。\n\n * GitHub: https://github.com/azu/design-loop\n\n\n\n左パネルに開発中のサイトのプレビュー、右パネルにClaude Codeのターミナルが表示されます。プレビュー上の要素をクリックすると、その要素のコンポーネント情報やスタイルがClaude Codeに渡されます。\n\n## インストール\n\n\n curl -fsSL https://raw.githubusercontent.com/azu/design-loop/main/install.sh | sh\n\n\n## 使い方\n\nソースコードがあるディレクトリで、開発サーバーがすでに起動している場合は、`--url`でURLを指定するだけで起動できます。\n\n\n design-loop --url http://localhost:3000\n\n\n`--command`オプションを使うと、開発サーバーの起動もdesign-loopに任せられます。開発サーバーが起動してからプロキシが自動的に接続します。\n\n\n design-loop --url http://localhost:3000 --command \"npm run dev\"\n\n\n起動すると、プレビューとClaude Codeのターミナルを統合したブラウザUIが開きます。プレビュー上の要素をクリックすると、コンポーネント名やファイルパス、スタイルなどのコンテキストがClaude Codeへの指示に含まれます。\n\n## Design Mode\n\nv1.3.0で、ブラウザ上でページを直接編集できるDesign Modeを追加しました。\n\n要素をクリックして「どこを変えたい」と伝えるだけでなく、テキストを直接書き換えたり、要素をドラッグ&ドロップで並べ替えたりできます。変更はログとして蓄積され、「Apply Changes」ボタンでまとめてClaude Codeに送信します。Claude Codeが変更内容を解釈し、実際のソースコードに反映します。\n\n * テキスト編集: 見出し・段落・ボタンなどのテキストをクリックして直接編集（IME対応）\n * ドラッグ&ドロップ: 要素を親コンテナ内でドラッグして並び替え\n * Undo: Cmd+Z / Ctrl+Zで変更を取り消し\n\n\n\n要素の選択モード（Select Element）とDesign Modeは排他的で、同時には使えません。選択モードは「Claude Codeに何を変えるか伝える」ためのもので、Design Modeは「自分で変更してClaude Codeにコードへ反映させる」ためのものです。\n\n## 作った背景\n\nClaude CodeでWebサイトやアプリの見た目を調整するとき、次のような作業フローを繰り返します。\n\n 1. ブラウザでサイトを確認\n 2. 「このボタンのスタイルを変えたい」と感じる\n 3. DevToolsで要素を特定し、どのコンポーネントか調べる\n 4. エディタでファイルを開く\n 5. Claude Codeに「このコンポーネントを変更して」と指示する\n\n\n\nこの行き来が繰り返されるのは、「サイトを見ている」コンテキストと「コードを指示する」コンテキストが分断されているからです。\n\n指示を出す際に「どのファイルのどのコンポーネントか」を毎回説明するのは、LLMに対して本来不要なコンテキストを埋める作業です。ページ上で要素をクリックすれば自明な情報を、言葉で説明しています。\n\ndesign-loopは、ブラウザ上でサイトを見ながら要素を選択し、その情報をそのままClaude Codeへ渡す仕組みを作ることでこの問題を解決します。\n\ndesign-loopはエンジニア以外の人でも使えることを意識して作っています。DevToolsの知識がなくても、ブラウザ上で要素をクリックするだけでClaude Codeに指示を出せます。\n\n## 技術的な実装\n\n類似の課題をElectronやTauriのようなデスクトップアプリとして解決する方法もあります。しかしdesign-loopはCLI + HTTPプロキシという構成を選びました。\n\nデスクトップアプリは配布が面倒です。コード署名、インストーラー、アップデート機構が必要になります。CLIツールとしてHTTPプロキシを立てる形なら、`curl`でインストールできます。また、HTTPプロキシであれば既存の開発サーバーに対して透過的に動作させられるため、フレームワーク側に手を加える必要がありません。\n\n### プロキシサーバーによるHTML注入\n\ndesign-loopの中心はHTTPプロキシサーバーです。既存の開発サーバー（`http://localhost:3000`など）へのリクエストを中継し、HTMLレスポンスに対してスクリプトを動的に注入します。\n\n\n ブラウザ → design-loopプロキシ → 開発サーバー\n ↓ HTMLにscriptを注入\n ブラウザ ← design-loopプロキシ ← 開発サーバー\n\n\n注入するスクリプトは2つです。\n\n 1. `WebSocket`をオーバーライドするスクリプト（HMR接続をプロキシ経由に書き換え）\n 2. 要素選択やデザインモードを実現する`design-loop-inject.js`\n\n\n\nHTMLの注入は、Cloudflare WorkersのHTMLRewriterに似たストリーミング方式で行っています。HTMLレスポンス全体をバッファリングせず、ストリームを流しながら2か所に挿入します。\n\n\n [先頭] WebSocketオーバーライドスクリプトを書き込む\n ↓ upstreamからのHTMLをそのままストリーミング\n [末尾] <script src=\"/design-loop-inject.js\"> を追記\n\n\nバッファリングしない理由は、React 18やNext.js App RouterのSSRストリーミングに対応するためです。HTMLをすべて受け取ってから書き換えると、ストリーミングレスポンスが遅延してしまいます。\n\nWebSocketスクリプトをストリームの**先頭に** 注入するのは、次のページコンテンツが読み込まれる前にHMR接続のパッチを当てる必要があるからです。タイミングが遅れると、Next.js/webpackがすでにWebSocket接続を作成した後になってしまいます。\n\nWebSocketのオーバーライドにより、ViteなどのHMR接続が壊れず、ホットリロードがそのまま動作します。また、`X-Frame-Options`やCSPヘッダーを削除することで、UIサーバーのiframe内に開発サーバーのページを埋め込めるようにしています。\n\n### inject-script: DOM要素のコンテキスト収集\n\n注入スクリプトの主な役割は、クリックされたDOM要素のコンテキストを収集してiframeの親フレームに`postMessage`で送ることです。\n\n送信する情報は次の通りです。\n\n\n const info = {\n selector: getCSSSelector(target), // CSS Selector\n component: getReactComponentInfo(target), // Reactコンポーネント情報\n styles: getComputedStylesSummary(target), // 計算済みスタイル\n rect: { top, left, width, height }, // 要素の位置・サイズ\n tagName: target.tagName.toLowerCase(),\n textContent: target.textContent.slice(0, 100),\n ariaSnapshot: buildAriaSnapshot(target), // ARIAツリー\n };\n\n\n#### CSS Selector生成\n\nID優先で、なければタグ名・クラス名・`:nth-child()`を組み合わせた階層的なセレクタを構築します。\n\n#### React Fiberからのコンポーネント情報\n\nDOMノードにはReactが`__reactFiber$xxx`という内部プロパティを付与しています。これを辿ることでコンポーネント名・props・`_debugSource`（ソースファイルのパスと行番号）を取得できます。\n\n\n // DOM要素からFiberを取得\n const fiberKey = Object.keys(el).find(k => k.startsWith(\"__reactFiber$\"));\n let fiber = el[fiberKey];\n\n // ネイティブ要素のFiberからコンポーネントFiberへ上に辿る\n while (fiber && typeof fiber.type === \"string\") {\n fiber = fiber.return;\n }\n // fiber.type.displayName or fiber.type.name → コンポーネント名\n // fiber._debugSource → { fileName, lineNumber, columnNumber }\n\n\nこの`__reactFiber$`を使ったアプローチは、ブラウザ上のReactアプリを解析する手法としてよく使われています。Claude Code DesktopのPreview機能も同様にReact Fiberからコンポーネント情報を取得しています。FigmaのClaude Code連携機能（From Claude Code to Figma）でも、ページに`capture.js`を注入して同様の処理をしています。\n\n#### ARIAスナップショット\n\n選択要素の周辺（ランドマーク境界まで最大5階層）のARIAツリーを文字列化します。テキストのみでページの構造的なコンテキストをLLMへ渡すためのアプローチです。スクリーンショットのようにピクセルではなく、セマンティクスを伝えます。\n\n### BunのトランスパイラでTypeScriptをブラウザに直接配信\n\n`inject-script.ts`はTypeScriptで書かれていますが、サーバーサイドでのビルドステップは設けていません。代わりにBunの組み込みトランスパイラを使い、リクエスト時にその場でJavaScriptへ変換してブラウザに返しています。\n\n\n // src/proxy/inject.ts\n import injectScriptSource from \"../ui/inject-script.ts\" with { type: \"file\" };\n\n export async function getInjectScript(): Promise<string> {\n const source = await Bun.file(injectScriptSource).text();\n const transpiler = new Bun.Transpiler({ loader: \"ts\" });\n return transpiler.transformSync(source); // 型を除去してJSを返す\n }\n\n\n`with { type: \"file\" }`というBun固有のimport attributeでファイルパスを取得し、`Bun.Transpiler`で変換します。esbuildやrollupは不要で、Bunランタイムだけで完結します。\n\nBunはランタイムとバンドラーが統合されているため、このようなツール開発に向いています。TypeScriptをそのまま実行でき、必要なら`Bun.Transpiler`でブラウザ向けのJSを生成でき、PTYやHTTPサーバーも標準APIとして使えます。\n\n同じ方向として、Electrobun v1もBunをベースにしたデスクトップアプリフレームワークです。ElectronのようにWebViewとバックエンドを統合しますが、Bunのエコシステムに乗ることで「外部ツールなしにTypeScriptとネイティブAPIを組み合わせられる」点が共通しています。こういうツールを作る際の選択肢になります（今回は使っていません）。\n\n### PTYとGhostty Webでブラウザにターミナルを統合\n\nClaude CodeのプロセスはBunのPTY APIを使って起動します。Node.jsでPTYを扱うにはnode-ptyがありますが、ネイティブモジュールのためビルドが必要で、配布時に面倒が生じます。BunはPTYを`Bun.Terminal`としてランタイムに組み込んでいるため、追加のネイティブモジュールが不要です（ただし現時点ではWindows未対応）。`Bun.spawn`にterminalオプションを渡すだけでPTYにアタッチできます。\n\n\n const terminal = new Bun.Terminal({\n cols, rows,\n data(_term, data) {\n // PTYの出力をWebSocket接続しているすべてのブラウザに配信\n for (const ws of connections) ws.send(data);\n },\n });\n\n Bun.spawn([shell, \"-l\", \"-c\", \"claude\"], { terminal, cwd });\n\n\nブラウザ側のターミナルエミュレータにはghostty-webを使っています。GhosttyはGPUレンダリングを使った高性能なターミナルアプリで、そのWebAssembly版（ghostty-web）をxterm.jsの代わりに採用しています。\n\n再接続時のため、128KBのリングバッファでPTYの出力を保持しています。ブラウザがリロードされてもターミナルの表示内容を再生できます。\n\n### Design Mode: GUIの変更をコマンドにしてバッチで送る\n\nDesign Modeの設計上のポイントは、GUIでの変更をどうやってClaude Codeに伝えるかです。変更を構造化されたコマンドとして蓄積し、バッチでClaude Codeに送る方式を採用しています。\n\n変更の種類は`text-edit`（テキスト書き換え）と`move`（要素の移動）の2つです。iframe内の注入スクリプトが変更を検出すると、`postMessage`で親フレームに通知します。\n\n\n // テキスト編集の変更\n { type: \"text-edit\", selector: \"h1.title\", before: \"旧タイトル\", after: \"新タイトル\" }\n // 要素の移動\n { type: \"move\", selector: \".card\", oldIndex: 2, newIndex: 0 }\n\n\n「Apply Changes」を押すと、蓄積された変更に正規化処理が走ります。同じ要素への複数回の編集は最初のbeforeと最後のafterに圧縮され、元の位置に戻った移動は削除されます。正規化後、変更をテキストにフォーマットしてClaude Codeに送信します。\n\n\n [Design Mode Changes]\n 1. Text edited\n selector: h1.title (React: Header - src/components/Header.tsx:12)\n before: \"旧タイトル\"\n after: \"新タイトル\"\n 2. Element reordered\n selector: .card (React: ProductCard)\n moved from: .grid, index 2\n moved to: .grid, index 0\n\n\nこのテキストをユーザーの指示と一緒にClaude Codeへ渡すことで、変更内容を解釈してソースコードを書き換えます。\n\n## Claude Code DesktopのPreview機能との類似点と違い\n\n2026年2月、Claude Code DesktopがPreview機能を追加しました。\n\n * Use Claude Code Desktop - Preview your app\n\n\n\nPreview機能では、プレビュー画面で要素を選択するとスクリーンショット・React情報・DOMの情報がClaude Codeに渡されます。design-loopを公開した後にこのPreview機能が公開されましたが、DOM/React Fiberの情報を収集してClaude Codeに渡すというアーキテクチャはほぼ同じでした。同じ課題を解決しようとすると似たアーキテクチャになるのだと感じました。\n\n設計思想の違いもあります。Claude Code DesktopのPreviewは「Claude Codeというプロンプト環境が主体で、プレビューはその補助ツール」として設計されており、プレビューのサイズ制限もあります。\n\ndesign-loopは逆で「プレビューが主体で、Claude Codeのプロンプトは手段」という位置づけです。これはデザイナーが使うことを意識していたからです。\n\n非エンジニアがAIツールを使っている様子を見ていると、複数のウィンドウやアプリを行き来すると混乱する人がとても多いです。SaaSの画面のように1つの画面で完結することに慣れていると、ファイラーやターミナルなど知らないものが同時に出てくると難しく感じます。プレビューとターミナルを1つの画面で見られること自体に価値があると、作っていて感じました。\n\nClaude Code DesktopもCoworkやPreviewで同じ方向へ進んでいます。PencilやLayrrのようなデザインとコード生成を統合するツールも登場しており、こうした統合ツールは今後増えていくのではないかと考えています。\n\n作ってみて、Bun.Terminalとghostty-webの組み合わせでClaude CodeのUIをブラウザに持ってくるのは意外と簡単にできることがわかりました。PTYの出力をWebSocketで流してターミナルエミュレータに表示するだけなので、Claude Code向けのカスタムUIを作りたい場合の参考になれば幸いです。\n\n* * *\n\n * GitHub: https://github.com/azu/design-loop\n\n",
"title": "design-loop: Claude Codeを使ったブラウザベースのビジュアル編集ツール",
"updatedAt": "2026-02-22T00:00:00.000Z"
}