一天一个SKILL—— uniapp-style-skill 版本迭代:9阶默认配色 + 6个 动画 + 5套页面布局 页面布局更加精细

前几天发布了 uniapp-style-skill，定位是纯样式层设计系统规范。 已经解决了一些 问题——Design Tokens 架构、34 条红线规则、15 个核心组件规范、深色模式、屏幕适配、设计审计。

当然咯，一个版本无法解决所有问题，这几天 又总结了一些：

1. 默认色少了张总览图——文字色、背景色、边框色散落在三节里，童鞋们看不懂默认灰度体系
2. 动画类&组件Token不丰富——增加更多组件既定样式；给了时长和缓动曲线，但开发者还得自己写 @keyframes，10 个页面写出 10 种 fade-in
3. 没有页面布局骨架——每个新页面（view区域）都是"手写 CSS 堆出来的"，同一类页面的边距、间距、底部按钮从来没有统一过

于是做了这次迭代，小伙伴们记得拉取更新下。

开整。

一、默认色阶【重要】

这是这次最核心的补充——完善非主题色的默认色阶体系。

整站的默认色彩其实只有 8 个变量：

文字色 4 阶（从深到浅）  $color-text-primary    #2b2e31  ← 正文标题  $color-text-secondary  #5b6167  ← 副标题说明  $color-text-tertiary   #737a82  ← 时间戳辅助信息  $color-text-disabled   #b5b9bf  ← 禁用占位符背景色 3 阶（从亮到暗）  $color-bg-primary      #ffffff  ← 卡片 / 弹窗 / 列表项  $color-bg-secondary    #fafafa  ← 页面底色  $color-bg-tertiary     #f5f5f5  ← 输入框 / 骨架屏边框 2 阶（独立）  $color-border          #e5e7eb  ← 分割线 / 卡片边框  $color-border-light    #f0f0f0  ← 弱分割

改 $color-text-primary 一处 hex，三个派生色通过 tint()自动变浅，全站文字灰度联动。而背景色、边框色完全独立，不受文字色影响，也不受品牌主题色影响。

简单说：想整体调暗文字？改一个变量。想整体变灰背景？改一个变量。各管各的，互不打架。

在实际开发中，除了管理主题色，默认色绝对不可忽略，好的默认色让人看的清晰舒服，反过来就是：层次不明、效果差。

比如 说明文字和border 是深黑色，不同页面的 标题配色一个深一个浅等等。

二、组件样式预设

v1 里 Button 组件的样式是这么写的：

//  旧写法.btn {  &.normal { height: 96rpx; }  &.small  { height: 64rpx; }}

看着没问题对吧？问题是——整个项目里有 25 个页面、每个页面至少一个按钮。如果哪天要统一改成 88rpx，你得全局搜索 96rpx，然后祈祷没有别的地方也用这个值。

v2 新增了 14 类组件的尺寸 Token：

新增红线 D33：组件内部禁止写死 rpx 值，必须引用组件级 Token。改一个变量，全站组件尺寸联动。

三、动画预设【新增】

v1 有时长和缓动曲线：

$transition-duration-fast: 150ms;$transition-duration-normal: 250ms;$transition-duration-slow: 400ms;$ease-out: cubic-bezier(0, 0, 0.2, 1);

但 @keyframes 还是得自己写。于是你会在项目里找到 7 个不同版本的 @keyframes fadeIn，名字各有微妙差异，持续时间也不一样。

v2 一次性定义好，全局只用这些：

.animate-fade-in     // 淡入.animate-fade-out    // 淡出.animate-slide-up    // 上滑入场（列表项依次飞入）.animate-slide-down  // 下滑入场（下拉菜单展开）.animate-scale-in    // 缩放入场（弹窗内容区）.animate-shimmer     // 骨架屏闪耀.animate-spin        // 无限旋转（loading 指示器）

用法一行：

<view class="animate-slide-up" :style="{ animationDelay: index * 60 + 'ms' }">  {{ item.name }}</view>

所有动画只用 transform 和 opacity（遵守已有红线 D08），全局一次定义，禁止重复造轮子。

骨架屏动画也统一收敛到 .animate-shimmer，Skeleton 组件内部不再自己写 @keyframes。

同时骨架屏本身也做了增强——原来只有基础文本行，现在支持圆形头像占位、矩形图片占位、复合卡片骨架屏三种常见变体。

四、10 个 layout zone 预设类【新增】

这个布局可能是这次更新最重要也是最简单直白的，就是将 普通 任意区域，增加固定 类，这些类 通过类名来 智能 被识别为 既定区域。

比如列表页：以前大概是自己在 <view> 上写一堆 paddingmarginflex，跟其他页面对不齐。

现在：

<template>  <view class="lyt-page">    <NavBar title="订单列表" />    <view class="lyt-header">      <!-- 搜索栏随便放 -->    </view>    <view class="lyt-body">      <view v-for="item in list" :key="item.id" class="lyt-cell">        {{ item.name }}      </view>    </view>  </view></template>

.lyt-page / .lyt-header / .lyt-body / .lyt-cell ——全用 class，不依赖任何组件。里面放 <view> 还是 <swiper> 还是自定义组件都行，但边距、间距、safe-area 是 layout class 保证的。

一共 10 个 zone 类，覆盖 5 种页面骨架：

以后新增任何页面，先查这张表，套对应的 zone 骨架，再填业务内容。类名统一 = 全站布局统一。

后期会继续增加，小伙伴们直接 使用 ，也可以直接定义，效果杠杠的！

五、无障碍阅读

这是 v2 从"视觉规范"到"质量规范"的一次重要跃迁。

新增红线 D34：正文与背景色对比度必须 ≥ 4.5:1（WCAG AA 标准）。审计自动检测。

我们检查了本规范默认配色的所有组合，发现 3 处低对比度风险：

每个组合都给出了修复策略。如果你自己定了新的主题色，规范里也提供了快速检测方法。

这个倒不是重点。

六、完善内容

• page {} 全局文字基底：现在 <text> 标签自动继承设计系统的默认字号和文字色，不用每个页面写 class="text-body"
• 主题衔接更明确了：中性色阶归 style-skill 管，品牌色阶归 theme-skill 管，未安装 theme-skill 时有兜底默认值 #1CC8C4
• 审计更完整：红线从 32 条扩到 34 条，审计覆盖自动 21 条 + 人工 13 条
• Demo 速查盘：打开 demo.html 就能看到所有色彩、尺寸、组件 Token、动效预览、触发词，主题色可切换即时预览

使用

如果你已经在用 v1，升级方式是：

让AI 拉取更新升级技能（技能本身就是git仓库的一个项目，直接拉取更新即可）

其他的都一样：

/uniapp-style-skill 样式规范/uniapp-style-skill 颜色变量/uniapp-style-skill 按钮怎么写/uniapp-style-skill 弹窗规范/uniapp-style-skill 自定义导航栏胶囊对齐/uniapp-style-skill XX页面间距统一/uniapp-style-skill 深色模式/uniapp-style-skill 设计审计/uniapp-style-skill 修复硬编码/uniapp-style-skill 给XX 加 滑入/渐显/骨架屏动画

本次更新仍然着眼于具体的样式，增加了更多预设，还是那句老话，小伙伴们既可以使用，使得开发更为简洁简单，更可以作为参考，将自己的一些样式预设 和规范 纳入，所谓工欲善其事必先利其器！

喜欢的小伙伴欢迎点赞收藏，有在vibecoding遇到困难的童鞋，可以：