数字能量学 AI 智能体 — 前端样式指南

适用于 UniApp (Vue 3) 微信小程序前端对齐 design-taste-frontend 参数：DESIGN_VARIANCE=8 / MOTION_INTENSITY=6 / VISUAL_DENSITY=4

一、品牌定位

数码能量学 — 用数字能量学 + AI 解读，帮助用户了解自己的命盘。

维度	描述
调性	神秘、专业、可信赖、不过度玄学
视觉关键词	深邃/金/墨蓝/卡片质感/呼吸感留白/微动效
目标用户	25-45岁，对数字能量学感兴趣，寻求职业/财运/感情指导
竞品差异	专业度（vs 娱乐命理类）+ AI 深度（vs 传统手绘）

二、色彩系统

2.1 主色调

色名	色值	用途	说明
墨蓝	`#1E3A5F`	品牌主色（深蓝）	导航栏、标题、品牌背景
暗金	`#C9A84C`	品牌点缀（金色）	数字能量主题色、VIP标记、CTA强调
矿白	`#F8F6F1`	页面背景（暖白）	所有页面的主背景色
纯白	`#FFFFFF`	卡片背景	所有卡片容器的底色

2.2 辅助色

色名	色值	用途
翡翠绿	`#2D8B67`	成功、已支付、已结算
琥珀黄	`#D4A017`	警告、待支付、种子价标记
珊瑚红	`#D94A4A`	错误、已过期、删除操作
冰川蓝	`#4A90D9`	链接、跳转、次要CTA

2.3 中性色

色名	色值	用途
墨黑	`#1A1A2E`	主文字
石板灰	`#4A5568`	次文字、描述
银灰	`#A0AEC0`	占位符、禁用态
雾白	`#E2E8F0`	分割线、边框
骨白	`#F7F4EF`	卡片背景（次）

2.4 命盘数字色

1（创造/自主）:  #D94A4A  · 赤红
2（合作/平衡）:  #4A90D9  · 冰蓝
3（表达/创意）:  #E8A238  · 琥珀
4（稳定/规则）:  #2D8B67  · 翡翠
5（自由/变化）:  #D4A017  · 金
6（关怀/责任）:  #7B6FA0  · 紫灰
7（分析/灵性）:  #4A6FA5  · 靛蓝
8（权力/财富）:  #C9A84C  · 暗金
9（智慧/完成）:  #B85C3A  · 铜橙

2.5 色值使用约束

禁止 #000000：文字使用 #1A1A2E 而非纯黑
禁止饱和色大面积使用：主色墨蓝饱和度已控制，避免视觉疲劳
AI 蓝紫禁令：不使用标准 AI 产品的蓝紫色渐变（与竞品拉开差异）

三、字体系统

3.1 字族

微信小程序仅支持系统字体，无法自定义引入 web font：

// 中文
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
             'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;

// 数字（命盘数据场景）
font-family: 'Georgia', 'Times New Roman', serif;
/* 命盘中的关键数字使用衬线字体，与 UI 文字形成对比，强调"数字"的庄重感 */

3.2 字号层级

层级	字号	字重	行高	场景
H1	24px	700	1.3	页面标题、命盘页主数字
H2	20px	700	1.4	卡片标题、模態標題
H3	18px	600	1.4	区块小标题
Body	15px	400	1.6	正文、解读内容
Caption	13px	400	1.4	辅助文字、标签
Micro	11px	400	1.3	角标、时间戳

3.3 字号规范

最小可读字号：11px（角标场景），正文不低于 15px
按钮文字：16px（主按钮）、14px（次按钮）
弹窗标题：18px bold
金额数字：使用 700 字重，字体加宽强调

四、间距与布局

4.1 基准间距

$space-xxs: 4px;
$space-xs:  8px;
$space-sm:  12px;
$space-md:  16px;
$space-lg:  24px;
$space-xl:  32px;
$space-2xl: 48px;

4.2 页面布局规范

┌─────────────────────┐
│  NavBar（原生）      │  44px（微信原生）
├─────────────────────┤
│                     │
│  内容区域            │  padding: 0 $space-md
│  ┌───────────────┐  │
│  │  卡片 1        │  │  margin-bottom: $space-md
│  │               │  │
│  └───────────────┘  │
│  ┌───────────────┐  │
│  │  卡片 2        │  │
│  └───────────────┘  │
│                     │
├─────────────────────┤
│  TabBar（原生）      │  50px（微信原生）
└─────────────────────┘

