前言
你有没有想过，写完代码之后，AI 自动帮你把技术博客也写了？
这不是幻想。我在自己的博客系统 Ink & Code（ptclove.com）上实现了这个能力——通过 Cursor 的 AI Skill 机制，只需一句话，AI 就能分析代码、撰写文章、一键发布。
本文会深入介绍 AI Skill 的实际应用，以及支撑这一切的技术架构：Next.js 16 + Prisma + Tailwind CSS 4 + Tiptap。
什么是 Cursor AI Skill
AI Skill 是 Cursor IDE 提供的一种扩展机制，本质上是一份 Markdown 格式的指令文件（SKILL.md），告诉 AI 在特定场景下该做什么、怎么做。
与普通的 Prompt 不同，Skill 有几个核心优势：
- 场景触发：当用户提到"写博客"、"发布文章"时自动激活
- 结构化流程：定义清晰的多步骤工作流，而不是一次性提问
- 工具集成：可以调用 Shell 脚本、API 接口，实现端到端的自动化
实战：一个自动写博客的 Skill
我在项目中创建了 .cursor/skills/generate-blog/SKILL.md，定义了博客生成的完整流程：
---
name: generate-blog
description: 生成技术博客并发布到 Ink & Code
---
# 生成博客文章
## 工作流程
### 1. 确定生成模式
- commit 模式：根据 Git 提交改动生成
- topic 模式：根据特定主题生成
- repo 模式：介绍整个项目
### 2. 收集上下文
根据模式收集相关代码上下文...
### 3. 生成博客内容
撰写高质量技术博客，包含背景、方案、实现、总结...
### 4. 发布文章
使用脚本发布到博客系统：
关键在于第 4 步——Skill 不仅能生成内容，还能通过 Shell 脚本直接发布：
# publish.sh - 一键发布到博客
TITLE="$1"
TAGS="$2"
# 读取内容（支持文件、stdin、剪贴板）
if [ -n "$CONTENT_FILE" ] && [ -f "$CONTENT_FILE" ]; then
CONTENT=$(cat "$CONTENT_FILE")
elif [ ! -t 0 ]; then
CONTENT=$(cat)
else
CONTENT=$(pbpaste 2>/dev/null || echo "")
fi
# 构建 JSON 并调用 API
jq -n --arg title "$TITLE" --arg content "$CONTENT" \
'{title: $title, content: $content, published: false}' \
> /tmp/blog_payload.json
curl -X POST "${INK_AND_CODE_URL}/api/article/create-from-commit" \
-H "Authorization: Bearer $INK_AND_CODE_TOKEN" \
-d @/tmp/blog_payload.json
这意味着从代码变更到文章发布，整个链路都是自动化的。
更进一步：GitHub Actions + AI 自动发文
除了本地 Skill，我还配置了 GitHub Actions 实现 CI/CD 级别的博客自动化：
# .github/workflows/auto-blog.yml
on:
push:
branches: [main]
jobs:
generate-blog:
# 只有提交信息包含 [blog] 时才触发
if: contains(github.event.head_commit.message, '[blog]')
steps:
- name: Gather project context
run: |
git diff HEAD~1 HEAD > /tmp/commit_diff.txt
# 收集项目结构、改动文件、配置文件...
- name: Generate and publish
run: |
# 将上下文发送给 AI，生成博客
# 解析标题、内容、标签
# 调用 API 发布
工作原理：当我提交代码时，在 commit message 中加上 [blog] 标记，GitHub Actions 会自动收集项目上下文（diff、文件结构、配置文件），调用 DeepSeek/Claude/GPT 生成技术博客，最后通过 API 发布到网站。
整个过程无需人工干预，写完代码，博客就自动出现在网站上了。
支撑一切的技术架构
这套自动化能跑通，离不开底层的技术架构。Ink & Code 采用的是 Next.js 16 + Prisma + Tailwind CSS 4 + Tiptap 的组合。
Next.js 16 App Router
项目使用 Next.js 16 的 App Router 架构，目录结构清晰：
app/
├── api/ # API 路由
│ ├── article/ # 文章 CRUD
│ ├── chat/ # AI 聊天
│ └── auth/ # 认证
├── admin/ # 后台管理
├── blog/ # 博客页面
├── components/ # 组件
└── u/[username]/ # 用户主页
API 路由提供了完整的 RESTful 接口，支持两种认证方式：
// Session 认证（用户登录）
const session = await auth();
// Token 认证（外部调用，如 GitHub Actions）
const token = request.headers
.get('Authorization')?.replace('Bearer ', '');
const hashedToken = hashToken(token);
const apiToken = await prisma.apiToken.findUnique({
where: { tokenHash: hashedToken }
});
这种双认证机制让博客系统既支持浏览器登录，又支持脚本和 CI/CD 的外部调用。
Prisma 数据建模
数据层使用 Prisma ORM，核心模型设计：
model Post {
id String @id @default(cuid())
title String
slug String
content String @db.Text // TipTap JSON
excerpt String?
coverImage String?
published Boolean @default(false)
tags String[]
sortOrder Int @default(0)
user User @relation(fields: [userId])
category Category? @relation(fields: [categoryId])
@@unique([userId, slug])
}
model Category {
id String @id @default(cuid())
name String
slug String
icon String?
parentId String? // 树形结构
parent Category? @relation("children", fields: [parentId])
children Category[] @relation("children")
@@unique([userId, slug])
}
文章内容以 TipTap JSON 格式存储，而非原始 Markdown。这意味着从外部（如 GitHub Actions）提交的 Markdown 内容需要经过转换：
// lib/markdown-to-tiptap.ts
export function markdownToTiptap(markdown: string): string {
const doc: TiptapDoc = { type: 'doc', content: [] };
const lines = markdown.split('\n');
while (i < lines.length) {
const line = lines[i];
if (line.startsWith('```')) {
// 代码块 → codeBlock 节点
} else if (line.match(/^#{1,6}\s/)) {
// 标题 → heading 节点
} else if (line.match(/^\d+.\s/)) {
// 有序列表 → orderedList 节点
}
// ...更多格式处理
}
return JSON.stringify(doc);
}
Tiptap 富文本编辑器
后台管理使用 Tiptap 作为编辑器，支持丰富的内容格式：
const editor = useEditor({
extensions: [
StarterKit,
CodeBlockLowlight.configure({
lowlight // 代码高亮
}),
Image, // 图片
Link, // 链接
Table, // 表格
Placeholder.configure({
placeholder: '开始写作...'
}),
],
});
编辑器还实现了自动保存、快捷键（Cmd+S）、图片上传（阿里云 OSS）等实用功能。
Tailwind CSS 4
样式层使用最新的 Tailwind CSS 4，通过 CSS 变量实现主题切换：
:root {
--color-primary: #b8860b;
--color-background: #faf8f5;
--color-foreground: #1a1a1a;
}
[data-theme='dark'] {
--color-primary: #d4a537;
--color-background: #1a1a1a;
--color-foreground: #e8e8e8;
}
配合 ThemeProvider 组件，实现了丝滑的明暗主题切换。
Ink & Code 核心功能一览
除了上面提到的技术架构，ptclove.com 还有这些核心功能：
- AI 助手：内置 AI 聊天组件，基于 DeepSeek 实时流式响应，随时提问
- 智能目录：自动从文章标题生成目录树，支持大标题折叠子标题、滚动高亮、点击跳转
- 分类体系：支持树形分类结构，多层级管理文章
- 文档树管理：后台采用树形文档管理，拖拽排序，所见即所得
- 多用户支持：每个用户有独立主页（
/u/username），独立分类和文章 - 深色模式：跟随系统或手动切换，全站适配
- 响应式设计：从手机到桌面端完美适配
- 一键部署：GitHub Actions 自动构建、SSH 部署到服务器，PM2 进程管理
总结
Cursor AI Skill 的价值不在于它是一个多高深的技术，而在于它提供了一种思路：让 AI 不只是回答问题，而是融入你的工作流。
在 Ink & Code 这个项目中，AI Skill 串联了从代码提交到博客发布的完整链路。而 Next.js + Prisma + Tiptap + Tailwind 这套技术栈，则提供了足够灵活的底层能力来支撑这种自动化。
如果你也想体验 AI 驱动的博客写作，欢迎访问 ptclove.com ，也欢迎在评论区交流你的 AI Skill 实践。
