吾码UI（Microi.UI / MCI-UI）

Microi Design System

让每一个吾码前端项目，都有统一、先进、可持续的视觉底座。

吾码UI（Microi.UI / MCI-UI）面向 Vue 3 PC 网站、响应式网站、移动端 H5、uni-app 项目， 提供品牌 token、主题运行时、跨端基础组件、骨架屏、安全区、动效和 AI 生成规范。

快速接入组件预览AI 开发规则

Microi.UI Runtime

light / darkrounded / flatskeleton / safe-area / motion

01

统一品牌

通过 --mci-* token 收束颜色、阴影、圆角、间距、骨架屏和动效。

02

AI 可复用

AI 不再临时写散装 CSS，而是默认使用 MCI-UI 组件与项目级 mci-* 封装。

03

跨端一致

同一套主题能力覆盖 PC 网站、企业站、产品站、移动端商城和 uni-app。

04

商业级扩展

第三方库继续负责复杂能力，最终视觉由吾码UI统一承载。

设计系统定位

Why Microi.UI

吾码UI不是重复造组件，而是统一产品气质、AI产出和商业交付标准。

Microi.UI 主要服务官网、企业站、产品站、文档站、移动端应用、会员中心、活动页、独立 Web 应用等非后台管理系统场景。 PC 后台管理系统仍然以 Element Plus 为主，但主题变量、骨架屏、动效密度和品牌识别也应该逐步向 --mci-* 对齐。

统一品牌颜色、阴影、圆角、动效、骨架屏全部收束到 token。

AI稳定生成页面、按钮、卡片、富文本、数据状态都有固定组件答案。

跨端一致Vue 3 Web、响应式网站、uni-app/H5 使用同一套设计语言。

主题能力

Theme Runtime

主题切换是内建能力，不是项目后期补丁。

所有移动端和 PC 网站项目默认支持明暗模式、九套主色、圆角/扁平形态和动效偏好。白色与黄色主色必须使用 --mci-text-on-primary，避免文字对比度不足。

light / dark明暗模式

black / white极简与高端企业感

red / orange / yellow品牌、活动、会员权益

green / cyan / blue健康、科技、企业服务

purpleAI、创意、数字产品

rounded / flat圆角与扁平都保留层次

工程结构

Microi.UI/src/theme/tokens.csssrc/theme/index.csssrc/theme/runtime.jssrc/web/componentssrc/uniapp/components

Source Layout

主题、Web、UniApp 三层分离，业务页面只消费稳定出口。

src/theme 是品牌 token 源头，src/web 服务 PC/响应式网站，src/uniapp 服务移动端项目。新增组件必须双端优先，颜色、圆角、阴影和安全区都走 --mci-* 变量。

快速接入

Vue 3 Web

import { createApp } from 'vue';
import MciUI, { initMciDesign } from '@microi/mci-ui/web';
import '@microi/mci-ui/theme';
initMciDesign({ theme: 'light', palette: 'red', shape: 'rounded', motion: 'full' });
createApp(App).use(MciUI).mount('#app');

uni-app

import { createSSRApp } from 'vue';
import App from './App.vue';
import MciUI, { initMciDesign } from '@/mci-ui/uniapp/index.js';
import '@/mci-ui/theme/index.css';
export function createApp() {
  const app = createSSRApp(App);
  initMciDesign({ theme: 'light', palette: 'red', shape: 'rounded' });
  app.use(MciUI);
  return { app };
}

主题运行时

Runtime API

一次初始化，统一控制主题、主色、形态和动效。

运行时会写入本地存储，并在支持 DOM 的环境中设置 data-theme、data-mci-palette、data-mci-shape、data-mci-motion。

import { initMciDesign, setMciTheme, setMciPalette, setMciShape, setMciMotion, toggleMciTheme } from '@microi/mci-ui/runtime';
initMciDesign({ theme: 'light', palette: 'red', shape: 'rounded', motion: 'full' });
setMciTheme('dark');
setMciPalette('blue');
setMciShape('flat');
setMciMotion('reduced');
toggleMciTheme();

样式隔离

Style Guard

吾码UI必须在复杂项目里保持自己的视觉边界。

官网、文档站、企业站、移动端应用经常混用第三方 UI、Markdown、富文本和项目老 CSS。MCI-UI 通过命名空间、根容器、token 和主题层收口，尽量避免样式被其它组件覆盖。

根容器页面或局部 UI 使用 .mci-page 或 data-mci-ui-root 包裹。

命名空间共享类名统一 mci- 前缀，不写泛化 button、.card、img。

token 收口颜色、圆角、阴影、间距通过 --mci-* 控制，不直接改库内部样式。

主题层官网/文档站使用 VitePress theme 层统一美化，避免每篇文档散装 CSS。

