OpenAI公式のAIフロントエンド作成デザインガイド

**投稿者:** すぐる | ChatGPTガチ勢 (SuguruKun_ai)

**投稿日時:** 2026-03-22 (JST)

**URL:** https://x.com/SuguruKun_ai/status/2035563785956835362

**カテゴリ:** 🎯Vibe Coding Tips

**有益度:** ⭐⭐⭐⭐

---

概要

OpenAI公式がひっそりと「AIにフロントエンド作らせるならこうプロンプト書け」という結構ガチのデザインガイド出してた。かなり良い

①「カードレイアウト」をデフォルトで使うな

②ムードボード・参考画像を渡せ

③ナラティブ構造（ヒーロー→サポート→詳細→CTA）を指定しろ

---

まとめ

OpenAI公式のAI向けフロントエンド作成プロンプトガイドが密かに公開。①カードレイアウトをデフォルトで使わない②ムードボード・参考画像を提供する③ナラティブ構造（ヒーロー→サポート→詳細→CTA）を指定するなど実践的なアドバイス。Vibe Coderがより良いUIを作るために必要な知識。