Bulma は JavaScript に一切依存しないモダンな純 CSS フレームワークです。Flexbox を骨格に .columns グリッドを組み、青緑（#00D1B2）のブランドカラーに #363636 の本文、6px の角丸、そして .button、.box、.card、.navbar といった親しみやすいコンポーネントクラスが、ページを扱いやすく仕上げます。コンテンツサイト、マーケティングページ、JS 依存を増やしたくないプロジェクトに適しています。
Bulmaフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Bulma-inspired interface. - Pure CSS framework — no JavaScript required; - #00D1B2 turquoise over white with #363636 text; - 6px radii, .button/.box/.card/.navbar component classes; - Flexbox-first .columns grid with simple spacing helpers; - Friendly, approachable marketing and content sites. Colors: #00D1B2, #FFFFFF, #F5F5F5, #363636 with #00D1B2 accent. Typography: system-ui.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Bulma aesthetics. Use Bulma color identity with #00D1B2 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bulma style. Use Bulma color identity with #00D1B2 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Bulma design language. Use Bulma color identity with #00D1B2 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Bulma visual identity. Use Bulma color identity with #00D1B2 accents. Compelling, conversion-focused.
使用例
Bulma マーケティングサイト
ランディングページBuild a marketing site with Bulma style: hero banner, feature columns, and card grids with #00D1B2 accents.
Bulma コンテンツブログ
WebCreate a content blog with Bulma design language: navbar, article cards, and clean typography-first pages.
✅ 適した用途
- 純 CSS プロジェクト
- コンテンツサイト
- 静的ページ
❌ 適さない用途
- 複雑な JS インタラクションが必要なアプリ
- 深くカスタマイズするデザインシステム
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。