制作自己的 Claude“技能”

在本文中，您将学习如何让 Claude 根据单个提示生成完整的全栈 AI 应用。我将带您了解将多步骤开发工作流程转换为可复用的 Claude 技能的整个过程——该技能能够自动创建 FastAPI 后端、现代化的 React + Vite 前端、Tailwind + shadcn UI 组件以及内置的 OpenAI 集成。

随着生成式人工智能领域的飞速发展，我们逐渐能够通过向 AI 编码助手（例如 Claude Code 或 OpenAI 的 Codex）提供几行提示，快速构建一个基本的、可运行的原型。尽管 AI 辅助编码在快速构建原型和测试想法方面提供了巨大的支持，但仅通过简单的提示来构建全栈应用程序仍然非常困难。我们最多只能创建基于 Streamlit 或 Gradio 的简单用户界面，但这仅适用于测试/概念验证，而无法用于生产环境。

将现有应用程序转换为带有编码助手的全栈应用程序是一项极具挑战性的任务。这需要……

这种差距的出现是因为，尽管当前的编码助手功能日益强大，但在跨多个文件的上下文管理、长期架构的推理、框架的选择以及代码库规模扩大时的代码质量保证方面，仍然面临诸多挑战。因此，诸如连接前端和后端、维护跨环境配置的一致性、处理错误和安全问题，以及随着时间推移演进代码库等任务可能会变得棘手。

即便如此，AI辅助编码的价值依然巨大。即使它无法仅凭一个提示就神奇地构建出一个完美的企业级应用程序，它也可以自动创建项目结构、搭建后端和前端框架、配置环境变量和API调用，并提供一个可运行的框架，从而大幅减少初始阶段的摩擦。一旦基础工作就绪，其他功能就可以逐步添加。这大大减轻了前期设置的负担，使开发人员能够专注于核心应用程序逻辑、用户体验、数据模型或AI特有的功能，而不是编写样板代码。

在本文中，我将介绍如何创建一个 Claude Skill，用于生成一个可复用的全栈模板，该模板结合了 Python + FastAPI 后端和 React + Vite 前端。我选择 Python + FastAPI 作为后端是因为我通常使用 Python。也就是说，开发的 Claude Skill 可以修改以适应其他后端/前端框架。

本文开发的 Claude Skill 可以自主构建一个完整的全栈应用程序模板，将所有后端和前端连接起来——创建文件夹结构、配置文件、后端 API 端点、环境设置以及一个初始的 React + Vite UI——而无需用户手动编写每个文件。当您调用该技能时，Claude 会动态加载技能包中定义的指令和脚本，并根据这些指令生成代码，最终生成一个可运行的工作原型。由于技能是可重用的指令和资源模块，因此可以再次调用同一个技能，以相同的结构和配置搭建新的项目。

完整的代码可在 GitHub 上找到。

该技能构建全栈应用程序模板的工作流程如下图所示。

让我们深入了解 Claude 技能的开发过程。

1、技能开发前的准备工作

在使用 Claude 进行自动化之前，我首先使用 ChatGPT 和 GPT-5.1 来规划并创建一系列分步提示，以构建后端 + 前端应用程序模板。我从一个简单的指令开始：

I want to create an empty project (template) with Python backend and React 
front end (potentially with Vite). The Python backend will comprise a test 
code and OpenAI's API configs. The frontend may be a test page. 
The purpose is to create a complete template that can be used to develop 
further specific applications. However, we want to do this using a coding 
assistant such as Claude Code. 
How to do this?

ChatGPT (GPT-5.1) 对此做出了如下提示：

mkdir fullstack-template
cd fullstack-template

###
"Create a folder structure for a Python FastAPI backend and a React Vite frontend inside /fullstack-template. Generate only the folder layout and empty files."
###

# Initialize the Python backend
cd backend
python -m venv .venv
# Linux / macOS
source .venv/bin/activate
# OR on Windows
# .\.venv\Scripts\activate

pip install fastapi uvicorn python-dotenv openai
pip freeze > requirements.txt

