从0到1：AI红包开发全攻略，小白也能轻松上手！

从0到1：AI红包开发全攻略，小白也能轻松上手！

AI编程时代真的来了！最近我重度沉迷AI编程，发现它简直是开发神器，前端页面、后端服务，都能轻松搞定，效率直接起飞！最近临近过年，我突然冒出一个想法：为什么不试试用AI来做个红包呢？

说干就干！

1. 明确需求

要用AI做红包，首先得了解红包的规则。简单来说，我们需要一张精美的红包封面图，它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求，是957×1278像素。看起来有点复杂，不过别担心，AI会帮我们搞定！

这里我们设计两个页面，一个首页用来展示用户生成的红包样例，一个红包生成页，用户输入提示词后，生成图片，可以预览在手机上的效果。网站配主要是红为主，喜庆大气。

2. 红包预览

红包预览这部分是关键，我直接把需求丢给了AI，结果它生成的预览效果并没有达到我的预期。

使用Vue+TS+TailwindCSS 开发一个网站，服务器会返回一张图片，用户可以预览这张图的红包封面，红包消息气泡、拆红包页、红包详情页等

于是，我决定自己动手，丰衣足食！我从下载了设计模板，用在线PS工具photopea工具进行了加工，加入手机外壳素材。

提示词继续和AI沟通，生成的效果还是不满意。这里需要我们手动调整图片的层级，大小和缩放等。不明白的可以丢代码给AI，让它解释。最后终于是达到了我们想要的预览效果。

. 首页

首页我直接采用了v0.dev，完美还原了优秀案例，简直不要太方便！并且用Python爬取了官方的红包图，生成了一个超酷的红包封面墙！

4. 提示词操作

这个页面我参考了淘宝商品页的布局，还是在v0中实现。有了初步效果后，放在windsurf中继续和AI拉扯，直至达到想要的完美效果。

使用Vue+TailwindCSS 实现，参考图示 左侧为展示区域分为两部分：红包封面，气泡，挂件等的缩略图 点击缩略图，切换大图展示区域，默认为第一个缩略图展示 右侧为操作区域：提示词输入框，气泡挂件预览开关，生成红包按钮，资源下载按钮 网站配喜庆，大气，红为主

附了一张淘宝商品页的截图

5. Coze红包封面工作流

为了实现文生图，我使用了Coze的工作流，效果非常不错。可以自定义系统提示词和用户提示词，只需要输入提示词，就能生成独一无二的红包封面！

申请COZE_API_KEY，即可在前端根据工作流Id调用，文档在这里Coze工作流API

async generateImage(prompt: string) {  
    try {  
      ct apiHost = get<string>('COZE_API_HOST');  
      ct apiKey = get<string>('COZE_API_KEY');  
      ct workflowId = get<string>('COZE_API_WORKFLOW_ID');  
  
      if (!apiHost || !apiKey || !workflowId) {  
        throw new Error('Missing required environment variables');  
      }  
  
      cole.log('Calling Coze API with:', {  
        apiHost,  
        workflowId,  
        prompt  
      });  
  
      ct respe = await axios.post(  
        apiHost,  
        {  
          workflow_id: workflowId,  
          parameters: { prompt }  
        },  
        {  
          headers: {  
            'Authorization': `Bearer ${apiKey}`,  
            'Content-Type': 'application/json'  
          }  
        }  
      );  
  
      cole.log('Coze API respe:', respe.data);  
  
      if (!respe.data || respe. !== 0) {  
        throw new Error(respe.data?.msg || 'Failed to generate image');  
      }  
  
      // 解析返回的 data 字符串  
      ct imageData = JSO.parse(respe.data.data);  
  
      if (!imageData.image) {  
        throw new Error('API返回的数据中没有图片URL');  
      }  
  
      return {  
        image_url: imageData.image.replace(/['"]+/g, ''),  
        debug_url: respe.data.debug_url  
      };  
    } catch (error) {  
      ('Error generating image:', error);  
      throw new HttpException(  
         || 'Failed to generate image',  
        HttpStatus.ITERAL_SERVER_ERROR  
      );  
    }  
}  

嗯，本来想部署的，但是coze不给国外的服务器调用，然后coze版本没有文生图的节点，卒

6. 后记

这次用AI做红包网站的经历，切实体验到了AI编程的强大，不仅可以快速开发，还能激发无限创意。虽然网上说AI很神，但我认为它更像是你的好帮手。对于不会编程的人，它可以帮你实现更多想法，但是你可能需要花费更多时间来和AI磨合。关键是要学会怎么写提示词，明确指令，更好的调教AI。最后，如果你也想尝试AI编程，用AI定制专属红包，可以试试我这个方法，有什么问题也欢迎大家留言讨论！