low-code-generation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Low-Code Generation

低代码生成

Part of Agent Skills™ by googleadsagent.ai™

属于 Agent Skills™，由 googleadsagent.ai™ 提供

Description

功能描述

Low-Code Generation uses AI to produce forms, tables, dashboards, and workflow UIs from natural language descriptions or schema definitions. The agent generates production-ready components spanning the zero-code to full-code spectrum: from drag-and-drop JSON configurations to fully custom React components, always producing the simplest artifact that meets the requirement.

The spectrum principle is key: not everything needs custom code, and not everything can be configured. A CRUD table for an admin panel is best served by a JSON-driven table component with sort, filter, and pagination built in. A complex multi-step form with conditional logic benefits from a form schema with validation rules. A bespoke analytics dashboard with custom visualizations requires full code. The agent selects the appropriate abstraction level based on complexity.

This skill draws from enterprise low-code platforms like JeecgBoot, encoding patterns for rapid UI generation: schema-driven forms with validation, configurable data tables with server-side operations, workflow builders with drag-and-drop nodes, and report generators with chart composition. Each pattern reduces a multi-day development task to minutes.

低代码生成借助AI，根据自然语言描述或 schema 定义生成表单、表格、仪表盘和工作流UI。该Agent可生成从无代码到全代码范围内的生产级组件：从拖拽式JSON配置到完全自定义的React组件，始终生成满足需求的最简产物。

分层原则是核心：并非所有需求都需要自定义代码，也并非所有需求都能通过配置实现。管理面板的CRUD表格最适合采用内置排序、筛选和分页功能的JSON驱动表格组件；带条件逻辑的复杂多步骤表单则受益于含验证规则的表单schema；定制化可视化分析仪表盘则需要全代码实现。Agent会根据复杂度选择合适的抽象层级。

该技能借鉴了JeecgBoot等企业级低代码平台的模式，集成了快速UI生成的各类范式：带验证的schema驱动表单、支持服务端操作的可配置数据表、带拖拽节点的工作流构建器，以及支持图表组合的报表生成器。每种范式都能将原本需要数天的开发任务缩短至数分钟。

Use When

适用场景

Generating admin panels or CRUD interfaces rapidly
Building forms from database schemas or API specifications
Creating data tables with sorting, filtering, and pagination
Producing dashboard layouts with configurable widgets
Scaffolding entire applications from entity-relationship diagrams
The user requests "quick UI", "admin panel", or "form builder"

快速生成管理面板或CRUD界面
根据数据库schema或API规范构建表单
创建带排序、筛选和分页功能的数据表
生成带可配置组件的仪表盘布局
从实体关系图搭建完整应用框架
用户提出「快速UI」「管理面板」或「表单构建器」需求时

How It Works

工作原理

mermaid

graph TD
    A[Input: Schema / Description] --> B[Complexity Assessment]
    B --> C{Abstraction Level}
    C -->|Zero-Code| D[JSON Config Generation]
    C -->|Low-Code| E[Schema + Custom Handlers]
    C -->|Full-Code| F[Complete Component Code]
    D --> G[Config-Driven Renderer]
    E --> H[Schema-Driven Component]
    F --> I[Custom React Component]
    G --> J[Preview + Iterate]
    H --> J
    I --> J
    J --> K[Production Output]

The complexity assessment evaluates the number of fields, conditional logic, custom validation, and visual requirements to select the appropriate abstraction level. Zero-code handles 60% of admin UI needs; low-code handles 30%; full-code is reserved for the remaining 10%.

mermaid

graph TD
    A[输入: Schema / 描述] --> B[复杂度评估]
    B --> C{抽象层级}
    C -->|无代码| D[JSON配置生成]
    C -->|低代码| E[Schema + 自定义处理器]
    C -->|全代码| F[完整组件代码]
    D --> G[配置驱动渲染器]
    E --> H[Schema驱动组件]
    F --> I[自定义React组件]
    G --> J[预览 + 迭代]
    H --> J
    I --> J
    J --> K[生产级输出]

复杂度评估会根据字段数量、条件逻辑、自定义验证和视觉需求选择合适的抽象层级。无代码可覆盖60%的管理UI需求；低代码覆盖30%；全代码仅用于剩余10%的复杂场景。

Implementation

实现代码

typescript

interface FormSchema {
  title: string;
  fields: FormField[];
  layout: "vertical" | "horizontal" | "grid";
  submitAction: string;
}

interface FormField {
  name: string;
  label: string;
  type: "text" | "number" | "email" | "select" | "date" | "textarea" | "switch";
  required?: boolean;
  validation?: { min?: number; max?: number; pattern?: string; message?: string };
  options?: Array<{ label: string; value: string }>;
  dependsOn?: { field: string; value: unknown };
}

function generateForm(schema: FormSchema): string {
  const fields = schema.fields.map(f => {
    const rules = [];
    if (f.required) rules.push(`{ required: true, message: "${f.label} is required" }`);
    if (f.validation?.pattern) rules.push(`{ pattern: /${f.validation.pattern}/, message: "${f.validation.message}" }`);

    const condition = f.dependsOn
      ? `{form.getFieldValue("${f.dependsOn.field}") === ${JSON.stringify(f.dependsOn.value)} && (`
      : "";
    const conditionClose = f.dependsOn ? ")}" : "";

    return `${condition}<Form.Item name="${f.name}" label="${f.label}" rules={[${rules.join(", ")}]}>
  ${renderInput(f)}
</Form.Item>${conditionClose}`;
  });

  return `<Form layout="${schema.layout}" onFinish={handleSubmit}>
  ${fields.join("\n  ")}
  <Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
</Form>`;
}

interface TableSchema {
  entity: string;
  columns: Array<{ key: string; title: string; type: string; sortable?: boolean; filterable?: boolean }>;
  actions: Array<"view" | "edit" | "delete">;
  pagination: { pageSize: number; serverSide: boolean };
}

function generateTable(schema: TableSchema): string {
  const columns = schema.columns.map(col => ({
    title: col.title,
    dataIndex: col.key,
    sorter: col.sortable ? true : undefined,
    filters: col.filterable ? `/* dynamic from API */` : undefined,
  }));

  return `<Table
  columns={${JSON.stringify(columns, null, 2)}}
  dataSource={data}
  pagination={{ pageSize: ${schema.pagination.pageSize}, total, onChange: fetchPage }}
  loading={loading}
  rowKey="id"
/>`;
}