Claude Code + Chrome Dev Tools mcpの活用

概要

Claude CodeとChrome Dev Tools mcpを活用した開発練習の備忘録です。

環境

• WSL
• Claude Pro
• cc-sdd

Chrome Dev Toolsとは

Chrome DevTools は、Chrome に標準搭載されている開発者ツールで、HTML / CSS の確認や編集、エラー確認、通信状況の調査ができます。
Elements で見た目を調整し、Device Mode でスマホ表示を確認しながら修正を進めるのに便利です。

実施手順

環境セットアップ

Claude Codeはインストール済みなので、プロジェクトルートへcc-sddをインストールします

npx cc-sdd@latest --claude --lang ja

Chrome Dev Tools mcpをClaude codeで利用可能なように登録します。

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

WSL2でGoogle Chromeを利用可能にするためインストールします。
コマンドは下記を参照しました。
https://zenn.dev/hrt999/articles/32d51711cb2926

sudo apt update
sudo apt upgrade
cd /tmp
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install --fix-missing ./google-chrome-stable_current_amd64.deb

google-chrome # 起動確認

cc-sddによる実装

cc-sddの手順にのっとり実装していきます。

• spec-init
  今回は別のサイトのUIをChrome Dev Tools mcpを利用して再現してみます。
  対象はBootstrap exampleを対象にします。
  https://getbootstrap.com/docs/4.0/examples/album/

/kiro:spec-init bootstrap exampleをローカル環境で再現します。対象のURLはhttps://getbootstrap.com/docs/4.0/examples/album/　です。技術要素はnextjs(react)を採用してください。バックエンドは不要で、画面の再現のみ実施してください。DOMの取得・確認はChrome Dev Tools mcpを活用してください。

• spec-requirements
  要件を作成します。

/kiro:spec-requirements bootstrap-album-clone -y  

要件が作成されました。該当ページの構成っぽい要件が生成されています。

#### 受け入れ基準

1. The Album App shall ライトグレー背景（`bg-light`）のアルバムセクションに9枚のカードを表示する。
2. The Album App shall デスクトップ（md以上）で3列グリッド（`col-md-4`）でカードを配置する。
～～～～～～～～略～～～～～～～

• spec-design/spec-tasks
  要件が定まったので設計～タスク分割まで実施します。

/kiro:spec-design bootstrap-album-clone -y
/kiro:spec-tasks bootstrap-album-clone -y

tasks.mdが生成されました。
試験工程ではChrome DevTools mcpを利用した差分比較も実施します。

- [ ] 7.4 Navbarトグルのインタラクション比較を行う
  - Chrome DevTools MCPで `http://localhost:3000` のハンバーガーボタンを `click` する

• spec-impl
  実装に移ります。

/kiro:spec-impl bootstrap-album-clone

トータル18分10秒かかり画面の作成が完了しました。
4時間でリセットされるトークンは43%程度です。
利用したモデルは Claude Sonnet 4.6です。

結果として

結果下記画像のようなサイトが作成されました。

もともとのサイトが非常にシンプルなサンプルサイトということもあり非常に高い精度で画面が再現されているように思います。
元のサイトと比較してもほぼ遜色ありません。

まとめ

今回簡単なサンプルサイトを利用して、Chrome Dev Tools mcpを利用した開発を実施してみました。
簡単なサイトでは非常に高い精度で画面の再現ができました。