我的AI编程工作流：技能、工具与MCP服务全解析

此文章会不断更新，记录我在AI编程中使用的工具链和工作流。

这篇博客记录了我在日常AI编程工作中使用的技能、工具和MCP服务。它既是个人参考，也可能帮助其他开发者了解如何构建高效的AI辅助开发环境。

目录

1. 开发技能
2. 设计技能
3. 营销技能
4. SEO 技能
5. CI/CD 自动化技能
6. 产品研究技能
7. 工作流技能
8. 内容处理技能
9. MCP 服务
10. 工作流系统：Trellis

开发技能

这些技能帮助处理前端开发、后端服务、数据库管理和通用编码任务。

前端框架与库

vue

用途：Vue.js 框架最佳实践和模式
使用场景：使用 Vue.js 组合式 API 构建交互式 Web 应用
所在项目：Elynd, Linky
子技能：nuxt

react

用途：React 生态系统
使用场景：构建现代 React 应用
所在项目：gotly-keeper
子技能：react-components、next-best-practices

adonisjs

用途：AdonisJS Node.js 框架
使用场景：构建后端 API 和服务
所在项目：Elynd, Linky

vite

用途：Vite 构建工具配置
使用场景：快速开发服务器和优化构建
所在项目：Elynd

UI 组件

shadcn

用途：shadcn/ui 组件库
使用场景：添加可自定义的预构建 UI 组件
所在项目：gotly-keeper, zhaoguiyang.site, Elynd
子技能：shadcn-vue

nuxt-ui

用途：Nuxt UI 组件库
使用场景：使用预构建组件构建 Nuxt 应用
所在项目：Linky

reka-ui

用途：Vue 的 Reka UI 原语
使用场景：Vue.js 的无头 UI 组件
所在项目：Linky

样式

tailwindcss

用途：Tailwind CSS 实用优先框架
使用场景：使用实用类快速开发 UI
所在项目：Elynd, gotly-keeper, zhaoguiyang.site
子技能：tailwindcss-advanced-layouts、tailwindcss-animations、tailwind-patterns

状态管理

pinia

用途：Vue.js 状态管理
使用场景：管理 Vue 应用中的应用状态
所在项目：Elynd, Linky

ahooks

用途：React hooks 库
使用场景：React 应用的可复用 hooks
所在项目：gotly-keeper

vueuse

用途：Vue 组合式工具函数
使用场景：Vue 的核心组合式函数
所在项目：Elynd, Linky
子技能：vueuse-functions

动画

motion

用途：Motion 动画库
使用场景：在 Web 应用中创建流畅动画
所在项目：Linky, zhaoguiyang.site
子技能：framer-motion

TypeScript 与验证

typescript-advanced-types

用途：TypeScript 高级类型模式
使用场景：复杂的类型定义和泛型
所在项目：Linky

zod

用途：Schema 验证库
使用场景：运行时类型验证和推断
所在项目：gotly-keeper

测试

vitest

用途：Vite 原生测试框架
使用场景：单元测试和集成测试
所在项目：Elynd, gotly-keeper

vue-testing-best-practices

用途：Vue.js 测试最佳实践
使用场景：有效测试 Vue 组件
所在项目：Elynd

数据库

postgres

用途：PostgreSQL 数据库操作
使用场景：数据库查询和管理
所在项目：gotly-keeper, Elynd
子技能：postgres-pro、postgresql-code-review、postgresql-optimization、postgresql-table-design

drizzle-orm

用途：TypeScript 的 Drizzle ORM
使用场景：类型安全的数据库查询
所在项目：gotly-keeper

redis

用途：Redis 缓存和数据存储
使用场景：缓存和实时数据模式
所在项目：Elynd
子技能：redis-best-practices、redis-development

认证

better-auth-best-practices

用途：Better Auth 库最佳实践
使用场景：实现身份验证和授权
所在项目：gotly-keeper

AI 与机器学习

ai-sdk

用途：Vercel AI SDK
使用场景：构建 AI 驱动的应用
所在项目：gotly-keeper

azure-ai

用途：Azure AI 服务集成
使用场景：在应用中使用 Azure AI 服务
所在项目：Elynd

包管理

pnpm

用途：pnpm 包管理器
使用场景：高效的依赖管理
所在项目：Elynd, gotly-keeper

axios

用途：HTTP 客户端库
使用场景：发起 API 请求
所在项目：Elynd

设计技能

这些技能帮助创建视觉吸引力强、用户友好的界面。

UI 设计技能

design-taste-frontend

用途：反模板前端设计
使用场景：构建不落俗套的落地页和作品集
所在项目：zhaoguiyang.site
子技能：gpt-taste、minimalist-ui、industrial-brutalist-ui、stitch-design-taste、high-end-visual-design、imagegen-frontend-web、imagegen-frontend-mobile

brandkit

用途：品牌标识和视觉设计
使用场景：创建一致的品牌指南和视觉资产
所在项目：zhaoguiyang.site

