ガチの初心者からのバイブコーディング③カラーピッカーを作る(作らせる)

前回、初バイブコーディング(自分でコードを書かずにAIに書いてもらってプログミング/コーディングする)で作ってもらったサイコロアプリはあまりにもショボかったので今回はもうちょっと豪華なものを作ってもらいたいと思います。だけどトークンの消費が気になるので小規模なものがいい。

・複雑すぎない
・実用性がある
・GUIでだれでも操作できる分かりやすいもの

ということで考えたのが「カラーピッカー」を作ってもらおうということです。こんな感じで頼んでみました。

次のような、GUIで操作できるアプリケーションを作成してください。
これはユーザーが選択した色のカラーコードを調べるためのアプリケーションです。
・スライダーで色相を選択
・カラースペースの任意の座標をクリックして色を選択
・テキストボックスに現在選択している色のカラーコード(#の後に6桁)が表示されます
・ 「コピー」ボタンを押すとクリップボードに現在のカラーコードがコピーされます

前回よりはかなり複雑になるので、追加でインストールが必要なものが出てくる可能性があります。その場合も今回は自分で調べたりせず、Claudeに頼んじゃおうと思います。

↑実際、必要なものがあったようでダウンロードしていいか聞いてきました。Yes。

その結果出来上がったのがこちら。

おお!ほぼ思ってたとおりのものが出来ましたが、カラースペースの色がなんか見づらいですね、、、

なのでそれをそのまま伝えてみました

> カラースペースの色がわかりにくいです 改善できますか

そして、、、これだけの要望で、しっかり改善してくれました!

カラーピッカーアプリケーションを改善しました。主な変更点:

  1. カラースペースの描画を単一ピクセルから5×5ピクセルの長方形に変更し、より鮮
  明で見やすくしました
  2. 選択位置のマーカーを黒と白の2重円にして視認性を向上させました
  3. 色相スライダーの隣に色相バーを追加して、現在選択可能な色相の範囲を視覚的に
  表示するようにしました
  4. 色情報表示部分にRGB値の表示を追加し、より詳細な色情報を確認できるようにし
  ました

  これらの改善により、カラースペースの色がより鮮明になり、使いやすくなりました

頼んでもないのにRGBの値まで表示するようにしてくれました。

前回と今回で分かったことは、基本的に頼んだ内容を最小限のコードで実現しようとするので、具体的に指定したりダメだししないとショボいものになってしまうということですかね。

ちなみに今回も/costでトークンの消費量を見てみました

前回の終了視点で0.26ドルぐらいだったので0.54ドルぐらい使ったことになります。

80円ぐらい。