Words Into Form

名人名言卡片生成器 — 面向内容创作者的在线名言卡片制作工具

线上演示

🔗 saying-snap.vercel.app ｜ fpcard.top

预览

简介

Words Into Form 是一款精美的在线名言卡片生成工具。选择内置名人名言，或自由编辑正文与作者信息，切换卡片模板与排版风格，实时预览并一键导出为 1080 × 1350 的 PNG 图片，适合在社交媒体平台分享。

功能特性

• 20 条内置名言 — 涵盖孔子、老子、鲁迅、爱因斯坦等中外名家
• 自由编辑 — 手动修改名言正文、作者署名和身份/出处
• 4 套卡片主题 — 经典留白 (Classic)、深色杂志 (Magazine)、温暖纸张 (Paper)、现代极简 (Minimal)
• 3 种字体风格 — 宋体 (Serif)、黑体 (Sans)、楷体 (Script)
• 4 种背景样式 — 纯色 (Solid)、雾化 (Mist)、亚麻纹理 (Linen)、水墨 (Ink)
• 排版对齐 — 左对齐 / 居中 / 右对齐，自由切换
• 实时预览 — 4:5 竖版卡片，所见即所得
• 一键导出 — 浏览器端直接下载 1080 × 1350 PNG 图片
• **AI 背景生成 — 根据名言内容自动生成插画风格背景（Pollinations / HuggingFace）

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

在浏览器中打开 http://localhost:3000 查看效果。

可用脚本

命令	说明
npm run dev	启动开发服务器（热更新）
npm run build	构建生产版本
npm run start	启动生产服务器
npm run lint	运行 ESLint 代码检查

技术栈

• 框架：Next.js 16 (App Router)
• UI 库：React 19
• 语言：TypeScript 5
• 样式：Tailwind CSS v4
• 组件：shadcn/ui
• 图片导出：html-to-image
• 图标：Lucide React

项目结构

src/
├── app/                  # Next.js 应用入口和路由
│   ├── api/generate-bg/  # AI 背景生成 API（预留）
│   ├── globals.css       # 全局样式与 CSS 变量
│   ├── layout.tsx        # 根布局
│   └── page.tsx          # 首页
├── components/           # UI 组件
│   ├── quote-generator-app.tsx   # 主应用容器
│   ├── quote-card-preview.tsx     # 卡片渲染组件
│   ├── quote-preview-frame.tsx    # 卡片外框
│   ├── quote-editor.tsx  # 编辑面板
│   ├── content-tab.tsx   # 内容选择标签
│   ├── style-tab.tsx     # 样式配置标签
│   └── layout-tab.tsx    # 排版配置标签
└── lib/                  # 数据和工具模块
    ├── quote-data.ts     # 20 条内置名言数据
    ├── card-themes.ts    # 卡片主题、字体、背景定义
    ├── quote-layout.ts   # 卡片尺寸与布局常量
    ├── quote-fonts.ts    # 字体配置
    ├── background-overlays.ts  # 背景覆盖层
    └── utils.ts          # 工具函数 (cn)

说明

首版刻意保持简洁，暂未加入登录、云端存储、分享链接和批量导出等功能。后续版本可根据需求逐步扩展。