やり方
- 作りたいUIのスクショを撮る
- Claude Codeに貼る
- 「これ作って」
以上。本当にこれだけ。
コピペプロンプト集
参考サイトを再現
(スクショ貼付)
このUIをNext.jsで再現して。
手書きラフから
(紙に書いたスケッチを撮影して貼付)
このラフの通りに画面を作って。
今のアプリを修正
(自分のアプリのスクショ貼付)
ここのレイアウトが崩れてる。直して。
部分的に真似る
(Spotifyのスクショ貼付)
このリスト表示の雰囲気だけ参考にして、
うちのアプリの一覧画面をリデザインして。
色やフォントを指定
(スクショ貼付)
これを再現して。ただし色は緑系(#0B6E4F)で。
もっと精度を上げたいとき
(全体スクショ + 部分アップのスクショ2枚を貼付)
全体はこのレイアウトで、
ヘッダー部分はこのアップの通りに作って。
全体と部分の2枚を送ると精度が上がる。
スクショ + 修正指示の組み合わせ
(今のアプリのスクショ貼付)
- ボタンをもっと目立たせて
- カード間の余白を広げて
- フォントを1段階大きく
言葉だけで「いい感じに」より、スクショ + 箇条書き修正が最強。