SmoUI 的目的
SmoUI 不从零实现基础组件库,也不把 shadcn/ui 基础组件当成我们已经完成的组件。Web 底座继续使用 shadcn/ui 源码;自然语言开发由目标项目会话承接,SmoUI 负责把可复用结果约束成中文业务模板、产品边界和 registry 资产。当前公开目录只展示已进入 registry 的自研组件。
底座分层
shadcn/ui
源码层通过 CLI 把官方组件源码带入仓库,组件可以审查、改造和版本化。
components/ui/*Base UI
交互原语负责弹窗、浮层、选择器、焦点和键盘行为,SmoUI 不重写底层交互。
@base-ui/reactTailwind
样式系统承载设计 token、语义颜色、布局密度和响应式约束。
tailwind.config.tsSmoUI
产品层不重写基础组件,只沉淀中文页面场景模板、组件规则、生成契约和验收标准。
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 资产。
生成流程
需求
在目标项目会话里描述页面目标、产品归属和关键对象。
产品上下文
边界
确认能力归属、禁止跨界内容和权限责任。
责任边界
页面模板
匹配整页骨架、组件组合和交互状态。
页面场景模板
工程
先在目标项目实现,再抽出可复用组件和规则。
可维护代码
沉淀
验证通过后写入 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 换算、行高、背景对比、文字阴影和容器宽度,再调整字重。
阻断性验收
必须使用当前构建产物的完整微信开发者工具或真机截图。结果态与缺省态分别验证;标题、状态、摘要、操作或箭头任一意外截断都不得通过。
验收命令
Lint
npm.cmd run lintTypecheck
npm.cmd run typecheckBuild
npm.cmd run build自然语言开发在目标项目会话中进行,SmoUI 只沉淀可复用结果。
先判断产品边界,再选择页面场景模板,最后组合组件。
Web 基础组件直接使用 shadcn/ui 官方源码,不做一套不兼容的 SmoUI 组件 API。
页面文件只做组合,数据、规则、状态和复杂 UI 拆到 components/smo。
每次沉淀都同步文档,并通过 lint、typecheck、build。