Meituan Waimai UI Consistency Project: Design System, Toolchain, and Component Library

The UI consistency project is a joint effort between the Meituan Waimai UI design team and the development team, aiming to improve user‑side experience consistency, increase component reusability across multiple technical solutions, and reduce visual redesign costs.

1. Background

1.1 Industry status and problems

Rapid business expansion on mobile leads to larger teams and higher project complexity. Lack of unified design standards causes UI inconsistencies at four levels: design, development, testing, and product, resulting in fragmented component code, duplicated work, and low version throughput.

1.2 Current UI consistency situation

Meituan Waimai now supports multiple business lines (food, groceries, flash‑sale, errands, medicine) across several apps. Historical focus on fast delivery caused inconsistent UI styles and high maintenance costs. Statistics show UI adaptation bugs account for over 11.8% of total bugs, and UI demand throughput is only 18.3%.

1.3 UI consistency project

Since May 2019, the project extracts mature business scenarios into a cross‑platform component library (Android, iOS, MRN) to provide high‑quality, extensible, and uniformly configurable UI components, thereby improving UI middle‑platform capability.

2. Overall UI consistency solution

The solution consists of four parts: the Jimu toolchain, a code component library, a customized design‑cloud collaboration platform, and an official website.

2.1 Toolchain

Designers use the Jimu Sketch plugin to pick components from a material market, apply standardized colors, fonts, and icons, and generate high‑fidelity prototypes. Developers then implement matching components in the code library.

2.2 Code component library (Android/iOS/MRN)

Design drafts correspond one‑to‑one with code components, enabling reuse and reducing duplicated development.

2.3 Documentation

The website documents integration methods, component usage, and API specifications, lowering the learning curve for new developers.

2.4 Customized design‑cloud collaboration platform

Integrated with Meituan’s internal Inkjet platform, the cloud platform marks which design elements already exist in the component library, links to documentation, and prevents redundant development.

3. Design system construction

The design system follows atomic design theory, defining atoms (labels, buttons, switches), molecules (product cards), templates, and pages. It includes a Design Pattern Library (DPL) that standardizes component specifications, colors, typography, and assets such as icons and illustrations.

3.1 Component granularity

Components are classified into basic controls and business components, with configurable properties (visibility, style variants, theming) to support diverse scenarios.

3.2 Resource consistency

Standardized icon fonts, illustration libraries, and image management reduce package size and ensure brand cohesion.

4. Toolchain construction

4.1 Jimu Sketch plugin

The plugin provides Iconfont, color palette, component library, data filling, and text templates. It ensures designers work from a unified asset pool.

4.2 Code model

The component library improves maintainability, enables documentation‑driven development, facilitates unit testing, and supports accessibility features.

4.2.1 Theme configuration

{
  // Theme colors
  "rooBrandColors": {
    "rooBrandPrimary": "#FFCC33"
  },
  // Text appearance
  "rooTextAppearance": {
    "rooTextAppearanceHeadline1": {
      "fontFamily": "sans-serif-medium",
      "textStyle": "normal",
      "textSize": 44
    }
  },
  // Component style
  "rooStyle": {
    "rooButtonStyle": {
      "textAppearance": "?attr/rooTextAppearanceButton",
      "backgroundColor": "?attr/rooBrandPrimary",
      "cornerRadius": 0
    }
  }
}

4.3 Official website

The site serves as a portal for design language, component library, illustration library, and resource downloads, enabling designers and developers to access standards and assets.

5. Outcomes

After implementation, over 100 Iconfont icons were replaced, reducing app package size; more than 30 component replacements saved an average of 3 person‑days per medium‑scale demand; the toolchain increased efficiency by 30‑50% for UI‑dependent tasks.

The project has become a core part of Meituan Waimai’s UI middle‑platform, supporting rapid iteration, new business expansion, and internationalization.