用AI提示语创建便当盒式网页布局

用AI设计一个苹果风格的“便当盒”式网页

这份提示模板提供了一份全面的指南，教你如何利用AI来设计现代、极简、高端的产品或服务发布页。它借鉴了苹果标志性的设计理念，旨在通过视觉吸引力强的“便当盒”（Bento Grid）布局，打造紧凑、单屏的体验。这种方法确保所有关键信息都简洁、引人入胜地呈现，是展示新产品或服务的理想选择。

AI提示的关键设计原则：

1. “便当盒”式网格布局：

指示AI创建一个由各种尺寸卡片组成的网格。每张卡片应包含特定类别的信息，确保整体布局紧凑但不拥挤。这能在不牺牲可读性的前提下，最大化信息密度。

2. 卡片设计规范：

• 圆角： 所有卡片必须有明显的圆角（例如，20像素边框半径），以营造柔和、现代的美感。
• 背景： 使用干净的白色或浅灰色背景，以保持极简风格。
• 阴影： 应用细微的阴影效果，使卡片略微有深度感。
• 悬停效果： 实现轻柔的“上浮”悬停效果，增强互动性。

3. 配色方案：

选择极简的调色板，主要使用白色/浅灰色背景。融入渐变色作为强调色，例如，从浅紫色（#C084FC）到深紫色（#7E22CE）的平滑过渡，以突出关键元素。

4. 排版与层级：

• 大而粗的数字/标题： 使用渐变色强调关键数据点和主标题，立即吸引注意力。
• 中等大小的标题： 对于卡片标题，确保其清晰简洁地指示内容类别。
• 小字体文本： 支持性的描述性文本使用灰色，确保其能辅助主要内容而不喧宾夺主。

5. 网格内内容组织：

逻辑地组织网格行的内容：

• 顶行： 用于重大公告、产品特性、性能指标或主要卖点。
• 中行： 专门用于产品规格、技术细节和核心功能。
• 底行： 包含使用指南和清晰的结论或行动号召。

6. 视觉元素：

通过以下方式增强视觉吸引力和信息传递：

• 简洁图标： 清晰地表示各种功能。
• 进度条/图表： 有效地展示对比数据。
• 视觉韵律： 利用网格和卡片布局创造吸引人的视觉流。
• 标签： 以小的胶囊形标签呈现分类信息。

7. 响应式设计：

至关重要的是，生成的页面必须无缝适应不同的屏幕尺寸，在移动设备上保持卓越的可读性和视觉完整性。

苹果风格参考点：

• 整体设计应模仿苹果官方的产品规格页面。
• 强调充足的留白和干净的视觉元素。
• 优先展示数字和关键特性，减少冗长的文字。
• 利用渐变色突出重要数据。
• 卡片之间保持适当的间距，以实现清晰的视觉分离。

这份详细的提示能让AI模型生成复杂且用户友好的网页界面，将美学吸引力与功能清晰度融为一体，非常适合打造有影响力的产品发布。