Bento Grid高级网页生成提示词

· · · ·

> 原文地址：https://mp.weixin.qq.com/s/LMBVV1YUM-d2X_vfZe_lWQ

极简输入的产品/服务/主题探索页面设计提示词 (Bento Grid 风格) - V3

提示词如下：

请设计一个现代、简约、高端的产品/服务发布单页，整体采用 Bento Grid 布局，所有关键信息一屏呈现（1000 px 视口宽，尽量不滚动）。

─────────────────────────────────────────

# 网格与卡片

- 用 CSS Grid + grid-template-areas 定义不规则 Bento Grid：

hero hero spec

feat1 feat2 spec

guide guide qr

- 卡片：圆角 20 px，白色或浅灰背景，细微阴影；Hover 轻微上浮
- 卡片间距 12–20 px，不留空洞

# 内容分区

1. hero（主卡，约 25–30% 区域）：核心理念，杂志版冲击力，名字应围绕用户输入的探索主题。
2. feat1-feat2（4–6 张中型卡）：重要子主题
3. spec（纵向大卡）：规格 / 技术细节
4. guide（横向卡）：使用指南 + CTA
5. qr（右下角方卡）：品牌标识 + 二维码

要求内容分区没有大面积留白，需要紧凑卡片布局，如果内容留白需调整卡片大小以适应内容。

# 二维码卡

- 图片：https://i.postimg.cc/KY4FPh7m/12431746844912.jpg
- 尺寸 ≥120 px × 120 px
- 下方引导文字：「一键生万象」
- 该卡不放 FontAwesome 图标

# 视觉元素

- FontAwesome 图标作为卡片背景装饰（低透明度）
- 进度条 / 小图表展示数据
- 小胶囊标签标识分类

# 响应式

- max-width:1000px; margin:0 auto;
- 移动端堆叠卡片并保持间距

# 技术要求

- 单文件 HTML，内嵌 CSS / JS
- 引入 CDN：

• Tailwind 2.2.19• FontAwesome 6.0• Noto Serif SC & Noto Sans SC• 选定风格的 Google Font

- 代码精简，注释清楚

## 其他要求

请联网搜索（若能力允许）或基于你的知识库，围绕此主题提炼核心概念相关的子主题，用于填充主卡片和其余卡片。内容需精炼、准确，符合主题。可以加入中文为主的中英文对照，便于排版设计的好看。

─────────────────────────────────────────

## 设计风格（任选 1 个编号 / 名称，留空默认“2 大胆现代”）

1. 极简主义风格 (Minimalist): 简约、留白、精确排版、无衬线字体、克制装饰
2. 大胆现代风格 (Bold Modern): 鲜艳对比色、不对称动态排版、极大标题、几何元素
3. 优雅复古风格 (Elegant Vintage): 米色背景、衬线字体、对称排版、精致装饰元素
4. 未来科技风格 (Futuristic Tech): 深色背景、霓虹色、科技界面、数据可视化元素
5. 斯堪的纳维亚风格 (Scandinavian): 纯白背景、北欧色调、克制排版、简单几何图案
6. 艺术装饰风格 (Art Deco): 黑金配色、对称排版、装饰性字体、几何图案、奢华感
7. 日式极简风格 (Japanese Minimalism): 极度留白、克制色彩、非对称排版、禅意美学
8. 后现代解构风格 (Postmodern Deconstruction): 打破规则、混合字体、不和谐色彩
9. 朋克风格 (Punk): DIY效果、高对比色彩、不规则排版、手写字体、粗糙质感
10. 英伦摇滚风格 (British Rock): 英国元素、红白蓝色系、混合经典与现代字体
11. 黑金属风格 (Black Metal): 纯黑背景、哥特字体、神秘符号、高对比单色图像
12. 孟菲斯风格 (Memphis Design): 鲜艳不协调色彩、几何形状、活泼排版、80年代感
13. 赛博朋克风格 (Cyberpunk): 深色背景、霓虹色彩、故障效果、科技界面元素
14. 波普艺术风格 (Pop Art): 亮丽原色、漫画风格、半调网点效果、流行文化元素
15. 瑞士国际主义风格的解构版 (Deconstructed Swiss Style): 基于网格的破坏重组
16. 蒸汽波美学 (Vaporwave Aesthetics): 粉紫青蓝渐变、80-90年代元素、复古电脑界面
17. 新表现主义风格 (Neo-Expressionism): 强烈色彩、不规则排版、粗犷线条、手工感
18. 极简主义的极端版本 (Extreme Minimalism): 极度留白、黑白灰、精确排版、零装饰
19. 新未来主义 (Neo-Futurism): 流线型曲线、金属色调、高科技材质、动态排版
20. 超现实主义数字拼贴 (Surrealist Digital Collage): 意外元素组合、比例失调、梦幻色彩
21. 新巴洛克数字风格 (Neo-Baroque Digital): 华丽装饰、金色深色系、戏剧性光影效果
22. 液态数字形态主义 (Liquid Digital Morphism): 流体渐变、液态效果、梦幻色彩
23. 超感官极简主义 (Hypersensory Minimalism): 微妙纹理、精确排版、细微色彩变化
24. 新表现主义数据可视化 (Neo-Expressionist Data Visualization): 数据驱动的抽象艺术
25. 维多利亚风格 (Victorian Style): 华丽印刷美学、繁复装饰边框、传统排版
26. 包豪斯风格 (Bauhaus): 基本几何形状、原色、无衬线字体、功能主义美学
27. 构成主义风格 (Constructivism): 几何形状、红黑配色、动态排版、革命美学
28. 简约功能型风格 (Minimal Functional): 清晰卡片式布局、柔和色彩点缀、直观图标系统、精简文本展示、充足留白空间
29. 德国表现主义风格 (German Expressionism): 强烈明暗对比、扭曲形态、情感表达
30. **新拟物主义 (Neumorphism):** 柔和的凸起/凹陷效果，模拟真实物理界面，通常使用单色或非常接近的颜色，光影是关键，界面元素与背景同色系，通过精细的双重阴影（左上亮光右下暗影为凸起，反之为凹陷）塑造形态，圆角较大，整体感觉干净、微妙。

→ **已选风格：［    填入你选的风格的编号或者名称，我建议编号+名称，模型有时候会幻觉   ］**

─────────────────────────────────────────

## 可选探索主题卡

- 如需额外挂载“探索”卡，请在此填写关键词；留空则忽略

→ **探索主题：［    填入你想要生成的内容，比如：马斯克的商业版图/**任天堂的IP帝国……**］**

Bento Grid高级网页生成提示词

安装VMWare以及配置NAT网络和docker安装

RAG-Embedding-Vector基础内容总结

十、【Pipeline流水线】掌握参数插件化配置、使用Kaniko技术构建镜像

JDK 源码解析 —— 调试环境搭建（二）进阶

JDK 源码解析 —— 集合（一）数组 ArrayList

Dubbo 源码分析 —— 调试环境搭建