Claude Codeで5回迷走した。AI開発における「人間の美意識」の限界。

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

AIに「いい感じのデザインにして」と頼んだ。それが地獄の始まりだった。画像にラベルを付けるだけの簡単なタスクだ。気づけば2時間、5回のデザイン変更を繰り返し、画面は極彩色のバッジで埋め尽くされた。

SNS運用を自動化しませんか？

ThreadPostなら、投稿作成・画像生成・スケジュール管理までAIがサポート。

無料で始める

AIと5回戦った画像ラベルUI

AIに画像生成のUI改善を任せた。生成した画像がどのモデルで作られたか、ひと目でわかるようにしたかった。僕は「AI生成画像の選択状態管理とラベル表示機能を追加」と指示した。

Claude Codeは数秒でコードを吐き出した。動かすと、画像の下に巨大なラベルが付いていた。実装は完璧で、データもDBに保存されている。企業開発ならデザイナーが数日かけるモックアップが、数秒で目の前にある。

でも「なんか違う」。画像よりラベルが目立ちすぎている。僕は「画像ラベルを上部に表示するよう変更」と指示した。AIは即座にラベルを上に移動させた。でも、今度は画像の上部が隠れて見えない。

情報量と視認性のトレードオフだ。人間のデザイナーなら、ここで引き算をする。AIは要素を足すことで解決しようとした。「AI画像ラベルを3バッジシステムに改善」を提案してきた。AI、スタイル名、モデル名を別々のバッジに分割した。

画面がバッジだらけになった。紫のグラデーションで視覚的階層を表現しているらしい。SaaSのUIとしてはうるさすぎる。さらにAIは「モデルとスタイルごとに色分けしよう」と言い出した。DALL-E 3は紫、Fluxは緑、Stable Diffusionはインディゴ。画面がゲーミングPCの光り方になった。

しんたろー:
5回のデザイン変更で約2時間消費した。AIのコード生成は1回10秒。残りの1時間59分は、僕が画面を見て「うーん」と唸っている時間だった。

結局、僕の直感的な一言で決着がついた。「画像ラベルを左上角の三角リボンに変更」と指示した。Claude Codeは一発で出してきた。画像が主役。ラベルは左上の小さなリボン。ホバーした時だけ詳細が出る。最初からこの選択肢はAIの中にあった。僕が言語化できなかっただけだ。

泥沼のデバッグと「保存しました」の嘘

UIの迷走から一転、今度はデバッグにハマった。投稿候補画面の画像ドラッグ&ドロップを簡素化したい。並び替えの処理をDB保存と同期させる。「画像ドラッグ&ドロップ機能を元の動作する実装に復元」というコミットから地獄が始まった。Claude Codeは自信満々に「保存しました」とログを出す。画面上の画像は綺麗に並び替わっている。

リロードした。並び順が元に戻った。お前、保存してないだろ。非同期処理における状態管理の典型的な罠だ。Reactの状態更新は非同期で走る。ドラッグ中の頻繁なイベント発火と、DBへのAPIリクエストが完全に競合していた。

「ドラッグ中のチカチカを解消し、保存を安定化」を試みた。AIは複雑なキュー管理のコードを書いてきた。フックを使ってインデックスを追跡するらしい。動かした。今度は画面がフリーズした。楽観的UI更新を実装する際、状態の整合性を保証するのは至難の業だ。

イベントの発火頻度を制御しないと、古い状態が上書きされ続ける。企業開発ならRedisなどのキューイングシステムを入れる場面だ。1人開発のSaaSでそんな重い仕組みは入れたくない。