AI-Powered Front-End Efficiency Framework for B2B Operations Platforms

In the rapidly evolving era of AI, the technology is permeating all aspects of work and life, fundamentally changing traditional workflows. To stay competitive, organizations must actively embrace AI and leverage it to boost productivity.

The article outlines the typical strengths of large language models—natural language understanding and generation, extensive knowledge coverage, efficient text processing, learning and adaptation, and strong computational abilities—along with their limitations such as reasoning constraints, accuracy of generated content, and dependence on high‑quality input.

Focusing on a B‑end operation configuration platform (a B2B product management system), the author identifies three main challenges: (1) a large variety of business integrations with high customization, (2) a predominance of form and table pages, and (3) relatively low UI requirements. The goal is to reuse UI, logic, and data layers across these repetitive components while maximizing AI‑driven efficiency.

Four conventional improvement methods are evaluated—component reuse, low‑code platforms, D2C (Design‑to‑Code), and P2C (PRD‑to‑Code). Building on the limitations of each, a new "P2C protocol‑based" approach, dubbed AI 点灯 , is proposed. This solution introduces a middle protocol layer that describes page UI, logic, and data in a structured JSON schema, a protocol SDK that renders the schema, and a protocol component library that provides reusable UI primitives. The protocol layer also handles routing, modal/drawer navigation, and component interaction.

The advantages of the protocol‑based method include drastic reduction of front‑end effort, zero‑code front‑end iteration for downstream changes, and extensibility through AI‑generated or optimized protocols. Drawbacks are the upfront investment in SDK development and reliance on the completeness of the protocol components.

Two practical workflows are demonstrated. The first uses pure AI to generate a form schema from a PRD; the second combines backend Java code to produce a base Formily JSON schema, which is then refined by AI for UI details. An example of a generated table page protocol is shown below:

{
  "pageType": "table",
  "pageView": {
    "name": "需求信息管理",
    "initParams": {"modifySchema": ""},
    "rightButton": [],
    "tips": null,
    "strongTips": null,
    "filterSearch": [
      {"key": "date", "label": "日期", "component": "DatePickerWithOptions", "componentProp": {"options": [{"label": "周", "value": "周"}, {"label": "月", "value": "月"}, {"label": "季", "value": "季"}, {"label": "年", "value": "年"}]}},
      {"key": "type", "label": "需求类型", "component": "Select", "componentProp": {"options": [{"label": "全部", "value": "全部"}, {"label": "数据不全需求", "value": "数据不全需求"}, {"label": "业务", "value": "业务"}, {"label": "平台", "value": "平台"}, {"label": "xx需求", "value": "xx需求"}]}},
      {"key": "id", "label": "需求ID", "component": "Input", "componentProp": null}
    ],
    "hideSearch": true,
    "enablePagination": true,
    "tableSource": {
      "header": [
        {"key": "name", "title": "需求名称", "clickEvent": {"type": "jump", "path": "https://xxx", "params": ["url"]}},
        {"key": "productTree", "title": "产品树"},
        {"key": "frontendPerson", "title": "前端人日", "sorter": true},
        {"key": "backendPerson", "title": "后端人日", "sorter": true},
        {"key": "testPerson", "title": "测试人日", "sorter": true},
        {"key": "totalPerson", "title": "总人日", "sorter": true},
        {"key": "finishTime", "title": "完成时间", "sorter": true},
        {"key": "status", "title": "状态"},
        {"key": "operate", "title": "操作", "map": {"edit": {"type": "schemaButton", "text": "编辑", "buttonConfig": {"title": "编辑", "type": "link", "path": "/demand/save", "behavior": "modal", "schemaKey": "modifySchema"}}}}
      ],
      "scenes": [
        {"name": "示例需求1", "productTree": "产品树1", "frontendPerson": 5, "backendPerson": 10, "testPerson": 3, "totalPerson": 18, "finishTime": "2023-10-01", "status": "已完成", "url": "example_url_1"},
        {"name": "示例需求2", "productTree": "产品树2", "frontendPerson": 8, "backendPerson": 15, "testPerson": 5, "totalPerson": 28, "finishTime": "2023-10-15", "status": "进行中", "url": "example_url_2"}
      ],
      "showHiddenCheckBox": true,
      "summary": ["总计", "总人日: xx", "PD人日: xx", "后端人日: xx", "测试人日: xx", "其他人日: xx"]
    }
  }
}

Real‑world deployments (e.g., product management and audit pages for a “顺手买” operation) demonstrate rapid rollout, batch import, file upload, and dynamic UI features without further front‑end involvement. The approach promises a future where repetitive development tasks are expressed as text and transformed by AI, achieving a “one‑time effort, perpetual reuse” model.