Menu
一套基于现代前端技术（React、Tailwind CSS、shadcn/ui）的工具，用来创建复杂的 claude.ai HTML 成品。适用于需要状态管理、路由或 shadcn/ui 组件的复杂作品，不适用于简单的单文件 HTML/JSX。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | artifacts-builder |
| description | 一套基于现代前端技术（React、Tailwind CSS、shadcn/ui）的工具，用来创建复杂的 claude.ai HTML 成品。适用于需要状态管理、路由或 shadcn/ui 组件的复杂作品，不适用于简单的单文件 HTML/JSX。 |
| license | 完整条款见 LICENSE.txt |
若要构建强大的前端 claude.ai 成品，请依次执行以下步骤：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将全部代码打包为单个 HTML 文件技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
务必要避免常见的“AI 感”俗套：例如过度的居中布局、泛滥的紫色渐变、统一的圆角以及 Inter 字体。
运行初始化脚本，创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
脚本会生成已配置好的项目，包含：
@/）.parcelrc）编辑生成的文件以实现你的成品。具体实践可参考下方 常见开发任务。
将 React 应用打包为单个 HTML 成品：
bash scripts/bundle-artifact.sh
脚本会生成 bundle.html —— 一个完全自包含的成品，所有 JavaScript、CSS 与依赖均已内联。该文件可直接在 Claude 对话中共享。
前置要求：项目根目录必须存在 index.html。
脚本会执行以下操作：
.parcelrc将打包后的 HTML 文件发送给用户，使其可作为 artifact 查看。
此步骤完全可选，仅在必要或用户要求时执行。
如需测试或预览，可借助可用工具（包括其他技能，或内置的 Playwright、Puppeteer 等）。通常不建议在展示成品前先行测试，因为这会延迟用户看到成果的时间。如用户提出请求或出现问题，再进行后续测试更妥当。
“面向 PowerPoint 演示文稿（.pptx）的创建、编辑与分析”。当 Claude 需要创建新演示文稿、修改现有内容、处理版式、添加批注或演讲者备注等与幻灯相关的任务时，请使用本技能。
使用带种子随机性的 p5.js，通过交互式参数探索生成原创算法艺术。适用于用户提出涉及代码生成艺术、算法艺术、流场或粒子系统的请求。始终创作原创算法艺术，避免直接复制现有艺术家的作品，以免引发版权问题。
将 Anthropic 官方品牌配色与字体应用到需要呈现 Anthropic 风格的任何产出物上。当涉及品牌配色、风格规范、视觉格式或公司设计标准时请使用本技能。
基于设计哲学在 .png 与 .pdf 文档中创作精美视觉作品。当用户请求海报、艺术作品、设计稿或其他静态作品时，请使用本技能。务必创作原创视觉设计，避免复制现有艺术家的作品，以免触犯版权。
「面向 .docx 文件的文档创建、编辑与分析」——支持修订记录、批注、格式保持与文本抽取。当 Claude 需要处理专业 Word 文档（.docx）以执行以下任一任务时请使用本技能：(1) 创建新文档；(2) 修改或编辑内容；(3) 处理修订记录；(4) 添加批注；或其他文档相关工作。
面向 PDF 的全能工具包，可用于抽取文本与表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单，或要批量处理、生成、分析 PDF 文件时请使用本技能。