热搜: 活动 交友 discuz
个人中心
今日签到
私信列表
消息中心
搜索全站

扫码关注官方微信

扫码下载APP
返回顶部
链载Ai › 核心板块 › 前沿技术 › 如何构建基于Claude Skill的全栈AI应用(附工程代码) ...
链载Ai 关注Ta
  • 发帖数41725
  • 粉丝0

此人很懒，什么也没有留下

阅读作者更多精彩帖子
热门问答 更多热门问答
技术文章 更多技术文章
返回列表 发新帖

如何构建基于Claude Skill的全栈AI应用(附工程代码)

[复制链接]
链载Ai 显示全部楼层 发表于 前天 17:13 |阅读模式 打印 上一主题 下一主题

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">在这篇文章中，你将学习如何教会 Claude 仅凭一个提示词就生成一个完整的全栈 AI 应用程序。

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">我将带你走完将多步骤开发工作流转化为一个可复用的 Claude Skill 的整个过程——能自动创建一个 FastAPI 后端、一个现代化的 React + Vite 前端、Tailwind + shadcn UI 组件，以及内置的 OpenAI 集成。

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.75px;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">关注公众号，拷贝并后台发送"全栈AI"，获取该工程完整代码

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.75px;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">在生成式 AI 领域的快速发展中，向 AI 编码助手（例如 Claude Code 或 OpenAI 的 Codex）提供几行提示词来快速搭建至少一个基础、可运行的雏形正逐渐成为可能。

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">虽然 AI 辅助编码在快速搭建原型和测试想法方面提供了巨大支持，但仅通过简单的提示词来构建一个全栈应用程序仍然是一项非常困难的任务。很多时候我们最多只能创建一个基于 Streamlit 或 Gradio 的简单用户界面，这仅适用于测试或概念验证，而不适用于生产环境。

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">使用编码助手将现有应用程序转换为全栈应用程序是相当具有挑战性的。它需要遵循一系列恰当、具体的提示词，来引导编码助手使用正确的工具和方法。因此，这需要技术专长来理解全栈开发的细微差别。

ingFang SC", Cambria, Cochin, Georgia, serif;font-size: medium;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">之所以存在这个差距，是因为当前的编码助手虽然变得越来越强大，但在管理跨多个文件的上下文、进行长期架构的推理、选择合适的框架，以及当代码库变大时保证代码质量方面仍然很困难。因此，诸如连接前端和后端、跨环境维护一致的配置、处理错误和安全问题，或者随着时间的推移演进代码库等任务，都可能变得棘手。

尽管如此，AI 辅助编码的价值仍然很大：即使它无法神奇地从一个提示词就构建出一个完美的、企业级的应用程序，它也能通过自动创建项目结构、搭建后端和前端、连接环境变量和 API 调用，以及提供一个可运行的骨架，来大幅减少初始的阻力。

一旦基础工作准备就绪，其他功能就可以逐步添加。这将繁重的初始设置负担转变为一项轻松得多的任务，使开发人员能够专注于核心应用逻辑、用户体验、数据模型或 AI 特定功能，而不是样板代码。

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

我在之前的文章中演示了如何创建一个 Claude Skill，在那篇文章中我创建了一个带有 Claude Skill 的简历筛选智能体。

如何创建一个透明的信息评估/提取、验证和生成的 AI 智能体

本文介绍的 Claude Skill 可以自主构建一个完整的全栈应用程序模板，将所有后端和前端连接在一起——创建文件夹结构、配置文件、后端 API 端点、环境设置，以及一个初始的 React + Vite 用户界面——而无需用户手动编写每个文件。

当你调用这个 Skill 时，Claude 会动态加载 Skill 包中定义的指令和脚本，遵循它们来生成代码，并生成一个可以立即运行的工作原型demo。因为 Skills 是可复用的指令和资源模块，所以同一个 Skill 可以被反复调用来搭建具有相同结构和配置的新项目。

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

详细Claude Skill 的开发过程如下：

