AI活用100本ノック

#071

GeminiでCSS修正が爆速化!

既存CSSとスクショ画像で、AIがデザイン修正コードを即生成!

#Gemini#CSS#フロントエンド
GeminiでCSS修正が爆速化!
実践プロセス(AIによる自動生成)

1.スクショ画像の用意

ブラウザでの表示不具合や修正したいデザインのスクリーンショットを撮りました。

2.コードと画像の入力

既存のCSSコードと画像を一緒にGeminiへアップロードしました。

3.具体的な指示

「画像の赤枠部分のレイアウトをこう直すためのコードを教えて」と依頼しました。

プロンプト例
この画像のヘッダー部分(赤枠)のレイアウトを修正したいです。現在のCSSを確認し、ロゴを左寄せ、ナビを右寄せにするための修正コードを出力してください

4.修正案の適用

AIが画像から読み取ったパラメータ調整案を、実際のコードに即座に反映させました。