UIデザインが苦手なので、ブラウザ上からAIにUI修正を指示できるViteプラグインを作ってみた

• URL: https://zenn.dev/nkmak/articles/d20e109263434c
• 日付: 2026-06-20
• Tier: Tier 3
• 要旨: ブラウザUIをクリック指定してAIに修正案を複数提示させるViteプラグイン。Shadow DOM隔離、Babel AST変換で要素ソース位置を特定、git worktreeで案を並列隔離して即座に見比べられる。

詳細

Vite dev middlewareでセッション・スナップショット管理。要素クリック時にBabelでJSX AST解析し、data-ui-source属性に自動付与(相対パス:行:列)。クリック位置からソースに逆引き。Claude Code CLIで修正案3パターン生成。各案ごとにgit worktreeで隔離し、HMRでプレビュー切り替え。OK時のみメイン作業ツリーに適用。