Bootstrap は世界で最も普及した HTML、CSS、JavaScript のフロントエンドツールキットです。その視覚言語は何世代もの開発者に共有された記憶です。12 カラムのレスポンシブグリッドとコンテナのガター、統一された主役のブルー（#0D6EFD）のボタンとリンク、ブランドの紫（#7952B3）のアクセント、0.375rem の角丸、カード、モーダル、ナビゲーションバーといった定番コンポーネント、そして 1rem 本文のシステムフォントスタック。素早く組み上げたいとき、そして親しみやすさを優先したいプロダクトに適しています。
Bootstrapフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Bootstrap-inspired interface. - 12-column responsive grid with .container gutters; - Primary blue #0D6EFD buttons and links, brand purple #7952B3; - 0.375rem border radius, standard form controls and input groups; - Cards, modals, and navbar patterns everyone recognizes; - System font stack with 1rem body. Colors: #0D6EFD, #7952B3, #F8F9FA, #212529 with #0D6EFD accent. Typography: system-ui.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Bootstrap aesthetics. Use Bootstrap color identity with #0D6EFD accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bootstrap style. Use Bootstrap color identity with #0D6EFD accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Bootstrap design language. Use Bootstrap color identity with #0D6EFD accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Bootstrap visual identity. Use Bootstrap color identity with #0D6EFD accents. Compelling, conversion-focused.
使用例
Bootstrap 管理ダッシュボード
ダッシュボードBuild an admin dashboard with Bootstrap style: responsive grid, cards, tables, and #0D6EFD primary buttons.
Bootstrap ランディングページ
ランディングページCreate a landing page with Bootstrap design language: navbar, hero, feature columns, and a standard footer.
✅ 適した用途
- 高速開発
- 定番の Web アプリ
- レスポンシブグリッド
❌ 適さない用途
- 独自のブランドビジュアルを追求する製品
- グリッド体系を拒むデザイン実験
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。