Slidev のスライドを Playwright MCP で見ながら Claude Code に改良させる
Claude Code に Playwright MCP をつなぎ、Slidev の表示をブラウザで開いて確認→修正のループを回させると、スライドのデザインがかなり良くなる。
コードだけ見て CSS を直させると、はみ出しや余白の崩れに気づけない。実際の描画をエージェント自身に見せることで、見た目の問題を自分で拾わせる。
手順
- Slidev プロジェクトで
slidevの開発サーバーを起動しておく - Claude Code に Playwright MCP を追加する
- 「各スライドをブラウザで開いてスクリーンショットを見て、崩れや読みにくい箇所を直す。直したらもう一度見て確認する」をループで頼む
- 自分の名刺などデザインの元になる画像を渡し、それに合わせたテンプレートを作らせると統一感が出る
注意点
- スクリーンショットを何度も読むので文脈とコストを使う。ページ数が多いときは数枚ずつ区切る
- 同じ考え方は UI 全般に使える（関連: UI は「画像モック→承認→Issue→並列実装」の順で作らせる）