---
name: bento-product-launch
description: "Bento 产品发布 (Bento Product Launch) style skill for AI website building."
---

# Bento 产品发布 (Bento Product Launch)

## 适用场景 / Use When

AI 产品发布 / startup 官网 / 工具型 landing page / 模块化产品说明

## 适合做 / Best For

- AI 产品
- startup 官网
- 模块化 landing page

## 不适合做 / Not For

- 安静生活方式站
- 机构 program 首页
- 纯图像期刊

## 长这样 / Visual Traits

- hero 后接拼块
- 快节奏扫读
- 产品卡片密
- 说明模块化

## 配色系统 / Color System

- 深浅都可以
- 重点靠卡片层级和少量强调色
- 不要做成廉价渐变大全

## 排版系统 / Typography

- 标题要直接说明能力
- 模块标题短而准
- 数据点和功能标签要单独成层

## 版式规则 / Layout Rules

- hero 之后立刻进入 bento 卡片
- 支持快速扫读
- 产品说明像一套模块而不是长篇 feature list

## 图片处理 / Image Treatment

- UI 截图、代码片段和演示块都能进卡片
- 每张图都要解释能力
- 不要混入无关生活方式摄影

## 动效节奏 / Motion

- 卡片 hover 和入场反馈可以更明显
- 但要短促
- 避免过长场景式转场

## 推荐结构 / Recommended Structures

- 工作台型 / Workbench / Tool Shell
- 目录索引型 / Catalog Explorer

## 历史来源 / Historical Roots

- 包豪斯 / Bauhaus
- 瑞士风格 / Swiss Style
- 极简主义 / Minimalism

## 参考网站 / Reference Sites

- Bolt: https://bolt.new/
- Vercel: https://vercel.com/
- Linear: https://linear.app/

## 注意避坑 / Avoid

- 模块太多导致信息噪音
- 只有漂亮卡片没有产品逻辑
- 把 bento 当成纯装饰

## Prompt DNA

```text
请参考Bento 产品发布（Bento Product Launch）风格建站：
视觉特征：hero 后接拼块 / 快节奏扫读 / 产品卡片密 / 说明模块化
适合场景：AI 产品 / startup 官网 / 模块化 landing page
不适合：安静生活方式站 / 机构 program 首页 / 纯图像期刊
推荐页面组织：工作台型 / Workbench / Tool Shell / 目录索引型 / Catalog Explorer
历史来源：包豪斯 / Bauhaus / 瑞士风格 / Swiss Style / 极简主义 / Minimalism
参考网站：Bolt: https://bolt.new/ / Vercel: https://vercel.com/ / Linear: https://linear.app/
配色系统：深浅都可以 / 重点靠卡片层级和少量强调色 / 不要做成廉价渐变大全
排版系统：标题要直接说明能力 / 模块标题短而准 / 数据点和功能标签要单独成层
版式规则：hero 之后立刻进入 bento 卡片 / 支持快速扫读 / 产品说明像一套模块而不是长篇 feature list
图片处理：UI 截图、代码片段和演示块都能进卡片 / 每张图都要解释能力 / 不要混入无关生活方式摄影
风格要求：Use a bento product launch family: one strong product statement up top, modular feature blocks underneath, dense but controlled scan paths, a near-black or bright-neutral palette, and cards that explain real capability instead of generic marketing filler.
```