用途:为 claude.ai 构建功能较强的多组件 HTML 工件(artifacts),采用现代前端技术栈。
主要能力:提供初始化与打包脚本。技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui;初始化后自带 Tailwind 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40 多个 shadcn/ui 组件、Radix UI 依赖、Parcel 配置以及 Node 18+ 兼容处理。
使用方式:先用 bash scripts/init-artifact.sh <project-name> 初始化项目并进入目录,再编辑生成的代码开发工件;随后运行 bash scripts/bundle-artifact.sh 打包。打包会安装 parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline 等依赖,生成 .parcelrc 配置,经 Parcel 构建后将所有 JS、CSS 与依赖内联为单个 bundle.html,可直接在 Claude 对话中作为工件分享。要求项目根目录存在 index.html。测试为可选项,可用 Playwright、Puppeteer 等工具,一般建议先展示工件、有需要时再测试。
设计注意:为避免所谓“AI slop”,避免过度使用居中布局、紫色渐变、统一圆角与 Inter 字体。
限制:官方文本未提供收费、价格、平台支持范围等信息;未说明具体适用场景之外的其他功能。shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components。