4.3 卡片规范

属性	值
背景色	`#FFFFFF`
圆角	`16px`（大卡片）/ `12px`（小卡片）
内边距	`20px`（上下）/ `16px`（左右）
阴影	`0 2px 12px rgba(26, 26, 46, 0.06)` — 扩散阴影，轻盈
边框	无边框，仅通过阴影和背景分离

卡片容器标准 CSS：

.card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
}

4.4 布局模式

根据 DESIGN_VARIANCE = 8，优先使用非对称布局：

首页：输入区域居中（强引导），结果预览区错开排列
命盘页：三角图居中，AI 解读区左对齐，订阅入口通栏
分销面板：顶部统计三列等宽，下方列表通栏（数据密集型简化）
个人中心：头像居中，下方功能列表通栏

五、组件视觉规范

5.1 按钮

类型	背景	文字	圆角	高度	场景
主按钮	`#1E3A5F`	`#FFFFFF`	`12px`	`48px`	支付、开通、保存
行动按钮	`#C9A84C`	`#FFFFFF`	`12px`	`44px`	生成命盘、立即推广
次要按钮	`#FFFFFF` + 1px `#E2E8F0` 边框	`#1A1A2E`	`10px`	`40px`	取消、返回
文字按钮	透明	`#4A90D9`	—	`auto`	链接、跳转

交互反馈：

button:active {
  transform: scale(0.97);
  opacity: 0.9;
}

所有按钮的 :active 状态必须有视觉反馈（缩小 + 透明度变化），模拟物理按压感。

禁用态：

button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

5.2 输入框

