⚡

Claude.aiHTML艺术品构建器 web-artifacts-builder

这个技能是一个前端开发工具套件，专门用于使用现代技术如 React、Tailwind CSS 和 shadcn/ui 创建 Claude.ai HTML 艺术品。它适用于构建多组件、复杂艺术品，支持状态管理和路由，不适用于简单文件。关键词：前端开发、React、Tailwind CSS、shadcn/ui、HTML、艺术品构建、Claude.ai、工具套件。

前端开发 0 次安装 0 次浏览 更新于 3/7/2026

name: web-artifacts-builder description: 使用现代前端网络技术（React、Tailwind CSS、shadcn/ui）创建精美、多组件的 claude.ai HTML 艺术品的一套工具。适用于需要状态管理、路由或 shadcn/ui 组件的复杂艺术品 - 不适用于简单的单文件 HTML/JSX 艺术品。 license: 完整条款在 LICENSE.txt 中

Web Artifacts Builder

要构建强大的前端 claude.ai 艺术品，请遵循以下步骤：

  1. 使用 scripts/init-artifact.sh 初始化前端仓库
  2. 通过编辑生成的代码来开发您的艺术品
  3. 使用 scripts/bundle-artifact.sh 将所有代码捆绑到单个 HTML 文件中
  4. 向用户展示艺术品
  5. （可选）测试艺术品

技术栈: React 18 + TypeScript + Vite + Parcel (捆绑) + Tailwind CSS + shadcn/ui

设计与风格指南

非常重要：为了避免常被称为 “AI slop” 的现象，避免使用过多的居中布局、紫色渐变、统一圆角和 Inter 字体。

快速开始

第一步：初始化项目

运行初始化脚本来创建一个新的 React 项目：

bash scripts/init-artifact.sh <project-name>
cd <project-name>

这将创建一个完全配置的项目，包括：

  • ✅ React + TypeScript（通过 Vite）
  • ✅ Tailwind CSS 3.4.1 与 shadcn/ui 主题系统
  • ✅ 路径别名（@/）已配置
  • ✅ 40+ shadcn/ui 组件预安装
  • ✅ 所有 Radix UI 依赖项已包含
  • ✅ Parcel 配置用于捆绑（通过 .parcelrc）
  • ✅ Node 18+ 兼容性（自动检测并固定 Vite 版本）

第二步：开发您的艺术品

要构建艺术品，请编辑生成的文件。请参阅下面的常见开发任务以获取指导。

第三步：捆绑到单个 HTML 文件

要将 React 应用捆绑成单个 HTML 艺术品：

bash scripts/bundle-artifact.sh

这会创建 bundle.html - 一个自包含的艺术品，所有 JavaScript、CSS 和依赖项都已内联。此文件可以直接在 Claude 对话中作为艺术品分享。

要求：您的项目必须在根目录中有一个 index.html 文件。

脚本的功能：

  • 安装捆绑依赖项（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建带有路径别名支持的 .parcelrc 配置
  • 使用 Parcel 构建（无源映射）
  • 使用 html-inline 将所有资产内联到单个 HTML 文件中

第四步：与用户分享艺术品

最后，将捆绑后的 HTML 文件分享给用户，以便他们可以将其视为艺术品。

第五步：测试/可视化艺术品（可选）

注意：这是一个完全可选的步骤。仅在必要时或请求时才执行。

要测试/可视化艺术品，请使用可用的工具（包括其他技能或内置工具如 Playwright 或 Puppeteer）。一般来说，避免提前测试艺术品，因为它会增加请求和看到完成艺术品之间的延迟。如果请求或出现问题，在呈现艺术品后进行测试。

参考