云笺推文

一个基于 LLM（大语言模型）的微信公众号排版工具，旨在帮助用户快速生成美观、专业的公众号推文元素。通过集成 Deepseek API，用户可以通过自然语言描述生成符合需求的 HTML 代码，大大提高公众号排版的效率和质量。

🌟 功能特点

• 多种元素类型：支持生成分割线、引导关注、标题、序号、正文框、头图、导语、双图并排、互动按钮等多种公众号元素
• LLM 驱动：使用 Deepseek API 生成个性化的 HTML 代码，支持自定义需求描述
• 实时预览：生成的元素可以实时预览效果，所见即所得
• 代码编辑：支持手动编辑生成的代码，预览区会实时更新
• 一键复制：支持复制效果或代码到剪贴板，方便粘贴到微信公众号后台
• 响应式设计：适配不同屏幕尺寸，在各种设备上都能正常使用

🛠 技术栈

• 前端：HTML5, CSS3, JavaScript
• API：Deepseek API
• 本地服务：Python HTTP Server

🚀 快速开始

1. 克隆项目

git clone https://github.com/CanFlyhang/Cloud-Note-Tweet.git
cd Cloud-Note-Tweet

2. 启动本地服务器

python -m http.server 8080

3. 访问网站

打开浏览器，访问 http://localhost:8080

4. 配置 API Key

1. 在左侧的 API 配置区域输入 Deepseek API Key
2. 点击 "保存" 按钮
3. 等待 API 状态显示为 "已加载"

5. 生成元素

1. 在左侧选择要生成的元素类型
2. 在 "描述要求" 输入框中输入你的具体需求（如"简约风格的分割线，使用黄色渐变"）
3. 点击 "生成元素" 按钮
4. 在预览区查看生成的效果，在代码区查看生成的代码
5. 点击 "复制效果" 或 "复制代码" 按钮，将生成的内容复制到剪贴板
6. 将复制的内容粘贴到微信公众号后台

📁 项目结构

Cloud-Note-Tweet/
├── assets/
│   ├── app.js          # 核心逻辑，包括 API 调用和交互处理
│   └── styles.css      # 样式文件，定义页面布局和美观效果
├── index.html          # 主页面，包含 UI 结构
├── SKILL.md            # 微信公众号排版指南，定义设计规范
├── README.md           # 项目说明文档
└── 项目简介.md         # 项目详细介绍

📖 使用指南

基本操作

1. 选择元素类型 -> 输入需求 -> 生成元素 -> 预览效果 -> 复制内容

API 配置

• 首次使用需要输入 Deepseek API Key
• API Key 会存储在本地，下次使用无需重新输入

代码编辑

• 可以在代码区域手动编辑生成的代码
• 编辑后，预览区会实时更新显示效果
• 支持复制修改后的代码

注意事项

• 请确保输入有效的 Deepseek API Key，否则无法使用 LLM 生成功能
• 生成的代码使用内联 CSS 样式，确保在微信公众号中正常显示
• 如果 LLM 生成失败，系统会自动使用默认模板
• 建议使用 Chrome、Firefox 等现代浏览器访问本网站

🎨 设计规范

项目遵循微信公众号的排版规范，使用以下品牌色彩：

• 深绿色（主文字/边框色）：#2D6A4F
• 淡绿色（背景/辅助色）：#D8F3DC
• 明黄色（强调/点缀色）：#FFD166

生成的代码符合微信公众号的要求，确保在公众号后台能够正常显示。

🤝 贡献

欢迎贡献代码、提出建议或报告问题！

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

📞 联系方式

• 开发者：HUNAU_徐智航
• 微信：19873614680
• 模板库：https://yuanbantech.feishu.cn/wiki/PGaQwQzeUifxi7k5VdWcTlmVnnf?from=from_copylink

---

云笺推文 - 让公众号排版更简单、更美观！