mcpField
A
artifacts-builder

artifacts-builder

github.com/skillcreatorai开发16542 次安装45 周前更新
代码仓库

关于 artifacts-builder

Artifacts Builder 是用于为 claude.ai 创建前端 artifact 的 Skill，采用 React 和 TypeScript。它可初始化配置好的项目，并将资源打包为单个 HTML 文件，以便在 Claude 对话中分享。

主要功能

  1. 01初始化 React 和 TypeScript 项目
  2. 02配置 Tailwind CSS 与 shadcn/ui
  3. 03预装 UI 组件和 Radix UI
  4. 04将资源打包为单个 HTML 文件
  5. 05可选测试与可视化 artifact

适用场景

  1. 01搭建前端 artifact 项目
  2. 02为 Claude 对话制作 artifact
  3. 03将 React artifact 打包为可分享的 HTML 文件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/skillcreatorai/awesome-agent-skills --skill artifacts-builder

安装后在 Claude Code 中输入/artifacts-builder确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
scripts/
bundle-artifact.sh
init-artifact.sh

详细介绍

Artifacts Builder

按照以下步骤构建功能强大的前端 claude.ai artifacts：

  1. 使用 scripts/init-artifact.sh 初始化前端仓库
  2. 编辑生成的代码，开发你的 artifact
  3. 使用 scripts/bundle-artifact.sh 将所有代码打包到单个 HTML 文件中
  4. 向用户展示 artifact 5.（可选）测试 artifact

技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui

设计与样式指南

非常重要：为避免常说的“AI slop”，请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。

快速开始

第 1 步：初始化项目

运行初始化脚本，创建新的 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 版本）
第 2 步：开发你的 Artifact

编辑生成的文件以构建 artifact。请参阅下方的常见开发任务了解指南。

第 3 步：打包为单个 HTML 文件

将 React 应用打包为单个 HTML artifact：

bash scripts/bundle-artifact.sh

这会创建 bundle.html，这是一个自包含的 artifact，其中内联了所有 JavaScript、CSS 和依赖项。此文件可以直接作为 artifact 分享到 Claude 对话中。

要求：项目根目录中必须有一个 index.html。

脚本执行的操作：

  • 安装打包依赖项（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建支持路径别名的 .parcelrc 配置
  • 使用 Parcel 构建（不生成源映射）
  • 使用 html-inline 将所有资源内联到单个 HTML 文件中
第 4 步：与用户分享 Artifact

最后，在对话中与用户分享打包后的 HTML 文件，以便他们将其作为 artifact 查看。

第 5 步：测试/预览 Artifact（可选）

注意：此步骤完全可选。仅在必要或收到请求时执行。

若要测试/预览 artifact，请使用可用工具（包括其他 Skills 或 Playwright、Puppeteer 等内置工具）。通常，应避免提前测试 artifact，因为这会增加用户收到成品前的等待时间。如果用户提出请求或出现问题，可在展示 artifact 后再进行测试。

参考

评论

支持 Markdown