掲載済み (2026-02-28号)
#002 155文字 • 1分

design-loop: Claude Codeを使ったブラウザベースのビジュアル編集ツール

日本語

掲載情報

2026年2月28日土曜日号 メインジャーナル掲載

概要

Claude Codeとブラウザプレビューを統合し、要素の選択や直接編集を通じてAIへ的確なコード修正指示を出せる開発支援ツール「design-loop」の紹介。

詳細内容

azu氏が開発した「design-loop」は、Claude CodeのターミナルとWebサイトのプレビューをブラウザ上の単一UIで統合するツールです。HTTPプロキシを利用して開発サーバーのHTMLにスクリプトを動的に注入する仕組みを採用しており、プレビュー上の要素をクリックするだけでReactコンポーネント情報、スタイル、ファイルパス等のコンテキストをClaude Codeへ自動転送できます。さらに、v1.3.0で追加された「Design Mode」により、ブラウザ上でのテキスト書き換えや要素の並び替えといった直感的な操作をバッチ処理としてClaude Codeに伝え、ソースコードに反映させることが可能です。技術的にはBunのPTY APIやトランスパイラ、GhosttyのWeb版を活用しており、既存の環境を壊さずに導入できるポータビリティも考慮されています。