全部技能 / 设计 / web-artifacts-builder
设计 · anthropics/skills

web-artifacts-builder

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.

风险提醒：橙色 · 评估后使用AI 侦查报告
作者 anthropicsGitHub anthropics/skills ↗Stars 175386许可 Apache-2.0（自带 LICENSE.txt；Copyright 2026 Anthropic, PBC.）commit 41bbe19d1a
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

机制是『脚手架+打包』两段式：init-artifact.sh 现场用 pnpm create vite 生成 React-TS 工程并安装 Tailwind/shadcn 依赖、解包预置的 43 个 shadcn/ui 组件；bundle-artifact.sh 用 Parcel 构建再用 html-inline 内联成单个 bundle.html。

skills/web-artifacts-builder/SKILL.md
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`
注：两脚本真实执行：init 脚本内 'pnpm create vite "$PROJECT_NAME" --template react-ts' → 'tar -xzf "$COMPONENTS_TARBALL" -C src/'；bundle 脚本 'pnpm exec parcel build index.html --dist-dir dist --no-source-maps' → 'pnpm exec html-inline dist/index.html > bundle.html'。

组件不是按需拉取而是随包交付：shadcn-components.tar.gz 内置 40+ 个 components/ui/*.tsx，离线解包即可用，避免逐组件 CLI 拉取。

skills/web-artifacts-builder/SKILL.md
✅ 40+ shadcn/ui components pre-installed
注：实测 tar 内 43 个 components/ui/*.tsx（accordion/alert/badge/…/sonner/drawer/resizable 等），与 '40+' 声称相符；依赖（@radix-ui/react-* 全套、sonner/cmdk/vaul/zod 等）由 init 脚本 pnpm install 安装。

产物哲学=单个自包含 HTML：bundle.html 内联全部 JS/CSS/依赖，可直接作为 claude.ai 工件分享或浏览器打开。

skills/web-artifacts-builder/SKILL.md
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.
注：路径别名靠 .parcelrc（parcel-resolver-tspaths）在打包期解析；'Builds with Parcel (no source maps)' + html-inline 负责内联。

范围纪律：只服务『多组件/有状态/路由/复杂交互』工件，简单单文件 HTML/JSX 明确不在范围内（触发前先判断复杂度）。

skills/web-artifacts-builder/SKILL.md
Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
注：这是 description 里的负向边界——防大炮打蚊子，也是本 skill 与普通『写 HTML』的主要分工点。

测试/可视化被显式降级为可选后置步骤：避免在『用户还没看到成品』前增加延迟，有问题再测。

skills/web-artifacts-builder/SKILL.md
Note: This is a completely optional step. Only perform if necessary or requested.
注：SKILL.md Step 5：'In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later…'——交互节奏设计。

样式防 'AI slop' 规则内置：显式禁止过度居中布局、紫色渐变、统一圆角与 Inter 字体。

skills/web-artifacts-builder/SKILL.md
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.
注：与 pptx skill 的防 AI 痕迹清单同族——Anthropic 系技能对『生成痕迹』的一致态度。

2核心能力

01一键初始化 React 18+TS+Vite+Tailwind 3.4.1+shadcn/ui 工程（含 path alias、tailwind 主题变量）
02随包 40+ shadcn/ui 组件（tarball 内置 43 个，含 Radix 全套依赖）
03Parcel 打包 + html-inline 单文件化（无 source map、别名解析）
04Node 版本自适应：≥18 检测并自动 pin Vite 版本（<20 用旧版）
05复杂前端工件（状态管理/路由/组件库）开发工作流 + 展示/后置测试节奏
06设计防 AI-slop 规范（禁居中泛滥/紫渐变/统一圆角/Inter）

3外部依赖

类型依赖
networknpm registry（registry.npmjs.org）
packagecreate-vite / vite / tailwindcss@3.4.1 / postcss / autoprefixer / tailwindcss-animate / class-variance-authority / clsx / tailwind-merge / lucide-react / next-themes / @radix-ui/react-*（20+）/ sonner / cmdk / vaul / embla-carousel-react / react-day-picker / react-resizable-panels / date-fns / react-hook-form / zod
packageparcel / @parcel/config-default / parcel-resolver-tspaths / html-inline（打包期，bundle 脚本安装）
clinode ≥18 / pnpm（宿主环境）

4风险提醒 风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用
  • 供应链执行面（主要） — 每次 init 都从 registry 拉取并执行多轮第三方包（含 create-vite latest 与 radix/parcel 生态）；registry 侧投毒或依赖漂移会在本机执行恶意 install 脚本——建议锁版本/离线镜像/隔离环境。
  • sed 未转义插值 — PROJECT_NAME 直接进 sed 替换串，特殊字符（&、/、\）可破坏脚本或产生意外替换（本地、agent/用户输入面）。
  • 网络为运行必需 — 无网络环境无法 init（create vite/install 全走 registry）；预置 tarball 只能缓解组件层。
  • pnpm 读用户 npm 配置 — 宿主机器 ~/.npmrc 中的 registry 令牌可能被 pnpm 使用（宿主侧事实，非脚本显式读取），在共享机器上需注意。
  • 产物内联一切 — bundle.html 会把全部依赖打进单个 HTML，体量大（脚本会报告体积）；对超大门槛场景需权衡。
风险提醒：橙色，评估后使用。每次运行都会经 pnpm 从 npm 官方 registry 拉取并执行大量第三方包（create-vite 最新版、tailwind、@radix-ui/react-*、parcel 等，版本除 tailwindcss@3.4.1 外多未 pin），属『依赖第三方远程包』的供应链执行面（六档典型橙）；且 pnpm 会读取用户 npm 配置（可能含 registry 令牌）。skill 自身不读凭证、无自有端点；脚本在本机写项目目录并执行构建。使用建议：在可审计依赖（lockfile/代理/离线镜像）或隔离环境中使用，审视每次拉取的包版本。

5第二遍独立确认

  • [ok] 40+ 组件声称 vs tarball — tar -tzf 实测 43 个 components/ui/*.tsx（含 sonner/drawer/resizable），声称成立。
  • [ok] init 脚本步骤与 SKILL 流程一致 — create vite（react-ts）→ 清理模板 → 装 tailwind/依赖 → 写 postcss/tailwind/vite/tsconfig → tar 解包，SKILL 描述可逐句对应。
  • [ok] bundle 单文件化 — parcel build --no-source-maps + html-inline 输出 bundle.html；.parcelrc tspaths 配置存在。
  • [ok] 网络外发对象 — 无自有端点/回调；全部为 pnpm→registry.npmjs.org（create-vite/tailwind/radix/parcel）。版本 pin：tailwindcss@3.4.1 固定，create-vite 与多数依赖取 latest——版本漂移与供应链留意点已在 reason 说明。
  • [ok] 凭证读取 — skill 脚本零凭证读取；pnpm 读 ~/.npmrc 属包管理器宿主行为（已在 credential_reads 注明，非脚本显式读取）。
  • [ok] PROJECT_NAME 注入点 — pnpm create vite "$PROJECT_NAME" 引号安全；sed 标题替换串未转义（& / \ 字符可破坏表达式）——本地低危输入面，已在 injection_surface 记录。
  • [ok] Node 版本门禁 — 脚本有 NODE_VERSION < 18 拒绝与 Vite 版本 pin 逻辑，与 SKILL 'Node 18+ compatibility' 声称一致。
  • [ok] 元数据 — 本地 HEAD==pin 41bbe19；Apache-2.0 LICENSE.txt。

6结论

  • 把 React 工具链工程化地搬进 agent 工作流：脚手架+预置组件+单文件打包三件套，产出可直接当 claude.ai 工件。
  • 组件随包离线分发（43 个 tar.gz），安装确定性高于逐组件 CLI 拉取。
  • 明确范围纪律：只做复杂交互工件，简单 HTML 不进此流程。
  • 测试节奏设计（先展示后测试）贴合 artifact 交互体验。
  • 内置反 AI-slop 视觉规则。
    • 适合：适合在 Claude/受管环境里构建『需要状态管理、路由、多组件交互』的前端工件（仪表盘、文档站、工具型页面），且环境允许联网装包；团队可用它统一 React+Tailwind+shadcn 基线以对抗散装手写风格。
    不适合：不适合离线/受限网络环境（装不了包）；不适合简单静态页面或单文件组件（过重，SKILL 自述不用）；不适合对依赖供应链零容忍、必须 lockfile 审计的敏感构建链（除非接代理/镜像）；不适合需要频繁细粒度定制脚手架的场景（脚本是固定模板）。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 web-artifacts-builder.tar.gz
    sha256: c56ef465edf880ee…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit 41bbe19d1a；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库anthropics / anthropics/skills
    原始 GitHubanthropics/skills ↗
    Stars175386
    最近推送2026-09-03
    本 skill commit41bbe19d1a
    许可Apache-2.0（自带 LICENSE.txt；Copyright 2026 Anthropic, PBC.）
    本站信息
    收录日期2026-09-06
    分类设计
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。