【AI编程】：聊出一个表情包编辑器，发布到微信表情

欢迎进入AI编程时代！氛围编程 (Vibe Coding)作为由 AI 驱动的开发新范式让任何人都可以通过自然语言对话生成代码，让写程序再也不是程序员的专属。这篇文章将通过与AI聊天，不写一行代码，生成一个完整的表情包生成器，并发布到微信表情！

作品

生成器制作的微信表情已成功上架，欢迎体验！

【戏精鳄】微信表情 - 来自微信表情商店^[1]

生成器体验地址^[2]

提示词拆解

我将拆解核心提示词，并一步一步生成表情包编辑器

1. 首先简单描述需求

# 需求

开发一个表情包生成页面。用户上传形象图或者通过提示词生成形象图，然后根据形象图生成表情包。

## 技术栈

+ 纯前端实现，单页面应用
+ HTML + CSS + JS

## 大模型
+ 大语言模型：兼容 OpenAI，参考 deepseek （https://api-docs.deepseek.com/zh-cn/）
+ 生图模型：
  + 即梦（https://www.volcengine.com/docs/85621/1747301?lang=zh ）
  + 千问（https://help.aliyun.com/zh/model-studio/qwen-image-edit-api）

## UI设计
+ 页面采用极简留白设计风格，清新雅致，符合现代审美
+ 上下布局，上部为大模型设置，下部分为功能区域
  + 功能区左右布局，右侧为形象图生成，左侧为选项卡
    + 选项卡1：**表情制作**，左右布局，左侧为表情列表，右侧为表情包预览
    + 选项卡2：**发布到微信表情开放平台**（先为空，具体内容后期添加）

## 操作流程
1. 上传或生成形象图
2. 表情列表添加表情
3. 生成表情包

通过上面的提示词生成页面的整体结构

2. 模型功能

# 大模型设置
+ 数据保存到 localStorage
+ 参照文档实现模型调用通用方法

## 大语言模型
+ 输入 API Base URL 和 API Key

## 生图模型
+ 下拉框切换模型
+ 千问：输入 API Key
+ 即梦：输入Access Key ID 和 Secret Access Key

文档这里我直接将阿里和即梦的接口文档保存到本地，喂给AI。
生图模型无法直接在页面调用，可以让AI生成代理实现

3. 形象图

# 形象图生成
上传和生成方式任选其一，上传或生成后可以预览

4. 表情列表

# 表情列表
上中下布局，上面为功能按钮区，中间为表情列表，下面为生成表情包按钮
## 功能区
+ 手动添加表情：点击后在列表顶端增加新的表情
+ 批量添加表情：点击后输入表情名称，调用大语言模型自动生成
+ 自动添加表情：完全由大模型生成表情名称和表情提示词
+ 导入：导入提示词（JSON格式）
+ 导出：导出表情列表（JSON格式）
+ 批量删除功能：可以全选、选择后批量删除

## 表情列表
+ 表情项包含表情名称、表情提示词
+ 表情名称后面是功能按钮：
  + 生成提示词：根据表情名称调用大语言模型生成提示词
  + 生成图片：重新生成表情图片
  + 删除：删除表情

## 生成表情包
+ 点击后根据参考图和表情列表调用生图模型生成表情图

5. 表情包预览

# 表情包预览
上下布局，上面为功能按钮区，下面为生成的表情图片列表
## 功能区
+ 停止生成：停止表情生成
+ 下载表情包：打包下载表情列表中的图片（JS实现）
## 表情图片列表
+ 列出生成的表情图片，点击可以预览

6. 发布到微信表情开放平台

# 发布到微信表情开放平台
上下布局，上部为标题，微信表情开放平台，点击后跳转到微信表情官网：https://sticker.weixin.qq.com/，下部分为发布到微信表情需要的图片和文案,具体内容如下：

## 横幅
根据上传的表情生成横幅
要求：
750*400 像素。
图片中避免出现任何文字信息。
图片色调要活泼明朗，避免使用白色和透明背景。
横幅内容须与上传表情有关，不要只做简单的排列，画面要丰富，有故事性。
不要改变上传的表情形象
图中元素不能因被拉伸或压扁等原因导致变形。
## 封面
根据上传的表情生成封面
要求：
240*240像素。
图片中形象不应有白色描边, 并避免出现锯齿。
避免使用白色背景，要使用透明背景。
合理安排图片布局，图片不应有过多留白。
画面尽量简洁，避免加入装饰元素。
避免出现文字。使用 https://www.remove.bg/zh 去除背景！
## 图标
根据上传的表情生成图标
要求：
50*50像素。
画面尽量简洁，避免加入装饰元素。
图片中形象不应有白色描边，并避免出现锯齿。
避免使用白色背景，要使用透明背景。
不要出现正方形边框，避免表情主体出现生硬的直角边缘。
合理安排图片布局，每张图片不应有过多留白。使用 https://www.remove.bg/zh 去除背景！
## 名称
参考上传图片生成表情名称
要求：
不超过 8 个汉字。
5 个汉字以内显示效果最佳。
不包含任何标点符号。
中文名称避免出现空格。
## 介绍
参考上传图片生成一段对表情的介绍
要求：
不超过 80 个汉字。
充分展现表情的形象特点或故事情节。
## 赞赏引导语
生成一段引导用户发赞赏的语句，精心措辞的引导语能够提升用户发赞赏的意愿。
要求：
5~15个汉字。
文案可诙谐幽默，与上传表情有关联性。
## 赞赏引导图
生成一张赞赏引导图，用于吸引用户发赞赏。精心创作的引导图能够提升用户发赞赏的意愿
要求：
750*560 像素。
风格需与表情一致。
不可出现与表情不相关的内容。
## 赞赏致谢图
生成一张赞赏致谢图，用户发完赞赏后，展示在答谢页面的图片。精心创作的致谢图能够激发用户的分享意愿，吸引更多用户赞赏
要求：
750*750像素。
风格需与表情一致。
不可出现与表情不相关的内容。
应避免出现诱导分享的内容。

小结

至此核心功能已完成，当然，细节需要跟AI沟通调整。只要理清思路，学会与AI对话，你可以制作出任何想要的应用。

引用链接

[1] 【戏精鳄】微信表情 - 来自微信表情商店: https://sticker.weixin.qq.com/cgi-bin/mmemoticon-bin/emoticonview?oper=single&t=shop/detail&productid=aL2PCfwK/89qO7sF6/+I+UDhfwEjhec2ZNvdnLLJRd/Me99SWeFJIEl7o7VpaU6PDr+wtn7F7esOoykYtVuXvx7SOMjECmpelveC5bZXlBLs=
[2] 生成器体验地址: https://www.undsky.com/app/sticker/