开始使用

SmoUI 的目的

SmoUI 不从零实现基础组件库,也不把 shadcn/ui 基础组件当成我们已经完成的组件。Web 底座继续使用 shadcn/ui 源码;自然语言开发由目标项目会话承接,SmoUI 负责把可复用结果约束成中文业务模板、产品边界和 registry 资产。当前公开目录只展示已进入 registry 的自研组件。

底座分层

shadcn/ui

源码层

通过 CLI 把官方组件源码带入仓库,组件可以审查、改造和版本化。

components/ui/*

Base UI

交互原语

负责弹窗、浮层、选择器、焦点和键盘行为,SmoUI 不重写底层交互。

@base-ui/react

Tailwind

样式系统

承载设计 token、语义颜色、布局密度和响应式约束。

tailwind.config.ts

SmoUI

产品层

不重写基础组件,只沉淀中文页面场景模板、组件规则、生成契约和验收标准。

components/smo/*

shadcn 链路

SmoUI 对齐的是 shadcn/ui 的代码分发模式:源码组件、Create preset、registry 和 CLI 形成闭环;SmoUI 在这条链路上增加 Smo 产品边界和中文业务模板。

源码组件

components/ui/*

基础组件通过 shadcn CLI 进入项目,允许继续改造。

Create

/create

调 preset 和查看已沉淀资产,不作为自然语言生成入口。

Registry

registry.json / public/r

只把已确认的组件、规则和后续资产变成可分发代码。

CLI

add / view / search / build / apply

让外部项目能安装、查看、搜索和应用 SmoUI 资产。

生成流程

1

需求

在目标项目会话里描述页面目标、产品归属和关键对象。

产品上下文

2

边界

确认能力归属、禁止跨界内容和权限责任。

责任边界

3

页面模板

匹配整页骨架、组件组合和交互状态。

页面场景模板

4

工程

先在目标项目实现,再抽出可复用组件和规则。

可维护代码

5

沉淀

验证通过后写入 SmoUI 组件目录、规则和 registry。

复用资产

产品边界

产品负责什么典型 UI不能做什么
SmoArch身份、权限、支付、审计、文件、任务、计费、网关等平台底座能力。
待确认
具体业务应用的经营页面和垂直行业流程。
SmoLink应用入口、客户端体验、应用级访问和轻量任务面板。
待确认
云端控制台、计费底座或运行时实现。
smolink-online云端控制台、模块开通、工作区、套餐、角色和上下文下发。
待确认
底层身份、支付或文件存储实现。
SmoFan粉丝与会员经营、权益触达、商家侧运营、内容素材和转化承接。
待确认
平台身份底座、支付底座、云端模块开通实现或 SmoMark 核销流程。
SmoMark增长计划经营、项目绑定、报名、订单、核销和复盘分析。
待确认
私有登录中心、平台支付底座或 SmoArch 身份对象。

微信小程序视觉校准

Figma、截图和 ImageGen 是视觉目标,不是可以直接抄写的工程规格。SmoFan 小程序落地前必须完成设计基准换算、空间预算、Skyline 兼容映射和真实截图验收。

px 转 rpx

rpx = 设计稿 px × 750 ÷ 设计稿逻辑宽度

390px 设计稿约乘 1.923,禁止默认乘 2;只有 375px 设计基准可以直接乘 2。取整后必须重新核算组件总宽度。

Skyline 安全骨架

[固定图片区] [间距] [flex:1 信息区] [间距] [内容宽度操作区]

固定区使用 flex:none,信息区使用 flex:1 和 min-width:0。grid-template-columns 必须经过目标 Skyline 版本独立截图验证。

字体视觉重量

相同字号和字重在设计工具与微信端不保证视觉一致。依次检查字体 fallback、rpx 换算、行高、背景对比、文字阴影和容器宽度,再调整字重。

阻断性验收

必须使用当前构建产物的完整微信开发者工具或真机截图。结果态与缺省态分别验证;标题、状态、摘要、操作或箭头任一意外截断都不得通过。

labelTight · 26/26/500titleMdRegular · 30/36/400actionMdQuiet · 26/30/500

验收命令

Lint

npm.cmd run lint

Typecheck

npm.cmd run typecheck

Build

npm.cmd run build

自然语言开发在目标项目会话中进行,SmoUI 只沉淀可复用结果。

先判断产品边界,再选择页面场景模板,最后组合组件。

Web 基础组件直接使用 shadcn/ui 官方源码,不做一套不兼容的 SmoUI 组件 API。

页面文件只做组合,数据、规则、状态和复杂 UI 拆到 components/smo。

每次沉淀都同步文档,并通过 lint、typecheck、build。