多平台内容智能排版工具

一份内容，三个平台，AI 自动适配排版。Demo 阶段使用 mock 数据，验证流程与体验。

功能

• 输入：1000-1200 字稿件（支持 Markdown）+ 素材图 + 风格描述
• 输出：
  • 小红书：3:4 卡片序列（封面/内容/CTA）+ 笔记文案
  • 公众号：1 张连续长图（封面/各章节/结尾），直接截图或下载
  • 微博：九宫格图片 + 短文案
• 风格主题：根据风格描述自动匹配（清新/暖色/复古/科技/少女）
• 一键下载所有图片

本地启动

npm install
npm run dev

访问 http://localhost:3000

部署到 Vercel

方式一：通过 GitHub（推荐）

1. 把项目推到 GitHub：

   git init
   git add .
   git commit -m "init"
   git remote add origin <你的 GitHub 仓库地址>
   git push -u origin main

2. 登录 https://vercel.com → New Project → 选择刚推上去的仓库 → Deploy

3. 等 1-2 分钟，Vercel 会给你一个 xxx.vercel.app 的链接

方式二：用 Vercel CLI

npm i -g vercel
vercel

按提示登录、绑定项目、部署即可。

项目结构

publisher/
├── app/
│   ├── page.tsx              # 主页（输入 + 预览）
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── XHSPreview.tsx        # 小红书卡片渲染
│   ├── WeixinPreview.tsx     # 公众号长图渲染
│   └── WeiboPreview.tsx      # 微博九宫格渲染
└── lib/
    ├── types.ts              # TypeScript 类型
    ├── mock-ai.ts            # Mock AI 排版逻辑
    ├── themes.ts             # 风格主题
    └── sample.ts             # 示例输入与占位图

后续接入真实 AI

替换 lib/mock-ai.ts 中的 generateContent 为真实 API 调用即可。建议返回值与现有 GeneratedContent 类型一致，UI 层不需要改动。

export async function generateContent(input: UserInput): Promise<GeneratedContent> {
  const res = await fetch('/api/generate', { method: 'POST', body: JSON.stringify(input) })
  return res.json()
}

已知限制

• 占位图来自 Unsplash CDN，需要联网；用户自己上传的图片不受限。
• Mock AI 只做规则切分，不做语义理解；接入真实 LLM 后效果会显著提升。
• 公众号长图目前是图片形式，若需富文本 HTML 输出，可另写一个生成器。