┌─────────────────────────┐
│  姓名（选填）              │  label(14px, #4A5568)
│  ┌─────────────────────┐ │
│  │ 请输入姓名           │ │  input(16px, 44px height)
│  └─────────────────────┘ │  8px border-radius, 1px #E2E8F0 border
│                          │
│  出生年份                  │
│  ┌─────────────────────┐ │
│  │ 例如 1990           │ │
│  └─────────────────────┘ │
│                          │
│  月份        日期          │  水平并排
│  ┌─────────┐ ┌─────────┐│
│  │ 1-12    │ │ 1-31    ││
│  └─────────┘ └─────────┘│
└─────────────────────────┘

焦点态： border-color: #1E3A5F + box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1) 错误态： border-color: #D94A4A + 底部红色提示文字

5.3 标签（Tag）

类型	背景	文字	场景
成功	`#E6F7EE`	`#2D8B67`	已结算、已支付
警告	`#FFF8E6`	`#D4A017`	待支付、种子价
信息	`#EBF2FA`	`#4A90D9`	L1 佣金
次要	`#F0EEEA`	`#7B6FA0`	L2 佣金
金牌	`#FFF6E0` + `#C9A84C` border	`#8B6914`	VIP、能量师

圆角： 6px，内边距 4px 10px，字号 12px

5.4 状态指示

加载态：原生页面级 loading + 区块骨架屏（灰色渐变脉冲动画）
空数据态：居中灰色图标 + 14px 灰文字提示 + 引导操作按钮
错误态：内联红色提示（输入错误）/ 页面级错误重试按钮（网络错误）
成功态：uni.showToast success 图标 + 文字

5.5 骨架屏规范

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #F0EEEA 25%, #F8F6F1 50%, #F0EEEA 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

骨架片尺寸匹配实际内容区域（不额外创建包装盒）。

六、各页面视觉设计

6.1 首页 — 信息输入

┌─────────────────────┐
│  数码能量学           │  NavBar（品牌色 #1E3A5F，白色文字）
├─────────────────────┤
│                     │
│  ┌───────────────┐  │
│  │               │  │
│  │  🔮 输入出生   │  │  中心卡片（背景白，最大宽度）
│  │  信息          │  │
│  │               │  │
│  │  姓名（选填）    │  │
│  │  ┌─────────┐   │  │
│  │  │         │   │  │
│  │  └─────────┘   │  │
│  │  出生年月日     │  │
│  │  ┌──┐ ┌──┐    │  │
│  │  │年│ │月│ │日│  │  │
│  │  └──┘ └──┘    │  │
│  │               │  │
│  │  ┌─────────┐  │  │
│  │  │ 生成命盘  │  │  行动按钮（金色）
│  │  └─────────┘  │  │
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │  ✦ 功能介绍    │  │  轻量卡片，展示 3 个功能点
│  │  命盘/AI/分享  │  │  水平排列，图标+文字
│  └───────────────┘  │
│                     │
├─────────────────────┤
│  首页│命盘│AI│我的   │  TabBar
└─────────────────────┘

设计要点：

NavBar 使用墨蓝底色，标题白色，返回箭头白色
输入卡片置中，四周留呼吸空间
功能引导卡片使用浅灰色圆角图标 + 文字
生成命盘按钮使用金色 #C9A84C，与品牌名呼应

6.2 命盘解读页

┌─────────────────────┐
│  ← 数字能量命盘      │  NavBar（透明背景，白色返回箭头）
├─────────────────────┤
│  ┌───────────────┐  │
│  │      O        │  │
│  │    J   K      │  │  三角图（Canvas居中）
│  │  F  G  H  I   │  │  圆角数字卡片，按类型着色
│  │ A B C D E     │  │
│  └───────────────┘  │
│  姓名：张三           │
│  1990-01-15          │  灰色小字
│                     │
│  ─── 数字说明 ───    │
│  主性格 7：分析洞察    │  可折叠解释区域
│  1号位：独立          │
│                     │
│  ┌───────────────┐  │
│  │  AI 解读       │  │
│  │  ┌─────────┐  │  │  AI 消息气泡
│  │  │ AI文字...│  │  │  白色气泡（AI）/ 蓝色气泡（用户）
│  │  └─────────┘  │  │
│  │  [职业] [财运] │  │  快速提问芯片
│  │  ┌─────┐ [发]│  │  输入框 + 发送按钮
│  │  │输入..│     │  │
│  │  └─────┘     │  │
│  └───────────────┘  │
│                     │
│  ═══════════════════ │  虚线分隔
│                     │
│  ┌───────────────┐  │
│  │  🔮 AI解读会员  │  │  订阅引导卡片（未付费可见）
│  │  ¥131/年       │  │
│  │  解锁完整分析    │  │
│  │  ┌─────────┐  │  │
│  │  │ 立即开通  │  │  │  金色按钮
│  │  └─────────┘  │  │
│  └───────────────┘  │
│                     │
│  ─── 数字点击弹窗 ─── │
│  ┌─────────────────┐│
│  │    7            ││  底部弹出面板
│  │  主性格          ││  圆角顶部，毛玻璃效果
│  │  分析洞察、...   ││
│  │  ─────────────  ││
│  │  1号位：独立自主  ││
│  └─────────────────┘│
├─────────────────────┤
│  首页│命盘│AI│我的   │
└─────────────────────┘

设计要点：

三角图区域上下留白，不紧贴文字
AI 解读采用微信消息气泡样式（白色 vs 蓝色）
快速提问芯片使用 #EBF2FA 背景 + #1E3A5F 文字
底部订阅卡片与 AI 区域用虚线分隔
数字点击弹窗从底部上滑，顶部圆角 20px

6.3 AI 解读页

┌─────────────────────┐
│  AI 命盘解读         │
├─────────────────────┤
│                     │
│  ┌───────────────┐  │
│  │  主性格        │  │  章节卡片
│  │  7 · 分析洞察  │  │  标题金色小方块标记
│  │  ...          │  │  正文 15px，行高 1.8
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │  左区（0-20岁） │  │  可折叠
│  │  ...          │  │  展开/收起箭头
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │  中区（20-40岁） │  │
│  └───────────────┘  │
│                     │
│  本解读由 AI 生成，    │  免责声明（11px 灰色居中）
│  仅供参考             │
│                     │
│  ┌───────────────┐  │
│  │  ¥131 开通完整   │  │  固定底部（未付费）
│  │  解读           │  │  金色渐变
│  └───────────────┘  │
│                     │
├─────────────────────┤
│  TabBar              │
└─────────────────────┘

设计要点：

每章节为一个独立的白色卡片，用阴影分隔
章节标题左侧有 3px 宽的 #C9A84C 色条（border-left: 3px solid #C9A84C）
可折叠章节默认展开第一个，其余折叠
免费用户底部固定一个金色渐变条

6.4 分销面板

┌─────────────────────┐
│  分销中心          ← │
├─────────────────────┤
│                     │
│  ┌───────────────┐  │
│  │ 我的推广码      │  │  推广码卡片
│  │ ABC123   [复制] │  │  码用 18px 等宽字体
│  │ [生成推广海报 →] │  │
│  └───────────────┘  │
│                     │
│  ┌─────┐┌─────┐┌─────┤
│  │总收益││可提现││今日  │  三列等宽统计卡片
│  │¥500 ││¥500 ││¥0   │  数字墨黑，标签银灰
│  └─────┘└─────┘└─────┘
│                     │
│  团队统计              │  标题(14px, #4A5568)
│  直接 5   间接 12  升级 3│  三列数字(24px bold) + 标签
│                     │
│  ┌───────────────┐  │
│  │ 佣金明细       │  │
│  │ 05-28 用户**** │  │
│  │    L1    +¥500 │  │  L1蓝标签，金额绿色
│  │ 05-27 用户**** │  │
│  │    L2    +¥100 │  │  L2紫标签
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │ 📱 生成推广海报  │  │  按钮列表（通栏）
│  │ 🔗 复制推广链接  │  │  左边图标+文字，右边箭头
│  │ 📊 提现(即将开放) │  │  置灰不可点
│  └───────────────┘  │
│                     │
├─────────────────────┤
│  TabBar              │
└─────────────────────┘

设计要点：

推广码使用等宽字体（font-family: monospace），与 UI 文字区分
统计数字使用 28px 700 字重，突出数据
佣金列表每项用 1px #E2E8F0 分割线分隔
L1 标签蓝色，L2 标签紫色，与佣金等级对应

6.5 个人中心

┌─────────────────────┐
│  我的                │
├─────────────────────┤
│                     │
│  ┌───────────────┐  │
│  │   (头像)       │  │  用户卡片(居中)
│  │   张三          │  │  16px bold
│  │   🔮 能量师会员  │  │  金色VIP标记
│  │   有效期至...    │  │
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │  📋 我的分析    ›│  │  功能菜单列表
│  │  💰 我的推广    ›│  │  仅能量师可见
│  │  ℹ️ 关于我们    ›│  │
│  └───────────────┘  │
│                     │
│  ┌───────────────┐  │
│  │  退出登录       │  │  红色文字
│  └───────────────┘  │
│                     │
├─────────────────────┤
│  TabBar              │
└─────────────────────┘

设计要点：

头像使用大圆角（50%），带 2px #C9A84C 边框（VIP 用户）
功能菜单每个 item 使用 1px 底部分割线
右侧箭头 #A0AEC0
VIP 标记使用 #FFF6E0 背景 + #C9A84C 文字

七、交互动效规范

7.1 通用动效

场景	动效	持续时间	曲线
页面跳转	微信原生 Slide	300ms	默认
按钮按压	`scale(0.97)`	100ms	ease-out
弹窗出现	底部上滑 + 背景淡入	300ms	`cubic-bezier(0.16, 1, 0.3, 1)`
弹窗关闭	下滑 + 背景淡出	250ms	ease-in
Tag 出现	`scale(0.8→1)` + 淡入	200ms	spring(80, 12)
数字变化	计数器从旧值滚动到新值	400ms	ease-out
骨架屏	灰色渐变位移	1.5s infinite	ease-in-out

7.2 页面过渡

进入: translateX(100%) → 0    300ms  ease-out
退出: 0 → translateX(30%) + 淡出  250ms  ease-in

UniApp 通过 pages.json 配置：

{
  "globalStyle": {
    "navigationBarTitleText": "数字能量学",
    "navigationBarBackgroundColor": "#1E3A5F",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#F8F6F1",
    "app-plus": {
      "animation": {
        "duration": 300,
        "type": "slide-in-right"
      }
    }
  }
}

7.3 微交互

数字复制：点击复制按钮 → 按钮短暂显示"已复制" + 绿色闪烁
支付成功：Toast 后 1.5s 自动跳转
下拉刷新：微信原生下拉刷新，加载完成震动反馈
空数据点击：点击空数据区域 → 提示跳转引导
佣金列表加载：列表项依次淡入（animation-delay 级联）

八、微信小程序专项规范

8.1 NavBar（导航栏）

由于微信小程序不支持自定义 NavBar（非侵入式），统一使用原生的 navigationBar：

{
  "globalStyle": {
    "navigationBarBackgroundColor": "#1E3A5F",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "数码能量学"
  }
}

页面	标题	背景色	文字色
首页	数码能量学	`#1E3A5F`	white
命盘解读	数字能量命盘	`#1E3A5F`	white
AI解读	AI 命盘解读	透明（自定义头）	—
分销面板	分销中心	`#1E3A5F`	white
个人中心	我的	`#1E3A5F`	white
支付页	确认支付	`#1E3A5F`	white

8.2 TabBar（标签栏）

{
  "tabBar": {
    "color": "#A0AEC0",
    "selectedColor": "#1E3A5F",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "list": [
      { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tab/home.png", "selectedIconPath": "static/tab/home-active.png" },
      { "pagePath": "pages/chart/index", "text": "命盘", "iconPath": "static/tab/chart.png", "selectedIconPath": "static/tab/chart-active.png" },
      { "pagePath": "pages/records/index", "text": "分析", "iconPath": "static/tab/records.png", "selectedIconPath": "static/tab/records-active.png" },
      { "pagePath": "pages/profile/index", "text": "我的", "iconPath": "static/tab/profile.png", "selectedIconPath": "static/tab/profile-active.png" }
    ]
  }
}

8.3 触摸区域

最小可点击区域：44px × 44px（微信官方推荐）
列表项：高度至少 48px
底部按钮：固定到页面底部时，距离底边 34px（适配 Home Indicator）
弹窗关闭：点击弹窗外部灰色遮罩层关闭

8.4 安全区域适配

// 使用 WeChat CSS 变量适配刘海屏 / Home Indicator
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom); // iOS 11.0-11.2
  padding-bottom: env(safe-area-inset-bottom);       // iOS 11.2+
}

// 底部固定按钮
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  padding-bottom: calc(16px + constant(safe-area-inset-bottom));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: #FFFFFF;
}

