前面的系列讲的都是组件——按钮、表单、表格这些功能性的东西。但页面除了"能用"，还想要"好看"——那就得告诉 AI 你想要什么风格。VibeHub 设计风格 tab 收录了 22 种风格。这一半讲 11 种经典风格，适合大多数商业和技术场景。
11 种经典设计风格
1. 现代简约（Minimalism）
长什么样：大量留白、只有必要的内容、没有多余装饰、一个页面只突出一个重点。
适合什么：SaaS 产品、个人网站、设计工作室——做干净、专业的页面时首选。
VibeHub 的视觉特征：白色背景、单个大标题、很少的交互控件、清晰的信息层级。
喂给 AI 的话："用现代简约风格。大量留白，每个区块上下间距至少 80px。颜色只用黑白灰加一种品牌色。没有多余装饰性元素。文字层级：标题 48px 粗体、正文 16px、辅助文字 12px。一个页面只突出一个核心行动点。"
2. 苹果风（Apple HIG）
长什么样：大标题居中、毛玻璃导航栏、大圆角卡片、产品图占一半屏幕。苹果官网和 iOS 应用的风格。
适合什么：硬件产品、高端品牌、App 推广页——需要"高级感"的场景。
VibeHub 的视觉特征：大号标题、毛玻璃背景、精细排版、产品视觉占主导。
喂给 AI 的话："用 Apple HIG 风格。大标题居中 56px 细体。导航栏吸顶加 backdrop-blur 毛玻璃。大圆角 16px 卡片。产品图片占屏幕一半高度。配色用白/灰/黑，只用一种点缀色。排版用 SF Pro 或系统默认无衬线体。"
3. Notion 风（Notion Style）
长什么样：纯白背景、左侧窄导航、内容区宽、所有内容都是"可编辑的文档"。像 Notion、Craft、Obsidian 的样子。 适合什么：文档工具、笔记应用、项目管理、知识库——需要"写作感"的产品。
VibeHub 的视觉特征：左侧导航列表、右侧内容区、极简排版、所有内容以文档为中心。
喂给 AI 的话："用 Notion 风格。左侧导航 240px 白色背景，显示页面标题列表。右侧内容区占满剩余宽度。文字编辑区最大宽度 720px 居中。排版用无衬线体、少量颜色、无边框卡片。拖拽和块编辑支持。"
4. Bento 便当格（Bento Grid）
长什么样：大小不同的卡片拼在一起，像日式便当盒。大卡片放重要内容，小卡片放次要内容。
适合什么：仪表盘、个人主页、功能聚合页——需要在一屏内展示多种信息的场景。
VibeHub 的视觉特征：不等大的彩色卡片网格、每个卡片展示一个独立数据块。
喂给 AI 的话："用 Bento Grid 布局。大卡片（2 列宽）展示主要数据，小卡片（1 列宽）展示次要指标。卡片之间间距 16px。每张 Card 圆角 12px，背景色不同。整体风格活泼多彩。"
5. 玻璃拟态（Glassmorphism）
长什么样：半透明的毛玻璃卡片，背景透出来，层次感强。2021-2022 年非常流行。
适合什么：音乐 App、天气应用、创意展示页——需要"现代感"和"深度"的页面。
VibeHub 的视觉特征：半透明背景加模糊、背后的色彩和图案透上来。
喂给 AI 的话："用 Glassmorphism 风格。背景是渐变色或图片。卡片用半透明白色 rgba(255,255,255,0.15) + backdrop-filter: blur(12px)。卡片边框 0.5px 半透明白色描边。阴影用浅色。文字用白色。"
6. 新粗野（Neo-Brutalism）
长什么样：粗黑边框、硬阴影、高对比色、没有圆角——看起来很"硬"。
适合什么：开发工具、极客社区、个人品牌——想突出"与众不同"时。
VibeHub 的视觉特征：黑色粗描边、深色硬阴影、高饱和度颜色、无圆角。
喂给 AI 的话："用 Neo-Brutalism 风格。所有元素有 2px 黑色描边。阴影用纯黑 no offset 8px（不管背景颜色）。颜色用高饱和：亮黄、亮蓝、品红。字体用粗体。无圆角。按钮背景色鲜亮。"
7. 瑞士排版（Swiss Style）
长什么样：严格的网格对齐、无衬线字体、清晰的信息层级、一般是黑白或红白。有点像展览海报。
适合什么：展览官网、文化机构、出版品牌——需要"设计感"但不想花哨。
VibeHub 的视觉特征：严格网格、粗体无衬线字、红/黑/白配色、清晰的数字层级。
喂给 AI 的话："用 Swiss Style。严格网格对齐。无衬线字体（Helvetica 或 Inter）。黑白主色 + 红色点缀。文字层级清晰：数字超大号、标题中号、正文小号。对齐要精确，不要有错位感。布局用 Grid 严格控制。"
8. 杂志编辑风（Editorial）
长什么样：像纸质杂志一样的大标题、大幅照片、引号引文、流式排版。
适合什么：博客、新闻网站、文化平台——内容驱动的阅读型页面。
VibeHub 的视觉特征：大图、大字标题、引文区块、多栏文章列表。
喂给 AI 的话："用 Editorial 杂志风。文章标题 40px，正文 18px 大字号行高 1.8。文章内穿插大图（全宽）。引文用斜体 + 左侧竖线。正文用衬线字体增加阅读感。多栏文章列表用 Grid。文章底部有作者信息和阅读时间。"
9. 拟物化（Skeuomorphism）
长什么样：模仿现实物体的外观——计算器像真的计算器、笔记 App 像真的笔记本。
适合什么：音乐制作工具、录音应用、模拟器——模仿真实工具的时候。
VibeHub 的视觉特征：模拟硬件面板、真实纹理、真实控件的外观。
喂给 AI 的话："用 Skeuomorphism 风格。界面模拟真实的硬件设备外观。按钮看起来像真的物理按钮（立体感、渐变、内阴影）。背景用皮革或金属纹理。元素有真实世界的阴影和材质感。"
10. 扁平化（Flat Design）
长什么样：纯色块、没有渐变没有阴影、简化图形。Windows 8/Metro 的风格。
适合什么：功能型 App、企业内部工具——追求清晰直接、不要任何装饰。
VibeHub 的视觉特征：纯色矩形、无渐变、无阴影、极简图标。
喂给 AI 的话："用 Flat Design。所有元素纯色背景，无渐变、无阴影、无 3D 效果。矩形直角为主。配色用鲜艳纯色块。图标用最简单的线条或纯色填充。排版用无衬线字体。"
11. 材料设计（Material Design）
长什么样：Google 风格——有层次感的阴影、浮动操作按钮、卡片式布局、水波纹点击效果。
适合什么：Android 应用、Google 系产品、通用 Web App——最通用的设计系统之一。
VibeHub 的视觉特征：有层次的卡片阴影、浮动按钮、色彩丰富、过渡动效流畅。
喂给 AI 的话："用 Material Design 3 风格。卡片有不同层级阴影（elevation: 1/4/8）。配色用 Material 调色板，主色/辅色/表面色/背景色。FAB 浮动按钮在右下角。点击有 Ripple 水波纹效果。过渡动效用 ease 缓动。排版用系统默认无衬线体。"
一句话选风格
AI 速览
