ASLINE: A Visual Low‑Code Platform for Efficient Front‑End Development in Shopee Supply Chain WMS

This article presents a practice summary of the Shopee Supply Chain WMS team’s effort to reduce cost and increase efficiency by using a front‑end low‑code system.

Project background : The team has accumulated design, front‑end, and back‑end resources and follows a set of design specifications, component libraries, and an API documentation platform (YAPI). However, the existing workflow still requires considerable effort for page layout and front‑back‑end integration, especially for the many list‑query and detail pages in the warehouse management system.

Pain points include high similarity among business pages, large demand for list/detail pages, and heavy front‑back‑end interface debugging work.

Exploration of solutions : The team compared several popular low‑code platforms (imgCook, CodeFun, Iceworks, H5‑dooring). A comparison table shows differences in platform support, target users, framework compatibility, design‑file support, code quality, drag‑and‑drop capability, API integration, and open‑source status. None of the existing platforms fully satisfied the team’s requirements, particularly the need to integrate with their own component libraries and workflow.

Requirements identified :

Support for Figma design‑file recognition.

Ability to generate code based on the team’s own base and business component libraries.

Effective API integration to accelerate front‑back‑end debugging.

Exported code should be semi‑finished (mid‑stage) and editable for further business‑logic implementation.

Based on these, the team developed the ASLINE low‑code system (Assemble Line), aiming to quickly produce high‑quality code for repetitive, high‑frequency pages.

Core design ideas

The system leverages three existing resources: a complete component library, online design‑file resources, and an online API documentation platform.

The core workflow consists of:

Identify components from the design file and automatically generate a flex‑based UI layout.

Generate front‑end network‑request code based on the API documentation and match component fields.

Combine the above to produce most of the framework‑related code (Vue) and export a runnable page.

Key capabilities include intelligent design‑file to component mapping, canvas drag‑and‑drop with snapping, visual configuration, automatic component‑API field matching, API code generation, and code merging/export.

Key challenges and solutions

1. Design‑file component recognition

The team chose a lightweight, fast, and reasonably accurate method over heavy machine‑learning approaches. They retrieve the design file’s JSON via Figma’s OpenAPI:

https://api.figma.com/v1/files/:file_key/nodes

The JSON contains extensive node information, which is then cleaned to remove invisible elements, comments, and irrelevant layers.

Feature extraction transforms each component into a binary matrix representing the presence of text pixels, which is then standardized and compressed. Example of raw JSON data (truncated):

{
  name: 'Component Name',
  lastModified: '2021-11-29T08:57:41Z',
  version: '1334322378',
  role: 'viewer',
  nodes: {
    id: '6:188',
    name: 'Component Name/View',
    type: 'FRAME',
    children: [{
      "id": "6:202",
      "name": "bg",
      "type": "RECTANGLE",
      "blendMode": "PASS_THROUGH",
      "absoluteBoundingBox": {"x":1792.0,"y":-762.0,"width":114.0,"height":32.0},
      "fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0}}]
    }]
  }
}

After cleaning, the algorithm extracts features (e.g., text positions), builds a binary matrix, standardizes it, and compresses it by converting each 32‑bit chunk to a decimal value, storing only non‑zero chunks:

{
  "Table": {
    "matrix": {
      "1": 127,
      "2": 478,
      "10": 1229332,
      "528": 127,
      "529": 2147483392,
      "530": 8388607
    }
  }
}

During matching, the compressed matrix from the design file is compared with a standard component library using bitwise AND operations (e.g., 127 & 300 = 44 ) to compute similarity. The number of set bits in the result indicates the similarity score, which can be efficiently counted using the i & (i-1) trick.

2. Layout conversion

Most low‑code canvases use absolute positioning, but production code prefers hierarchical flex layouts. The system analyzes component positions using a projection method: horizontal projection determines row count, vertical projection determines column count per row. The resulting flex layout example:

<div class="container">
  <div class="row-1">
    <PageHeader />
  </div>
  <div class="row-2">
    <div class="column-3">
      <ProTable />
    </div>
    <div class="column-4">
      <TrackingHistory />
    </div>
  </div>
</div>

Corresponding CSS:

.container { display: flex; flex-direction: column; }
.row-2 { margin-top: 12px; display: flex; }
.column-4 { margin-left: 20px; }

3. API field and component field matching

After component recognition, the system can bind a component to an API by providing the API documentation URL. It generates request code (Vue example) and matches component fields (e.g., start time ) with API fields ( start_time , begin_time ) using similarity algorithms.

<template>
  <SPageHeader :infoSchemas="schemaProps.infoSchemas" :infoValues="infoValues" :titleInfo="titleInfo" />
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { SPageHeader } from '@/ssc-vue-ui';
import request from '@/utils/request';
interface InterfaceGetCcOrderDetail { /* ... */ }
export const getCcOrderDetail = async (params: InterfaceGetCcOrderDetail) => {
  const res = await request.get('/api/test/xxx/xxx/get_xx_order_detail', { params: { ...params } });
  return res;
};
@Component
export default class SPageHeaderComponent extends Vue {
  titleInfo = {};
  infoSchemas = [
    { label: 'Source From', key: 'source_from', enums: 'CycleCountSourceFrom' },
    { label: 'Source ID', key: 'source_id' },
    // ... other fields
  ];
  mounted() { this.getDetailInfos(); }
  async getDetailInfos() {
    try { const res = await getCcOrderDetail(); console.log(res); }
    catch (error) { console.log(error); }
  }
}
</script>
<style lang="scss">
// CSS code
</style>

The generated index.vue aggregates all components into a flex‑based page.

System demonstration and results

The UI starts with a simple input box for a Figma URL. After recognition, the system lists identified business components for user confirmation, then opens the main editor where users can drag components, adjust layout, and bind APIs. Finally, clicking “Export Code” produces individual component code and a complete page code.

In production, the system has been integrated into several Vue‑based sub‑projects of Shopee Supply Chain. Recognition success rate reaches about 92%, and for applicable pages it saves roughly 80% of development time (reducing a 0.5‑1 day task to about 1 hour).

Future work includes extending support to other component libraries and frameworks (e.g., React), introducing intelligent learning to improve recognition and API‑field matching accuracy, and enhancing canvas usability for non‑front‑end users.

Authors : Coco (Front‑end Engineer, Shopee Supply Chain) and Xinran (Technical Editor, Shopee Games).