嗨，朋友们！
今天我打算开一个全新的硬核技术专栏，毫无保留地和大家分享 100 多个经过实战测试的“氛围感编程（Vibe Coding）”AI 提示词。掌握了这套提示词，你就能轻松让 AI 帮你生成各种兼具灵活性与设计感的 UI 组件。
不过，如果一股脑把 100 多个提示词全堆在一篇文章里，那内容未免太长、太臃肿了，估计大家看两眼就会觉得枯燥。
所以，我决定把这个系列拆分成若干个小篇章。
这样一来，大家每读完一篇，就能立马复制出里面的提示词去亲自测试、微调，并真正应用到自己当下的项目里，而不是让它躺在你的收藏夹里默默吃灰。
在今天的第一篇里，我们先来聊聊前 10 个核心提示词。
既然要聊组件，咱们自然得从绝大多数应用和网站的“大门面”开始：
导航栏（Navbar）。
毕竟，在用户看到你的仪表盘、定价页、个人主页、设置中心或商品详情之前，他们首先打交道的必然是导航栏。一个高水准的导航栏能瞬间拉高整站的质感，让应用显得干净、专业、好用；相反，一个糟糕的导航设计哪怕配上再完美的内核，也会让人感到混乱。
今天我们就由浅入深，盘一盘各种形态的导航栏提示词该怎么写。
基础极简风：Logo + 链接 + 行动按钮
最经典的黄金三段式结构，适合绝大多数 SaaS 官网、初创企业主页或个人作品集。
AI 提示词模板：
请为我的应用创建一个干净、现代、极简的水平导航栏组件。 布局结构：左侧放置 Logo，中间或偏右侧放置一组导航链接，最右侧放置一个清晰的、高权重的行动导向按钮（Primary CTA）。整体布局要均衡、克制，呈现出开箱即用的生产环境质感，避免过度装饰或显得拥挤。 设计规范：请严格参考我当前 UI 的视觉风格。匹配相同的配色方案、字体排版、边框圆角（Border Radius）、间距、按钮样式以及阴影，让导航栏无缝融入现有系统。Logo 区域要清晰且比例协调；导航链接需要易于扫视，保持合理的间距，并加上优雅的 Hover（悬停）微动效（如轻微变色、下划线淡入或背景微显）；CTA 按钮应比普通链接更醒目，使用品牌主色调，但视觉上不要过于激进。 响应式要求： - 桌面端：展示完整的水平布局。 - 平板与移动端：收纳所有链接，折叠成干净的汉堡菜单按钮或侧边抽屉。 - 如果移动端空间允许，保持 CTA 按钮可见，否则将其一并收入移动端菜单内。 代码要求：保持组件结构干净、可复用，避免不必要的代码嵌套，确保轻量与高性能。
完美对称：Logo 居中双分流导航
将 Logo 放置在正中央，链接对称排开，自带一种优雅、视觉平衡的艺术感，非常适合设计师主页、时尚创意品牌或高端独立站。
AI 提示词模板：
请创建一个干净、现代的导航栏组件，要求将 Logo 完美居中。 布局结构：将导航链接均匀地分列在 Logo 的左右两侧。例如，左边放 2-3 个链接，右边放 2-3 个链接，让整体视觉呈现出绝对的对称与平衡感。这种设计应当传递出优雅、极简和内敛的视觉调性。 设计规范：以我现有的 UI 界面为核心参考。完美适配现有的色板、字体、间距、圆角、阴影及悬停状态。中央的 Logo 要足够精致，绝不能显得过大。两侧链接的间距要保持绝对一致，Hover 时提供轻微的色彩渐变或胶囊状（Pill）的背景高亮。 响应式要求： - 桌面端：展示完整的中央 Logo 对称单行布局。 - 平板端：等比例平滑缩小链接间距，保持对称结构不发生错位。 - 移动端：将两侧链接折叠至汉堡菜单中，Logo 依然保持居中或根据最佳移动端视觉进行微调。 确保整体组件结构清晰、语义化标签完整，动态交互丝滑，产出高复用性的前端组件代码。
灵动现代：悬浮胶囊型导航
打破传统的置顶通栏设计，导航栏作为一个独立的“小胶囊”悬浮在页面上方，自带一种呼吸感和高级科技感，目前在 AI 工具和新锐 SaaS 网站中非常流行。
AI 提示词模板：
请为我的应用创建一个现代感十足的悬浮胶囊型（Floating Pill）导航栏。 布局结构：导航栏应当整体水平居中，并与页面顶部边缘保持一定的间距，呈现出轻盈脱离于页面内容之上的视觉效果。 设计规范：整个容器采用大圆角（Fully Rounded）设计，具备平滑的边缘过渡和恰到好处的内衬 padding。配以极细腻、柔和的弥散阴影，使其产生微微浮起的层级感。组件内包含品牌 Logo、导航链接以及一个选填的 CTA 按钮。视觉风格需与现有 UI 融为一体（字体、色系、按钮 hover 反馈保持一致）。激活的菜单项可以采用内部小胶囊背景包裹的形式。 响应式要求： - 桌面端：顶部正中悬浮展示。 - 平板端：紧凑化间距，确保胶囊形状不臃肿。 - 移动端：转化为一个更精简的悬浮窄胶囊（仅保留 Logo 和菜单图标），点击后向下展开或弹出一个悬浮的控制面板。 拒绝生硬的粗阴影和夸张的装饰，产出轻量、响应式且利于二次修改的组件代码。
杂志感大片：首屏半透明渐变导航
首屏加载时与背景图或大面积渐变融为一体，用户向下滚动时又会平滑地变成坚实的实体背景导航，是现代科技感、现代大图流网站的标配。
AI 提示词模板：
请创建一个现代导航栏组件，要求在页面加载时，以全透明状态完美叠加在 Hero（首屏）区域之上。 布局结构与动态行为：初始状态下，导航栏无背景色，文字和 Logo 应与 Hero 区域的背景形成高对比度，保持纯粹的通透与沉浸感。当用户向下滚动页面时，导航栏需要平滑、丝滑地过渡到实体或半实体（带毛玻璃 Backdrop Blur 效果）的背景，并同步显现出细微的底边框或阴影。 设计规范：完美承袭现有 UI 的设计语言（色调、字体、圆角和按钮样式）。 - 初始透明态：避免任何生硬的边框或阴影，文字颜色必须具备足够的无障碍对比度。 - 滚动后状态：背景色自动切换为应用的基准表面色（Surface Color），伴随顺畅的过渡动画（Transition），防止视觉突变。 响应式要求：桌面端展示全貌，移动端使用干净的菜单图标配合侧滑抽屉（Drawer），确保移动端在透明态和实体态下均能清晰易读。
高级极客风：聚焦命令面板的搜索型导航
将搜索框或快捷键命令面板（如
⌘K 触发器）作为绝对的主角放在最显眼的位置，常用于文档中心、开发者工具、管理后台以及强调效率的 AI 应用。
AI 提示词模板：
请创建一个现代导航栏组件，其视觉核心为位于正中央、极为醒目的“命令面板/搜索框（Command-Palette Input）”。 布局结构：左侧放置 Logo 或品牌名称，中间留给大面积的搜索框，两旁仅保留极少数的极简链接或功能图标，避免抢戏。 搜索框交互细节：输入框内包含提示词如“搜索任何内容...”或“查找文档、组件...”，并在输入框右侧内嵌一个精致的快捷键徽章（如 ⌘K 或 Ctrl K）。外观需具备柔和的边框、Hover 浅色提亮以及 Focus（聚焦）状态下的呼吸外发光圈。点击该输入框或按下快捷键时，应能模拟唤出一个干净的命令面板模态框（Modal）。 设计规范：严格匹配现有 UI 架构。响应式方面，桌面端保持大面积搜索框居中；平板端等比例缩窄；移动端则将长条输入框精简为一个优雅的搜索图标，点击后全屏展开搜索面板。
移动端原生体验：底部悬浮标签栏
当用户在手机端浏览你的 SaaS 后台或 Web App 时，顶部的导航往往很难触及，这时一套类似原生 App 的底部导航栏就显得尤为关键。
AI 提示词模板：
请为移动端或类 Web App 界面创建一个现代的底部标签导航栏（Bottom Tab Bar）。 布局结构：固定（Fixed）在视口最底部，不随页面滚动而位移。仅容纳 4-5 个核心功能项（例如：首页、搜索、控制台、收藏、个人中心）。每个项目由“一个清爽的线性图标 + 一行极简短的文字标签”上下组合而成。 设计规范：激活态必须通过品牌主色、实心图标或平滑的背景小气泡进行极高辨识度的标注，未激活态保持内敛的低饱和度。 - 布局必须考虑现代全面屏手机的底部安全区域（Safe Area Padding）。 - 触控区域（Tap Targets）要足够大，防止误触。 - 顶部加上一层极细的分割线或微弱的背阴影/毛玻璃。 特别注意：该组件仅在移动端（Mobile）激活显示。在平板和桌面端，请自动将其隐藏（Hidden），并无缝切换为系统常规的顶部或侧边导航栏。
后台长效利器：高效左侧立体边栏
仪表盘（Dashboard）、管理后台或 AI 工作台的绝对核心，支撑起复杂多层级的功能跳转与用户状态展示。
AI 提示词模板：
请为我的应用设计一个干净、现代的左侧纵向侧边导航栏（Sidebar Navigation）。 布局结构：固定在页面左侧，采用全高（Full-Height）通栏布局。顶部安置 Logo 区域；中间主体部分为纵向堆叠的导航菜单（图标 + 标签，如：仪表盘、项目、数据分析、消息中心、设置）；底部固定钉死一个用户账户区（包含圆形头像、用户昵称、邮箱/角色以及一个微小的下拉展开图标）。 设计规范：激活的菜单项需要有明显的视觉反馈，比如左侧带有一条品牌色的垂直指示线，或者整个背景呈平滑圆角卡片状高亮。整体间距要留白得当，便于高频快速扫视。 响应式适配（非常重要）： - 桌面端：展示完整的侧边栏。 - 平板端：可自动收缩为仅显示图标的紧凑型窄轨（Icon-only Rail）。 - 移动端：完全隐藏，改由页面左上角的汉堡按钮唤出，并以侧滑抽屉形式覆盖呈现。 - 同时确保主内容区域（Main Content Area）在各尺寸下都能平滑自适应，不发生遮挡。
巨量吞吐：大型巨幕菜单导航
当你的产品线极其丰富，或者有大量的解决方案、行业案例、学习资源需要展示时，常规的单列下拉菜单根本放不下。这时候，你需要一个撑满屏幕的“巨幕菜单”。
AI 提示词模板：
请创建一个现代导航栏组件，要求其特定菜单项支持全宽的“巨幕多列下拉菜单（Mega Menu Dropdown）”。 布局与交互：用户 Hover 或点击特定高阶链接时，下方平滑展开一个几乎平铺全屏宽度的巨大面板。面板内部绝对不是干巴巴的纵向列表，而是采用清晰的多列矩阵式排版（如：产品、解决方案、开发者资源、关于公司）。 细节控设计：每个子分类下除了醒目的加粗标题，下面的每个子链接都要配有一句极简的灰色功能描述（例如：『自动化：创建智能工作流，告别繁琐重复』）。允许在右侧或左侧留出一列，作为“特色推荐卡片”或“最新动态图文”，以提升转化率。整体需配备柔和的开合过渡动画，支持点击空白处自动收敛，并具备完美的键盘可访问性。
极度克制：转化专注型纯净登录页导航
用户在登录、注册、找回密码或进行新手引导（Onboarding）时，最忌讳被乱七八糟的外部链接带跑。这个导航栏只有一个目的：不干扰转化。 神马影院
AI 提示词模板：
请为一个登录、注册或新手引导页面，创建一个极简的纯净认证导航栏（Minimal Auth Navbar）。 布局结构：该组件要做到绝对的“免打扰”。左侧放置品牌 Logo，右侧仅保留一个与当前状态互补的、指向性明确的微动作。例如：如果当前是登录页，右侧显示一个“注册账户”按钮；如果是注册页，则显示“已有账号？立即登录”。彻底拿掉所有常规的业务导航链接（如产品、定价、关于我们等），把用户的注意力死死锁定在当前的表单上。 视觉要求：轻量、无背景或极浅背景，与主 UI 设计语言保持步调一致。移动端只需保留 Logo 和一个最核心的辅助动作按钮即可。
生产力核心：控制台顶部工具状态栏
它通常与左侧边栏配合出现，不承担大模块的跨越跳转，而是作为当前操作页面的“工具中枢”。
AI 提示词模板：
请为 Web 应用设计一个现代的控制台顶部状态栏（Dashboard Topbar Navbar）。 布局结构：横向置于主操作区域的最上方。左侧展示当前页面的标题或动态面包屑导航（Breadcrumb）；中间到右侧区域集结各种高频全局工具组件（如：极简搜索框、带红点未读提示的通知图标、深浅色主题切换开关、全局设置图标，以及最右侧的用户圆形头像下拉菜单）。 设计规范：整体高度要克制，不占用过多的垂直作业空间。使用与系统主体一致的字体、纤细的浅灰底边框。每个图标的 Hover 状态都要给出清晰但克制的反馈，下拉菜单（如点击头像弹出的个人中心、账单、退出登录）要带有平滑的渐入微动效。 响应式要求：桌面端功能全开；平板端隐藏次要的标签文字仅保留图标；移动端则将大部分工具项折叠进次级菜单，仅在首屏保留面包屑标题与头像。
第一部分的 10 个导航栏提示词到这里就全部聊完了。
正如我之前所说，写这个系列的目的绝对不是让大家把这些词机械地存起来，而是为了让大家在进行 AI “氛围感编程”时，能有一套拿来即用的高质量脚手架，从而成倍地提高写前端组件的效率。
你可以直接复制上面最契合你需求的某一段提示词，根据自己项目的具体名字、配色、技术栈（比如： 请用 Tailwind CSS 和 React 帮我实现...），在 v0、Lovable、Cursor 或 ? 各种 AI 编程助手里尽情测试。
另外，千万别把这些提示词当成死板的硬性规则。把它们当作一个高起点的底子，然后根据你自己应用的灵魂，去调整间距、色彩和交互吧。