DeepSeekV3.1+ClaudeCode丨小白5分钟写出高颜值封面生成器

358 阅读4分钟

哈喽,大家好👏

我是阿星!

这两天DeepSeek V3.1 更新后可以接入 Claude Code啦!

说人话就是可以接入现在最流行的编程软件Claude Code 啦!

没有听说过这个软件也没关系哦!

跟着下面教程你也可以做出能生成公众号封面的网站!

ImageImageImageImage

一、用deepseek登入 Claude Code

有技术背景的自己看文档。

Image

没有技术基础的同学,直接mac电脑放大镜里搜终端,然后按照下面提示键入即可。

  1. 1. 安装 Claude Code
npm install -g @anthropic-ai/claude-code
  1. 2. 配置环境变量

注意:

export ANTHROPIC_AUTH_TOKEN=${DEEPSEEK_API_KEY}需要替换为

export ANTHROPIC_AUTH_TOKEN=xxxx

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropicexport ANTHROPIC_AUTH_TOKEN=${DEEPSEEK_API_KEY}export ANTHROPIC_MODEL=deepseek-chatexport ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
  1. 3. 进入项目目录,执行 claude 命令,即可开始使用了。
cd my-projectclaude

Image

二、封面生成器提示词

先用它试试@歸藏 老师的封面生成美学提示词(已经被我改的有点面目全非),改造成了一个封面图片生成器的prompt。

 公众号封面生成器综合提示词  基础功能提示词:  你是一个专业的公众号封面设计师和前端开发者。请创建一个完整的HTML页面,实  现公众号封面生成器。  核心功能要求:  1. 尺寸比例:358:108 (3.31:1),宽度1074px,高度324px  2. 设计风格:现代简洁,直角设计,无边框  3. 布局结构:横向布局,左侧文字内容(70%),右侧作者信息  4.  色彩方案:提供4种渐变配色可选(科技蓝紫、活力粉红、清新青蓝、自然绿青)  5. 内容层次:主标题、副标题、关键词标签、描述文字、作者信息  技术实现:  - 使用HTML + CSS + JavaScript  - 引入html2canvas用于图片导出  - 使用Google Fonts中文字体  - 响应式设计,确保等比显示  AI润色功能提示词:  集成DeepSeek AI内容生成功能:  输入要求:  - 主题内容输入框  - DeepSeek API密钥输入框(密码类型)  - 账号名称和标语口号输入框  AI生成逻辑:  1. 调用DeepSeek API (https://api.deepseek.com/v1/chat/completions)  2. 使用以下系统提示词:     "你是一个专业的公众号内容编辑,擅长创作吸引人的标题和内容。"  3. 用户提示词模板:     "你是一个专业的公众号内容编辑。请根据以下主题生成公众号封面内容:     主题:{用户输入}     请返回JSON格式:     {       "mainTitle": "主标题(25-35字,精炼有力)",       "subTitle": "副标题(吸引人的描述)",       "keywords": ["关键词1", "关键词2", "关键词3"],       "description": "简短描述(50字以内)"     }"  4. 参数设置:model: 'deepseek-chat', temperature: 0.7, max_tokens: 500  功能特性:  - 双生成模式:基础生成 + AI智能润色  - 加载状态显示和按钮禁用  - 完整的错误处理(API密钥验证、网络错误、JSON解析)  - 优雅降级:AI失败时回退到基础生成  设计规范提示词:  视觉设计规范:  - 主标题:42px,特粗字重,白色带文字阴影  - 副标题:24px,中等字重,90%透明度白色  - 关键词标签:圆角标签样式,对比色突出  - 描述文字:16px,85%透明度白色  - 装饰元素:几何图形(圆形、线条),半透明效果  - 阴影效果:微妙阴影增强质感  交互设计:  - 颜色选择器直观可见  - 生成按钮和AI按钮明显区分  - 加载状态反馈  - 一键保存PNG功能  这个综合提示词包含了基础设计规范、AI集成逻辑和用户体验设计,可以用于重新  创建或优化公众号封面生成器。

它咔咔就开始生成了。

Image

咔咔完了之后就让你选择是否创建html,当然选yes

Image

好消息,打开之后直接能用,但是比例是错的(因为我一开始提示词里没有规定比例😭)

ImageImage

所以我又交代了一下,让它知道封面的具体比例:358:108(3.31/1),让它试试看。

Image

可以看到它进行了一些行距的编辑。

Image

马上就可以用了!😄

可以看到我们输入的是deepseek发布,

它输出的是AI润色过的🎉

Image

后台插入封面是这样的,顺利完工啦~

Image

AI编程还是有很多好玩的实操。敬请关注!

我是阿星👏

我们下期再见!