组件预览

下面是按吾码UI设计 token 绘制的组件截图式预览。真实项目中组件会使用同一套 --mci-* 变量、主题 runtime、圆角/扁平模式、骨架屏和安全区规则，因此不同业务系统会保持统一的 Microi 品牌质感。

Microi App

MciPage

页面 shell、安全区、入场动效、结构化背景。

页面标题

MciNavbar

移动端顶部导航，兼容沉浸式状态栏和返回操作。

MciButton

品牌按钮，内置 hover、focus、pressed、sheen 等反馈。

Surface商业数据卡片

柔和阴影、清晰边界、扫光层次。

MciCard

通用内容卡片，适合信息承载、入口、统计和商品容器。

SECTION

核心能力

MciSection

统一区块标题、副标题、eyebrow 和操作区。

账户设置安全与偏好›

消息通知系统与业务提醒›

MciCell

列表、菜单、设置、服务入口的标准单元格。

全部待处理已完成

MciTabs

分段标签，适合分类、状态、筛选和资产切换。

累计收益¥ 9,489.70今日 +128.00

MciMetricCard

资产、收益、积分、数据看板的强视觉指标卡。

MciActionBar

底部固定操作栏，内置底部安全区和按钮布局。

吾码UIAI

MciAvatar

用户头像，图片失败时自动用昵称/首字兜底。

标准商品卡¥ 299.00

MciProductCard

商品、权益、内容、服务项目都可复用的商业卡片。

MciSkeleton

支持 list、grid、banner、detail、metric 的骨架屏。

暂无数据完成请求后再显示空态

MciDataState

loading、empty、error 的统一动态数据状态。

内容标题

文字内容保留舒适留白，图片保持满宽展示。

MciRichText

文章、协议、商品详情、公告详情的移动端富文本容器。

rounded / flat

MciThemePanel

主题、palette、圆角/扁平、动效偏好的统一设置面板。

联系人请输入姓名备注

多行输入内容...

MciFormField

表单项，统一 label、必填、帮助、错误和输入框状态。

筛选关键词状态时间

MciFilterBar

列表页筛选栏，适合搜索、状态过滤和批量动作。

账户资产128,800本月增长 +12.8%

MciAssetCard

余额、积分、资产、数据面板的通用资产卡。

订单 #20260607已完成

标准订单卡服务项目 / 交易记录 / 审批事项

¥299

MciOrderCard

订单、审批、工单、任务记录的业务列表卡片。

确认操作

弹窗内容展示区

MciModal

弹窗组件，支持遮罩、标题、内容区和底部操作。

上传文件点击选择或拖拽上传

MciUploader

上传容器，统一选择、提示、文件列表和交互反馈。

提交申请09:30

审核通过10:15

完成归档11:00

MciTimeline

时间轴，适合状态流转、操作日志和活动记录。

1提交

2审核

3完成

MciSteps

步骤条，适合流程、订单、审批和新手引导。

组件代码示例

MciPage

Layout Recipe

页面与区块

用 MciPage 做页面 shell，区块统一交给 MciSection，首屏、网格、入场动效和结构化背景一套成型。

<MciPage safe-area tech-grid shape="rounded"> <MciSection title="核心能力" description="统一品牌、主题、动效和组件体验" animated> <div class="mci-grid mci-grid--3"> <MciCard interactive animated sheen>...</MciCard> <MciCard interactive animated sheen>...</MciCard> <MciCard interactive animated sheen>...</MciCard> </div> </MciSection></MciPage>

全部内容商品

List Recipe

移动端商品/内容列表

列表页必须有骨架屏、状态切换和稳定网格。接口未返回前不显示空态，商品/内容卡片保持统一比例。

<MciTabs v-model="type" :options="typeOptions" /> <MciDataState :loading="loading" skeleton-type="grid" :empty="!items.length"> <div class="mci-grid mci-grid--2"> <MciProductCard v-for="item in items" :key="item.Id" :title="item.Name" :image="item.Cover" :price="item.Price" :tag="item.TagName" /> </div></MciDataState>

累计收益¥949.79今日 +128.00

Action Recipe

资产与底部操作栏

资产指标用强视觉卡承载，底部操作栏必须兼容安全区，主次按钮层级明确，移动端点击有按压反馈。

<MciMetricCard label="累计收益" value="949.79" suffix="元" trend="今日 +0.00" /> <MciActionBar> <MciButton variant="plain" block>加入购物车</MciButton> <MciButton variant="primary" block sheen>立即购买</MciButton></MciActionBar>

筛选关键词状态

Flow Recipe

表单、筛选与流程

筛选、订单卡、步骤条、时间轴应该作为一个业务组合出现，既能承载查询，也能表达状态流转。

