腾讯QCLow-零基础7-用AI工具写公众号+开发小程序-从排版到上线一站式指南

从注册到上线，你已经走完了认证、备案、类目审核（零基础6），接下来是真正干活的时候了——写公众号推文和开发小程序。这一篇教你用 AI 工具把这两件事串起来，排版→发布→开发→上线，一条龙。

一、先解决排版：别再用编辑器一点点调了

1.1 公众号排版的三个层次

层次	方式	耗时/篇	一致性
新手	公众号后台编辑器手动调	2-4 小时	差
进阶	用第三方编辑器（135/秀米）套模板	1-2 小时	中
高手	AI Agent + 组件库自动排版	5-10 分钟	高

核心思路：组件库思维。 把公众号排版当成 UI 设计来做——定义一套组件（标题、引言、列表、代码块、引用、分割线），AI 根据文章类型自动组合。

1.2 用 gzh-designskill 一键排版

gzh-designskill 是一个开源的公众号排版 Skill，内置 6 套主题模板，支持 Claude Code / WorkBuddy / OpenClaw 等 Agent 工具。

安装（一行命令）：

# 在你的 Agent 中直接说： "安装 gzh-designskill，然后用它排版我当前的文章"

核心能力：

能力	说明
6 套内置主题	摸鱼绿、科技蓝、极简白、商务灰等
26 个排版组件	标题、引言、列表、代码、表格、引用、分割线等
自定义主题	可基于现有组件设计自己的 IP 风格
多 Agent 适配	Claude Code / WorkBuddy / Codex / OpenClaw 全支持

1.3 设计你自己的排版组件库

如果你不想用现成主题，可以这样搭自己的：

Step 1：确定你的 IP 色系（主色 + 辅助色 + 强调色） Step 2：定义 10-20 个核心组件样式（标题/正文/引言/列表/代码/表格/图片说明） Step 3：写成 Markdown 模板，让 AI 按模板填充内容 Step 4：每次写文章，AI 自动选组件组合 → 输出排版好的文章

示例：一套简单的科技风组件定义

## 组件1：一级标题 样式：左对齐 | 24px | #1a73e8 | 下划线装饰  ## 组件2：二级标题   样式：左对齐 | 18px | #333 | 左侧 4px 蓝色竖线  ## 组件3：引言 样式：居中 | 16px | #666 | 上下留白 | 斜体  ## 组件4：代码块 样式：深色背景 #1e1e1e | 等宽字体 | 圆角 8px | 语言标签  ## 组件5：重点标注 样式：黄色高亮背景 #fff3cd | 圆角 4px | padding 4px 8px

把这段交给 AI，每次写文章时自动应用。

二、小程序开发：认证完后第一行代码怎么写

2.1 技术选型速查

方案	适合场景	上手难度	推荐度
原生 WXML/WXSS/JS	标准小程序，微信生态深	★★★	⭐⭐⭐⭐⭐
TDesign + 原生	需要 UI 组件库加速	★★☆	⭐⭐⭐⭐⭐
uni-app	需要多端（H5/App）	★★☆	⭐⭐⭐⭐
Taro	React/Vue 技术栈团队	★★☆	⭐⭐⭐⭐
微信云开发	不想管服务器	★☆☆	⭐⭐⭐⭐⭐

个人推荐组合：原生 + TDesign 组件库 + 云开发。 最轻量、最稳定、审核最容易过。

2.2 最小可用项目骨架

# 1. 安装 TDesign 小程序组件库 npm install tdesign-miniprogram  # 2. 在微信开发者工具中 → 工具 → 构建 npm  # 3. 最小 app.json 配置

{   "pages": [     "pages/index/index",     "pages/detail/detail"   ],   "window": {     "navigationBarTitleText": "你的小程序",     "navigationBarBackgroundColor": "#1a73e8"   },   "usingComponents": {     "t-button": "tdesign-miniprogram/button/button",     "t-cell": "tdesign-miniprogram/cell/cell",     "t-icon": "tdesign-miniprogram/icon/icon"   },   "style": "v2",   "sitemapLocation": "sitemap.json" }

2.3 用 AI 写代码的标准 SOP

Step 1：告诉 AI 你的需求（功能描述 + 页面结构） Step 2：AI 生成 WXML + WXSS + JS + 云函数 Step 3：复制到微信开发者工具 → 预览 Step 4：有问题 → 截图/报错信息发给 AI → AI fix Step 5：重复 Step 3-4 直到满意

示例 Prompt：

"用微信小程序原生 + TDesign 组件库，做一个文章列表页：顶部搜索框、下方文章卡片列表（标题+摘要+封面+日期）、底部加载更多按钮。用云开发数据库存储文章数据。整体风格简洁商务。"

2.4 常见开发问题速查

问题	原因	解决
setData 更新后页面不变	传了整个大对象	用路径更新：`this.setData({'list[0].title': '新标题'})`
云函数调用超时	默认 3 秒	云开发控制台 → 云函数 → 配置 → 超时时间改为 20s
图片加载慢	原图太大	用 `image` 组件的 `mode="widthFix"` + 云存储压缩
真机白屏	ES6 转 ES5 没开	开发者工具 → 详情 → 本地设置 → 勾选「ES6 转 ES5」
审核被拒"功能不完整"	有空页面/假数据	提交审核前确保每个页面都有真实内容

三、打通公众号和小程序：内容驱动增长

3.1 公众号文章 → 小程序的 4 种引流方式

方式	配置难度	效果
文末「阅读原文」跳转小程序	★☆☆	中等
文中插入小程序卡片	★☆☆	高
公众号菜单挂小程序	★☆☆	高
文章内文字链接跳小程序	★★☆	最高

实操：公众号文章内插入小程序卡片

