AI吉祥物设计接单:从零搭建作品展示与下单页的完整流程
想用AI吉祥物设计接单,最直接的做法是先做一个能展示作品、能收集需求的落地页,而不是只靠社交平台私信。
本文按零基础可操作的方式,从服务器准备到页面验证完整走一遍,适合刚起步、没有前端团队的个人设计师。
先想清楚:接单页需要放什么
接单页的目标不是炫技,是让客户快速判断“你能做什么、怎么收费、怎么联系”。
建议包含四块内容:
- 作品展示区:放 6 到 9 张不同风格的AI吉祥物案例,每张图配一句说明,比如“电商品牌·圆润亲和风”。
- 服务说明:写清交付物(如三视图、透明底 PNG、源文件)、修改次数和大致周期。
- 需求表单:至少收集称呼、联系方式、用途、风格偏好、预算范围和期望时间。
- 常见问题:放 2 到 3 条真实疑问,比如“AI 生成后能商用吗”“修改几次”“多久交付”,降低沟通成本。
不要放虚构的客户 logo 或夸大的成交数据,零基础阶段真实案例比包装更有说服力。
准备条件:服务器与运行环境
接单页本质是一个静态页面加一个表单接口。
推荐用一台 1 核 2G 的云服务器,安装宝塔面板管理。
以下操作假设系统为 Linux,且已通过 SSH 登录服务器。
先在服务器上安装宝塔面板(以官方最新安装命令为准,这里不写死版本):
# 安装完成后会输出面板地址、用户名和密码,务必保存
安装完成后,在浏览器打开面板地址,登录后进入软件商店,安装 Nginx 和 PHP(表单接口需要)。
如果只想先做纯展示页,可以只装 Nginx。
接着在宝塔面板中创建站点:
- 进入“网站” → “添加站点”。
- 域名填你自己的域名;没有域名可先用服务器 IP 测试。
- 根目录保持默认,PHP 版本选 7.4 或 8.0 均可。
- 创建后记下站点根目录路径,通常是
/www/wwwroot/你的域名。
上传页面并配置 Nginx
把本地写好的 index.html、图片目录 images/ 通过宝塔“文件”功能上传到站点根目录。
上传后检查文件权限,目录建议 755,文件建议 644。
如果页面路径需要更简洁,可以在站点设置里添加伪静态或直接使用默认的 index.html。
下面是 Nginx 配置中需要确认的关键项,可在“网站” → “设置” → “配置文件”中查看:
server {
listen 80;
server_name 你的域名;
root /www/wwwroot/你的域名;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
改完配置后点击“保存”,宝塔会自动重载 Nginx。
如果保存时报错,优先检查 server_name 和 root 路径是否与实际一致。
表单部分如果不想写后端,可以用第三方表单服务生成嵌入代码,把 替换成对方提供的 iframe 或脚本即可;
如果自己写 PHP 接口,建议把接收到的内容写入数据库或发送到邮箱,并在页面上做提交成功提示。
上线前必须做的验证
页面能打开不等于能接单,按下面几项逐条检查:
- 用手机和电脑分别打开页面,确认图片没有拉伸、文字没有溢出。
- 提交一次测试表单,确认能在后台或邮箱收到内容;如果收不到,先看浏览器控制台是否有报错,再检查接口路径和权限。
- 在服务器上执行
curl -I http://你的域名,返回 200 才算正常;返回 403 通常是权限或首页文件缺失。 - 检查图片大小,单张建议压缩到 300KB 以内,否则移动端加载慢会直接影响客户停留。
- 配置 HTTPS:在宝塔“网站” → “SSL”中申请免费证书并开启强制 HTTPS,避免浏览器提示不安全。
常见坑与处理方式
页面打开是宝塔默认页:说明站点根目录下没有 index.html,或文件上传到了错误目录,回到“网站”确认根目录路径。
表单提交后页面空白:多为接口返回格式错误或 PHP 报错,查看站点错误日志(宝塔“网站” → “日志”)定位具体行。
图片显示裂图:检查文件名大小写,Linux 区分大小写;
同时确认图片确实在 images/ 目录下。
客户说打不开:先确认域名解析是否生效,可用 ping 你的域名 看是否指向服务器 IP;
若使用国内服务器,域名需完成备案才能通过 80 端口访问。
最后提醒一句:AI吉祥物设计接单的核心是作品和沟通,页面只是入口。
上线后把链接放到社交平台简介里,定期替换最新案例,比一次性做完就不管更有效。
如果你还在选服务器阶段,可以先按本文环境跑通本地页面,再迁移到线上。