開発・実装 初級 全ツール共通
UIコンポーネント実装
やりたいUIを説明するだけでコンポーネントを生成できるプロンプト。
プロンプト
以下のUIコンポーネントを実装してください。 【コンポーネント名】 [名前] 【どんなUIか】 [見た目・動作を自由に説明する] 【使用技術】 [React / Vue / Astro / Svelte など] 【スタイリング】 [Tailwind CSS / CSS Modules など]
#UI
#コンポーネント
#フロントエンド
使い方
「どんなUIか」はざっくり書いて大丈夫です。スクリーンショットを添付するとさらに精度が上がります。
説明の例
【どんなUIか】
プロンプトをコピーするボタン。通常時はコピーアイコン＋「コピー」の文字。
クリックするとチェックマーク＋「コピー完了！」に変わり、2秒後に戻る。スクリーンショットが最速
「この画像と同じUIを作って」と添付するだけで、AIがレイアウトを読み取って実装します。Figma のスクリーンショットでも、手書きのスケッチでも機能します。