大模型编码“吊打“低代码的基本逻辑

掘金安东尼
1,143 阅读3分钟

低代码平台曾像自助火锅拯救厨房小白一样解救过许多人，比如把300行CRUD代码压缩成拖拽3个组件（附带5个隐藏bug），或者让产品经理也能亲手实现"五彩斑斓的黑"的UI设计，以及用流程图替代了祖传的意大利面条式代码。传言某CTO曾扬言："我们用低代码3天就完成了ERP系统改造！"（绩效又有了）

image.png

然而，当低代码还在用乐高积木搭房子时，大模型编码已经掏出3D打印机开始造电梯了。

究其本质上来说，大模型开发（如Copilot、Cursor、Codex等工具）与低代码平台的竞争本质上都是“降低软件开发门槛”这一目标。

ai-bot.cn/favorites/a…

image.png

低代码工具常常依赖于对“已知”的封装和“可视化”的引导，大模型却可以打破这些局限，深入到代码的最深层次，真正实现“理解”与“创造”。

举一个简单的栗子🌰

在低代码平台上，通过拖拽组件来实现功能。假设低代码平台提供了“表单”组件、“输入框”组件、以及“提交按钮”组件，通常这样构建一个简单的注册表单：

1、拖拽一个“表单”组件到页面中。

2、拖拽两个“输入框”组件到表单中，分别命名为“用户名”和“密码”。

3、拖拽一个“提交按钮”组件到表单下方。

4、配置每个组件的属性，如绑定输入框与表单数据。

5、配置提交按钮的操作逻辑：当点击按钮时，提交表单数据。

image.png

代码看起来可能是这样子的：

const userForm = new Form();
const usernameInput = new InputField({ name: 'username', placeholder: 'Enter username' });
const passwordInput = new InputField({ name: 'password', placeholder: 'Enter password' });
const submitButton = new Button({ label: 'Submit', onClick: handleSubmit });

userForm.addComponent(usernameInput);
userForm.addComponent(passwordInput);
userForm.addComponent(submitButton);

function handleSubmit() {
  const data = userForm.getData();
  api.submitRegistration(data);
}

这样，虽然看起来无需手动编写复杂的前端代码，仅仅通过组件拖拽完成表单构建。

但，低代码平台的最大问题是：它对灵活性和自定义的限制。例如，如果要实现复杂的业务验证、数据加密、接口调用等，需要额外手动处理。

对于大模型来说，只需简单地描述需求，模型即可生成代码并对其进行优化。仍然以这个“用户注册”功能来举例：

Prompt：“实现一个包含用户名、密码输入框和提交按钮的注册表单，提交后数据要进行验证，并调用/api/register接口。”

劈里啪啦，一顿输出，代码有了：

import React, { useState } from 'react';

function UserRegistration() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    if (!username || !password) {
      setError('Username and password are required.');
      return;
    }

    const response = await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });

    const result = await response.json();
    if (response.ok) {
      alert('Registration successful');
    } else {
      setError(result.message || 'Registration failed');
    }
  };

  return (
    <div>
      <h2>Register</h2>
      <input
        type="text"
        placeholder="Enter username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default UserRegistration;

大模型不仅生成UI部分，还自动加入用户输入验证、错误处理、以及与后端API的交互逻辑，代码结构生成清晰、可维护。如果想加入更多复杂的验证逻辑，可以追加描述直接修改代码。

对比之下，低代码平台依赖的更多是“模板化”和“规则化”，而大模型则是在更高层次上帮助开发者打破传统的开发瓶颈，实现自动化、智能化的全新开发体验。

这简直就是降维打击！

image.png

未来的编程高手，是懂玄学的AI饲养员，不过建议各位道友且行且珍惜 —— 等AI学会自己写prompt的时候（现在的不断反思，就有这样的趋势），我们可能真要考虑转行黄袍加身了。

avatar
文章
阅读
粉丝