web-artifacts-builder

其他已审计 @anthropics

信任分: 94/100
兼容 Agent: 1
许可证: Complete terms in LICENSE.txt

速查档案只列事实：领域、Agent、信任分、作者、原文章节。装与不装请看下方作者解读。

领域: 通用
兼容 Agent: Claude Code
信任分: 94 / 100 · 已通过审计
作者 / 版本 / 许可: @anthropics · Complete terms in LICENSE.txt
安装命令数: 1 条

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

解读由编辑根据原文凝练而成，命令、链接、术语均与作者原文一致；想看完整论述请切到右侧

web-artifacts-builder 是给 claude.ai artifact 造单文件 HTML React app 的脚手架：React 18 + TypeScript + Vite + Parcel 打包 + Tailwind CSS + shadcn/ui，最终通过 bundle-artifact.sh 把所有 JS / CSS / 依赖内联到一个 bundle.html 里，可以直接当 artifact 分享。

设计思路

作者的目标：让你「写 React 代码 + 一键导出单 HTML」，省去 Claude artifact 单文件、不能引外部 CDN 的纠结。脚手架默认装好 40+ shadcn/ui 组件、Radix UI 全套依赖、@/ path alias、Vite + Parcel + html-inline 全链路，Node 18+ 自动检测并 pin Vite 版本。

设计与样式守则（重要）

作者特别点出反「AI slop」：少用过度居中布局、紫色渐变、统一圆角、Inter 字体——这些是一眼能认出 AI 模板的视觉特征，要刻意避开。

工作流

Step 1 Initialize：bash scripts/init-artifact.sh <project-name> 建仓 → cd <project-name>；自动装好 React + TS（via Vite）/ Tailwind 3.4.1 + shadcn/ui theme / @/ alias / 40+ shadcn 组件 / 全套 Radix UI / Parcel + .parcelrc / Node 18+ pin。Step 2 Develop：编辑生成的代码，对照 "Common Development Tasks"。Step 3 Bundle：bash scripts/bundle-artifact.sh 跑出 bundle.html——单文件 self-contained。要求项目根有 index.html。脚本内做的事：装 parcel / @parcel/config-default / parcel-resolver-tspaths / html-inline；写 .parcelrc 含 alias；Parcel 构建无 source map；用 html-inline 把 asset 全内联。Step 4 Share 把 bundle.html 当 artifact 给用户。Step 5 Test/Visualize（可选）：用 Playwright / Puppeteer / 其他 skill 跑一下。

适合的场景

在 claude.ai 里做交互式 artifact，想用 React + shadcn/ui 而不是裸 HTML
需要把 demo 一文件分享，避免外部 CDN
已有 Tailwind + shadcn/ui 习惯的开发者

何时不要用

静态展示足够：直接写 HTML / CSS 比走整个脚手架更快
需要后端 / 持久化：单 HTML artifact 跑不了 server

配套

theme-factory（统一视觉主题）、prototype（更通用的 prototype 脚手架）、webapp-testing（Playwright 跑通 artifact 验证）、pdf / make-pdf（同样面向「成品 artifact」的另一类）。

Web Artifacts Builder

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

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(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 <project-name>
cd <project-name>

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

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