Claude前端构件生成器

技能简介

artifacts-builder 是一套用于创建复杂多组件 Claude.ai HTML 构件的工具集，基于现代前端技术栈（React 18、TypeScript、Vite、Tailwind CSS、shadcn/ui），支持状态管理、路由及丰富 UI 组件，适用于需要交互逻辑的复杂场景。

能做什么

• 初始化预配置 React + TypeScript 项目环境
• 提供 40+ shadcn/ui 组件及 Radix UI 依赖
• 将多文件项目打包为单个自包含 HTML 文件
• 支持路径别名（@/）与 Node 18+ 兼容

使用说明

1. 安装准备：确保系统已安装 Node.js 18+ 和 Bash 环境
2. 初始化项目：
   bash scripts/init-artifact.sh <project-name>
   然后进入目录 cd <project-name>
3. 开发构件：编辑生成的源代码文件实现业务逻辑
4. 打包输出：
   bash scripts/bundle-artifact.sh
   生成 bundle.html 单文件
5. 交付使用：将 bundle.html 在 Claude 对话中作为 artifact 展示给用户

输入与输出

见下方输入与输出表格。

风险提示

• 避免过度使用居中布局、紫色渐变、统一圆角和 Inter 字体，防止”AI 痕迹”视觉风格
• 测试步骤为可选项，前置测试会增加响应延迟
• 项目根目录必须存在 index.html 才能正常打包
• 首次打包会自动安装额外依赖，需保证网络畅通

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/seanphan/artifacts-builder/SKILL.md
来源类型：GitHub 开源仓库