三大主流前端

基于以上的增强框架有以下：

一个AI生成前端页面的神器

这是使用 大预语言模型LLM 生成 前端工具。

项目地址：https://github.com/bravekingzhang/gpt-frontend-code-gen

先看效果

1、一句话生成一个前端页面

2、持续迭代，再提要求，修改下为 iOS 风格。

3、继续提示指令，修改布局。

功能

• • 使用 GPT-4 或Kimi 生成 React 组件。

• • 支持 Chakra UI 组件\ShadcnUI 组件生成。

• • 实时预览生成的组件。

• • 通过持续对话修改和更新组件。

• • 配置自己的 APIKey 和 BaseUrl，支持多种大模型。

• • 使用 Docker 和 Docker Compose 一键设置和启动。

技术栈

• • 前端：React, Chakra UI, vite

• • 后端：Koa

核心代码

router.post("/generate-code", async (ctx)=>{
const{ useShadcnUI, prompt, apiKey, baseUrl, model }= ctx.request.body;

const uiMode = useShadcnUI ?"React & Shadcn UI":"React & Chakra UI";
const uiExample = useShadcnUI
? previewPageContentShadcnUI
: previewPageContent;

try{
const currentCode = readCode();

const detailedPrompt =`
Blow is the existing code，I wrapped it in a code block for better readability:
\`\`\`jsx
${currentCode}
\`\`\`

Please make the following changes:
${prompt}

Return the complete and functional implementation code without any additional explanations and any markdown code block markers.
`;

const messages =[
{
role:"system",
content:`You are a professional front-end developer. Only provide the complete and functional implementation code without any additional explanations and any markdown code block markers, whether modifying existing code or writing from scratch.
always use ${uiMode} for the implementation. Here is a example :
\`\`\`jsx
${uiExample}
\`\`\
`,
},
{ role:"user", content: detailedPrompt },
];

const requestData ={
messages,
model,
max_tokens:4096,
};

const response = await axios.post(
`${baseUrl}/v1/chat/completions`,
requestData,
{
headers:{
Authorization:`Bearer ${apiKey}`,
},
}
);

const updatedCode = response.data.choices[0].message.content
.replace(/```jsx|```/g,"")
.trim();
writeCode(updatedCode);
autoCommit(`feat:${prompt}`);

ctx.body ={
success:true,
code: updatedCode,
};
}catch(error){
ctx.body ={
success:false,
error: error.message,
};
}
});

这里定义一个 POST 路由/generate-code，用于生成代码。

从请求体中获取useShadcnUI、prompt、apiKey、baseUrl和model。

根据useShadcnUI选择不同的 UI 模式和示例代码。

读取当前代码并构建详细的提示detailedPrompt。

构建请求数据requestData并发送请求给 OpenAI 的 GPT 模型。

获取返回的代码，去掉 Markdown 代码块标记，更新代码文件并自动提交变更。

返回生成的代码或错误信息。