引言
在 AI 时代，设计师的工作流程正在被重塑。Logo 设计不再只是专业设计师的专属，借助 AI 图像生成模型（如 OpenAI 的 DALL·E 3），普通人也能在几秒钟内生成高质量的应用图标。
此文章将带你从零开始，使用纯前端技术（HTML5 + JavaScript）和 Bootstrap 框架，结合 DALL·E 3 的图像生成能力，搭建一个简易但功能完整的 “AI Logo 生成器” 网页应用。
你可以将它理解为一个“低配版 Coze Logo 生成器”，支持用户输入应用名称与描述，点击按钮后自动生成专属 Logo。
一、项目目标
实现一个网页表单，具备以下功能：
- 用户输入 App 名称（必填）和描述（选填）
- 表单提交后，前端调用 AI 图像生成 API
- 使用 DALL·E 3 模型生成 Logo 并展示在页面上
- 页面美观、易用，符合大厂级前端规范
技术栈：HTML5 + Bootstrap 3.3.0 + Fetch API + DALL·E 3（通过第三方接口代理）
二、页面结构设计（HTML5 + Bootstrap）
我们使用 Bootstrap 的栅格系统（.container + .row + .col-md-*）实现响应式布局，确保页面在 PC 端居中显示，左右自动留白。
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- 表单内容 -->
</div>
</div>
<div class="row" id="logo"></div>
</div>
.container：居中布局，自动计算左右 margin.col-md-6：在中等及以上屏幕占据一半宽度，适配表单输入#logo：用于动态插入生成的 Logo 图片
三、构建语义化、无障碍的 HTML 表单
一个好的表单，不仅要好看，更要可访问、易用、结构清晰。我们遵循以下最佳实践：
1. 必填字段添加 required 属性
<input type="text" name="title" required>
浏览器会在提交时自动校验，提升用户体验。
2. 使用 placeholder 提供输入提示
<input placeholder="请输入名称" ...>
把用户当“小白”，降低使用门槛。
3. label 与 input 通过 for 和 id 关联
<label for="descInput">Bot描述：</label>
<input id="descInput" ...>
这是无障碍访问（Accessibility） 的基础，方便屏幕阅读器识别，符合 WCAG 标准，大厂必备。
4. 使用语义化 form 标签，合理组织结构
<form name="appForm" action="https://www.baidu.com">
<div class="form-group">
<!-- 字段 -->
</div>
</form>
form的action可设置为当前页面或空，避免误跳转- 使用
.form-group包裹每个字段，增强可读性
四、阻止默认提交，用 JavaScript 发起 AI 请求
表单默认会跳转页面，我们需要用 JavaScript 拦截提交事件，调用 AI 接口。
const oForm = document.forms["appForm"];
oForm.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认提交
const appName = this["title"].value;
const appDesc = this["desc"].value;
// 构造 AI 提示词（Prompt）
const prompt = `
你是一个互联网大厂的设计师，需要设计一个移动应用的 Logo。
应用名称为 ${appName}，
描述为 ${appDesc}。
设计一个高端、大气、上档次的 Logo。
请确保设计方案适用于移动应用图标 (App Icon)。
`;
// 调用 AI 图像生成 API
fetch('https://api.agicto.cn/v1/images/generations', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "dall-e-3",
prompt: prompt,
n: 1,
size: "1024x1024"
})
})
.then(response => response.json())
.then(data => {
console.log(data);
const img = document.createElement('img');
img.src = data.data[0].url;
img.onload = function () => {
document.getElementById('logo').appendChild(img);
};
})
.catch(error => {
console.error('Error:', error);
});
});
这段代码实现了一个前端表单提交后调用 AI 图像生成 API（如 DALL·E）动态生成 Logo 的功能。用户输入应用名称和描述，系统据此构造提示词（Prompt），通过 fetch 请求第三方 API 获取生成的图片，并将其插入页面。
核心流程：
获取表单数据 → 构造 Prompt → 调用 AI 接口 → 渲染返回的图片。
注意：
YOUR_API_KEY需替换为你的实际 API 密钥，建议加密。
五、API 接口说明（类比 Apifox 调试）
你可以将上述 fetch 请求理解为在 Apifox 中手动测试一个 POST 接口：
| 项目 | 内容 |
|---|---|
| 请求方式 | POST |
| 请求地址 | https://api.agicto.cn/v1/images/generations |
| 请求头 | Authorization: Bearer YOUR_API_KEY |
| 请求体（JSON） | { model: "dall-e-3", prompt: "...", size: "1024x1024" } |
这正是 LLM（大语言模型）驱动的 API 调用范式：前端 → 调用 AI 接口 → 返回结果 → 渲染页面
六、技术亮点总结
| 特性 | 说明 |
|---|---|
| 低代码实现 AI 功能 | 无需训练模型，调用 API 即可生成 Logo |
| 响应式布局 | 使用 Bootstrap 实现 PC 友好界面 |
| 无障碍设计 | label + id 联动，支持残障用户 |
| 用户体验优化 | placeholder、required、阻止默认提交 |
| 前端调用 LLM | 展示现代 Web 应用如何与 AI 深度集成 |
七、结语
通过这个简单的项目，我们看到了 前端 + AI 的巨大潜力。你不需要成为 AI 专家，只要会写 HTML 和 JavaScript，就能构建出媲美Coze平台的 AI 应用原型。
未来，每一个网页开发者，都可能是 AI 应用的创造者。