###
# Let Codex generate boilerplate backend code
"Generate a FastAPI app with one /test endpoint and one /chat endpoint that calls OpenAI's ChatCompletions API. Load the API key from .env. Include CORS settings for localhost:5173."
###

# Run backend:
uvicorn app:app --reload

# Initialize the React + Vite frontend
cd ../frontend
npm create vite@latest
# Choose: React + JavaScript
npm install
npm install axios

###
# Let Codex generate frontend test page
"Create a simple React UI with an input box, a Send button, and a display area showing the /test and /chat results from the backend (localhost:8000). Use axios."
###

# Start frontend (Terminal 2)
npm run dev

# Start backend (Terminal 1)
cd ../backend
uvicorn app:app --reload

我使用 Claude Code (Claude-sonnet-4.5) 在 VC Code 中逐一按照这些步骤/提示操作。我成功地将后端和前端连接到了一个全栈应用程序模板中，尽管它使用的是一个我不喜欢的、基于 HTML+CSS 的基础 UI。我再次请求 Gpt-5.1 提供改进 UI 的提示。它建议使用 Tailwind CSS + shadcn/ui 来改进 React 的 UI。以下是它为编码助手提供的提示。

"Refactor the existing React front-end UI into a modern, professional interface using Tailwind CSS + shadcn/ui.
Requirements:
• Add a clean header with the app title.
• Center the transcription card with a max width.
• Replace the file upload area with a drag-and-drop dropzone styled with Tailwind.
• Use shadcn/ui Card, Button, Input, and Textarea components.
• Add Lucide icons (Upload, FileAudio, Loader).
• Make the UI responsive (desktop, tablet, mobile).
• Add smooth animations using Framer Motion.
Keep all transcript logic the same. Only improve styling and component structure."

我最初指示 Claude Code 使用 Tailwind CSS 和 shadcn/ui 将现有的 React 前端 UI 重构为一个现代化、专业的界面。然而，尽管 Claude Code 多次尝试，他仍然未能成功完成这项任务。随后，我尝试了 OpenAI 的 Codex（使用 gpt-5.1-codex），它运行完美，并将界面转换为一个精致美观的用户界面。

上述步骤和提示仅代表成功的迭代。多次尝试失败，需要重新提示或调整。这凸显了需要一个可重复的流程，以便每次都能获得相同的输出。因此，我决定创建一个 Claude 技能，它封装了完整的工作流程并生成可复现的结果。

2、构建用于全栈开发的 Claude 技能

技能是包含指令、脚本和资源的文件夹，Claude 会动态加载这些文件夹来提升特定任务的性能。技能教会 Claude 如何以可重复的方式完成特定任务，无论是使用公司品牌指南创建文档、使用组织特定的工作流程分析数据，还是自动化个人任务。请参阅我之前的文章，了解更多关于 Claude 技能的信息。

我通过人工智能编码助手开发全栈应用程序模板所遵循的步骤和积累的经验可以嵌入到 Claude 的技能中，这样每次我们向 Claude（或使用 Claude 模型的编码助手）提问时，它都会使用相同的经验和步骤来复现相同的结果。

Claude 技能可以用来自动化多个工作流程。将技能与人工智能代理集成，可以进一步为代理配备额外的功能、工具、知识库、代码库和资源，从而实现工作流程的完全自动化。

由于 GPT-5.1-codex 在重构 React 前端 UI 方面表现出色，我决定使用 OpenAI 的 Codex VS Code 扩展中的 GPT-5.1-codex 构建一个专门的“全栈开发”技能。为了准备这个技能，我首先向 Codex 提供了参考链接，解释了 Claude 技能是什么以及它们的结构。之后，我提供了完整的提示历史记录以及我在创建全栈应用程序模板时遵循的每一个步骤。这为 Codex 提供了足够的信息，使其能够生成一个全面的技能包，其中包含详细说明、工作流程逻辑、代码模板以及所有支持资源，包括示例、参考资料、模板和文档。基于所提供的信息，Codex 将技能组装在一个清晰、模块化的目录结构中，位于 .claude/skills/fullstack-template 目录下。-generator 许多前端代码文件直接从之前生成的应用程序模板复制而来。

