low-code-generation

低代码生成

Agent Skills™ 的一部分，由 googleadsagent.ai™ 提供

描述

低代码生成利用 AI，根据自然语言描述或架构定义生成表单、表格、仪表板和工作流 UI。Agent 可生成可用于生产环境的组件，覆盖从零代码到完整代码的范围：从拖放式 JSON 配置到完全自定义的 React 组件，并始终生成满足需求的最简单成果。

范围原则至关重要：并非所有内容都需要自定义代码，也并非所有内容都能通过配置实现。管理面板中的 CRUD 表格最适合使用 JSON 驱动的表格组件，并内置排序、筛选和分页功能。具有条件逻辑的复杂多步骤表单适合使用带验证规则的表单架构。具有自定义可视化效果的定制分析仪表板则需要完整代码。Agent 会根据复杂度选择合适的抽象层级。

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

适用场景

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

工作原理

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]

复杂度评估会考量字段数量、条件逻辑、自定义验证和视觉需求，以选择合适的抽象层级。零代码可满足 60% 的管理 UI 需求；低代码可满足 30%；其余 10% 则需要完整代码。

实现

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"
/>`;
}

最佳实践

• 从能够满足需求的最简单抽象层级入手
• 标准 CRUD 使用架构驱动生成，仅在特殊情况下编写自定义代码
• 从架构生成 TypeScript 类型，确保端到端类型安全
• 将验证规则纳入架构，而不是事后再编写自定义代码
• 提供预览模式，让用户在提交前迭代调整生成的 UI
• 导出生成的代码，让开发者在复杂度增加时可以脱离低代码方案

平台兼容性

平台	支持情况	备注
Cursor	完全支持	组件生成 + 预览
VS Code	完全支持	架构编辑 + 生成
Windsurf	完全支持	支持 UI 脚手架搭建
Claude Code	完全支持	表单/表格生成
Cline	完全支持	低代码组件创建
aider	部分支持	仅代码生成

相关技能

• 工作流编排
• 批处理
• MCP 服务创建

关键词

low-code form-generation table-generation schema-driven admin-panel crud zero-code rapid-development

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License