<MciFilterBar title="高级筛选"> <MciFormField v-model="keyword" placeholder="请输入关键词" /> <MciTabs v-model="status" :options="statusOptions" /> <template #actions> <MciButton variant="primary">查询</MciButton> </template></MciFilterBar> <MciOrderCard title="服务工单" status="处理中" amount="¥299.00" /><MciSteps :steps="steps" :current="1" /><MciTimeline :items="timeline" />

通用业务场景适配

Business Patterns

面向通用系统建设，不绑定任何定制项目。

无论是企业官网、移动端会员中心、服务平台、商品交易、资产数据、工单审批还是内容展示，都应该优先沉淀可复用的业务 UI 原子。

企业官网 / 产品站MciPage、MciSection、MciCard、主题 palette、页面入场动效。

移动端应用 / 会员中心MciNavbar、MciCell、MciAvatar、MciThemePanel、安全区。

商品 / 权益 / 服务列表MciTabs、MciProductCard、MciSkeleton、筛选与分页加载。

资产 / 数据看板MciMetricCard、MciAssetCard、MciDataState、状态标签。

订单 / 审批 / 工单MciOrderCard、MciSteps、MciTimeline、头像信息行与状态流转。

内容详情 / 协议公告MciRichText、MciActionBar、图片满宽与文字留白。

活动 / 营销页面MciSkeleton banner、结构化背景、扫光动效、品牌按钮。

项目级扩展基础展示、数据状态、主题设置、表单、筛选、上传、弹窗、资产卡、时间轴和步骤条都已落地，实际业务项目优先组合这些组件。

系统模板预览

企业官网Hero / Feature / CTA

企业官网 / 产品站

用 `MciPage`、`MciSection`、`MciCard`、主题 palette 构建品牌展示与转化路径。

会员中心Profile / Asset / Menu

移动端会员中心

用 `MciNavbar`、`MciAvatar`、`MciAssetCard`、`MciCell`、`MciThemePanel` 组合。

数据看板Metric / Filter / State

资产与数据看板

用 `MciMetricCard`、`MciFilterBar`、`MciDataState`、`MciSkeleton` 统一数据体验。

服务工单Order / Steps / Timeline

订单 / 审批 / 工单

用 `MciOrderCard`、`MciSteps`、`MciTimeline`、`MciModal` 承载流程与操作。

AI 开发规则

AI Usage

用户没有主动指定 UI 风格时，AI 必须默认采用 Microi.UI / MCI-UI。

这条规则让 AI 生成的页面从第一版开始就具备统一主题、骨架屏、安全区、动效和品牌 token，而不是每个项目临时拼装样式。

推荐提示词

使用 Microi.UI / MCI-UI 开发此 Vue 3/uni-app 页面。
遵循 microi.skills/ui-design/SKILL.md 和 microi.skills/microi-ui/SKILL.md。
页面必须支持 light/dark、黑白红橙黄绿青蓝紫 palette、rounded/flat、骨架屏、安全区、页面入场和点击反馈。
业务页面不要硬编码颜色/阴影/圆角，必须使用 --mci-* token 或 MciPage/MciButton/MciCard 等组件。

Delivery Checklist

AI 完成后必须检查这些交付项。

页面骨架是否使用 MciPage 或等价页面 shell，内容区是否优先用 MciSection。

入口与设置设置、菜单、服务入口是否优先用 MciCell，主题设置是否可用 MciThemePanel。

业务卡片分类、资产、商城、会员页是否复用 MciTabs、MciMetricCard、MciAssetCard、MciProductCard。

表单流程表单、筛选、上传、弹窗、订单/工单、时间轴、步骤条是否优先使用对应 MCI 组件。

数据状态是否有骨架屏，而不是接口未返回时直接显示空态。

移动兼容是否支持 iPhone、Android 不同机型的顶部/底部安全区。

主题运行时是否通过 initMciDesign() 或项目主题服务设置主题。

构建验收是否没有硬编码主色、圆角、阴影，并跑过基础构建或至少 node --check / npm pack --dry-run。

与第三方 UI 的关系

Ecosystem

Microi.UI 不排斥第三方库，它负责最终呈现的统一质感。

复杂表格、日期选择、上传、弹窗、表单校验等成熟能力，可以继续使用 Element Plus、uni-ui、TDesign、uView、FirstUI 等。但项目最终呈现出来的视觉，应该由 --mci-* token 和 mci-* 组件封装统一承载。

01能力解耦第三方组件只解决复杂交互能力。

02外层封装外层使用 mci-* wrapper 或项目级组件封装。

03token 统一颜色、圆角、阴影、间距、字体、骨架屏都走 --mci-*。

04体验收口对用户可见的页面风格由 Microi.UI 统一控制。