夜雨聆风大家好，我是【考拉搞AI】，一个专注于 VibeCoding 分享 & AI 工程化 的博主。
之前我们用 uniapp-base-skill 盘点了列表页和详情页，小伙伴们反馈最多的就是：能不能把 登录页 和 底部 TabBar 也做成固定模板？
看上去不起眼，但是每套移动端项目最离不开的却是这两个模块，殊不知一个优秀高大上的登录页瞬间能加深第一印象。而进入具体的项目，个性化标准化的底部TaBar 仍然能给整体项目提升档次。
于是，这期的主题便是：登录页 和 底部 TabBar
所以这次博主直接肝出了：
7 套登录页 demo 5 种自定义 TabBar demo
全部基于 base-card 卡片容器 + uniapp-theme-skill 主题变量，打开即用，定制好自己的主题就能达到效果。
还是那句老话，与直接让AI 手搓相比，用技能来写这些页面有这些方面的优势：
1、 风格统一：便于统一调整，避免AI 放飞自我2、 节省Token：省去AI 自我思考时间3、 技能矩阵：结合多个相关技能，效果显著【主题系统提供统一主题、样式系统提供样式对齐、图片&icon系统能自动抓取或生产图片icon】
废话不多说，开整。
一、刚需登录页
打开任意 App，入口页面基本就这两类：
┌─────────────────────────┐
│ 登录页 │ ← Logo + 输入 + 按钮 + 第三方 + 协议
├─────────────────────────┤
│ 底部 TabBar │ ← 图标 + 文字 + 选中态 + 主操作
└─────────────────────────┘
登录页是用户进入 App 的第一道门，TabBar 是 App 的主导航骨架。
它们不像业务页面那样变化多端，反而高度可抽象。
于是我用 base-card 把它们全部卡片化：
Logo = 一个带渐变背景的卡片 输入框 = 一个带图标的卡片 登录按钮 = 一个全宽主色卡片 TabBar 项 = 一个图标+文字垂直排列的卡片 中间凸起 = 一个圆形主色卡片
一切皆卡片，组合出页面。
二、本次迭代——7 套登录页
1. 标准账号登录 —— login.html
特点：最通用，什么 App 都能用
┌─────────────────────────────────────┐
│ [◈] 考拉搞AI │
│ 登录即开启精彩体验 │
│ │
│ 账号 │
│ ┌────────────────────────────────┐ │
│ │ [用户图标] 请输入账号/手机号/邮箱│ │
│ └────────────────────────────────┘ │
│ │
│ 密码 │
│ ┌────────────────────────────────┐ │
│ │ [锁图标] 请输入密码 [眼睛] │ │
│ └────────────────────────────────┘ │
│ │
│ [☑] 记住我 忘记密码？ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 登 录 │ │
│ └────────────────────────────────┘ │
│ │
│ 还没有账号？立即注册 │
│ │
│ ─────── 第三方登录 ─────── │
│ [微信] [QQ] [微博] │
│ │
│ 登录即代表您同意《用户协议》... │
└─────────────────────────────────────┘
参数：
Logo：渐变方形 80px，圆角20px输入框：浅灰背景，圆角 12px登录按钮：渐变主色，圆角 12px第三方登录：圆形图标按钮
适用场景：通用 App、账号密码登录
2. 手机号验证码登录 —— login-phone.html
特点：手机号优先，验证码按钮内嵌
┌─────────────────────────────────────┐
│ 手机登录 │
│ 验证码将发送至您的手机号 │
│ │
│ 手机号 │
│ ┌────────────────────────────────┐ │
│ │ [手机图标] 请输入手机号 │ │
│ └────────────────────────────────┘ │
│ │
│ 验证码 │
│ ┌────────────────────────────────┐ │
│ │ [锁图标] 请输入验证码 [获取验证码]│ │
│ └────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 登 录 │ │
│ └────────────────────────────────┘ │
│ │
│ 也可以使用账号密码登录 │
│ │
│ 登录即代表您同意《用户协议》... │
└─────────────────────────────────────┘
参数：
验证码按钮：内嵌输入框右侧，胶囊边框按钮 登录按钮：渐变主色，圆角 12px
适用场景：手机号优先登录、短信验证场景
3. 微信一键登录风格 —— login-wechat.html
特点：微信生态专用，降低登录门槛
┌─────────────────────────────────────┐
│ ┌────┐ │
│ │ ◈ │ 考拉搞AI │
│ └────┘ 一键登录，即刻开始 │
│ │
│ ┌────────────────────────────────┐ │
│ │ [微信] 微信一键登录 │ │
│ └────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 手机号登录 │ │
│ └────────────────────────────────┘ │
│ │
│ ─────── 其他方式 ─────── │
│ [账号密码] [邮箱] │
│ │
│ 登录即代表您同意《用户协议》... │
└─────────────────────────────────────┘
参数：
Logo：白色方形 90px，圆角20px主按钮：微信绿 var(--color-wechat)，胶囊形次要按钮：白色背景 + 主色边框
适用场景：微信小程序、第三方授权登录
4. 极简清爽登录 —— login-minimal.html
特点：无圆角/小圆角、下划线输入框，工具类/B 端最爱
┌─────────────────────────────────────┐
│ [◈] 考拉搞AI │
│ │
│ 欢迎回来 │
│ 请登录您的账号 │
│ │
│ 账号 │
│ ________________________________ │
│ │
│ 密码 │
│ ________________________________ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 登 录 │ │
│ └────────────────────────────────┘ │
│ │
│ 忘记密码？ 注册账号 │
│ │
│ 登录即代表同意《用户协议》... │
└─────────────────────────────────────┘
参数：
输入框：下划线样式，聚焦变主色 登录按钮：直角主按钮，无投影
适用场景：工具类、B 端、极简风格产品
5. 动态渐变背景登录 —— login-gradient.html
特点：动态渐变 + 毛玻璃卡片，视觉冲击力强
┌─────────────────────────────────────┐
│ ╔═════════════════════════════════╗ │
│ ║ [◈] 考拉搞AI ║ │
│ ║ ║ │
│ ║ 欢迎 ║ │
│ ║ 登录以继续使用 ║ │
│ ║ ║ │
│ ║ ┌────────────────────────────┐ ║ │
│ ║ │ 账号 │ ║ │
│ ║ │ __________________________ │ ║ │
│ ║ │ 密码 │ ║ │
│ ║ │ __________________________ │ ║ │
│ ║ │ │ ║ │
│ ║ │ 登 录 │ ║ │
│ ║ │ 忘记密码 注册账号 │ ║ │
│ ║ └────────────────────────────┘ ║ │
│ ╚═════════════════════════════════╝ │
└─────────────────────────────────────┘
参数：
背景：动态渐变 + 浮动光晕动画 登录卡片：白色半透明 + backdrop-filter: blur(16px)输入框：下划线样式
适用场景：创意类、社交、年轻化品牌
6. 顶部主题图登录 —— login-hero.html
特点：大图 + 缓慢缩放 + 品牌感强
┌─────────────────────────────────────┐
│ ┌─────────────────────────────────┐ │
│ │ [图片背景 + 缓慢缩放动效] │ │
│ │ │ │
│ │ [◈] 考拉搞AI │ │
│ │ 让 AI 成为你的超级助手 │ │
│ └─────────────────────────────────┘ │
│ │
│ 账号 │
│ ┌────────────────────────────────┐ │
│ │ ______________________________ │ │
│ └────────────────────────────────┘ │
│ │
│ 密码 │
│ ┌────────────────────────────────┐ │
│ │ ______________________________ │ │
│ └────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 登 录 │ │
│ └────────────────────────────────┘ │
└─────────────────────────────────────┘
参数：
顶部主题图： 260px高度 + 渐变蒙层动效： scale(1)→scale(1.05)，15 秒周期输入框：浅灰背景，圆角 4px
适用场景：旅游、生活方式、需要品牌故事感的 App
7. 浮动圆形背景登录 —— login-float.html
特点：深色背景 + 浮动圆形 + 滑动切换登录方式
┌─────────────────────────────────────┐
│ ╔═════════════════════════════════╗ │
│ ║ ○ ○ ║ │
│ ║ ○ ○ ║ │
│ ║ ║ │
│ ║ ┌────┐ ║ │
│ ║ │ ◈ │ 考拉搞AI ║ │
│ ║ └────┘ 让 AI 成为你的超级助手 ║ │
│ ║ ║ │
│ ║ ┌────────────────────────────┐ ║ │
│ ║ │ [微信登录] [手机号登录] │ ║ │
│ ║ │ │ ║ │
│ ║ │ ┌──────────────────────┐ │ ║ │
│ ║ │ │ 微信一键登录 │ │ ║ │
│ ║ │ └──────────────────────┘ │ ║ │
│ ║ │ 点击上方按钮授权登录 │ │ ║ │
│ ║ └────────────────────────────┘ ║ │
│ ╚═════════════════════════════════╝ │
└─────────────────────────────────────┘
参数：
背景：深色渐变 + 4 个浮动圆形 Logo：毛玻璃方块 88px，圆角12px切换：Tab 点击 + 左右手势滑动
适用场景：社交、内容、社区类 App
三、本次迭代——5 种自定义 TabBar
1. 标准图标文字 TabBar —— standard.html
特点：最经典，图标 + 文字，顶部一条细线
┌─────────────────────────────────────┐
│ │
│ [首页] [发现] [消息] [我的] │
│ 🏠 ⭐ 💬 👤 │
└─────────────────────────────────────┘
参数：
高度 64px图标 22px+ 文字11px安全区： padding-bottom: env(safe-area-inset-bottom)
适用场景：通用型 App，不知道用哪种就用它
2. 中间凸起 TabBar —— bulge.html
特点：中间发布按钮突出，视觉焦点明确
┌─────────────────────────────────────┐
│ │
│ [首页] [探索] [+] [商城] [我的]│
│ ↑ │
│ 圆形主色发布按钮 │
└─────────────────────────────────────┘
参数：
顶部圆角 24px中间按钮：圆形 56px，主色渐变伪元素圆形背景营造凸起效果
适用场景：内容创作、社区、需要强发布入口的 App
3. 毛玻璃背景 TabBar —— blur.html
特点：半透明毛玻璃，悬浮在内容之上
┌─────────────────────────────────────┐
│ │
│ [首页] [发现] [▶] [喜欢] [我的] │
│ ═════════════════════════════════ │
│ 半透明毛玻璃背景 + 圆角顶部 │
└─────────────────────────────────────┘
参数：
backdrop-filter: blur(20px)顶部圆角 24px中间主色播放按钮
适用场景：音乐、媒体、需要高级感的 App
4. 悬浮药丸 TabBar —— floating-pill.html
特点：居中悬浮胶囊，点击有 active 切换效果
┌─────────────────────────────────────┐
│ │
│ ┌───────────────────┐ │
│ │ [首页] [运动] [我]│ │
│ └───────────────────┘ │
│ 悬浮药丸容器 │
└─────────────────────────────────────┘
参数：
border-radius: 999px毛玻璃背景 active 项：主色背景 + 白色文字
适用场景：健康、生活、工具类 App
5. AI 助手分栏 TabBar —— assistant-split.html
特点：左侧独立 AI 助手入口 + 右侧连体工具组
┌─────────────────────────────────────┐
│ │
│ [AI头像] ┌────┬────┬────┐ │
│ 脉冲圈 │待办│数据│我的│ │
│ └────┴────┴────┘ │
│ │
└─────────────────────────────────────┘
参数：
左侧 AI 按钮： 56px圆形 + 脉冲呼吸圈动画右侧工具组：药丸连体容器
适用场景：AI 助手、健康管理、智能陪伴类 App
四、统一风格：卡片 + 主题变量
这 12 个入口模板（7 登录 + 5 TabBar）延续了 uniapp-base-skill 的统一设计语言：
base-card | ||
var(--radius-lg)var(--radius-md) | ||
var(--color-primary) | ||
env(safe-area-inset-bottom) |
为什么要统一？
好看：一套设计语言贯穿始终 高效：参数复用，AI 输出稳定 好改：换主题只改变量
所有模板都严格参照 uniapp-theme-skill 主题变量系统。
五、技能矩阵：黄金搭档
uniapp-base-skill 不是孤立生成入口页面的，它是 uniapp 技能矩阵的核心入口。每次生成页面时，默认和下面 5 个技能协同工作：
| uniapp-theme-skill | var(--*)，禁止写死 | |
| uniapp-style-skill | ||
| frontend-style-harmonizer-skill | ||
| icon-catch-skill | ||
| image-catch-skill | ||
| image-forge-skill |
标准工作流
1. /uniapp-base-skill 选择登录页/TabBar 模板，生成页面骨架
2. /uniapp-theme-skill 确认主题色、圆角、间距变量
3. /icon-catch-skill 抓取登录页/TabBar 图标
4. /image-catch-skill 抓取主题图/头像等真实图片
5. /image-forge-skill 生成/压缩/裁剪素材（按需）
6. /uniapp-style-skill 审查设计系统合规性
7. /frontend-style-harmonizer-skill 审查跨页面样式一致性
8. 组合输出，微调业务字段
一句话：**uniapp-base-skill 负责出骨架，其他技能负责让骨架合法、好看、能落地到生产环境。**
六、提示词案例
登录页
# 标准账号登录
/uniapp-base-skill 做一个标准登录页，Logo + 账号密码输入框 + 登录按钮 + 第三方登录
# 手机号登录
/uniapp-base-skill 做一个手机号验证码登录页
# 微信一键登录
/uniapp-base-skill 做一个微信一键登录页
# 极简登录
/uniapp-base-skill 做一个极简清爽登录页
# 渐变登录
/uniapp-base-skill 做一个动态渐变背景登录页
# 主题图登录
/uniapp-base-skill 做一个顶部主题图登录页
# 浮动背景登录
/uniapp-base-skill 做一个深色浮动圆形背景登录页，带登录方式切换
TabBar
# 标准 TabBar
/uniapp-base-skill 做一个标准底部 TabBar，图标 + 文字
# 中间凸起 TabBar
/uniapp-base-skill 做一个中间凸起的 TabBar，带发布按钮
# 毛玻璃 TabBar
/uniapp-base-skill 做一个毛玻璃背景底部 TabBar
# 悬浮药丸 TabBar
/uniapp-base-skill 做一个悬浮药丸形状的 TabBar
# AI 助手分栏 TabBar
/uniapp-base-skill 做一个 AI 助手分栏 TabBar，左侧助手入口 + 右侧工具组
七、主题变量
所有模板都使用 uniapp-theme-skill 的主题变量：
圆角： var(--radius-lg)、var(--radius-md)、var(--radius-full)间距： var(--space-3)、var(--space-4)、var(--space-5)阴影： var(--shadow-sm)、var(--shadow-md)颜色： var(--color-primary)、var(--color-bg)、var(--color-surface)、var(--color-wechat)
想换主题？改一行 CSS 变量即可！
城市套路深
这次新增：
7 套登录页模板：标准 / 手机号 / 微信 / 极简 / 渐变 / 主题图 / 浮动背景 5 种自定义 TabBar：标准 / 中间凸起 / 毛玻璃 / 悬浮药丸 / AI 助手分栏
覆盖了 App 入口页面的绝大部分场景。
加上之前的 6 类列表页 + 6 类详情页，uniapp-base-skill 已经能搞定小程序里 80% 的常见页面骨架。
核心思想一直没变：一切皆卡片，组合出页面。
但模板只有和技能矩阵配合，才能真正跑在生产环境里。别忘了五个黄金搭档：
uniapp-theme-skill —— 统一样式变量，换风格一行搞定 icon-catch-skill —— 抓专业图标，拒绝丑 emoji image-catch-skill —— 抓真实图片，拒绝大白块 uniapp-style-skill —— 设计系统审查，保证单页面合规 frontend-style-harmonizer-skill —— 跨页面样式治理，保证项目整体一致
image-forge-skill 作为素材后处理兜底，负责生成缺失图标、压缩裁剪图片。
另外，小伙伴们也要注意，这些内容并不完美更不能覆盖所有业务场景，它的价值有三点：
规范化页面，对于各类页面页面设计感要求不高的场景下，一键使用，能大大 提高开发效率，节省Token;配合主题和相关规范，达到我们 VibeCoding的终极奥义——一切皆规范；提供设计思路，小伙伴完全可以自行总结迭代，无论是前端页面，还是后端架构还是数据库架构，搞过一遍之后，尤其是针对毫无编程开发基础的童鞋们来说，也能照葫芦画瓢总结出一整套规范来，这才是最有价值的！
后续还会继续迭代更多模板，敬请期待！
仓库地址：https://github.com/jiushiwon/wg-skills/tree/main/uniapp-base-skill
喜欢的童鞋一定要点赞收藏转发！
我是【考拉搞AI】，我们下期再见！
一天一个SKILL——uniapp + APP 【卡片组件】升级：样式对齐+主题统一+智能抓取图片/icon:六大【详情页】覆盖80%场景， 大大节省Token！
感兴趣的童鞋，无论是古法程序员，还是纯小白，都欢迎一起进入VibeCoding 的世界：
