OpenSkillIndex← back to search
claude-code

Awesome-claude-skills-cn artifacts-builder

一套用于创建复杂的、多组件 claude.ai HTML artifacts 的工具集，使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts——不适用于简单的单文件 HTML/JSX artifacts。

install
source · Clone the upstream repo
git clone https://github.com/Athe1st3154/awesome-claude-skills-cn
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/Athe1st3154/awesome-claude-skills-cn "$T" && mkdir -p ~/.claude/skills && cp -r "$T/artifacts-builder" ~/.claude/skills/athe1st3154-awesome-claude-skills-cn-artifacts-builder && rm -rf "$T"
manifest: artifacts-builder/SKILL.md
source content

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 垃圾"风格，请避免使用过多的居中布局、紫色渐变、统一圆角和 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 版本）

第二步：开发你的 Artifact

构建 artifact 时，编辑生成的文件。请参阅下面的"常见开发任务"以获取指导。

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

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

bash scripts/bundle-artifact.sh

这将创建 

bundle.html
——一个自包含的 artifact，所有 JavaScript、CSS 和依赖都内联。这个文件可以直接在 Claude 对话中作为 artifact 分享。

要求：项目根目录必须有 

index.html
。

脚本功能：

  • 安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建带有路径别名支持的 
    .parcelrc
    配置
  • 使用 Parcel 构建（无 source maps）
  • 使用 html-inline 将所有资源内联到单个 HTML

第四步：与用户分享 Artifact

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

第五步：测试/可视化 Artifact（可选）

注意：这完全是可选的步骤。只有在必要或用户要求时才执行。

要测试/可视化 artifact，请使用可用工具（包括其他 Skills 或内置工具如 Playwright 或 Puppeteer）。通常情况下，避免一开始就测试 artifact，因为这会增加请求与最终 artifact 可查看之间的延迟。如果用户要求或出现问题，则在展示 artifact 之后再进行测试。

参考资料

构建强大的前端 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 垃圾"风格，请避免使用过多的居中布局、紫色渐变、统一圆角和 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 版本）

第二步：开发你的 Artifact

构建 artifact 时，编辑生成的文件。请参阅下面的"常见开发任务"以获取指导。

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

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

bash scripts/bundle-artifact.sh

这将创建 

bundle.html
——一个自包含的 artifact，所有 JavaScript、CSS 和依赖都内联。这个文件可以直接在 Claude 对话中作为 artifact 分享。

要求：项目根目录必须有 

index.html
。

脚本功能：

  • 安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建带有路径别名支持的 
    .parcelrc
    配置
  • 使用 Parcel 构建（无 source maps）
  • 使用 html-inline 将所有资源内联到单个 HTML

第四步：与用户分享 Artifact

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

第五步：测试/可视化 Artifact（可选）

注意：这完全是可选的步骤。只有在必要或用户要求时才执行。

要测试/可视化 artifact，请使用可用工具（包括其他 Skills 或内置工具如 Playwright 或 Puppeteer）。通常情况下，避免一开始就测试 artifact，因为这会增加请求与最终 artifact 可查看之间的延迟。如果用户要求或出现问题，则在展示 artifact 之后再进行测试。

参考资料