通过Create.xyz的AIGC能力生产前端页面

介绍

Create是什么？

Turn your words into sites, components, and tools - built with code.

Create是一种新的人工智能创意工具，可以让任何人用自然语言进行构建。你可以用它来制作组件、网站、工具和应用程序。只要描述你想要它们的外观和工作方式，Create将用户的描述转化为实际的代码，实现所见即所得的设计理念。

地址：https://www.create.xyz/

效果图：

Create有哪些能力？

Create.xyz的核心能力在于其能够理解自然语言描述（prompts），并将其转化为代码，生成静态页面和简单的CRUD页面。以下是其主要特点：

自然语言/图片转代码：用户可以通过描述或上传图片来生成页面。
代码生成：将描述转化为代码，支持组件和API的生成。
多模态支持：支持将图片转换为代码，实现Screenshot to App的功能。

1.结合大模型能力，将描述（prompt）转化为代码

Create turns your descriptions into code, so it looks and work how you want.

E.g. “Create a Table to describe user’s info.”, “创建一个股票列表组件”

1.1 生成组件Components

Quickly make components to build powerful projects or match your brand

E.g. “A pie chart to show the distribution.”, “根据图片信息生成一个列表组件”

1.2 生成接口API

Bring your own REST API.Upload your Swagger docs and have Create build you a tool that talks to your own custom APIs.

Create的数据生成从结果来看相对简单，目测是在prompt中约束了使用fetch API以及增加了自己数据库的调用信息和表信息（text2sql方式）。另外我们也可以指定要ajax请求某个接口，但需要在描述中解释清楚接口出入参信息。

E.g.”查询用户所有数据”（需要打database标签）

fetch('/api/db/tempdata', {
      method: 'POST',
      body: JSON.stringify({
        query: 'SELECT * FROM `users`'
      })
    })
    .then((response) => response.json())
    .then((data) => {
      setUsers(data.result);
    });

1.3 （平台能力）托管代码和页面部署能力

产生可直接访问的地址，如https://www.create.xyz/app/4cafb2c9-ba16-4288-984d-9a59ea102eab

2.多模态，将图片转换为代码

Screenshot to app，Drop an image of what you want into your description to build it

Create的综合评估

stage2.5的形式（介于低代码到完全aigc之间）。

主要优势是产品形态（工作台）很完备、确实可以在这个工作台通过ai生成+修改完成简单页面的创建，主要问题是生成的组件几乎是“非受控”、“一次性”的、不太能复用（这个问题平台可以通过工程手段解决）。

输入：图片或需求prompt
输出：是代码(React组件+tailwind原子类css)、非DSL
能力实现概括：基于claude/gpt-4等模型生成UI组件/模块的代码
UI能力：支持“原子组件”、“模块”、“应用页面”的代码生成和静态组装
事件交互：仅支持简单事件的配置生成（点击跳转），前端没有状态管理能力
数据处理：默认生成的结果是静态“假”数据，需要在prompt声明调xxx接口才会改为取接口形式（结果需要修改）；和大多低码平台一样开放了Database能力、可进行数据的存取（prompt2sql）

Create的实现

整体使用下来，Create的生产公式为：

1	Page = Components + Functions + Datas(database) + *Assets

→ Sites or Apps = Page1 + Page2…

Create核心的代码生成能力没有自训练模型，而是使用了Claude Sonnet3.5、gpt4等模型API，因此虽然具体实现是闭源黑盒的、但实现会类似于screenshot-to-code之类的通过区分生成场景、指令要求和控制上下文来把控生成效果。

实现思路：

1.自上而下拆分、渐进明细

自上而下进行需求拆分
根据需求进行prompt拆分、泛化及转换

2.推崇组件生产模式：

组件生产的工程方式能力更强，You can create much more powerful apps if you break your project into components.
推荐prompt不应该太复杂，如果复杂，拆到组件：If it gets too long or complex, you can move things into components to build up.

原子能力（Component、Function、Database）的实现

1.1 Component组件

组件的产物代码为 React + Tailwind CSS 技术栈、遵循函数式组件 + UI受控组件的编码模式。

优点：灵活，发挥空间大
问题：比较难受控，生产的组件是“一次性”的、不太能复用（这个问题平台可以通过工程手段解决）

E.g.

