我从瑞幸咖啡小程序里，拆出了一套 22 个组件的开源 UI 库

把它的设计语言完整提炼出来，做成了一个可以直接 npm install 的微信小程序组件库。

效果截图

克制的双色系统（蓝+橙），无阴影的卡片层次，菜单页那个从 + 按钮展开到数量步进器的丝滑交互，会员卡页面方案选择器的信息架构......这些细节放在一起，构成了一套非常完整且高辨识度的设计语言。

项目叫 LKCN UI，22 个组件，纯原生微信小程序自定义组件，零依赖，原生 / Taro / uni-app 项目都能直接用。

GitHub: https://github.com/user/lkcn-ui

色彩系统

瑞幸全局只用 两个强调色：

色值	用途	使用场景
`#1A6EFF` Brand Blue	交互元素	TabBar 激活态、按钮、加购圆钮、链接
`#FF6B35` Accent Orange	促销与价格	价格数字、CTA 按钮、Badge、优惠券

辅助色包括会员金 #C8A26E、即享绿 #2B7D5B、咖啡棕 #3D2D1F。

一个重要发现：瑞幸的卡片没有阴影。整个 App 的层次感完全靠圆角 + 间距 + 背景色差来实现，这使得渲染性能非常好，也让整体视觉特别干净。

字体体系

价格是瑞幸 UI 最有辨识度的元素。它把价格拆成了三段不同大小的文字：

scss 复制代码

¥(小号加粗) 9(大号加粗) .9(小号加粗)  ¥32(小号灰色删除线)

这种「符号小、整数大、小数小」的层次处理让价格数字极具视觉冲击力，同时原价的删除线灰色处理制造了强烈的价差感知。我在 lkcn-price 组件里完整还原了这个效果。

间距与圆角

间距体系是标准的 8px 递增：4 / 8 / 12 / 16 / 24 / 32（rpx 翻倍）。

圆角有 5 级：4px（标签）→ 8px（按钮、输入框）→ 12px（卡片）→ 20px（弹窗）→ 999px（胶囊）。

所有 Token 都通过 CSS 变量注入，覆盖变量即可全局换肤：

css 复制代码

page {
  --lkcn-blue: #1A6EFF;
  --lkcn-orange: #FF6B35;
  --lkcn-radius-md: 24rpx;
  /* ... 60+ 个变量 */
}

22 个组件一览

全部组件从瑞幸小程序的真实页面中提取，不是凭空设计的：

基础组件： Button（6 种类型 × 3 尺寸）、Tag（4 类型 × 4 颜色）、Price（整数/小数自动拆分）、Badge、Avatar

布局容器： Card、Grid（3/4/5 列自适应）、Swiper（胶囊形指示点）、CouponScroll、PromoCard

导航： TabBar（safe-area 适配）、Tabs（滑动下划线）、SegmentControl、SearchBar、CategorySidebar、LocationBar

业务组件： ProductCard（菜单列表项）、Stepper（折叠→展开态）、LevelCard（会员等级）、MembershipPlan（订阅方案选择）、NoticeBar、FloatingButton

1. Stepper：瑞幸的加购交互

瑞幸菜单页的加购交互是我见过最优雅的------数量为 0 时只显示一个蓝色 + 圆钮，点击后展开为 [-] [数字] [+] 三段式控件。

xml 复制代码

<!-- 使用方式 -->
<lkcn-stepper value="{{count}}" bind:change="onChange" />

组件内部的关键判断：

xml 复制代码

<!-- value <= min 时只显示 + 按钮 -->
<view wx:if="{{value <= min}}" class="lkcn-stepper__add lkcn-stepper__add--solo">
  <text class="lkcn-stepper__icon">+</text>
</view>
<!-- 否则展开完整控件 -->
<view wx:else class="lkcn-stepper__controls">
  <!-- [-] [count] [+] -->
</view>

加购按钮的 scale(0.88) + cubic-bezier(0.34, 1.56, 0.64, 1) 弹性回弹动画让点击手感特别好。