web-design-guidelines

用途：Web 设计最佳实践
使用场景：通用 Web 设计原则和模式
所在项目：Elynd, Linky

frontend-design

用途：前端设计模式
使用场景：创建有效的前端布局和组件
所在项目：Linky

ui-ux-pro-max

用途：高级 UI/UX 技术
使用场景：专业 UI/UX 设计模式
所在项目：Linky

taste-skill

用途：设计品味和美学
使用场景：提升视觉设计质量
所在项目：gotly-keeper, zhaoguiyang.site

image-to-code

用途：图像转代码
使用场景：将设计图像转换为前端代码
所在项目：zhaoguiyang.site

redesign-existing-projects

用途：项目重设计指导
使用场景：将现有网站升级到高级质量
所在项目：zhaoguiyang.site

营销技能

这些技能帮助创建有说服力的营销内容并优化转化率。

copywriting

用途：营销文案创作
使用场景：为落地页、定价页等撰写有说服力的文案
所在项目：zhaoguiyang.site

copy-editing

用途：文案编辑和改进
使用场景：审查和改进现有营销内容
所在项目：zhaoguiyang.site

product-marketing

用途：产品营销策略
使用场景：创建产品定位和消息传递
所在项目：zhaoguiyang.site

sales-enablement

用途：销售资料创建
使用场景：创建推介牌、一页纸和销售材料
所在项目：zhaoguiyang.site

marketing-psychology

用途：营销心理学原理
使用场景：将行为科学应用于营销
所在项目：zhaoguiyang.site

cro

用途：转化率优化
使用场景：优化落地页和表单以提高转化率
所在项目：zhaoguiyang.site

SEO 技能

这些技能帮助优化内容以适应搜索引擎和 AI 可见性。

ai-seo

用途：AI 搜索引擎优化
使用场景：优化内容以被 LLM 和 AI 搜索引擎引用
所在项目：zhaoguiyang.site

schema

用途：Schema 标记和结构化数据
使用场景：添加 JSON-LD 结构化数据以获得富片段
所在项目：zhaoguiyang.site

seo-audit

用途：SEO 审计和诊断
使用场景：识别和修复 SEO 问题
所在项目：zhaoguiyang.site

site-architecture

用途：网站结构优化
使用场景：规划页面层次结构和内部链接
所在项目：zhaoguiyang.site

CI/CD 自动化技能

这些技能帮助自动化部署和开发工作流。

publish-version

用途：版本发布自动化
使用场景：管理版本发布和更新日志
所在项目：gotly-keeper

vercel-composition-patterns

用途：Vercel 部署模式
使用场景：Vercel 部署的最佳实践
所在项目：gotly-keeper

产品研究技能

这些技能帮助进行产品发现、市场研究和用户分析。

注意：product-research 项目共有 39 个技能，以下是最常用的。

product-research

用途：产品研究框架
使用场景：产品发现、市场研究和用户分析
所在项目：product-research
子技能：competitor-analysis、customer-journey-map、ideal-customer-profile、jobs-to-be-done、lean-canvas、market-sizing、mom-test、pricing-strategy、value-proposition、product-strategy 等

工作流技能

这些技能是 Trellis 工作流系统的一部分，用于管理 AI 辅助开发。

Trellis 工作流系统

trellis

用途：AI 辅助开发工作流系统
使用场景：管理任务规划、执行和验证
所在项目：zhaoguiyang.site
子技能：trellis-before-dev、trellis-brainstorm、trellis-break-loop、trellis-channel、trellis-check、trellis-meta、trellis-session-insight、trellis-spec-bootstrap、trellis-update-spec

内容处理技能

这些技能帮助处理和提高内容质量。

humanizer

用途：AI 文本人性化
使用场景：从文本中移除 AI 生成的模式
所在项目：zhaoguiyang.site

pdf

用途：PDF 文档处理
使用场景：创建和审查 PDF 文档
所在项目：zhaoguiyang.site

full-output-enforcement

用途：完整输出生成
使用场景：确保 AI 生成完整、无删减的内容
所在项目：zhaoguiyang.site

MCP 服务

Context7

用途：文档检索服务
使用场景：获取最新的库文档和代码示例
集成方式：OpenCode 中的 MCP 协议

Context7 提供库的实时文档，确保我始终使用最新的 API 和最佳实践。

工作流系统：Trellis

Trellis 是我用于管理 AI 辅助任务的开发工作流系统。

三个阶段

1. Plan（规划） - 需求发现和任务规划
2. Execute（执行） - 使用子代理实现
3. Finish（完成） - 验证、文档化和归档

主要优势

• 结构化的任务管理
• 自动化代码审查
• 会话历史跟踪
• 跨会话知识持久化

附录

技能来源项目

更新日志

• 2026-07-03：初始版本，包含所有项目的技能
• 此文章将随着我采用新工具和工作流而不断更新。

最后更新：2026-07-03