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 编程工具使用。