2. Price：三段式价格渲染

xml 复制代码

<lkcn-price value="9.9" original="32" prefix="预估到手" />

组件自动将 9.9 拆分为整数 9 和小数 .9，分别用不同字号渲染，currency symbol ¥ 用小号加粗。这种处理在电商类小程序里非常实用，直接拿去用就行。

3. CategorySidebar：菜单页左侧导航

这个组件还原了菜单页左侧的完整细节------激活态的白色背景、左侧橙色指示条、分类标签（新品、产地季、苦瓜轻体），以及新品小红点。

xml 复制代码

<lkcn-category-sidebar
  categories="{{categories}}"
  active="{{catActive}}"
  height="100vh"
  bind:change="onCatChange"
/>

数据结构支持纯文字和对象两种格式：

js 复制代码

categories: [
  '人气Top',                           // 纯文字
  { text: '周边NEW', tag: '周边NEW', tagColor: 'blue' },  // 带标签
  { text: '果C美式', tag: '苦瓜轻体', tagColor: 'green', dot: true },
]

4. MembershipPlan：会员方案选择器

会员卡页面底部那个方案选择 + 订阅 CTA + 协议勾选的完整流程，一个组件搞定：

xml 复制代码

<lkcn-membership-plan
  plans="{{plans}}"
  active="{{planActive}}"
  agreement="开通会员代表接受"
  agreement-links="{{[{text:'《服务协议》'}, {text:'《续费说明》'}]}}"
  bind:subscribe="onSubscribe"
/>

为什么选原生而不是 Taro / uni-app

这是我在开发前做的一个关键决策。核心理由就一个------受众最大化。

原生微信小程序自定义组件能被所有技术栈引入：

复制代码

原生组件 → 原生项目 ✅、uni-app 项目 ✅、Taro 项目 ✅
uni-app 组件 → 只有 uni-app 能用 ❌
Taro 组件 → 只有 Taro 能用 ❌

uni-app 引入原生组件只需要放到 wxcomponents/ 目录，在 pages.json 注册即可。Taro 也类似。写一份代码三个生态都能吃到，这是 Vant Weapp 走过的路。

快速上手

bash 复制代码

npm install lkcn-ui

在微信开发者工具中构建 npm，然后注册组件：

json 复制代码

{
  "usingComponents": {
    "lkcn-button": "lkcn-ui/button/index",
    "lkcn-price": "lkcn-ui/price/index",
    "lkcn-product-card": "lkcn-ui/product-card/index"
  }
}

直接使用：

xml 复制代码

<lkcn-button type="primary" round>立即下单</lkcn-button>

<lkcn-product-card
  image="/images/coconut-latte.png"
  title="生椰拿铁（首创）"
  tags="{{['全球销量第一', 'IIAC金奖']}}"
  price="9.9"
  original-price="32"
  bind:add="onAddToCart"
/>

也可以不用 npm，直接把 packages/ 下需要的组件目录复制到你的项目里。

换肤

所有视觉变量都通过 CSS 变量控制，覆盖即可适配你自己的品牌：

css 复制代码

page {
  --lkcn-blue: #7C3AED;    /* 换成你的品牌紫 */
  --lkcn-orange: #F59E0B;  /* 换成你的品牌黄 */
  --lkcn-radius-md: 32rpx; /* 更大的圆角 */
}

不需要改任何组件源码，Design Token 体系的优势就在这里。

项目数据

22 个组件，全部完成
143 个源文件
0 外部依赖
每个组件 4 件套（wxml / wxss / js / json）
60+ Design Token CSS 变量
11 个可交互 demo 页面
包体积 < 90KB（未压缩）

后续计划

组件 TypeScript .d.ts 类型声明
VitePress 文档站
暗色模式适配
GitHub Actions CI 自动发布

如果你也觉得有用，欢迎 Star：

GitHub: https://github.com/user/lkcn-ui