MICROI ORIGINAL DESIGN SYSTEM

让业务界面先有
清晰的设计意图

六类内置设计模式覆盖品牌、产品流程、趋势构图、沉浸互动、动态首屏与数据工作台。每一种模式都复用同一套 Microi token、状态和响应式规则。

浏览设计模式查看真实流程

MCI-DESIGN

组件状态覆盖率08default → error

PATTERN LIBRARY

六种模式，一套品牌语言

MAKE
MEANING

品牌叙事

用观点建立首屏记忆

大标题、单一主张、章节节奏与克制的行动路径。

新建空间2 / 3

选择工作方式

✓团队协作角色与权限可配置

个人项目从轻量空间开始

真实产品流程

状态比装饰更重要

从登录到成功页，覆盖加载、空、错误、禁用与权限状态。

32结构化构图
打破均匀排版

一主两辅

趋势构图

不对称但保持秩序

超大字号、编辑式留白、几何切片与明确阅读顺序。

FOCUS OBJECT界面 → 氛围 → 焦点对象

沉浸互动

互动服务于理解

场景只强化产品对象，并准备静态、低配和无动效降级。

0—1200 MS第一秒
说清楚

动态首屏

用时间线组织注意力

标题、说明、主操作依次出现；循环动效不制造操作噪声。

运营总览实时

服务中128完成率96%风险项07

数据工作台

先异常，再趋势，后明细

紧凑密度、统一数值格式、筛选回显与可追溯数据状态。

REAL PRODUCT FLOW

流程不是一张好看的静态图

这个原创演示包含真实输入、校验、加载和成功反馈。界面在任何状态下都保持稳定尺寸，避免闪烁和跳动。

01默认状态可理解
02错误状态可恢复
03成功状态有下一步

MCI-DESIGN CONTRACT

让下一位开发者与 AI 都能延续同一套界面

设计模式、token、组件状态、页面顺序、响应式和降级策略都写进项目契约，不依赖口头描述。

Primary#5B7CFA Success#26D7B0 Warning#FFCA68 Danger#FF6B88

mode: data-workspace
density: compact
states: [default, loading, empty, error, success]
responsive: [390, 768, 1440]
motion: reduced-motion-ready

让业务界面先有清晰的设计意图