MasterGo AI 生成设计图及代码

前言

在日常的开发工作中，我们常常会遇到这样的场景：领导布置任务，仅口头描述功能设想，未提供原型或设计图，却要求最终效果出色。面对这种情况，开发者该如何应对？传统方法显然难以高效满足需求，但AI技术的发展为我们提供了新的解决方案。

蓝湖

蓝湖的MasterGo相信大家肯定不陌生，但它新出的AI生成设计图和代码的工具，可能都没用过，最近也是遇到了上面说的无原型、无设计图的需求，简单用了一下MasterGo的工具，发现真的超出我的想象，简单的几句话就能理解出我的需求，并直接给出设计图已经实现的代码。

工具的入口在蓝湖首页就可以找到

手绘图+文字描述

上面这个简单的"原型 "就是我使用画图板用了两分半时间画出来，如果我再简单的扔几句描述给AI，会发生什么呢？

他会先给出他理解到和他所设计的页面结构，你可以根据他给出来的大纲直接生成或者修改后生成。

左侧生成的页面是可以交互的，并且他可以直接生成相关前端代码，代码都是使用了TailwindCSS的，拿来写个demo非常友好，并且如果你是React项目的话，他在生成代码的时候是会使用Antd的。

Jsx 复制代码

// 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Input } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
  const [activeType, setActiveType] = useState('link');
  const [activeTab, setActiveTab] = useState('home');
  const types = [
    { id: 'link', name: '链接', icon: 'fa-solid fa-link' },
    { id: 'text', name: '文本', icon: 'fa-solid fa-text-size' },
    { id: 'image', name: '图片', icon: 'fa-solid fa-image' },
    { id: 'video', name: '视频', icon: 'fa-solid fa-video' },
    { id: 'audio', name: '音频', icon: 'fa-solid fa-music' },
    { id: 'file', name: '文件', icon: 'fa-solid fa-file' },
  ];
  return (
    <div className="relative min-h-screen bg-white">
      {/* 导航栏 */}
      <div className="fixed top-0 left-0 w-full bg-white shadow-sm z-50 px-4 py-3">
        <div className="px-2">
          <h1 className="text-3xl font-bold text-[#1677ff] mb-2">腾讯优码</h1>
          <p className="text-base font-medium text-[#1677ff] mb-2">
            码上生成 无限可能
          </p>
          <p className="text-sm text-[#666666] max-w-[280px]">
            免费生成个性二维码，借助腾讯大数据和 AI 技术 祝您业绩快速增长
          </p>
        </div>
      </div>
      {/* 主要内容区域 */}
      <div className="pt-[140px] pb-[80px] px-4">
        {/* 类型选择区 */}
        <div className="mb-6">
          <div className="grid grid-cols-3 gap-4 p-2">
            {types.map((type) => (
              <div
                key={type.id}
                onClick={() => setActiveType(type.id)}
                className={`flex flex-col items-center justify-center h-[80px] rounded-lg cursor-pointer transition-all duration-300 ${
                  activeType === type.id
                    ? 'border-2 border-[#1677ff] shadow-lg'
                    : 'border border-[#E0E5F2]'
                }`}
              >
                <i
                  className={`${type.icon} text-2xl mb-2 ${
                    activeType === type.id ? 'text-[#1677ff]' : 'text-[#666666]'
                  }`}
                ></i>
                <span
                  className={`text-sm ${
                    activeType === type.id ? 'text-[#1677ff]' : 'text-[#666666]'
                  }`}
                >
                  {type.name}
                </span>
              </div>
            ))}
          </div>
        </div>
        {/* 输入区域 */}
        <div className="bg-white rounded-lg p-4 shadow-sm mb-6">
          <Input.TextArea
            placeholder="请输入链接"
            className="min-h-[200px] border-dashed border-2 border-[#E0E5F2]"
          />
        </div>
        {/* 生成按钮 */}
        <Button className="!rounded-button w-4/5 h-12 mx-auto block bg-[#1677ff] border-none text-white text-lg font-medium hover:opacity-90 transition-opacity">
          立即生成二维码
        </Button>
      </div>
      {/* 底部标签栏 */}
      <div className="fixed bottom-0 left-0 w-full bg-white border-t border-[#E0E5F2] z-50">
        <div className="grid grid-cols-2 h-[60px]">
          <div
            onClick={() => setActiveTab('home')}
            className={`flex flex-col items-center justify-center cursor-pointer ${
              activeTab === 'home' ? 'text-[#1677ff]' : 'text-[#666666]'
            }`}
          >
            <HomeOutlined className="text-xl mb-1" />
            <span className="text-xs">首页</span>
          </div>
          <div
            onClick={() => setActiveTab('profile')}
            className={`flex flex-col items-center justify-center cursor-pointer ${
              activeTab === 'profile' ? 'text-[#1677ff]' : 'text-[#666666]'
            }`}
          >
            <UserOutlined className="text-xl mb-1" />
            <span className="text-xs">我的</span>
          </div>
        </div>
      </div>
    </div>
  );
};
export default App;

单看我这个页面生成效果的话你可能觉得他并没有很好看（我也是这么认为的），主要还是给的提示词比较少，加上我的原型只是用了一个流程工具随便拖出来的，所以如果想要达到你想要的效果最好的还是多一点提示词给他固定色系、风格、加上一张还比较不错的"原型图"

借鉴一下

如果给他借鉴一下真实页面的话会设计成什么样子呢

看起来顺眼多了，所以如果给他的图片和描述足够多的话，是可以绘制出比较好看的设计图的。

缺点和优点

缺点：成品效果的美感取决于你更相对精准的语言描述 或者更加精美的原型图 。

优点：拯救灵感枯萎、快速、准确、大致的框架功能可以得到很好的展现。