用途:帮助创建复杂、多组件的 claude.ai HTML 工件(artifact),使用现代前端技术栈。
主要能力:提供初始化与打包脚本。技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。初始化后项目包含 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40+ 预装 shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置(.parcelrc),并兼容 Node 18+(自动检测并固定 Vite 版本)。
使用方式:
- 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
- 编辑生成的文件开发工件。
- 打包为单个 HTML:bash scripts/bundle-artifact.sh,生成 bundle.html,内联全部 JavaScript、CSS 与依赖,可直接在 Claude 对话中作为工件分享。要求项目根目录有 index.html。脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline)、创建支持路径别名的 .parcelrc、用 Parcel 构建(无 source map)、再用 html-inline 内联资源。
- 在对话中分享 bundle.html。
- 可选测试:仅在需要或要求时,用其他 Skill 或 Playwright、Puppeteer 等工具测试;一般避免提前测试以免增加延迟。
设计风格:为避免“AI slop”,避免过度居中布局、紫色渐变、统一圆角与 Inter 字体。
限制:资料未提供收费、价格、平台支持范围等更多信息;测试步骤为可选,未提供具体测试命令。