九、组件库（参考实现）

Button.vue — 按钮组件

<template>
  <button
    class="btn"
    :class="[`btn--${type}`, `btn--${size}`, { 'btn--block': block, 'btn--disabled': disabled }]"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <slot />
  </button>
</template>

<style scoped lang="scss">
.btn {
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  &--primary {
    background: #1E3A5F;
    color: #FFFFFF;
    height: 48px;
    padding: 0 24px;
  }

  &--gold {
    background: #C9A84C;
    color: #FFFFFF;
    height: 44px;
    padding: 0 20px;
  }

  &--outline {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1A1A2E;
    height: 40px;
  }

  &--text {
    background: transparent;
    color: #4A90D9;
    height: auto;
    padding: 0;
  }

  &--block {
    width: 100%;
  }

  &--large { height: 48px; font-size: 16px; }
  &--medium { height: 44px; font-size: 15px; border-radius: 10px; }
  &--small { height: 36px; font-size: 13px; border-radius: 8px; padding: 0 16px; }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
</style>

十、图片与图标

10.1 命盘分享海报

尺寸：750px × 1000px（微信分享卡片标准）
背景：深蓝到墨蓝渐变 linear-gradient(135deg, #1E3A5F, #162A45)
内容：命盘三角图（金色线框）+ 用户昵称 + 出生日期 + 品牌 Logo + 小程序码
文案：底部"扫码查看你的数字命盘"

10.2 推广海报

尺寸：750px × 1334px（朋友圈长图）
背景：金色到深蓝渐变 linear-gradient(180deg, #C9A84C 0%, #1E3A5F 100%)
内容：用户头像 + 昵称 + 推广码 + 小程序码 + "扫码免费测命盘"

10.3 TabBar 图标

格式：PNG，48px × 48px（iOS）/ 54px × 54px（Android）
风格：线性图标，2px 描边，圆角
选中态：填充 + 品牌色 #1E3A5F
未选中：线性 + 灰色 #A0AEC0

十一、现有的 uni.scss 变量更新

/* ========================================
   数字能量学 AI 智能体 — SCSS 变量文件
   覆盖 uni.scss
   ======================================== */

/* —— 品牌色 —— */
$brand-dark:    #1E3A5F;
$brand-gold:    #C9A84C;
$brand-offwhite:#F8F6F1;

/* —— 功能色 —— */
$color-success: #2D8B67;
$color-warning: #D4A017;
$color-danger:  #D94A4A;
$color-link:    #4A90D9;

/* —— 中性色 —— */
$text-primary:   #1A1A2E;
$text-secondary: #4A5568;
$text-tertiary:  #A0AEC0;
$border-light:   #E2E8F0;
$card-bg:        #FFFFFF;
$page-bg:        #F8F6F1;

/* —— 字号 —— */
$font-h1:    24px;
$font-h2:    20px;
$font-h3:    18px;
$font-body:  15px;
$font-caption: 13px;
$font-micro: 11px;

/* —— 间距 —— */
$space-xxs: 4px;
$space-xs:  8px;
$space-sm:  12px;
$space-md:  16px;
$space-lg:  24px;
$space-xl:  32px;
$space-2xl: 48px;

/* —— 圆角 —— */
$radius-sm:  6px;
$radius-md:  10px;
$radius-lg:  16px;
$radius-xl:  20px;
$radius-full: 999px;

/* —— 阴影 —— */
$shadow-card: 0 2px 12px rgba(26, 26, 46, 0.06);
$shadow-modal: 0 -4px 20px rgba(26, 26, 46, 0.1);

/* —— 动效曲线 —— */
$ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
$ease-out:    ease-out;
$ease-in:     ease-in;

/* —— 命盘数字色（9个数字对应色） —— */
$num-colors: (
  1: #D94A4A,  /* 赤红 — 创造/自主 */
  2: #4A90D9,  /* 冰蓝 — 合作/平衡 */
  3: #E8A238,  /* 琥珀 — 表达/创意 */
  4: #2D8B67,  /* 翡翠 — 稳定/规则 */
  5: #D4A017,  /* 金   — 自由/变化 */
  6: #7B6FA0,  /* 紫灰 — 关怀/责任 */
  7: #4A6FA5,  /* 靛蓝 — 分析/灵性 */
  8: #C9A84C,  /* 暗金 — 权力/财富 */
  9: #B85C3A,  /* 铜橙 — 智慧/完成 */
);

十二、设计检查清单

使用此清单确保每个页面的实现符合本指南：

背景色为 #F8F6F1（矿白），非纯白
卡片背景 #FFFFFF，圆角 16px，使用 shadow-card 阴影
主按钮使用 #1E3A5F，行动按钮使用 #C9A84C（金色仅用于关键行动）
字体未使用 Web Font，全部使用系统字族
字号严格遵循层级规范（15px body / 13px caption / 11px micro）
所有可点击区域 ≥ 44px
按钮有 :active 缩放反馈（scale: 0.97）
底部固定内容适配安全区域（safe-area-inset-bottom）
空数据/加载/错误三态均已覆盖
无 #000000 纯黑，无饱和度过高的颜色
无 emoji 直接使用（使用图标替代）
TabBar 未选中灰色 #A0AEC0，选中品牌色 #1E3A5F
NavBar 统一墨蓝底色白色文字
命盘数字使用九色体系着色

style-guide.md 28 KB История Исходник

数字能量学 AI 智能体 — 前端样式指南

一、品牌定位

二、色彩系统

2.1 主色调

2.2 辅助色

2.3 中性色

2.4 命盘数字色

2.5 色值使用约束

三、字体系统

3.1 字族

3.2 字号层级

3.3 字号规范

四、间距与布局

4.1 基准间距

4.2 页面布局规范

4.3 卡片规范

4.4 布局模式

五、组件视觉规范

5.1 按钮

5.2 输入框

5.3 标签（Tag）

5.4 状态指示

5.5 骨架屏规范

六、各页面视觉设计

6.1 首页 — 信息输入

6.2 命盘解读页

6.3 AI 解读页

6.4 分销面板

6.5 个人中心

七、交互动效规范

7.1 通用动效

7.2 页面过渡

7.3 微交互

八、微信小程序专项规范

8.1 NavBar（导航栏）

8.2 TabBar（标签栏）

8.3 触摸区域

8.4 安全区域适配

九、组件库（参考实现）

Button.vue — 按钮组件

十、图片与图标

10.1 命盘分享海报

10.2 推广海报

10.3 TabBar 图标

十一、现有的 uni.scss 变量更新

十二、设计检查清单

style-guide.md 28 KB

История Исходник