#071
GeminiでCSS修正が爆速化!
既存CSSとスクショ画像で、AIがデザイン修正コードを即生成!
#Gemini#CSS#フロントエンド

実践プロセス(AIによる自動生成)
1.スクショ画像の用意
ブラウザでの表示不具合や修正したいデザインのスクリーンショットを撮りました。
2.コードと画像の入力
既存のCSSコードと画像を一緒にGeminiへアップロードしました。
3.具体的な指示
「画像の赤枠部分のレイアウトをこう直すためのコードを教えて」と依頼しました。
プロンプト例
この画像のヘッダー部分(赤枠)のレイアウトを修正したいです。現在のCSSを確認し、ロゴを左寄せ、ナビを右寄せにするための修正コードを出力してください4.修正案の適用
AIが画像から読み取ったパラメータ調整案を、実際のコードに即座に反映させました。