什么是 Artifacts Builder？

Artifacts Builder 是 Openclaw Skills 生态系统中一个强大的套件，旨在创建精细的、多组件的 Claude.ai HTML artifacts。与简单的单文件生成器不同，此工具支持使用 React 18、TypeScript、Vite 和 Tailwind CSS 来构建具有复杂状态管理和路由的高级界面。它通过包含预配置的 shadcn/ui 组件，专门针对专业级工具的创建，确保开发者能够产出高质量的 UI，避免基础 AI 生成中常见的审美缺陷。

通过利用此工具，您可以将一个完整的开发前端项目转换为单个、自包含的 HTML 文件。对于使用 Openclaw Skills 且需要在 Claude 界面中直接展示交互式数据可视化、仪表板或复杂应用原型的开发者来说，此功能至关重要。该构建器处理了依赖管理、资产内联和路径别名的所有繁重工作，提供了从初始化到最终呈现的无缝工作流。

下载入口:https://github.com/openclaw/skills/tree/main/skills/seanphan/artifacts-builder

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Artifacts Builder 应用场景

• 在 Claude 对话中构建具有交互式状态管理的功能丰富仪表板。
• 使用超过 40 个预装的 shadcn/ui 组件快速构建复杂用户界面的原型。
• 将多文件 React 和 TypeScript 项目转换为便携式的单文件 HTML artifacts。
• 开发需要复杂布局和现代 CSS 主题的专业级工具，同时避免常见的 AI 设计套路。

1. 使用专门的脚本初始化项目环境，设置 React、TypeScript 和 Vite 模板。
2. 通过编辑生成的源文件来开发应用逻辑和 UI，并利用集成的 shadcn/ui 库。
3. 运行使用 Parcel 的打包脚本，将代码编译并将所有 CSS 和 JavaScript 资产内联到最终文档中。
4. 生成单个 bundle.html 文件，封装整个应用程序，以便于分发和立即渲染。
5. 与用户共享打包后的 artifact，或将其集成到更大的 Openclaw Skills 自动化工作流中以实现自动可视化。

Artifacts Builder 配置指南

要开始使用此 Openclaw Skills 工具进行构建，请运行以下初始化脚本来设置您的项目结构：

bash scripts/init-artifact.sh 
cd 

开发完成后，使用以下命令将应用程序打包成单个 HTML artifact：

bash scripts/bundle-artifact.sh

注意：需要 Node 18+ 环境，并且根目录下需存在 index.html 文件。

Artifacts Builder 数据架构与分类体系

Artifacts Builder 将数据组织成标准的前端目录结构，以保持与现代 Openclaw Skills 工作流的兼容性：

name: artifacts-builder
description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
license: Complete terms in LICENSE.txt

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

1. Initialize the frontend repo using scripts/init-artifact.sh
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
4. Display artifact to user
5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh 
cd 

This creates a fully configured project with:

• ? React + TypeScript (via Vite)
• ? Tailwind CSS 3.4.1 with shadcn/ui theming system
• ? Path aliases (@/) configured
• ? 40+ shadcn/ui components pre-installed
• ? All Radix UI dependencies included
• ? Parcel configured for bundling (via .parcelrc)
• ? Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

• Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
• Creates .parcelrc config with path alias support
• Builds with Parcel (no source maps)
• Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

• shadcn/ui components: https://ui.shadcn.com/docs/components