#Dire
.claude/
└── skills/
    └── fullstack-template-generator/
        ├── examples.md
        ├── reference.md
        ├── SKILL.md
        └── templates/
            ├── README.md.template
            ├── backend/
            │   ├── main.py.template
            │   ├── requirements.txt
            │   └── tests/
            │       └── __init__.py
            └── frontend/
                ├── eslint.config.js
                ├── index.html
                ├── package.json.template
                ├── postcss.config.js
                ├── tailwind.config.js
                ├── vite.config.js
                └── src/
                    ├── App.jsx.template
                    ├── index.css
                    ├── main.jsx
                    ├── components/
                    │   └── ui/
                    │       ├── button.jsx
                    │       ├── card.jsx
                    │       ├── input.jsx
                    │       └── textarea.jsx
                    └── lib/
                        └── utils.js

该软件包的主要文件是 SKILL.md，它负责协调整个工作流程。以下是其内容：

---
name: fullstack-template-generator
description: Generates a complete fullstack application template with Python FastAPI backend and React Vite frontend. Includes OpenAI ChatGPT integration, CORS configuration, comprehensive error handling, and a modern Tailwind CSS + shadcn/ui React UI. Use this skill when the user wants to bootstrap a new fullstack web application project with both API backend and web frontend components ready to go.
---

# Fullstack Template Generator

## Overview

This skill automates the creation of a production-ready fullstack application template featuring:

### Backend (Python + FastAPI)
- FastAPI framework with async support
- OpenAI ChatGPT API integration
- CORS middleware configured for frontend communication
- Comprehensive error handling and validation
- Environment-based configuration
- Auto-generated API documentation (Swagger UI)
- Pydantic models for request validation

### Frontend (React + Vite)
- Modern React 19 with Vite 7 for fast development
- Tailwind CSS 3 configured with PostCSS + autoprefixer
- shadcn/ui primitives (Button, Card, Input, Textarea) powered by class-variance-authority, clsx, and tailwind-merge
- Lucide icons and Framer Motion for polished micro-interactions
- Axios for API communication
- Clean, responsive chat UI built entirely with Tailwind utilities
- Error handling and loading states
- Hot Module Replacement (HMR)

## What This Skill Creates

When invoked, this skill generates a complete project structure with:

```
project-name/
├── README.md
├── backend/
│   ├── .env.example
│   ├── .gitignore
│   ├── main.py
│   ├── requirements.txt
│   └── tests/
│       └── __init__.py
└── frontend/
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── vite.config.js
    ├── eslint.config.js
    ├── tailwind.config.js
    ├── postcss.config.js
    ├── public/
    │   └── vite.svg
    └── src/
        ├── App.jsx
        ├── main.jsx
        ├── index.css
        ├── lib/
        │   └── utils.js
        ├── components/
        │   └── ui/
        ├── assets/
        ├── hooks/
        ├── pages/
        └── styles/
```

## When to Use This Skill

Invoke this skill when the user:
- Wants to create a new fullstack web application
- Needs both a REST API backend and React frontend
- Requests a Python + React project setup
- Asks for a FastAPI + Vite template
- Wants OpenAI integration in their application
- Needs a quick start for a full-stack project

## How to Generate the Template

1. **Ask the user for the project name** and target directory location.
2. **Create the directory structure** as shown above.
3. **Copy template files** from the `templates/` directory:
   - Backend files from `templates/backend/`
   - Frontend files from `templates/frontend/`
   - Root README from `templates/README.md.template`
4. **For `.template` files**: Remove the `.template` suffix when copying.
5. **Ensure Tailwind/shadcn assets are included**:
   - Copy `tailwind.config.js`, `postcss.config.js`, and `src/index.css`
   - Copy `src/lib/utils.js` and the `src/components/ui` directory so shadcn primitives are ready to use
6. **Customize as needed**: Update project names in package.json if requested.
7. **Provide setup instructions** to the user:
   - Backend setup (create .env, install dependencies)
   - Frontend setup (install dependencies)
   - How to run both servers

## Key Features Included

### Backend API Endpoints
- `GET /` - Health check endpoint
- `GET /test` - Test connectivity
- `POST /chat` - OpenAI ChatGPT integration
  - Accepts: `{"message": "...", "model": "gpt-4-turbo-preview"}`
  - Returns: AI response with token usage

### Frontend Features
- Chat interface with input and send button
- Test endpoint button
- Real-time loading states
- Error display and handling
- Tailwind CSS-powered light theme using shadcn/ui components, Lucide icons, and Framer Motion animations
- Responsive design

### Configuration
- Environment variable management (.env)
- CORS configured for localhost:5173
- OpenAI API key integration
- Comprehensive error handling

## Post-Generation Instructions for User

After generating the template, provide these instructions:

```bash
# Backend Setup
cd project-name/backend
python -m venv venv
# Activate venv (Windows: venv\Scripts\activate, Mac/Linux: source venv/bin/activate)
pip install -r requirements.txt
# Create .env file and add OPENAI_API_KEY
python -m uvicorn main:app --reload

# Frontend Setup (in new terminal)
cd project-name/frontend
npm install
npm run dev
```

## Notes

- The template includes comprehensive README.md with full documentation
- All configuration files are pre-configured and ready to use
- Template supports both development and production deployments
- Includes .gitignore files to prevent committing sensitive data
- Ready for Git initialization and version control

您可以阅读 examples.md、references.md 和 templates 目录，了解 SKILL.md 如何利用这些资源构建全栈应用程序模板。

3、使用 Claude 技能生成全栈应用程序

我测试了创建的技能，只需一个提示即可生成全栈应用程序。顾名思义，Claude 技能只能由 Claude 模型使用。要使用技能，它们需要位于项目级别或系统级别的 .claude 目录中。然后，我们可以指示 Claude 模型使用此技能来构建全栈应用程序。

我在 Claude Code 中给出了以下提示：

Use the fullstack-template-generator skill to generate a full stake project template.

该技能会要求您输入项目名称和目标目录，然后生成全栈应用程序模板。以下是生成的应用程序模板的目录结构。

fullstack-app/
├── README.md
├── backend/
│   ├── .env.example
│   ├── .gitignore
│   ├── main.py
│   ├── requirements.txt
│   └── tests/
└── frontend/
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── vite.config.js
    ├── eslint.config.js
    ├── tailwind.config.js
    ├── postcss.config.js
    ├── public/
    └── src/
        ├── App.jsx
        ├── main.jsx
        ├── index.css
        ├── lib/utils.js
        └── components/ui/
            ├── button.jsx
            ├── card.jsx
            ├── input.jsx
            └── textarea.jsx

以下是设置。说明：

# Backend Setup
cd fullstack-app/backend
python -m venv venv
venv\Scripts\activate          # Windows
pip install -r requirements.txt
copy .env.example .env

# Edit .env and add your OPENAI_API_KEY
python -m uvicorn main:app --reload

# Frontend Setup (new terminal)
cd fullstack-app/frontend
npm install
npm run dev

# Access Points
Frontend: http://localhost:5173
Backend API: http://localhost:8000
Swagger Docs: http://localhost:8000/docs

该模板包含一个集成了 OpenAI 的聊天界面、测试端点连接、使用 shadcn/ui 组件的 Tailwind CSS 样式以及 Framer Motion 动画。

生成的全栈应用程序模板现在可以根据需要添加功能，以生成特定的应用程序。

本示例中使用的后端和前端设置可以更改为任何其他组合。技能可以进一步修改并与代理集成，以创建特定的应用程序。

原文链接：How I Created a Claude “Skill” that Creates Full-Stack AI Applications

汇智网翻译整理，转载请标明出处