function MainComponent({ stockData }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <div className="flex justify-between mb-2">
        <div className="flex space-x-4">
          <span className="text-gray-500">个股资金</span>
          <span className="text-gray-500">板块资金</span>
        </div>
        <div className="flex space-x-4 text-gray-500">
          <span>今日</span>
          <span>近5日</span>
          <span>近20日</span>
        </div>
      </div>
      <table className="w-full">
        <thead>
          <tr className="text-gray-500 text-sm">
            <th className="text-left py-2">名称/代码</th>
            <th className="text-right py-2">主力净流入</th>
            <th className="text-right py-2">最新</th>
            <th className="text-right py-2">涨跌幅</th>
          </tr>
        </thead>
        <tbody>
          {stockData.map((stock, index) => (
            <tr key={index} className="border-t border-gray-200">
              <td className="py-2">
                <div>{stock.name}</div>
                <div className="text-gray-500 text-sm">{stock.code}</div>
              </td>
              <td className="text-right text-red-600">{stock.inflow}</td>
              <td className="text-right">{stock.price}</td>
              <td className="text-right text-red-600">{stock.change}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
 
function StoryComponent() {
  const exampleStockData = [
    { name: '公司A', code: '000001', inflow: '10亿', price: '20.5', change: '1.2%' },
    { name: '公司B', code: '000002', inflow: '5亿', price: '15.3', change: '-0.8%' },
  ];
 
  return (
    <div>
      <MainComponent stockData={exampleStockData} />
    </div>
  );
}

对应解析后的prompt：

Background color: White
Border: Rounded corners
Shadow: Medium Shadow
Padding: Medium
 
Header section
Layout: Horizontal distribution with two sections
Left Section: Contains two labels "个股资金" and "板块资金" in gray text
Right Section: Contains three labels "今日", "近5日", "近20日" in gray text
 
Table
Full width
Header:
Text color: Gray
Text size: Small
Column titles: 左对齐:名称/代码, 右对齐:主力净流入, 最新, 涨跌幅
Rows:
Border-top: Light gray
Name column:
Stock name in default text
Stock code in gray, small text
Inflow and Change columns: Right-aligned, red text
Price column: Right-aligned default text

底层prompt感觉可以参考screenshot-to-code的prompt：

"""
You are an expert React/Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps 
using React and Tailwind CSS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).

- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family, 
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.

In terms of libraries,

- Use these script to include React so that it can run on a standalone page:
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>

Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""

1.2 Database数据

这部分处理相对简单，fetch API + REST api + Text2Sql 模式

代码如：

React.useEffect(() => {
    fetch('/api/db/tempdata', {
      method: 'POST',
      body: JSON.stringify({
        query: 'SELECT * FROM `users`'
      })
    })
    .then(response => response.json())
    .then(data => {
      setUsers(data.result);
    });
  }, []);
 
  const addUser = (name, score) => {
    fetch('/api/db/tempdata', {
      method: 'POST',
      body: JSON.stringify({
        query: "INSERT INTO `users` (`name`, `score`) VALUES (?, ?)",
        values: [name, score]
      })
    })
    .then(() => {
      setUsers([...users, { id: Date.now(), name, score }]);
    });
  };
 
  const deleteUser = (userId) => {
    fetch('/api/db/tempdata', {
      method: 'POST',
      body: JSON.stringify({
        query: "DELETE FROM `users` WHERE `id` = ?",
        values: [userId]
      })
    })
    .then(() => {
      setUsers(users.filter(user => user.id !== userId));
    });
  };
 
  const updateUser = (userId, name, score) => {
    fetch('/api/db/tempdata', {
      method: 'POST',
      body: JSON.stringify({
        query: "UPDATE `users` SET `name` = ?, `score` = ? WHERE `id` = ?",
        values: [name, score, userId]
      })
    })
    .then(() => {
      setUsers(users.map(user => user.id === userId ? { ...user, name, score } : user));
    });
  };

对应prompt：

操作请求：

1.3 Function逻辑处理/工具方法

自然语言说明规则，通过模型生成对应的处理函数代码

代码如：


function handler({ score }) {
  if (score > 60) {
    return { result: 'passed' };
  } else {
    return { result: 'not passed' };
  }
}

对应prompt：

2.原子能力的组合——核心功能（菜单）

3.需求分析能力

分析图片/prompt意图，并将简单的需求描述转为详细的、可用于开发实现的prompt

模型：Claude、GPT4、Gemini、Groq…

【调研】通过Create.xyz的AIGC能力生产前端页面