前置Skill准备

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

我想创建一个包含 Python 后端和 React 前端（可能使用 Vite）的空项目（模板）。Python 后端将包含测试代码和 OpenAI 的 API 配置。前端可以是一个测试页面。
目的是创建一个完整的模板，可用于进一步开发具体的应用程序。但是，我们希望使用像 ClaudeCode这样的编码助手来完成这个任务。
该怎么做？

作为回应，ChatGPT（GPT-5.1）生成了以下一系列提示：

mkdirfullstack-template
cdfullstack-template

###
"在 /fullstack-template 目录下创建一个 Python FastAPI 后端和 React Vite 前端的文件夹结构。只生成文件夹布局和空文件。"
输出：

###

# 初始化 Python 后端
cdbackend
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 端点和一个 /chat 端点，后者调用 OpenAI 的 ChatCompletions API。从 .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

在 VC Code 中配合 Claude Code（Claude-sonnet-4.5）逐步执行了上述步骤/提示。我成功地将后端和前端连接成了一个全栈应用模板，尽管其 UI 是我不太喜欢的简单 HTML+CSS 界面。我再次请 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 使用 Tailwind CSS 和 shadcn/ui 将现有的 React 前端 UI 重构为现代化、专业的界面。然而，尽管多次尝试，Claude Code 始终无法成功完成任务。随后我尝试了 OpenAI 的 Codex（使用 gpt-5.1-codex），它完美地完成了工作，将界面转变成了一个精致、视觉上吸引人的 UI。

以上描述的步骤和提示仅代表成功的迭代过程。有几次尝试失败了，需要重新提示或调整。这突显了需要一个可重复的过程来确保每次都能产生相同输出。因此，我决定创建一个 Claude Skill 来封装整个工作流程，并生成可复现的结果。

构建面向全栈开发的Claude Skill

Skills是指令、脚本和资源的文件夹，Claude可以动态加载它们，以提升在特定任务上的表现。skill教会Claude如何以可重复的方式完成具体任务，无论是按照你公司的品牌指南创建文档、使用你组织的特定工作流分析数据，还是自动化个人任务。你可以查看我的前一篇文章来了解更多关于Claude Skill的信息。

我为了通过AI编码助手开发一个全栈应用模板所遵循的步骤和获得的经验，可以被嵌入到Claude的Skill中。这样，每次我们向Claude（或使用Claude模型的编码助手）提问时，它都能运用相同的经验和步骤来复现相同的结果。

Claude Skill可以被创建来自动化多个工作流。将Skills与AI智能体（AI Agents）集成，可以进一步为智能体配备额外的能力、工具、知识库、代码库和资源，从而实现工作流的完全自动化。

鉴于GPT-5.1-codex在重构React前端UI方面表现异常出色，我决定使用VS Code中的OpenAI Codex扩展，基于GPT-5.1-codex来构建一个专门的“全栈开发”Skills。为了准备它，我首先向Codex提供了解释Claude Skills是什么以及它们如何组织的参考链接。

之后，我提供了在创建全栈应用模板时使用的完整提示历史记录和每一个步骤。这为Codex提供了足够的上下文，使其能够生成一个全面的Skills包，其中包含详细的指令、工作流逻辑、代码模板以及所有支持性资源，包括示例、参考、模板和文档。基于提供的信息，Codex在.claude/skills/fullstack-template-generator目录下，以清晰、模块化的目录结构组装了这个skill。许多前端代码文件直接从先前生成的应用模板中复制过来。

#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.
---
  Output:

全栈模板生成器

概述

该skill可自动创建一个生产就绪的全栈应用模板，包含以下特性：

后端（Python + FastAPI）

  • 采用支持异步的 FastAPI 框架
  • 集成 OpenAI ChatGPT API
  • 配置 CORS 中间件以便与前端通信
  • 全面的错误处理和验证机制
  • 基于环境的配置管理
  • 自动生成的 API 文档（Swagger UI）
  • 使用 Pydantic 模型进行请求验证

