開発作業のスキマを埋めるAI
自己紹介
作ったもの紹介 Emojigram
Q. この絵文字の元写真は?
ミッキーの石像
京都市中京区撮影
免責
AIの動向変化は激しく、本内容も現時点でのスナップショットのようなものです
AIをフル活用しているかというと、やや自信がない
マツボックリが落ちてる写真をもとに爆弾🌰を配置するマインスイーパー
写真をヒントにしながら、爆弾🌰の位置を推測する
ロジック 写真内のマツボックリ検出
Claudeが生成した雰囲気コードでは、そこまで精度を出せなかった
OpenCV.jsのコーナー検出を使う
マツボックリ → 点 → コーナー検出
既存の画像処理アルゴリズムで十分精度が出た
AIエージェントに開発を完全お任せはできない気持ち
Claude Code デザイン
いろんなvibe codingプロダクトを見ていて親しみがあるので、お任せする
まず
が、デザインを当てずにReactアプリを作る
Claude Codeにデザインを当ててもらう
プロンプトCopied!
catalyst-ui-kit/ を参考にしながら src/renderer/settings.tsx にclassNameを書いてください
一発でここまでデザインを適用できた
横幅が揃ってなかったり、手直しは必要
Claude Codeにお手本デザインを与える
リポジトリ直下にCatalyst UI Kitを置いておく
ある程度の独自っぽさを保ちながらデザインを当てていけそう
お手本を与えずにデザインを当てると、毎回バラバラになりそう
Tailwind CSSのクラスだけスキマを埋めてもらう
プロンプトCopied!
catalyst-ui-kit/ を参考にしながら src/renderer/settings.tsx にclassNameを書いてください
全自動開発というより補完に近い?
ブラウザ操作AIエージェント
Devin
OpenHands （旧名OpenDevin）
OpenAI Operator
ChatGPT Atlas （登場したばかりで使ってことはない）
AIは、WebページのスクリーンショットやDOM構造を見ているらしい
地図に写真を重ねて眺めるアプリ
<canvas>一枚で地図と写真を合成していた
DOM構造で表現できていない
<canvas>の中に地図が描かれていること
地図に写真が重なっていること
写真をクリックすると拡大表示できること
写真の描画を<img>にして代替テキストを付けた
代替テキストはAIによる自動生成
OpenHandsで写真を認識して、クリックできるようになった
視覚とAIエージェントのスキマを埋めた
まとめ 開発作業のスキマを埋めるAI
ロジックとWebアプリのスキマを埋める デザイン
視覚とAIエージェントのスキマを埋める アクセシビリティ