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 內容部落格
Web 端Create a content blog with Bulma design language: navbar, article cards, and clean typography-first pages.
✅ 適用情境
- 純 CSS 專案
- 內容網站
- 靜態頁面
❌ 不適用情境
- 需要複雜 JS 互動的應用
- 深度客製的設計系統
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。