前言

你有没有想过写完代码之后AI 自动帮你把技术博客也写了？

这不是幻想。我在自己的博客程序 Ink & Code上实现了这个能力——通过 Cursor 的 AI Skill 机制。只需一句话，AI 就能分析代码、撰写文章、一键发布。老实说，

使用者痛点：传统的技术博客写作往往耗时、容易遗漏关键实现细节、文风不统一。导致知识沉淀效率低下，借助 AI Skill，这些痛点可以一次性解决。让写作从“事后补救”变成“即时输出”。不过，

这篇文章会深入介绍 AI Skill 的实际使用。还有支撑这一切的技术架构：Next.js + Prisma + Tailwind CSS + Tiptap。

什么是 Cursor AI Skill

与普通的 Prompt 不同，Skill 有几个主要优势：

1. 场景触发当使用者提到“写博客”“发布文章”等关键词时自动激活。
2. 结构化流程定义清晰的多步骤工作流，而不是一次性提问。
3. 工具集成可以调用 Shell 脚本、API 接口，实现端到端的自动化。

再看实战，一个自动写博客的 Skill

我在项目中创建了 .cursor/skills/generate-blog/SKILL.md定义了博客生成的完整流程：

---
说到name，generate-blog
description: 生成技术博客并发布到 Ink & Code
---
# 生成博客文章
## 工作流程
### . 确定生成模式
- commit 模式：根据 Git 提交改动生成
- topic 模式：根据特定主题生成
- repo 模式：介绍整个项目
### . 收集上下文
根据模式收集相关代码上下文...
### . 生成博客内容
撰写高质量技术博客。包含背景、方案、实现、...
### . 发布文章
使用脚本发布到博客程序：

关键一步：Skill 不仅能生成内容，还能通过 Shell 脚本直接发布：

# publish.sh - 一键发布到博客
TITLE="$1"
TAGS="$2"
CONTENT_FILE="$3"
# 读取内容
if &&;n
CONTENT=$
elif;n
CONTENT=$
else
CONTENT=$
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:
至于jobs，generate-blog:
# 只有提交信息包含 时才触发
至于if，contains
runs-on: ubuntu-latest
至于steps，- name: Checkout repository
从uses来看，actions/checkout@v3
- name: Gar project context
至于run。|
git diff HEAD~ HEAD> /tmp/commit_diff.txt
# 收集项目结构、改动文件、配置文件...
- name: Generate and publish blog
至于env，INK_AND_CODE_URL: ${{ secrets.INK_AND_CODE_URL }}
INK_AND_CODE_TOKEN: ${{ secrets.INK_AND_CODE_TOKEN }}
run这方面，|
# 将上下文发送给 AI，生成标题、内容、标签...
# 调用 publish.sh 完成发布

工作原理：当我提交代码时在 commit message 中加上 标记，GitHub Actions 会自动收集项目上下文，调用 DeepSeek/Claude/GPT 生成技术博客，并通过 API 发布到网站。整个过程无需人工干预，实现“写完代码即产出文档”。

支撑一切的技术架构

这套自动化能跑通，离不开底层的技术架构。Ink & Code 使用的是Next.js + Prisma + Tailwind CSS + Tiptap组合。

Next.js App Router

项目采用 Next.js 的 App Router 架构。目录结构清晰：

app/
├── api/
│ ├── article/ # 文章 CRUD
│ ├── chat/ # AI 聊天
│ └── auth/ # 鉴权
├── admin/ # 后台管理
├── blog/ # 博客页面
├── components/ # UI 组件库
└── u// # 使用者主页

API 路由提供完整的 RESTful 接口，并支持两种认证方式：

// Session 鉴权
const session = await auth;// Token 鉴权
const token = request.headers.get?.replace，const hashedToken = hashToken;const apiToken = await prisma.apiToken.findUnique({
至于where，{ tokenHash: hashedToken }
});

双认证机制让程序既适合浏览器交互，又能安全地被脚本或 CI 调用。

Prisma 数据建模

数据层使用 Prisma ORM，主要模型设计如下：

model Post {
id String @id @default)
title String
slug String @unique
content String @db.Text // TipTap JSON 格式存储
excerpt String?coverImage String?published Boolean @default
tags String
sortOrder Int @default
user User @relation
category Category?@relation
@@unique
}
model Category {
id String @id @default)
name String
_slug String @unique
_icon String?parentId String?// 树形结构父节点 ID
parent Category?@relation
children Category @relation
@@unique
}

Tiptap 富文本编辑器

Tiptap 为后台编辑提供所见即所得体验，支持代码块高亮、图片上传、表格等丰富功能：

import { useEditor } from '@tiptap/react';import StarterKit from '@tiptap/starter-kit';import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';import Image from '@tiptap/extension-image';import Link from '@tiptap/extension-link';import Table from '@tiptap/extension-table';import Placeholder from '@tiptap/extension-placeholder';const editor = useEditor({
extensions:,});

Tiptap 编辑器还实现了自动保存、快捷键还有阿里云 OSS 图片上传等实用功能，大幅降低编辑阻力。

样式层采用最新 Tailwind CSS，通过 CSS 自定义属性实现主题切换：

:root {
--color-primary:#b8860b;说起来，--color-background:#faf8f5;--color-foreground:#1a1a1a;}
{
--color-primary:#d4a537;--color-background:#1a1a1a;其实，--color-foreground:#e8e8e8;}

配合全局 。实现丝滑明暗主题切换，让阅读和编辑体验更舒适。

Ink & Code 主要功能一览

• AI 助手：内置聊天组件。基于 DeepSeek 实时流式响应，可随时提问实现即时帮助。
• 智能目录：自动从标题生成目录树。支持折叠子标题、高亮滚动及点击跳转，提高阅读效率。
• 分类程序：Cascading tree 分类。多层级管理文章，让内容组织更清晰。
• 文档树管理：SWR + Drag‑and‑Drop 实现所见即所得排序；可视化树形结构便于维护，
• /u/) 与私有分类空间。

与行动教程

User Pain Point Recap:

• A​lways spend hours polishing blog drafts after coding.
• Lack of consistent tone and structure across articles.
• Difficulties in keeping documentation synchronized with code changes.
• The manual publishing pipeline is error‑prone and slows down knowledge sharing.

The value of Cursor AI Skill lies not in its technical complexity but in paradigm shift it brings: "Let AI become a seamless part of your workflow instead of just a Q&A tool."