83.3K+下载
跳转到使用指南
web-artifacts-builder作者 Anthropic

Web Artifacts Builder Skill.

Claude Code 和 Codex 的 UI 设计 skill：使用 React、Tailwind 和 shadcn/ui 构建多组件交互式 HTML 产物。

  • Web & UI
  • HTML
下载 OpenDesign查看使用指南
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: 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. --- ## Design & Style Guidelines ## Quick Start
从 2026-09-14 上游文件中读取的前言和章节标题 · 完整长度 3,073 字符

01 功能说明

web-artifacts-builder Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一个用于为 claude.ai 构建复杂多组件 React 产物的 skill，使用 React 18、TypeScript、Vite、Parcel、Tailwind CSS 和 shadcn/ui 的现代技术栈。该 skill 提供初始化脚本，用于搭建预装 40 多个 shadcn/ui 组件的完整配置项目，以及用于将全部内容编译成单个自包含 HTML 文件的打包脚本。

它专为需要状态管理、路由或 shadcn/ui 组件的产物设计，而非简单的单文件 HTML 或 JSX 产物。工作流分为五步：初始化前端仓库、通过编辑生成的代码开发产物、打包成单个 HTML 文件、向用户展示，并可选择进行测试。

HTML
查看示例提示词 ↗

工作方式

  1. 01
    初始化一个已配置的 React 项目

    使用项目名称运行 init-artifact.sh 脚本，创建一个已完整配置的项目，包含 React、TypeScript、Tailwind CSS、路径别名、40 多个 shadcn/ui 组件以及 Parcel 打包配置。

  2. 02
    通过编辑生成的文件进行开发

    按照 skill 中提供的常见开发任务指南，通过编辑初始化时生成的文件来构建产物。

  3. 03
    打包成自包含 HTML

    运行 bundle-artifact.sh，将 React 应用编译成 bundle.html——一个使用 Parcel 和 html-inline 将所有 JavaScript、CSS 和依赖内联的单个文件。

  4. 04
    向用户展示产物

    在对话中分享打包好的 HTML 文件，以便用户将其作为 claude.ai 产物查看。

02 找到适合场景

何时使用 web-artifacts-builder Skill

当任务是此类 UI 设计时，在 Claude Code 或 Codex 中使用 web-artifacts-builder skill。以下适用范围和限制取自该 skill 的文件。

适合场景

  • 使用 shadcn/ui 组件库的多组件界面

了解边界

  • 用于需要状态管理、路由或 shadcn/ui 组件的复杂产物——不适用于简单的单文件 HTML/JSX 产物。

需要提供的信息

  • 初始化用的项目名称运行 init-artifact.sh 脚本时，用于新建 React 项目目录的名称。

03 Skill 内部

web-artifacts-builder Skill 为 Claude Code 和 Codex 提供的规则

SKILL.md 为 Agent 设定的 5 条具体指令、默认值与限制——文件中真正改变结果的那一部分。

  1. 仅用于复杂产物

    该 skill 专用于需要状态管理、路由或 shadcn/ui 组件的复杂产物。不要将其用于简单的单文件 HTML 或 JSX 产物。

  2. 避免 AI 陈词滥调式设计模式

    不要使用过度居中的布局、紫色渐变、统一的圆角，或 Inter 字体，以避免所谓的 AI slop（AI 陈词滥调式设计）。

  3. 项目必须在根目录有 index.html

    打包脚本要求你的项目在根目录下有一个 index.html 文件。

  4. 仅在必要时测试

    测试完全是可选的，只有在必要或被要求时才执行。

  5. 遵循五步工作流

    产物构建过程遵循特定顺序：初始化前端仓库、通过编辑生成的代码进行开发、将所有代码打包成单个 HTML 文件、展示给用户，以及可选的测试。

04 投入使用

在 Claude Code 或 Codex 中安装 web-artifacts-builder

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 web-artifacts-builder 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

针对 skills/web-artifacts-builder/SKILL.md 的通用 skills CLI 形式；该仓库可能记录了自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 如有需要或出现问题，使用 Playwright 或 Puppeteer 等可用工具来测试或可视化产物
  • 确认设计避免了过度居中的布局、紫色渐变、统一的圆角以及 Inter 字体

在 OpenDesign 中web-artifacts-builder 已内置：Plugins → Skills，在顶部栏中选择它即可。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Anthropic
Repository
github.com/anthropics/skills 分支 main
Skill 文件
skills/web-artifacts-builder/SKILL.md 验证时记录的内容校验和；提交 34040c9
License
Apache-2.0 来自 skills/web-artifacts-builder/LICENSE.txt；SKILL.md 说明「完整条款见 LICENSE.txt」。
仓库星标数
176,183 2026-09-14 为整个 anthropics/skills 仓库拍摄的 GitHub 快照，该仓库在此目录中包含 7 个 skill。不是 web-artifacts-builder 的评分或使用数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 设计与风格指南避免 AI 陈词滥调模式的说明，如过度居中、紫色渐变、统一的圆角和 Inter 字体
  2. 快速开始从初始化到开发、打包、分享，以及可选测试的五步工作流
  3. 第一步：初始化项目运行 init-artifact.sh，创建配置好的 React 项目，包含 TypeScript、Tailwind、shadcn/ui 组件和 Parcel
  4. 第二步：开发你的产物按照常见开发任务指导编辑生成的文件来构建产物
  5. 第三步：打包为单个 HTML 文件运行 bundle-artifact.sh，创建内联了 JavaScript、CSS 及依赖项的独立 bundle.html
  6. 第四步：与用户分享产物在对话中分享打包后的 HTML 文件，以供作为产物查看
  7. 第五步：测试/可视化产物（可选）使用 Playwright 或 Puppeteer 等工具进行可选测试，避免前期测试以减少延迟
  8. 参考资料指向 shadcn/ui 组件文档的链接
Skill 自身的描述
「用于创建复杂、多组件 claude.ai HTML 产物的工具套件，使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。用于需要状态管理、路由或 shadcn/ui 组件的复杂产物——不适用于简单的单文件 HTML/JSX 产物。」

来自 SKILL.md 的 front-matter 描述。完整文件约 3,073 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 web-artifacts-builder Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

已经安装了哪些组件和库？

该初始化脚本会创建一个基于 React 18、通过 Vite 使用 TypeScript、Tailwind CSS 3.4.1 并配置 shadcn/ui 主题的项目，预装了 40 多个 shadcn/ui 组件、所有 Radix UI 依赖，并配置好用于打包的 Parcel。路径别名已配置好，可以使用 at-slash 前缀进行导入。

Web Artifacts Builder

在真实的 UI 设计任务上运行 web-artifacts-builder。

web-artifacts-builder skill 内置于 OpenDesign。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上面的提示词，并在结果前阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder