摘要 (TL;DR)
在本文中，你将学习如何教 Claude 通过单个提示词生成一个完整的全栈 AI 应用程序。我将带你走完全流程，将一个多步骤的开发工作流转化为一个可复用的 Claude Skill——它可以自动创建一个 FastAPI 后端、现代化的 React + Vite 前端、Tailwind + shadcn UI 组件，并内置 OpenAI 集成。
随着生成式 AI 领域的快速发展，通过向 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——无需用户手动编写任何文件。当你调用该 Skill 时，Claude 会动态加载 Skill 包中定义的指令和脚本，按照它们生成代码，并生成一个可运行的原型。因为 Skills 是可复用的指令和资源模块，同一个 Skill 可以再次被调用，以相同的结构和配置搭建新项目。
完整代码可在 GitHub 上获取。
该 Skill 构建全栈应用程序模板的工作流如下图所示。
让我们深入探讨 Claude Skill 的开发。
Skill 开发前的准备
在转向 Claude 进行自动化之前，我首先使用 GPT-5.1（通过 ChatGPT）来规划并创建一套分步提示词，以构建后端 + 前端应用程序模板。我从一个简单的指令开始：
我想创建一个带有 Python 后端和 React 前端（可能使用 Vite）的空项目（模板）。Python 后端将包含测试代码和 OpenAI 的 API 配置。前端可以是一个测试页面。
目的是创建一个完整的模板，可用于开发进一步的具体应用。但是，我们希望使用像 Claude Code 这样的编程助手来完成这项工作。
该怎么做？
ChatGPT (GPT-5.1) 回复了以下一系列提示词：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
mkdir fullstack-template cd fullstack-template ### "在 /fullstack-template 中为 Python FastAPI 后端和 React Vite 前端创建文件夹结构。仅生成文件夹布局和空文件。" ### # 初始化 Python 后端 cd backend python -m venv .venv # Linux / macOS source .venv/bin/activate # 或者在 Windows 上 # .\.venv\Scripts\activate pip install fastapi uvicorn python-dotenv openai pip freeze > requirements.txt ### # 让 Codex 生成样板后端代码 "生成一个 FastAPI 应用，包含一个 /test 端点和一个调用 OpenAI ChatCompletions API 的 /chat 端点。从 .env 加载 API 密钥。包含针对 localhost:5173 的 CORS 设置。" ### # 运行后端： uvicorn app:app --reload # 初始化 React + Vite 前端 cd ../frontend npm create vite@latest # 选择：React + JavaScript npm install npm install axios ### # 让 Codex 生成前端测试页面 "创建一个简单的 React UI，带有一个输入框、一个发送按钮，以及一个显示来自后端 (localhost:8000) 的 /test 和 /chat 结果的显示区域。使用 axios。" ### # 启动前端 (终端 2) npm run dev # 启动后端 (终端 1) cd ../backend uvicorn app:app --reload |
我在 VS Code 中使用 Claude Code (Claude-sonnet-4.5) 逐步按照这些步骤/提示词操作。我成功地将后端和前端连接成了一个全栈应用程序模板，尽管它的 HTML+CSS UI 非常基础，我并不喜欢。我又让 GPT-5.1 给我一个改进 UI 的提示词。它建议使用 Tailwind CSS + shadcn/ui 来改进 React 的 UI。这是它建议给编程助手的提示词：
“使用 Tailwind CSS + shadcn/ui 将现有的 React 前端 UI 重构为一个现代、专业的界面。
要求：
• 添加一个带有应用标题的简洁头部。
• 将转录卡片居中，并设置最大宽度。
• 将文件上传区域替换为用 Tailwind 设置样式的拖放区域。
• 使用 shadcn/ui 的 Card, Button, Input, 和 Textarea 组件。
• 添加 Lucide 图标 (Upload, FileAudio, Loader)。
• 使 UI 响应式（桌面、平板、移动端）。
• 使用 Framer Motion 添加流畅的动画。
保持所有转录逻辑不变。仅改进样式和组件结构。”
我最初指示 Claude Code 将现有的 React 前端 UI 重构为使用 Tailwind CSS 和 shadcn/ui 的现代专业界面。然而，尽管尝试了多次，Claude Code 未能成功完成任务。随后我尝试了 OpenAI 的 Codex（使用 gpt-5.1-codex），它完美地完成了工作，将界面转变为一个精致、视觉上吸引人的 UI。
上述描述的步骤和提示词仅代表成功的迭代。有几次尝试失败了，需要重新提示或调整。这凸显了对可重复流程的需求，以便每次都能重现相同的输出。因此，我决定创建一个封装完整工作流并能产生可复用结果的 Claude Skill。
构建用于全栈开发的 Claude Skill
Skills 是包含指令、脚本和资源的文件夹，Claude 会动态加载它们以提高在特定任务上的表现。Skills 教会 Claude 如何以可重复的方式完成特定任务，无论是创建符合公司品牌指南的文档，使用组织的特定工作流分析数据，还是自动化个人任务。查看我之前的文章以了解更多关于 Claude Skills 的信息。
我遵循的步骤和在通过 AI 编程助手开发全栈应用程序模板中获得的经验可以嵌入到 Claude 的 Skill 中，这样每当我们询问 Claude（或使用 Claude 模型的编程助手）时，它都会使用相同的经验和步骤来重现相同的结果。
可以创建 Claude Skills 来自动化多个工作流。将 Skills 与 AI 智能体集成，可以进一步为智能体配备额外的能力、工具、知识库、代码库和资源，以完全自动化工作流。
由于 GPT-5.1-codex 在重构 React 前端 UI 方面表现异常出色，我决定在 VS Code 的 OpenAI Codex 扩展内使用 GPT-5.1-codex 来构建一个专用的“全栈开发” Skill。为了准备它，我首先向 Codex 提供了解释什么是 Claude Skills 及其结构的参考链接。之后，我提供了完整的提示词历史记录以及我在创建全栈应用程序模板时遵循的每一步。这给了 Codex 足够的上下文来生成一个包含详细指令、工作流逻辑、代码模板和所有支持资产（包括示例、参考、模板和文档）的综合 Skill 包。基于提供的信息，Codex 在 .claude/skills/fullstack-template-generator 下组装了一个干净、模块化的目录结构。许多前端代码文件直接从之前生成的应用程序模板中复制过来。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.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，它编排了整个工作流。以下是它的内容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
--- name: fullstack-template-generator description: 生成一个完整的全栈应用程序模板，包含 Python FastAPI 后端和 React Vite 前端。包含 OpenAI ChatGPT 集成、CORS 配置、全面的错误处理以及现代化的 Tailwind CSS + shadcn/ui React UI。当用户想要快速启动一个新的全栈 Web 应用程序项目，且 API 后端和 Web 前端组件均已就绪时，请使用此 Skill。 --- # 全栈模板生成器 (Fullstack Template Generator) ## 概述 此 Skill 自动化了一个生产级全栈应用程序模板的创建，其特点包括： ### 后端 (Python + FastAPI) - 支持异步的 FastAPI 框架 - OpenAI ChatGPT API 集成 - 配置了用于前端通信的 CORS 中间件 - 全面的错误处理和验证 - 基于环境的配置 - 自动生成的 API 文档 (Swagger UI) - 用于请求验证的 Pydantic 模型 ### 前端 (React + Vite) - 现代 React 19 和 Vite 7 以实现快速开发 - 配置了 PostCSS + autoprefixer 的 Tailwind CSS 3 - shadcn/ui 基础组件 (Button, Card, Input, Textarea)，由 class-variance-authority, clsx, 和 tailwind-merge 驱动 - Lucide 图标和 Framer Motion 用于精致的微交互 - 用于 API 通信的 Axios - 完全使用 Tailwind 工具类构建的干净、响应式聊天 UI - 错误处理和加载状态 - 热模块替换 (HMR) ## 此 Skill 创建的内容 调用时，此 Skill 会生成如下完整的项目结构： ``` 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/ ``` ## 何时使用此 Skill 当用户满足以下条件时调用此 Skill： - 想要创建一个新的全栈 Web 应用程序 - 需要 REST API 后端和 React 前端 - 请求 Python + React 项目设置 - 要求 FastAPI + Vite 模板 - 想要在其应用程序中集成 OpenAI - 需要全栈项目的快速启动 ## 如何生成模板 1. **询问用户项目名称**和目标目录位置。 2. **创建目录结构**，如上所示。 3. **从 `templates/` 目录复制模板文件**： - 从 `templates/backend/` 复制后端文件 - 从 `templates/frontend/` 复制前端文件 - 从 `templates/README.md.template` 复制根目录 README 4. **对于 `.template` 文件**：复制时移除 `.template` 后缀。 5. **确保包含 Tailwind/shadcn 资源**： - 复制 `tailwind.config.js`, `postcss.config.js`, 和 `src/index.css` - 复制 `src/lib/utils.js` 和 `src/components/ui` 目录，以便 shadcn 基础组件可直接使用 6. **按需定制**：如果需要，更新 package.json 中的项目名称。 7. **向用户提供设置说明**： - 后端设置（创建 .env，安装依赖） - 前端设置（安装依赖） - 如何运行两个服务器 ## 包含的关键特性 ### 后端 API 端点 - `GET /` - 健康检查端点 - `GET /test` - 测试连接性 - `POST /chat` - OpenAI ChatGPT 集成 - 接收：`{"message": "...", "model": "gpt-4-turbo-preview"}` - 返回：带有 Token 使用情况的 AI 响应 ### 前端特性 - 带有输入框和发送按钮的聊天界面 - 测试端点按钮 - 实时加载状态 - 错误显示和处理 - 使用 shadcn/ui 组件、Lucide 图标和 Framer Motion 动画的 Tailwind CSS 浅色主题 - 响应式设计 ### 配置 - 环境变量管理 (.env) - 针对 localhost:5173 配置的 CORS - OpenAI API 密钥集成 - 全面的错误处理 ## 生成后的用户说明 生成模板后，提供以下说明： ```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 ``` ## 注意事项 - 模板包含全面的 README.md 和完整文档 - 所有配置文件均已预先配置并可直接使用 - 模板支持开发和生产部署 - 包含 .gitignore 文件以防止提交敏感数据 - 准备好进行 Git 初始化和版本控制 |
你可以阅读 examples.md, references.md 和 templates 目录，了解 SKILL.md 如何利用这些资产来构建全栈应用程序模板。
使用 Claude Skill 生成全栈应用程序
我测试了创建的 Skill，仅通过一个提示词就能生成全栈应用程序。Claude Skills 顾名思义，只能由 Claude 模型使用。为了使用 Skills，它们需要驻留在项目级别或系统级别的 .claude 目录中。然后我们可以指示 Claude 模型使用此 Skill 来构建全栈应用程序。
我在 Claude Code 中给出了以下提示词：
使用 fullstack-template-generator skill 生成一个全栈项目模板。
该 Skill 会询问你的项目名称和目标目录，并将生成全栈应用程序模板。以下是生成的应用程序模板的目录结构。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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 |
以下是设置说明：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 后端设置 cd fullstack-app/backend python -m venv venv venv\Scripts\activate # Windows pip install -r requirements.txt copy .env.example .env # 编辑 .env 并添加你的 OPENAI_API_KEY python -m uvicorn main:app --reload # 前端设置 (新终端) cd fullstack-app/frontend npm install npm run dev # 访问点 Frontend: http://localhost:5173 Backend API: http://localhost:8000 Swagger Docs: http://localhost:8000/docs |
该模板包含一个具有 OpenAI 集成的聊天界面、测试端点连接性、带有 shadcn/ui 组件的 Tailwind CSS 样式以及 Framer Motion 动画。
全栈应用程序的前端
生成的全栈应用程序模板现在可以根据需要添加功能，以生成特定的应用程序。
此示例中使用的后端和前端设置可以更改为任何其他组合。该 Skill 可以进一步修改并与智能体集成以创建特定的应用程序。
完整代码可在 GitHub 上获取。
本文整理翻译自How I Created a Claude “Skill” that Creates Full-Stack AI Applications，仅供学习交流使用
