画面の画像を渡して Claude Code に直してもらう

今の画面の画像を用意する

アプリの画面を撮った画像を、作業フォルダ(todo-app)に screen.png という名前で保存しました。

画像を指定して、直してほしいことを書く

todo-app のフォルダで Claude Code を起動し、次のように入力して送りました。@ に続けてファイルの名前を入力し始めると、候補から選べます。

@screen.png これは今の画面です。「削除」ボタンが目立ちすぎるので、文字だけの控えめなボタンにしてください。完了した項目は全体を薄くしてください

変更の内容と、確認の画面を見る

Claude Code は、見た目を決めるファイル(style.css)を書き換えました。画面には、削除した行(赤)と追加した行(緑)が表示されます。

続けて Claude Code は、直した後の見た目を確かめるため、見本の項目を追加したアプリの画面を自分で撮りました(Taking a headless screenshot with sample items)。撮った画像が作業フォルダの外(/tmp/shot/after.png)にあったため、読み込んでよいかを聞かれました。

③の選択肢は、上から「はい。今後も作業フォルダの外の読み込みを許可する」「いいえ。今後は作業フォルダの外の読み込みをブロックする」「いいえ。次回もたずねる」「はい。ただし次回もたずねる」という意味です。編集部はこのとき、読み込みを許可しました。

作業の結果の説明を読む

作業が終わると、何をどう変えたかの説明が表示されます。

③にあるとおり、変更はまだコミット(Git に記録すること)されていません。

自分の目で画面を確かめる

最後に、ブラウザでアプリを再読み込みして、見た目を確かめます。