デスクトップ版 Claude Code の Preview 機能で UI を直接確認・デバッグする方法

概要

Claude Code デスクトップアプリの新機能「Preview」を活用し、UI 操作、ログ確認、コード修正をシームレスに行うワークフローを解説しています。

詳細内容

Claude Code のデスクトップアプリに追加された「Preview」機能の導入ガイドです。この機能により、Claude がアプリケーションを起動し、その UI を直接操作しながら動作確認やデバッグを行うことが可能になりました。主なポイントは以下の通りです。まず、`.claude/launch.json` ファイルを作成して起動コマンドやポート設定を定義することで、Claude が自動的にプレビュー環境をセットアップします。次に、プレビュー画面上での操作履歴やサーバーログに基づき、Claude が自律的にバグを特定し修正するプロセスが紹介されています。さらに、「Select element」機能を使うと、プレビュー上の特定の UI 要素を選択して「この部分の色を変えて」といった視覚的な指示をプロンプトに組み込むことができます。これにより、開発者はブラウザを行き来することなく、AI と対話しながら UI 開発を完結させることが可能になります。

元記事を読む他のサマリーを見る