前端（React + Vite）

  • 采用现代 React 19 和 Vite 7，实现快速开发
  • 使用 PostCSS + autoprefixer 配置 Tailwind CSS 3
  • 基于 class-variance-authority、clsx 和 tailwind-merge 的 shadcn/ui 基础组件（Button、Card、Input、Textarea）
  • 使用 Lucide 图标和 Framer Motion 实现精致的微交互效果
  • 通过 Axios 进行 API 通信
  • 完全基于 Tailwind 工具类构建的简洁、响应式聊天界面
  • 包含错误处理和加载状态
  • 支持热模块替换（HMR）

这个Skills会创建什么

当调用这个Skills时，它会生成一个完整的项目结构，包含：

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/

何时使用此Skills

当用户出现以下情况时，请调用此Skills：
- 想要创建一个新的全栈 Web 应用程序
- 需要一个 REST API 后端和一个 React 前端
- 请求一个 Python + React 的项目设置
- 需要一个 FastAPI + Vite 的模板
- 希望在其应用中集成 OpenAI 功能
- 需要一个全栈项目的快速启动方案

如何生成模板

  1. 向用户询问项目名称
    和目标目录位置。
  2. 创建目录结构
    ，如上所示。
  3. 从templates/目录复制模板文件
    ：
    - 后端文件从templates/backend/复制
    - 前端文件从templates/frontend/复制
    - 根目录 README 从templates/README.md.template复制
  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"}
  • 返回：AI 响应及令牌使用情况

前端功能特性

  • 带输入框和发送按钮的聊天界面
  • 测试端点按钮
  • 实时加载状态显示
  • 错误信息展示与处理
  • 基于 Tailwind CSS 的浅色主题，使用 shadcn/ui 组件、Lucide 图标和 Framer Motion 动画
  • 响应式设计

配置

  • 环境变量管理（.env）
  • 为 localhost:5173 配置 CORS
  • OpenAI API 密钥集成
  • 全面的错误处理

用户生成后操作指南

模板生成后，请提供以下操作说明：

  Output:

# 后端设置
cdproject-name/backend
python -m venv venv

# 激活虚拟环境（Windows: venv\Scripts\activate, Mac/Linux: source venv/bin/activate）
pip install -r requirements.txt

# 创建 .env 文件并添加 OPENAI_API_KEY
python -m uvicorn main:app --reload

# 前端设置（在新终端中）
cdproject-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 模型使用这个Skills来构建一个全栈应用。

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

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

该 Skill 会询问你项目名称和目标目录，然后生成全栈应用模板。以下是生成的应用模板的目录结构。

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

以下是设置说明：

  Output:

# 后端设置
cdfullstack-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

# 前端设置（新终端）
cdfullstack-app/frontend
npm install
npm run dev

# 访问点
前端：http://localhost:5173
后端 API：http://localhost:8000
Swagger 文档：http://localhost:8000/docs

这个模板包含一个集成了 OpenAI 的聊天界面、测试端点连通性、采用 Tailwind CSS 样式和 shadcn/ui 组件，以及 Framer Motion 动画效果。

现在，你可以使用生成的全栈应用模板来添加所需功能，从而创建具体的应用程序。

本例中使用的后端和前端设置可以替换为其他任意组合。该Skills可以进一步修改，并与智能体集成，以创建特定的应用程序。

回复

使用道具 举报

发布主题
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

链载AI是专业的生成式人工智能教程平台。提供Stable Diffusion、Midjourney AI绘画教程，Suno AI音乐生成指南，以及Runway、Pika等AI视频制作与动画生成实战案例。从提示词编写到参数调整，手把手助您从入门到精通。

  • 官方手机版

  • 微信公众号

  • 商务合作

  • Powered by Discuz! X3.5 | Copyright © 2025-2025. | 链载Ai
  • 桂ICP备2024021734号 | 营业执照 | |广西笔趣文化传媒有限公司|| QQ