1. 公众号后台 → 新建图文 → 右侧「小程序」按钮 2. 搜索你的小程序名称 → 选择 3. 填写展示方式：文字/图片/卡片 4. 填写跳转路径：如 pages/detail/detail?id=123 5. 插入 → 发布

3.2 用 AI 同时生成文章 + 对应小程序落地页

这是最高效的内容生产模式：

输入：   一个主题（如"小程序认证指南"）  AI 输出：   ├── 公众号文章（排版好、带组件风格）   ├── 小程序落地页代码（WXML/WXSS/JS）   └── 小程序卡片配置（路径+参数）

在 OpenClaw 中可以这样配 Task：

# task.md 1. 阅读 materials.md 获取主题和素材 2. 用 gzh-designskill 生成排版好的公众号文章 → output/article.md 3. 用 wechat-miniprogram skill 生成对应的小程序落地页 → output/miniapp/ 4. 生成小程序卡片配置信息 → output/card_config.json 5. 用 wenyan publish 发布文章到公众号草稿箱

四、自动化工作流：发布一篇推文只需 5 分钟

4.1 完整流程

[素材准备] → [AI 生成文章] → [AI 排版] → [生成封面] → [发布草稿箱] → [人工 check] → [定时发布]    1min          2min           1min         30s           10s           5min           0

4.2 OpenClaw 自动化脚本

# save as: publish-article.ps1  param(     [string]$Topic,     [string]$AppID,     [string]$AppSecret )  $WORK_DIR = "$env:USERPROFILE\article-workspace" New-Item -ItemType Directory -Force -Path $WORK_DIR | Out-Null  # 1. AI 生成 + 排版 Write-Host "[1/3] AI 生成文章并排版..." -ForegroundColor Cyan @" 用 gzh-designskill 的「科技蓝」主题，写一篇关于「$Topic」的公众号推文。 要求：2000字左右，含表格和清单，输出到 $WORK_DIR\article.md "@ | Set-Content "$WORK_DIR\prompt.txt"  claude -p --permission-mode bypassPermissions (Get-Content "$WORK_DIR\prompt.txt" -Raw)  # 2. 生成封面图 Write-Host "[2/3] 生成封面图..." -ForegroundColor Cyan python3 C:\scripts\generate_cover.py "$Topic" --output "$WORK_DIR\cover.png"  # 裁剪为微信封面比例 2.35:1 magick convert "$WORK_DIR\cover.png" -gravity center -crop 900x383+0+0 +repage "$WORK_DIR\cover_cropped.png"  # 3. 发布到草稿箱 Write-Host "[3/3] 发布到公众号草稿箱..." -ForegroundColor Cyan $env:WECHAT_APP_ID = $AppID $env:WECHAT_APP_SECRET = $AppSecret  $date = Get-Date -Format "yyyy.MM.dd" @" --- title: "$Topic - $date" cover: $WORK_DIR\cover_cropped.png ---  $(Get-Content "$WORK_DIR\article.md" -Raw) "@ | Set-Content "$WORK_DIR\final.md"  wenyan publish -f "$WORK_DIR\final.md" -c gzh-design.css  Write-Host "✅ 完成！去公众号后台检查草稿箱。" -ForegroundColor Green

运行：

.\publish-article.ps1 -Topic "小程序开发避坑指南" -AppID "wx你的ID" -AppSecret "你的Secret"

4.3 定时发布配置（Cron Job）

在 OpenClaw 中设置每周三早上 9 点自动生成推文：

{   "name": "每周推文自动排版发布",   "schedule": {     "kind": "cron",     "expr": "0 9 * * 3",     "tz": "Asia/Shanghai"   },   "payload": {     "kind": "agentTurn",     "message": "1. 从素材库随机选一个主题 2. 用 gzh-designskill 排版生成文章 3. 生成封面图 4. 发布到公众号草稿箱 5. 通知我 review",     "timeoutSeconds": 600   } }

五、排版效果对比：有 Skill vs 无 Skill

维度	手动排版	AI + Skill 排版
耗时	2-4 小时	5-10 分钟
风格一致性	每篇都可能不一样	统一主题，IP 感强
组件复用	每次重新调	一次定义，永久复用
修改成本	改了标题要手动调格式	改完内容自动重新排版
适配手机	经常要反复预览调整	组件预设移动端适配

六、踩坑清单

#	坑	解决方案
1	AI 排版后样式在手机上乱掉	让 AI 在排版时指定 `max-width: 100%` + 避免复杂嵌套表格
2	封面图被裁切到关键内容	设计时把核心内容放中间 60% 区域，上下留白
3	小程序卡片插入后预览不显示	小程序必须已发布（非审核中/开发版），否则卡片不可点击
4	wenyan-cli 发布失败	检查 AppID/Secret 是否正确，IP 是否在白名单
5	云函数冷启动慢	设置定时触发器（每 5 分钟一次空调用）保持热启动
6	公众号文章修改后排版还原	公众号后台编辑会清掉部分样式，尽量一次生成，只改文字不改样式

七、总结

│  内容生产流（从主题到上线）            │ │                                                 │  主题确定 → AI 生成初稿 → gzh-designskill 排版      │ │     │  生成封面图 → 发布公众号草稿箱                       │ │      │  同步生成小程序落地页代码                            │ │       │  公众号文章内插入小程序卡片                          │ │      │  审核 → 发布 🚀                                     │ │                                                     │  总耗时：5-30 分钟（取决于内容复杂度）

核心三句话：

1. **排版用 Skill**：组件库思维，一次设计永久复用，告别手动调样式

2. **开发用 TDesign + 云开发**：最快路径从 0 到上线

3. **内容 + 小程序打通**：一篇推文同时产出文章 + 落地页，流量闭环